/* Homepage-only phone corrections; retain the existing desktop layout.
   Milligram sets 1rem to 10px, and global.css forces paragraph sizes. */
@media (max-width: 620px) {
    main p {
        font-size: 1.6rem !important;
    }

    main .eyebrow,
    .section-code,
    .hero-card span,
    .program-source__features-heading,
    .program-source__feature strong,
    .program-source__feature span,
    .program-source__caption,
    .workflow-strip__step h3 {
        font-size: 1.4rem;
        overflow-wrap: anywhere;
    }

    main .btn,
    .program-source__link {
        font-size: 1.4rem;
        white-space: normal;
        line-height: 1.5;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .hero-copy {
        max-width: 100%;
    }

    main p.eyebrow {
        font-size: 1.4rem !important;
    }

    .program-source__slide {
        width: 100%;
        max-width: 410px;
    }

    /* Later desktop rules otherwise pull the dots over the phone slide. */
    .program-source__dots {
        gap: 0;
        margin-top: 16px;
    }

    .program-source__dot,
    .program-source__dot.is-active {
        position: relative;
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .program-source__dot:focus-visible {
        outline: 2px solid #efc65a;
        outline-offset: -4px;
    }

    .program-source__dot::before {
        position: absolute;
        top: 16px;
        left: 16px;
        width: 12px;
        height: 12px;
        border: 1px solid rgba(173, 209, 224, 0.58);
        border-radius: 50%;
        background: rgba(4, 16, 26, 0.48);
        content: "";
    }

    .program-source__dot.is-active::before {
        border-color: #efc65a;
        background: #efc65a;
    }

    .program-source__arrow {
        width: 44px;
        height: 44px;
    }

    .final-cta__badges li {
        min-width: 0;
        max-width: 100%;
        font-size: 1.3rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Hidden outside the phone enhancement; existing desktop artwork stays intact. */
.ecosystem-controls,
.connected-ecosystem__hint {
    display: none;
}

.ecosystem-dialog {
    box-sizing: border-box;
    width: min(48rem, calc(100% - 32px));
    max-width: calc(100% - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 32px clamp(20px, 6vw, 32px) 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(171, 199, 222, 0.22);
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 110% 12%, rgba(25, 133, 204, 0.32), transparent 48%),
        linear-gradient(155deg, #29394b 0%, #1b243a 48%, #111329 100%);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
    color: #f4f1e8;
    text-align: left;
    overflow-wrap: anywhere;
}

/* A decorative handle, not a drag control. */
.ecosystem-dialog::before {
    position: absolute;
    top: 12px;
    left: calc(50% - 24px);
    width: 48px;
    height: 4px;
    border-radius: 4px;
    background: rgba(229, 239, 223, 0.4);
    content: "";
}

.ecosystem-dialog::backdrop {
    background: rgba(3, 10, 16, 0.8);
}

.ecosystem-dialog {
    --eco-accent: #e7ba52;
    --eco-glow: rgba(231, 186, 82, 0.28);
    background:
        radial-gradient(ellipse at 110% 12%, var(--eco-glow), transparent 48%),
        linear-gradient(155deg, #29394b 0%, #1b243a 48%, #111329 100%);
}

.ecosystem-dialog[data-sector="government"] {
    --eco-accent: #e7ba52;
    --eco-glow: rgba(231, 186, 82, 0.28);
}

.ecosystem-dialog[data-sector="primes"] {
    --eco-accent: #24e1c4;
    --eco-glow: rgba(36, 225, 196, 0.28);
}

.ecosystem-dialog[data-sector="smes"] {
    --eco-accent: #3aa4ff;
    --eco-glow: rgba(58, 164, 255, 0.3);
}

.ecosystem-dialog__sector {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding-right: 40px;
    margin-bottom: 26px;
    color: var(--eco-accent);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.ecosystem-dialog__icon {
    position: relative;
    display: block;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 50%;
}

.ecosystem-dialog__icon img {
    position: absolute;
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.ecosystem-dialog h3 {
    margin: 0 0 14px;
    color: var(--eco-accent);
    font-size: clamp(2.8rem, 7.5vw, 3.6rem);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.14;
}

/* Override the site's important paragraph sizing (1rem = 10px). */
main .ecosystem-dialog p {
    margin: 0;
    color: #f4eddb;
    font-size: clamp(1.8rem, 4.8vw, 2.2rem) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.45;
}

.ecosystem-dialog ul {
    margin: 32px 0 0;
    padding-left: 22px;
    color: #e3e7ed;
    font-size: 1.6rem;
    line-height: 1.6;
    list-style: disc outside;
}

.ecosystem-dialog li {
    margin: 0;
    padding-left: 4px;
}

.ecosystem-dialog li + li {
    margin-top: 12px;
}
.ecosystem-dialog li::marker {
    color: var(--eco-accent);
}

.ecosystem-dialog__close,
.ecosystem-dialog__close:hover,
.ecosystem-dialog__close:focus {
    position: absolute;
    top: 32px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #f4f1e8;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
}

.ecosystem-dialog__close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.ecosystem-dialog__close:focus-visible,
.ecosystem-controls__button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Shared phone/tablet interaction; keep in sync with home-ecosystem.js. */
@media (max-width: 1100px),
       (min-width: 1101px) and (max-width: 1400px) and (hover: none) and (pointer: coarse) {
    .has-ecosystem-dialog .connected-ecosystem__intro {
        transform: none;
    }

    /* Only invite taps once the sector dialog controls are available. */
    main .has-ecosystem-dialog .connected-ecosystem__hint {
        position: relative;
        z-index: 1;
        display: block;
        margin: 0 0 10px;
        color: #f4f1e8;
        font-size: 1.3rem !important;
        font-weight: 800;
        letter-spacing: 0.1em;
        line-height: 1.5;
        text-align: center;
    }

    .has-ecosystem-dialog .connected-ecosystem__audience {
        display: none;
    }

    .has-ecosystem-dialog .connected-ecosystem__map {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        min-height: 0;
        margin-top: 24px;
        gap: 0;
    }

    /* The padding-free wrapper exactly follows the uncropped image bounds. */
    .has-ecosystem-dialog .connected-ecosystem__diagram {
        position: relative;
        top: auto;
        left: auto;
        width: min(100%, 620px);
        margin: 0 auto;
        transform: none;
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: auto;
        padding: 0;
        border: 0;
    }

    .has-ecosystem-dialog .connected-ecosystem__diagram img {
        display: block;
        width: 100%;
        height: auto;
        padding: 0;
        border: 0;
        margin: 0;
    }

    .has-ecosystem-dialog .ecosystem-controls {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .ecosystem-controls__button,
    .ecosystem-controls__button:hover,
    .ecosystem-controls__button:focus {
        position: absolute;
        display: block;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
        cursor: pointer;
        pointer-events: auto;
        touch-action: manipulation;
    }

    /* Original 1254 x 1254 artwork rim bounds (x, y, diameter):
       government (501, 46, 252), primes (69, 844, 270), SMEs (911, 841, 272).
       Percentages are image pixels / 1254 * 100; update if artwork changes. */
    .ecosystem-controls__button--government {
        left: 39.952153%;
        top: 3.668262%;
        width: 20.095694%;
        height: 20.095694%;
    }

    .ecosystem-controls__button--primes {
        left: 5.502392%;
        top: 67.304625%;
        width: 21.531100%;
        height: 21.531100%;
    }

    .ecosystem-controls__button--smes {
        left: 72.647528%;
        top: 67.065391%;
        width: 21.690590%;
        height: 21.690590%;
    }
}

/* Preserve the original phone spacing; the roomier map inset is tablet-only. */
@media (max-width: 620px) {
    .has-ecosystem-dialog .connected-ecosystem__map { margin-top: 0; }
    .has-ecosystem-dialog .connected-ecosystem__diagram { margin-top: -8px; }
}