/* =====================================================
   ARGUS SENTINEL — ENTERPRISE ANDROID PAGE
   Navbar, footer, .container, .eyebrow, .section-head and
   the contact band all come from general.css. Only rules
   unique to this page live here.
   ===================================================== */

.enterprise-page {
    /* .pim-page in general.css supplies --navy --blue --cyan --green --red
       --muted --border etc. Only the extras this page needs are declared. */
    --ink: #17236f;
    --hair: rgba(23, 35, 111, 0.12);
    --card: rgba(255, 255, 255, 0.72);
    --warm: #f1efe7;
    --deep: linear-gradient(150deg, #202b80, #17236f 74%);
}

/*===================SECTION SHELL=====================*/
.es-section {
    padding: 96px 0;
    background: #f7f8f4;
}

/*===================SHARED TYPE=====================*/
.enterprise-page .section-head {
    max-width: 780px;
    margin-bottom: 46px;
}

.enterprise-page .section-head.is-centred {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}

.enterprise-page .section-head.is-centred .eyebrow {
    margin-inline: auto;
}

.enterprise-page h2 {
    font-size: clamp(30px, 3.1vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.es-lead {
    max-width: 640px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

/*===================01 · ENTERPRISE ANDROID (DARK HERO)=====================*/
.es-hero {
    padding: 76px 0 92px;
    color: #ffffff;
    background: var(--deep);
}

/* general.css paints h1 navy, and it sits on dark here */
.enterprise-page .es-hero h1 {
    color: #ffffff;
}

.es-hero .es-lead {
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
}

.es-hero-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(380px, 0.86fr);
    align-items: center;
    gap: 72px;
}

/* .eyebrow is an inline span, so its own margin-bottom does nothing here —
   the gap under it has to come from the heading */
.es-hero h1 {
    margin-top: 22px;
    font-size: clamp(38px, 4.2vw, 55px);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

/* three feature rows under the lead */
.es-points {
    margin-top: 36px;
    display: grid;
    gap: 14px;
}

.es-points li {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* the icons are drawn for light backgrounds, so each one sits on its own
   pale tile rather than directly on the navy */
.es-point-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.92);
}

.es-point-icon img {
    width: 24px;
    height: 24px;
}

.enterprise-page .es-points b {
    display: block;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.35;
}

.es-points small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 11.5px;
    line-height: 1.6;
}

/*===================02 · THE CHALLENGE=====================*/
.es-challenge {
    background: var(--warm);
}

.es-challenge-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.es-challenge-grid article {
    padding: 24px 22px 26px;
    border: 1px solid var(--hair);
    border-radius: 14px;
    background: #ffffff;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.es-challenge-grid article:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(26, 38, 93, 0.08);
}

.es-challenge-grid small {
    display: block;
    margin-bottom: 14px;
    color: var(--cyan);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.enterprise-page .es-challenge-grid b {
    display: block;
    margin-bottom: 9px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.3;
}

.es-challenge-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

/*===================03 · SECURITY CONSOLE=====================*/
.es-console-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.es-console-grid article {
    padding: 28px 26px 30px;
    border: 1px solid var(--hair);
    border-radius: 16px;
    background: var(--card);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.es-console-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(16, 167, 196, 0.4);
    box-shadow: 0 16px 34px rgba(26, 38, 93, 0.08);
}

.es-card-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    border: 1px solid var(--hair);
    border-radius: 11px;
    background: #ffffff;
}

.es-card-icon img {
    width: 26px;
    height: 26px;
}

.enterprise-page .es-console-grid b {
    display: block;
    margin-bottom: 9px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.3;
}

.es-console-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.7;
}

/*===================04 · EXPLAINABILITY=====================*/
/* shares a background with the console section above, so the two full
   paddings would stack into one oversized, invisible gap */
.es-evidence {
    padding-top: 40px;
}

.es-evidence-grid {
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    align-items: center;
    gap: 64px;
}

.es-evidence-grid .es-lead {
    margin-top: 18px;
}

.es-checks {
    margin-top: 28px;
    display: grid;
    gap: 12px;
}

.es-checks li {
    position: relative;
    max-width: 560px;
    padding-left: 26px;
    color: var(--ink);
    font-size: 12.5px;
    line-height: 1.65;
}

.es-checks li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--green);
    font-weight: 800;
}

/*===================FLEET / INCIDENT SCAN LOG CARDS=====================*/
/* .scan-report itself lives in general.css. It is sized for the narrow slot in
   the Company diagram, so — like platform's .use-case-report — it steps up here
   where it gets a full grid column of its own. */
.es-scan-report {
    align-self: center;
    padding: 20px 22px 16px;
}
.es-scan-report .scan-report-head img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}
.es-scan-report .scan-report-head b {
    font-size: 16px;
}
.es-scan-report .scan-report-head small {
    font-size: 10.5px;
}
.es-scan-report .scan-report-table th {
    padding: 11px 6px 8px;
    font-size: 10px;
}
.es-scan-report .scan-report-table td {
    padding: 10px 6px;
    font-size: 10.5px;
}

/* the hero card sits on navy, so it needs a shadow with something to land on */
.es-hero .es-scan-report {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 28px 70px rgba(6, 12, 48, 0.34);
}

/*===================DYNAMIC LAYOUT=====================*/
@media (max-width: 1150px) {
    .es-hero-grid,
    .es-evidence-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .es-challenge-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .es-console-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    .es-section {
        padding: 66px 0;
    }

    .es-hero {
        padding: 46px 0 66px;
    }
}

@media (max-width: 620px) {
    .es-hero-grid,
    .es-evidence-grid {
        gap: 38px;
    }

    .es-hero h1 {
        font-size: 33px;
    }

    .es-challenge-grid,
    .es-console-grid {
        grid-template-columns: 1fr;
    }
}


/*===================HEADER GAP=====================*/
/* One consistent distance between the sticky header and the first line of the
   page, matching Home. Appended last so it settles the several earlier rules
   that were each setting this differently. */
.es-hero {
    padding-top: 48px;
}

@media (max-width: 820px) {
    .es-hero {
        padding-top: 26px;
    }
}

@media (max-width: 620px) {
    /* .container picks up margin-top: 1rem here, which covers most of the gap */
    .es-hero {
        padding-top: 4px;
    }
}