/* ================================================================
   enterprise.css — Enterprise Solutions & ERP page styles
   ================================================================ */


/* ----------------------------------------------------------------
   Design card crosshatch background (Custom App Dev)
   ---------------------------------------------------------------- */
.ent-design-card-bg {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background-image: url('/assets/enterprisePage/designBg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-clip: padding-box;   /* keeps bg from painting under a border edge */
    box-shadow: none !important;

}

.ent-design-card-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    /* no need for border-radius here anymore — overflow:hidden on the parent handles clipping */
}

.ent-design-card-bg > * {
    position: relative;
    z-index: 1;
}
.ind-hero-bg {
    position: absolute;
    top: 100px;
    /* right: 0px; */
    left: 630px;
    width: 1305px;
    height: 735px;
    max-width: none;
    opacity: 1;
    transform: rotate(0deg);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
/* ----------------------------------------------------------------
   Checkbox icon circle
   ---------------------------------------------------------------- */
.ent-check-circle {
    position: relative;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ent-check-circle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #9D9D9D;
    opacity: 0.15;
}


/* ----------------------------------------------------------------
   Security Cards Carousel
   ---------------------------------------------------------------- */
.sec-card {
    width: 528px;
    min-width: 528px;
    height: 344px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(25.82px);
    -webkit-backdrop-filter: blur(25.82px);
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
    cursor: default;
}
.sec-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.2px;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.099)  0%,
        rgba(255,255,255,0.044) 25%,
        rgba(255,255,255,0.000) 50%,
        rgba(255,255,255,0.039) 75%,
        rgba(255,255,255,0.088) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
}
.sec-num-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(8,8,8,0.55);
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sec-num-circle span {
    color: #FFFFFF;
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    text-align: center;
    display: block;
}
.sec-card-title {
    color: #FFFFFF;
    font-weight: 500;
    font-size: 34px;
    line-height: 120%;
    margin: 0 0 12px;
}
.sec-card-desc {
    color: rgba(255,255,255,0.78);
    font-weight: 300;
    font-size: 22px;
    line-height: 28px;
    margin: 0;
    max-width: 420px;
}


/* ----------------------------------------------------------------
   UX / UI Design Carousel
   ---------------------------------------------------------------- */
.ux-card {
    width: 501px;
    min-width: 501px;
    height: 601px;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    transition: box-shadow 0.5s ease;
}
.ux-card .ux-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.5s ease;
}
.ux-card.ux-inactive .ux-bg-img { opacity: 0; }
.ux-card.ux-active   .ux-bg-img { opacity: 1; }
.ux-card .ux-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.58);
    transition: opacity 0.5s ease;
}
.ux-card.ux-inactive .ux-overlay { opacity: 0; }
.ux-card.ux-active   .ux-overlay { opacity: 1; }
.ux-card.ux-inactive { background: #FFFFFF; }
.ux-card.ux-active   { background: #111111; }
.ux-card .ux-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 36px 32px;
    box-sizing: border-box;
}
.ux-title {
    font-weight: 500;
    font-size: 40px;
    line-height: 50px;
    text-transform: uppercase;
    margin: 0 0 14px 0;
    max-width: 376px;
    transition: color 0.5s ease;
}
.ux-card.ux-active   .ux-title { color: #FFFFFF; }
.ux-card.ux-inactive .ux-title { color: #242424; }
.ux-desc {
    font-weight: 300;
    font-size: 20.17px;
    line-height: 20px;
    margin: 0;
    max-width: 346px;
    transition: color 0.5s ease;
}
.ux-card.ux-active   .ux-desc { color: #FFFFFF; }
.ux-card.ux-inactive .ux-desc { color: #979797; }
.ux-num {
    font-weight: 500;
    font-size: 60px;
    line-height: 110%;
    margin: 0 0 10px 0;
    width: 73px;
    height: 77px;
    display: flex;
    align-items: center;
    transition: color 0.5s ease;
}
.ux-card.ux-active   .ux-num { color: #FFFFFF; }
.ux-card.ux-inactive .ux-num { color: #242424; }
.ux-underline {
    width: 67px;
    height: 3px;
    border-radius: 2px;
    transition: background 0.5s ease, opacity 0.5s ease;
}
.ux-card.ux-active   .ux-underline { background: #FFFFFF; opacity: 1; }
.ux-card.ux-inactive .ux-underline { background: #242424; opacity: 0.15; }


/* ================================================================
   DESKTOP LAYOUT DEFINITIONS
   ================================================================ */

/* Collaboration & Productivity Tools */
.ent-collab-section {
    position: relative;
    height: 620px;
    padding-top: 0;
}
.ent-collab-text {
    position: absolute;
    top: 140px;
    left: 140px;
    width: 722px;
}
.ent-collab-cards {
    position: absolute;
    top: 430px;
    right: 85px;
}

/* Business Intelligence & Analytics */
.ent-bi-section {
    position: relative;
    height: 900px;
    padding-top: 0;
    overflow: visible;
}

/* Key Benefits canvases */
.ent-arrow-canvas    { position: relative; height: 520px; }
.ent-biglines-canvas { position: relative; width: 100%; height: 560px; }
.ent-linepoints-canvas { position: relative; width: 100%; height: 480px; }
.ent-crossline-canvas  { position: relative; width: 100%; height: 580px; }
.ent-curve-canvas      { position: relative; width: 100%; overflow: visible; height: 775px; }
.ent-dotedline-canvas  { position: relative; width: 100%; overflow: visible; height: 250px; }


/* ================================================================
   BREAKPOINT ≤ 1280px
   ================================================================ */



/* ================================================================
   BREAKPOINT ≤ 1024px  (Tablet — main responsive reset)
   ================================================================ */
@media (max-width: 1535px) {

    /* ══════════════════════════════════════════════════════════
       KEY BENEFITS CANVASES
       HOW: benefit blocks use class="absolute" (Tailwind) +
            style="top:Npx; left:Npx;" (inline coords).
            > [style] selects any direct child with a style attr.
            :not(.ent-benefits-line) excludes the SVG line wrappers.
       ══════════════════════════════════════════════════════════ */
       /* Allow the left text column to shrink instead of forcing overflow */
    .ent-legacy-text {
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }
    /* Purple banner: stack at tablet width too, not just 768px and below */
    .ent-purple-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 24px !important;
    }
    .ent-purple-banner > div {
        max-width: 100% !important;
        width: 100% !important;
    }
.ind-hero-bg {
    display: none;
}
    /* Remove fixed canvas height so content flows naturally */
    .ent-arrow-canvas,
    .ent-biglines-canvas,
    .ent-linepoints-canvas,
    .ent-crossline-canvas,
    .ent-curve-canvas,
    .ent-dotedline-canvas {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Hide decorative SVG connector lines */
    .ent-benefits-line { display: none !important; }

    /* Convert absolutely-positioned benefit blocks to normal flow.
       These elements have style="top:...;left:...;" as inline attr. */
    .ent-curve-canvas      > [style]:not(.ent-benefits-line),
    .ent-dotedline-canvas  > [style]:not(.ent-benefits-line),
    .ent-arrow-canvas      > [style]:not(.ent-benefits-line),
    .ent-biglines-canvas   > [style]:not(.ent-benefits-line),
    .ent-linepoints-canvas > [style]:not(.ent-benefits-line),
    .ent-crossline-canvas  > [style]:not(.ent-benefits-line) {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        text-align: left !important;
        padding-bottom: 24px !important;
        margin-bottom: 0 !important;
        border-bottom: none !important;
        display: list-item !important;
        list-style-type: disc !important;
        list-style-position: outside !important;
        margin-left: 20px !important;
    }
    .ent-linepoints-canvas > [style]:not(.ent-benefits-line) h4 {
        line-height: 120% !important;
    }
    .ent-linepoints-canvas > [style]:not(.ent-benefits-line) > div {
        margin-top: 4px !important;
    }
    .ent-linepoints-canvas > [style]:not(.ent-benefits-line) > div:first-child {
        margin-top: 0 !important;
    }
    .ent-dotedline-canvas > [style]:not(.ent-benefits-line) {
        text-align: center !important;
        list-style-position: inside !important;
    }
    .ent-dotedline-canvas > [style]:not(.ent-benefits-line) {
        display: block !important;
        list-style: none !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        padding-left: 20px !important;
        margin-left: 0 !important;
        text-align: left !important;
    }
    .ent-dotedline-canvas > [style]:not(.ent-benefits-line)::before {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 14px !important;
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        background: #242424 !important;
    }
    .flex.justify-center.mb-\[80px\] {
        justify-content: flex-start !important;
    }
    .flex.justify-center.mb-\[80px\] h2 {
        text-align: left !important;
    }
    .ent-dotedline-canvas > [style]:not(.ent-benefits-line) h4,
    .ent-dotedline-canvas > [style]:not(.ent-benefits-line) p {
        text-align: left !important;
    }
    /* Last block — no bottom border */
    .ent-curve-canvas      > [style]:not(.ent-benefits-line):last-child,
    .ent-dotedline-canvas  > [style]:not(.ent-benefits-line):last-child,
    .ent-arrow-canvas      > [style]:not(.ent-benefits-line):last-child,
    .ent-biglines-canvas   > [style]:not(.ent-benefits-line):last-child,
    .ent-linepoints-canvas > [style]:not(.ent-benefits-line):last-child,
    .ent-crossline-canvas  > [style]:not(.ent-benefits-line):last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    /* Fix fixed-width inner containers inside each benefit block */
    .ent-curve-canvas      > [style]:not(.ent-benefits-line) > *,
    .ent-dotedline-canvas  > [style]:not(.ent-benefits-line) > *,
    .ent-arrow-canvas      > [style]:not(.ent-benefits-line) > *,
    .ent-biglines-canvas   > [style]:not(.ent-benefits-line) > *,
    .ent-linepoints-canvas > [style]:not(.ent-benefits-line) > *,
    .ent-crossline-canvas  > [style]:not(.ent-benefits-line) > * {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        white-space: normal !important;
    }
/* Reset oversized top padding on all Key Benefits sections — these
       lg:pt-[...] values were sized for the desktop absolute canvas layout
       and still fire at 1024px since Tailwind's lg: breakpoint starts there */
    section:has(.ent-curve-canvas),
    section:has(.ent-dotedline-canvas),
    section:has(.ent-arrow-canvas),
    section:has(.ent-biglines-canvas),
    section:has(.ent-linepoints-canvas),
    section:has(.ent-crossline-canvas) {
        padding-top: 10px !important;
    }
    .ent-linepoints-canvas {
        margin-top: 0 !important;
    }
    .ent-linepoints-canvas ~ *,
    section:has(.ent-linepoints-canvas) > div:first-child {
        margin-bottom: 20px !important;
    }
    /* ══════════════════════════════════════════════════════════
       BUSINESS INTELLIGENCE & ANALYTICS
       HOW: children use pure Tailwind classes (absolute top-[N]
            left-[N]) with NO inline style attr, so we use > *.
       ══════════════════════════════════════════════════════════ */
    .ent-bi-section {
        position: static !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 32px 24px !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        overflow: visible !important;
    }
    /* Every absolutely positioned child → document flow */
    .ent-bi-section > * {
        position: static !important;
        height: auto !important;
    }
    /* Section header — full width, own row */
    .ent-bi-section > *:nth-child(1) { width: 100% !important; }
    /* Inner fixed-width wrappers */
    .ent-bi-section > * > div {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    /* Images fill width, capped height */
    .ent-bi-section img {
        display: block !important;
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 14px !important;
        margin: 0 !important;
    }
    /* ══════════════════════════════════════════════════════════
       COLLABORATION & PRODUCTIVITY
       ══════════════════════════════════════════════════════════ */
    .ent-collab-section {
        position: static !important;
        height: auto !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .ent-collab-text {
        position: static !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .ent-collab-text > div {
        width: 100% !important;
        height: auto !important;
    }
    .ent-collab-cards {
        position: static !important;
        width: 100% !important;
        margin-top: 48px !important;
        padding: 0 !important;
    }
    .ent-collab-cards > div {
        flex-direction: column !important;
        gap: 32px !important;
    }
    .ent-collab-cards > div > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ══════════════════════════════════════════════════════════
       ERP / CRM CARDS
       ══════════════════════════════════════════════════════════ */
    .ent-crm-cards {
        flex-direction: column !important;
    }
    .ent-crm-cards > div {
        width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
        height: 420px !important;
        max-height: 420px !important;
    }

    /* ERP/CRM header row */
    .ent-erp-header {
        flex-direction: column !important;
        gap: 20px !important;
        margin-bottom: 40px !important;
    }
    .ent-erp-header > div {
        width: 100% !important;
        height: auto !important;
    }

    /* ══════════════════════════════════════════════════════════
       CUSTOM APP DEVELOPMENT
       ══════════════════════════════════════════════════════════ */

    /* Outer grid → single column */
    .ent-custom-grid {
        flex-direction: column !important;
    }

    /* Left column outer wrapper */
    .ent-custom-grid > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }
    /* Left column: top photo card */
    .ent-custom-grid > div:first-child > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
        height: 300px !important;
    }
    /* Left column: sub-row (Deployment + Support) → stack */
    .ent-custom-subrow {
        flex-direction: column !important;
    }
    .ent-custom-subrow > div {
        width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
        height: 320px !important;
    }

    /* Right section outer */
    .ent-custom-subgrid {
        width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }
    /* Inner first flex row (Design card + Dev/Test cards) → stack */
    .ent-custom-subgrid > div:first-child {
        flex-direction: column !important;
        width: 100% !important;
    }
    /* Design card and white-cards wrapper */
    .ent-custom-subgrid > div:first-child > div {
        width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
        height: auto !important;
    }
    /* Design card min-height */
    .ent-design-card-bg {
        min-height: 280px !important;
    }
    /* Dev + Testing cards container: side-by-side on tablet */
    .ent-custom-subgrid > div:first-child > div:last-child {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        min-height: unset !important;
    }
    /* Individual Dev / Testing cards */
    .ent-custom-subgrid > div:first-child > div:last-child > div {
        flex: 1 1 240px !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 200px !important;
    }
    /* Key Benefits whitebox */
    .ent-custom-whitebox {
        width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
        height: auto !important;
    }
    .ent-custom-whitebox > div {
        width: 100% !important;
        height: auto !important;
    }
    /* Checklist rows */
    .ent-custom-whitebox .flex.items-start > div:last-child {
        width: 100% !important;
        height: auto !important;
    }

    /* ══════════════════════════════════════════════════════════
       LEGACY MODERNIZATION IMAGES
       ══════════════════════════════════════════════════════════ */
    .ent-legacy-imgs {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-content: center !important;
        align-items: flex-start !important;
        gap: 20px !important;
        margin-top: 0 !important;
        min-width: 0 !important;
        width: 344px !important;
        max-width: 344px !important;
        flex: 0 0 344px !important;
    }
    .ent-legacy-imgs > div {
        margin-bottom: 0 !important;
        margin: 0 !important;
        width: 162px !important;
        height: 242px !important;
        flex: 0 0 162px !important;
    }
    .ent-legacy-imgs > div img {
        width: 162px !important;
        height: 242px !important;
    }
    .ent-legacy-row {
        align-items: center !important;
    }
.ent-bi-section > *:nth-child(1)  { order: 1;  width: 100% !important; }
    .ent-bi-section > *:nth-child(3)  { order: 2;  width: 50% !important; } /* Data Analysis text */
    .ent-bi-section > *:nth-child(2)  { order: 3;  width: 45% !important; } /* Data Analysis image */
    .ent-bi-section > *:nth-child(4)  { order: 4;  width: 50% !important; } /* Dashboards text */
    .ent-bi-section > *:nth-child(5)  { order: 5;  width: 45% !important; } /* Dashboards image */
    .ent-bi-section > *:nth-child(7)  { order: 6;  width: 50% !important; } /* Data Collection text */
    .ent-bi-section > *:nth-child(6)  { order: 7;  width: 45% !important; } /* Data Collection image */
    .ent-bi-section > *:nth-child(9)  { order: 8;  width: 50% !important; } /* Data Visualization text */
    .ent-bi-section > *:nth-child(8)  { order: 9;  width: 45% !important; } /* Data Visualization image */
    .ent-bi-section > *:nth-child(11) { order: 10; width: 50% !important; } /* Reporting text */
    .ent-bi-section > *:nth-child(10) { order: 11; width: 45% !important; } /* Reporting image */
    /* ══════════════════════════════════════════════════════════
       CAROUSELS
       ══════════════════════════════════════════════════════════ */
    .sec-card {
        width: 360px;
        min-width: 360px;
        height: auto;
        min-height: 280px;
    }
    .ux-card {
        width: 360px;
        min-width: 360px;
        height: 480px;
    }
}


/* ================================================================
   BREAKPOINT ≤ 768px  (Large phone)
   ================================================================ */
@media (max-width: 768px) {

    /* Purple banner */
    .ent-purple-banner {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 40px 24px !important;
    }
    .ent-purple-banner > div {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* BI section padding */
    .ent-bi-section {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Collab section padding */
    .ent-collab-section {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Security section */
    .ent-security-text {
        left: 24px !important;
        top: 60px !important;
        width: calc(100% - 48px) !important;
    }
    .ent-security-text > div {
        width: 100% !important;
        height: auto !important;
    }

    /* ERP/CRM cards */
    .ent-crm-cards > div {
        height: 340px !important;
        max-height: 340px !important;
    }

    /* Legacy images — same 2-over-1 layout as tablet, scaled for 768px */
    .ent-legacy-imgs {
        width: 300px !important;
        max-width: 300px !important;
        flex: 0 0 300px !important;
        gap: 20px !important;
    }
    .ent-legacy-imgs > div {
        width: 140px !important;
        height: 210px !important;
        flex: 0 0 140px !important;
    }
    .ent-legacy-imgs > div img {
        width: 140px !important;
        height: 210px !important;
    }

    /* Carousels */
    .sec-card { width: 300px; min-width: 300px; }
    .ux-card  { width: 300px; min-width: 300px; height: 420px; }
}


/* ================================================================
   BREAKPOINT ≤ 640px  (Mobile)
   ================================================================ */
@media (max-width: 640px) {
/* BI section on mobile: stack full-width instead of the 50/45 split */
    .ent-bi-section {
        flex-direction: column !important;
    }
    .ent-bi-section > *:nth-child(1),
    .ent-bi-section > *:nth-child(2),
    .ent-bi-section > *:nth-child(3),
    .ent-bi-section > *:nth-child(4),
    .ent-bi-section > *:nth-child(5),
    .ent-bi-section > *:nth-child(6),
    .ent-bi-section > *:nth-child(7),
    .ent-bi-section > *:nth-child(8),
    .ent-bi-section > *:nth-child(9),
    .ent-bi-section > *:nth-child(10),
    .ent-bi-section > *:nth-child(11) {
        width: 100% !important;
    }
    .ent-bi-section img {
        max-width: 100% !important;
    }
    /* Collab padding */
    .ent-collab-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .ent-collab-text  { padding: 0 !important; }
    .ent-collab-cards { padding: 0 !important; }

    /* Purple banner */
    .ent-purple-banner {
        flex-direction: column !important;
        gap: 24px !important;
        padding: 40px 20px !important;
    }
    .ent-purple-banner > div {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ERP header */
    .ent-erp-header {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .ent-erp-header > div { width: 100% !important; height: auto !important; }

    /* ERP/CRM cards */
    .ent-crm-cards > div {
        height: 280px !important;
        max-height: 280px !important;
    }

    /* Custom App sub-row: also stack */
    .ent-custom-subrow { flex-direction: column !important; }
    .ent-custom-subrow > div {
        width: 100% !important;
        height: auto !important;
        min-height: 240px !important;
    }

    /* Dev + Testing cards: also stack on mobile */
    .ent-custom-subgrid > div:first-child > div:last-child {
        flex-direction: column !important;
    }
    .ent-custom-subgrid > div:first-child > div:last-child > div {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 180px !important;
    }

    /* Design card height */
    .ent-design-card-bg { min-height: 260px !important; }

    /* Legacy images — same 2-over-1 layout as tablet, scaled down */
    .ent-legacy-imgs {
        width: 240px !important;
        max-width: 240px !important;
        flex: 0 0 240px !important;
        gap: 20px !important;
    }
    .ent-legacy-imgs > div {
        width: 110px !important;
        height: 170px !important;
        flex: 0 0 110px !important;
    }
    .ent-legacy-imgs > div img {
        width: 110px !important;
        height: 170px !important;
    }

    /* Security section */
    .ent-security-text {
        left: 20px !important;
        top: 40px !important;
        width: calc(100% - 40px) !important;
    }
    /* Security carousel track — reduce desktop's 140px left padding
       so the first card isn't pushed mostly off-screen on mobile */
    #secCardsTrack {
        padding-left: 20px !important;
        gap: 16px !important;
    }
    .ent-linepoints-canvas > [style]:not(.ent-benefits-line) h4 {
        white-space: normal !important;
    }
    .ent-linepoints-canvas {
        margin-top: 0 !important;
    }
    .ent-linepoints-canvas ~ *,
    section:has(.ent-linepoints-canvas) > div:first-child {
        margin-bottom: 20px !important;
    }
    .ent-security-text > div { width: 100% !important; height: auto !important; margin-bottom: 16px !important; }
    .ent-security-text h2 { font-size: 36px !important; line-height: 42px !important; }
    .ent-security-text p  { font-size: 18px !important; line-height: 24px !important; }

    /* BI section */
    .ent-bi-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
        gap: 20px !important;
    }
    .ent-bi-section img {
        height: 180px !important;
        max-height: 180px !important;
    }

    /* Carousels */
    .sec-card {
        width: calc(100vw - 60px);
        min-width: calc(100vw - 60px);
        max-width: 320px;
        padding: 24px 20px;
        min-height: 260px;
        box-sizing: border-box;
    }
    .sec-card-title  { font-size: 24px !important; }
    .sec-card-desc   { font-size: 17px !important; line-height: 24px !important; max-width: 100%; }
    .sec-num-circle  { width: 42px !important; height: 42px !important; }
    .sec-num-circle span { font-size: 20px !important; }

    .ux-card  { width: 270px; min-width: 270px; height: 380px; }
    .ux-title { font-size: 26px !important; line-height: 34px !important; }
    .ux-desc  { font-size: 16px !important; }
    .ux-num   { font-size: 50px !important; height: auto !important; }

    /* Whitebox checklist */
    .ent-custom-whitebox { padding: 28px 20px !important; }
    .ent-custom-whitebox > div:first-child { width: 100% !important; height: auto !important; }
    .ent-custom-whitebox .flex.items-start > div:last-child { width: 100% !important; height: auto !important; }
}