/* ============================================
   ECOSYSTEM PAGES - CENTRALIZED STYLES
   For partner-ecosystem.html, ecosystem-gripper.html
   and all other ecosystem pages
   ============================================ */

/* Base Styles */
body {
    overflow-x: hidden;
    background: radial-gradient(1200px 600px at 70% -10%, #073e75 0%, #03234f 45%, #021436 100%) fixed;
    /* Ensure ecosystem pages use DeltaSans by default */
    font-family: 'DeltaSans', Inter, sans-serif !important;
}

/* Ensure form controls also inherit DeltaSans on ecosystem pages */
body, input, select, textarea, button {
    font-family: 'DeltaSans', Inter, sans-serif !important;
}

/* Navigation */
nav.nav-block.nav-transparent,
nav#scrollNav {
    z-index: 1000;
}

/* ============================================
   HERO BANNERS
   ============================================ */

/* Partner Ecosystem Banner */
.banner-ecosystem {
    position: relative;
    background: url('../assets/ecosystem/overview/header.png') center/cover no-repeat;
    min-height: 100vh !important;
    height: 100vh !important;
    width: 100vw;
    display: flex;
    align-items: center;
    isolation: isolate;
}

.banner-ecosystem::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 20, 54, .35), rgba(3, 28, 77, .55) 40%, rgba(2, 20, 54, .7));
    z-index: 0;
}

.banner-ecosystem .container-inner {
    position: relative;
    z-index: 1;
    /* match navbar/container gutters */
    max-width: 1536px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 8rem !important;
    padding-right: 5rem !important;
}

.banner-ecosystem .description {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.6rem);
    line-height: 1.08;
    font-weight: 800;
    font-family: 'DeltaSans', Inter, sans-serif !important;
    text-align: left !important;
}

.banner-ecosystem .description h1 .accent {
    color: #b9eb5f;
}

.banner-ecosystem .description p {
    margin: 0;
    color: #e5f0fb;
    font-size: clamp(1rem, .9rem + .6vw, 1.2rem);
    opacity: .95;
    font-family: 'DeltaSans', Inter, sans-serif !important;
}

/* Material Handling Banner (unified full-width + spacing) */
.banner-material-handling {
    position: relative;
    background: #0a1c49 !important; /* solid banner color as requested */
    min-height: clamp(186px, 49vh, 350px);
    display: flex;
    align-items: center;
    isolation: isolate;
    width: 100% !important; /* full width */
    margin: 0 !important; /* remove shifting */
    padding-top: clamp(32px, 6vw, 72px) !important; /* space under nav */
    padding-bottom: clamp(16px, 3vw, 32px) !important; /* space to next section */
}

.banner-material-handling::after {
    content: "";
    position: absolute;
    inset: 0;
    display: none !important; /* remove gradient overlay */
}

.banner-material-handling .container-inner {
    position: relative;
    z-index: 1;
    max-width: 1536px !important;
    width: 100% !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important; /* match lower sections */
    margin: 0 auto !important;
}

.banner-material-handling .description h1 {
    margin: 0 0 12px; /* align flush with container gutters */
    color: #fff;
    font-size: clamp(3.1rem, 2.1rem + 4.2vw, 5.6rem);
    line-height: 1.08;
    font-weight: 900;
    font-family: 'DeltaSans', Inter, sans-serif;
}

.banner-material-handling .description p {
    margin: 0;
    color: #e5f0fb;
    font-size: clamp(1rem, .9rem + .6vw, 1.3rem);
    opacity: .95;
    font-family: 'DeltaSans', Inter, sans-serif;
}

/* Make hero content span full width and align left */
.banner-material-handling .middle-container {
    /* ...existing code... */
    display: block !important; /* override global flex */
    margin: 0 !important;
    padding: 0 !important; /* remove extra inner padding */
    /* padding-left: 8rem !important;  removed to align with container gutters */
    align-items: stretch !important; /* stop centering horizontally */
}

.banner-material-handling .description {
    /* ...existing code... */
    width: 100% !important; /* span full width */
    text-align: left !important; /* ensure left alignment */
    padding: 0 !important;
}

/* Make sub-caption 20% smaller than before */
.banner-material-handling .description > div {
    font-size: 80% !important;
}

/* Ensure the immediate next section has top spacing */
.banner-material-handling + section {
    padding-top: clamp(16px, 2.5vw, 36px) !important;
}

/* ============================================
   ECOSYSTEM STATEMENT BAR
   ============================================ */

.ecosystem-statement {
    display: grid;
    place-items: center;
    padding: 0 !important;
}

.ecosystem-statement .pill {
    width: 80% !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: linear-gradient(90deg, #0060aa 0%, #217a99 45%, #6c8c0e 100%) !important;
    color: #ffffff !important;
    padding: 18px 4vw !important;
    text-align: center;
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-weight: 600;
    letter-spacing: .2px;
    margin: clamp(16px, 3vw, 36px) auto !important;
}

/* ============================================
   SIDEBAR + CONTENT LAYOUT
   ============================================ */

.content-with-sidebar {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(24px, 3vw, 48px);
    max-width: 1600px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 80px) 2vw; /* tighter side gutters */
    width: 100%; /* ensure full container width regardless of item count */
}

/* ============================================
   FILTER SIDEBAR
   ============================================ */

.filter-sidebar {
    background: linear-gradient(180deg, rgba(0, 144, 255, 0.5) 0%, rgba(83, 211, 255, 0.5) 50%, rgba(201, 247, 66, 0.5) 100%);
    border: none;
    border-radius: 0;
    padding: 28px 20px;
    height: fit-content;
    position: sticky;
    top: 100px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

.filter-sidebar h3 {
    font-family: 'DeltaSans', Inter, sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(0, 144, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Search Box */
.filter-search {
    margin-bottom: 28px;
}

.filter-search input {
    width: 100%;
    padding: 12px 16px;
    background: #dedede !important; /* light gray like mock */
    color: #0c1f3b !important;
    border: none !important;
    border-radius: 0 !important;
    transition: all 0.3s ease;
}

.filter-search input::placeholder {
    color: #616161 !important;
}

.filter-search input:focus {
    background: #dedede !important;
    outline: 2px solid rgba(0, 0, 0, .05);
    box-shadow: none !important;
}

/* Filter Groups */
.filter-group {
    margin-bottom: 32px;
    position: relative; /* highlight positioning */
    border-radius: 12px;
    overflow: hidden;
}

.filter-group h4 {
    color: #ffffff !important; /* white headings like mock */
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    letter-spacing: .3px !important;
    margin: 0 0 10px !important;
}

/* Animated hover highlight bar */
.filter-group .filter-hover {
    position: absolute;
    left: -8px;
    right: -8px;
    top: 36px; /* below heading */
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(0, 144, 255, .35), rgba(83, 211, 255, .30), rgba(201, 247, 66, .35)) !important;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .6) !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    opacity: 0;
    transform: translateY(0);
    transition: transform .22s cubic-bezier(.2, .7, .2, 1), opacity .18s ease;
    pointer-events: none;
    z-index: 0;
}

.filter-group.is-hovering .filter-hover {
    opacity: 1;
}

.filter-option {
    display: flex;
    align-items: center;
    margin-bottom: 5px; /* reduced by ~50% from 10px */
    cursor: pointer;
    padding: 3px 0 !important; /* container has minimal padding; label will get the pill */
    transition: all 0.2s ease;
    position: relative;
    z-index: 1; /* above hover bar */
    border-radius: 10px;
}

/* Hide native checkboxes; keep accessible by label */
.filter-option input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

.filter-option label {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease, background-color .2s ease, padding .2s ease;
    line-height: 1.35;
    display: inline-block; /* allows background to size to text */
    padding: 2px 3px; /* reduced by ~50% from 4px 6px */
    border-radius: 8px; /* for selected pill */
}

/* Selected state styling sized to text */
.filter-option.selected label {
    background: linear-gradient(90deg, rgba(0, 144, 255, .18), rgba(83, 211, 255, .14), rgba(201, 247, 66, .18));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    padding: 4px 6px; /* reduced by ~30% from 7px 12px */
    font-weight: 800; /* stronger text for selected */
}

/* === Override: dynamic hover highlight to match label size === */
.filter-group .filter-hover {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 0; /* allow JS to override with inline style */
    height: 0; /* allow JS to override with inline style */
    transform: translate(0, 0); /* allow JS to override with inline style */
    transition: transform .22s cubic-bezier(.2, .7, .2, 1), width .22s ease, height .22s ease, opacity .18s ease !important;
    will-change: transform, width, height;
}

/* ============================================
   PRODUCT GRID SECTION
   ============================================ */

.products-section {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 6vw, 80px);
}

.product-category {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.product-category h2 {
    font-family: 'DeltaSans', Inter, sans-serif;
    font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%) 1;
}

/* Unified grid: 3 / 2 / 1 columns */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(19.8px, 2.86vw, 30.8px); /* +10% gap */
    width: 100%; /* fill available width */
    position: relative; /* prepare for absolute positioning of ghosts */
}

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

@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: 17.6px;
    }

    /* +10% gap on mobile */
}

/* Reduce product card box size ~10% via image height */
.product-card-image {
    width: 100%;
    height: clamp(198px, 21.6vw, 270px); /* -10% height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(600px 260px at 70% 30%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%);
    padding: clamp(18px, 2.8vw, 28px);
}

/* ============================================
   ECOSYSTEM SECTIONS (Partner Ecosystem Page)
   ============================================ */

#ecosystem-sections {
    position: relative;
}

#ecosystem-sections .introducing-block-info {
    padding-top: clamp(36px, 5vw, 70px);
    padding-bottom: clamp(24px, 4.5vw, 64px);
}

#ecosystem-sections .text-area h1 {
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem);
}

#ecosystem-sections .text-area p {
    color: #d7e6f5;
}

/* Matched-height mode */
#ecosystem-sections.matched-height .img-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

#ecosystem-sections.matched-height .img-area img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

/* First Section - Product (Gripper) */
#product-section {
    display: grid;
    grid-template-columns: minmax(320px, 560px) 1fr;
    align-items: center;
    gap: clamp(24px, 5vw, 70px);
    padding-left: 4vw;
    padding-right: 4vw;
}

#product-section .text-area {
    order: 1;
    text-align: left !important;
}

#product-section .img-area {
    order: 2;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
}

#product-section .img-area img {
    width: min(504px, 64%);
    height: auto;
}

#product-section .text-area h1.bottom-line {
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-weight: 900;
    font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem);
    line-height: 1.05;
    color: #ffffff;
    margin: 0 0 clamp(18px, 2.4vw, 30px);
    position: relative;
}

#product-section .text-area h1.bottom-line::after {
    content: "";
    display: block;
    width: clamp(180px, 19vw, 320px);
    height: 12px;
    border-radius: 0;
    margin-top: clamp(22px, 2.6vw, 32px);
    background: linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%);
}

#product-section .text-area .description p {
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
    line-height: 1.75;
    color: #e1ecfb;
    margin: clamp(20px, 2vw, 26px) 0 clamp(28px, 3vw, 40px);
    max-width: 52ch;
}

#product-section .text-area .button.button-frame {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    border-radius: 999px;
    border: 2px solid transparent !important;
    background: linear-gradient(#042450, #042450) padding-box,
    linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%) border-box !important;
    color: #ffffff !important;
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-weight: 800;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
    text-decoration: none !important;
}

#product-section .text-area .button.button-frame .icon img {
    width: 18px;
    height: 18px;
}

#product-section .text-area .button.button-frame:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .65);
}

#ecosystem-sections.matched-height #product-section .img-area img {
    width: min(504px, 64%) !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Second Section - Technologies (Vision & Safety) */
#technologies-section {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 560px);
    align-items: center;
    gap: clamp(24px, 5vw, 70px);
    padding-left: 4vw;
    padding-right: 4vw;
}

#technologies-section .img-area {
    order: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

#technologies-section .text-area {
    order: 2;
    text-align: left !important;
    padding-left: 0 !important;
}

#technologies-section .img-area img {
    width: min(1008px, 100%);
    height: auto;
}

#technologies-section .text-area h1.bottom-line {
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-weight: 900;
    font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem);
    line-height: 1.05;
    color: #ffffff;
    margin: 0 0 clamp(18px, 2.4vw, 30px);
    position: relative;
}

#technologies-section .text-area h1.bottom-line::after {
    content: "";
    display: block;
    width: clamp(180px, 19vw, 320px);
    height: 12px;
    border-radius: 0;
    margin-top: clamp(22px, 2.6vw, 32px);
    background: linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%);
}

#technologies-section .text-area .description p {
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
    line-height: 1.75;
    color: #e1ecfb;
    margin: clamp(20px, 2vw, 26px) 0 clamp(28px, 3vw, 40px);
    max-width: 52ch;
}

#technologies-section .text-area .button.button-frame {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    border-radius: 999px;
    border: 2px solid transparent !important;
    background: linear-gradient(#042450, #042450) padding-box,
    linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%) border-box !important;
    color: #ffffff !important;
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-weight: 800;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
    text-decoration: none !important;
}

#technologies-section .text-area .button.button-frame .icon img {
    width: 18px;
    height: 18px;
}

#technologies-section .text-area .button.button-frame:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .65);
}

#ecosystem-sections.matched-height #technologies-section .img-area img {
    width: min(1008px, 100%) !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Third Section - Application (Specialized Tooling) */
#application-section {
    display: grid;
    grid-template-columns: minmax(320px, 560px) 1fr;
    align-items: center;
    gap: clamp(24px, 5vw, 70px);
    padding-left: 4vw;
    padding-right: 4vw;
}

#application-section .text-area {
    order: 1;
    text-align: left !important;
    padding-left: 0 !important;
}

#application-section .img-area {
    order: 2;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
}

#application-section .img-area img {
    width: min(504px, 64%);
    height: auto;
}

#application-section .text-area h1.bottom-line {
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-weight: 900;
    font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem);
    line-height: 1.05;
    color: #ffffff;
    margin: 0 0 clamp(18px, 2.4vw, 30px);
    position: relative;
}

#application-section .text-area h1.bottom-line::after {
    content: "";
    display: block;
    width: clamp(180px, 19vw, 320px);
    height: 12px;
    border-radius: 0;
    margin-top: clamp(22px, 2.6vw, 32px);
    background: linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%);
}

#application-section .text-area .description {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#application-section .text-area .description p {
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
    line-height: 1.75;
    color: #e1ecfb;
    margin: clamp(20px, 2vw, 26px) 0 clamp(28px, 3vw, 40px);
    max-width: 52ch;
}

#application-section .text-area .button.button-frame {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    border-radius: 999px;
    border: 2px solid transparent !important;
    background: linear-gradient(#042450, #042450) padding-box,
    linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%) border-box !important;
    color: #ffffff !important;
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-weight: 800;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
    text-decoration: none !important;
}

#application-section .text-area .button.button-frame .icon img {
    width: 18px;
    height: 18px;
}

#application-section .text-area .button.button-frame:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .65);
}

#ecosystem-sections.matched-height #application-section .img-area img {
    width: min(504px, 64%) !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Fourth Section - Accessories */
#accessories-section {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 560px);
    align-items: center;
    gap: clamp(24px, 5vw, 70px);
    padding-left: 4vw;
    padding-right: 4vw;
}

#accessories-section .img-area {
    order: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

#accessories-section .text-area {
    order: 2;
    text-align: left !important;
    padding-left: 0 !important;
}

#accessories-section .img-area img {
    width: min(504px, 64%);
    height: auto;
}

#accessories-section .text-area h1.bottom-line {
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-weight: 900;
    font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem);
    line-height: 1.05;
    color: #ffffff;
    margin: 0 0 clamp(18px, 2.4vw, 30px);
    position: relative;
}

#accessories-section .text-area h1.bottom-line::after {
    content: "";
    display: block;
    width: clamp(180px, 19vw, 320px);
    height: 12px;
    border-radius: 0;
    margin-top: clamp(22px, 2.6vw, 32px);
    background: linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%);
}

#accessories-section .text-area .description p,
#accessories-section .text-area > div > p {
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
    line-height: 1.75;
    color: #e1ecfb;
    margin: clamp(20px, 2vw, 26px) 0 clamp(28px, 3vw, 40px);
    max-width: 52ch;
}

#accessories-section .text-area .button.button-frame {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    border-radius: 999px;
    border: 2px solid transparent !important;
    background: linear-gradient(#042450, #042450) padding-box,
    linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%) border-box !important;
    color: #ffffff !important;
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-weight: 800;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
    text-decoration: none !important;
}

#accessories-section .text-area .button.button-frame .icon img {
    width: 18px;
    height: 18px;
}

#accessories-section .text-area .button.button-frame:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .65);
}

#ecosystem-sections.matched-height #accessories-section .img-area img {
    width: min(504px, 64%) !important;
    height: auto !important;
    object-fit: contain !important;
}

#ecosystem-sections h1.bottom-line::after {
    border-radius: 0 !important;
}

/* ============================================
   DISCOVER ECOSYSTEM SECTION (refined)
   ============================================ */

.discover-ecosystem {
    background: transparent !important; /* remove background */
    border-top: none !important; /* remove section start border */
    padding: clamp(60px, 8vw, 120px) 0; /* remove inner left/right; header will be full-width */
    margin-top: clamp(40px, 6vw, 80px);
}

.discover-ecosystem-inner {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 1600px !important; /* match content-with-sidebar */
    margin: 0 auto !important;
    padding-left: 2vw !important; /* match side gutters */
    padding-right: 2vw !important;
}

.discover-ecosystem h2 {
    font-family: 'DeltaSans', Inter, sans-serif;
    font-size: clamp(3rem, 2rem + 4vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.05;
    padding: 0; /* remove extra padding around text */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: clamp(18px, 2.4vw, 28px);
}

/* Thicker underline just under header text, full section width (container) */
.discover-ecosystem h2::after {
    content: "";
    display: block;
    width: 100% !important; /* span entire section width */
    height: 10px; /* thicker */
    border-radius: 0;
    margin-top: clamp(10px, 1.4vw, 16px);
    background: linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%);
    position: static; /* ensure it sits just under the text */
}

/* Card grid stays 3 columns on desktop */
.ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(26.4px, 4.4vw, 52.8px); /* +10% gap */
    width: 100%; /* fill available width */
}

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

@media (max-width: 700px) {
    .ecosystem-grid {
        grid-template-columns: 1fr;
    }
}

/* Card look: increase image area height, keep equal heights */
.ecosystem-card {
    position: relative;
    /* Persistent gradient border via layered background */
    /* background: linear-gradient(rgba(6, 28, 58, 0.85), rgba(6, 28, 58, 0.85)) padding-box,
                linear-gradient(90deg, rgba(0, 144, 255, 0.5) 0%, rgba(83, 211, 255, 0.5) 45%, rgba(201, 247, 66, 0.5) 100%) border-box !important; */
    /* Use inner fill only; gradient border rendered by ::before on hover */
    background: linear-gradient(rgba(6, 28, 58, 0.85), rgba(6, 28, 58, 0.85)) !important;
    border: 0 !important; /* no base border to prevent black flash */
    border-radius: 0 !important; /* no border radius */
    overflow: hidden;
    transform: translateY(0); /* ensure smooth interpolation */
    transition: transform 1.2s cubic-bezier(.22, 1, .36, 1), box-shadow 1.2s ease; /* remove border-color transition */
    cursor: pointer;
    will-change: transform, box-shadow;
}

/* Gradient hover ring (no flicker) */
.ecosystem-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* Draw inner fill + gradient border using layered backgrounds */
    background-color: rgba(34, 150, 200, 0.4);
    border: 2px solid transparent; /* enables border-box gradient */
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
}

.ecosystem-card:hover::before,
.ecosystem-card:focus-within::before {
    opacity: 1; /* show ring on hover/focus */
}

.ecosystem-card-image {
    width: 100%;
    aspect-ratio: auto; /* override ratio */
    height: clamp(290px, 31vw, 393px) !important; /* +15% from current */
    background: radial-gradient(600px 260px at 70% 30%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 3vw, 36px);
}

/* Force images within ecosystem cards to render at 70% width, centered, and contained without distortion. */
.ecosystem-card-image img {
    width: 70% !important;
    max-width: 70% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Make the product card content a stacked bottom bar (not overlay) */
.product-card-content {
    position: relative; /* was absolute; stack below image */
    left: auto;
    right: auto;
    bottom: auto;
    background: linear-gradient(90deg, rgba(0, 89, 168, 0.9) 0%, rgba(63, 142, 115, 0.9) 100%);
    padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
    min-height: clamp(86px, 8vw, 128px);
    height: auto;
    display: flex;
    align-items: center;
    z-index: auto; /* no overlay */
}

/* Equalize product card heights: fix bottom bar height and clamp text */
.product-card-content {
    height: clamp(100px, 10vw, 140px); /* fixed responsive height (overrides previous auto) */
}

.product-card-content .product-eyebrow,
.product-card-content .product-title,
.product-card-content .product-brand {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* prevent multi-line growth */
}

/* Product image should fully fit inside the image area */
.product-card-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Ensure image zone is tall enough to show the full image */
.product-card-image {
    height: clamp(300px, 30vw, 420px); /* increase from ~200-270 to 300-420 */
    padding: clamp(18px, 2.6vw, 28px);
}

/* Product card bottom overlay container */
.product-card-content {
    position: relative; /* was absolute; stack below image */
    left: auto;
    right: auto;
    bottom: auto;
    background: linear-gradient(90deg, rgba(0, 89, 168, 0.9) 0%, rgba(63, 142, 115, 0.9) 100%);
    padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
    min-height: clamp(86px, 8vw, 128px);
    height: auto;
    display: flex;
    align-items: center;
    z-index: auto; /* no overlay */
}

/* Raise the hover ring above content while remaining unobtrusive */
.product-card::before {
    z-index: 3;
}

/* Slightly larger product title to match mock */
.product-card-content .product-title {
    font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem);
}

/* Bottom overlay title bar */
.ecosystem-card-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(0, 89, 168, 0.9) 0%, rgba(63, 142, 115, 0.9) 100%);
    padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2.2vw, 26px);
    min-height: clamp(70px, 6vw, 110px);
    height: auto;
    display: flex;
    align-items: center;
}

/* Product card bottom bar typography */
.product-card-content h3 {
    font-family: 'DeltaSans', Inter, sans-serif;
    font-weight: 900;
    font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.product-card-content .product-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    font-size: 0.85rem;
    color: #ffffff;
    opacity: .95;
    margin: 0 0 2px 0;
}

.product-card-content .product-title {
    display: block;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .02em;
    font-size: clamp(1.2rem, 1rem + 1vw, 1.3rem);
}

.product-card-content .product-brand {
    display: block;
    color: #d6e6f6;
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: 4px;
}

/* Hide card descriptions to match screenshot */
.ecosystem-card-content p {
    display: none !important;
}

/* ============================================
   PRODUCTS EMPTY STATE
   ============================================ */
.products-empty-state {
    display: none; /* toggled by JS */
    margin: 8px 0 14px;
    padding: clamp(16px, 2vw, 22px);
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(9, 55, 102, 0.35);
    color: #ffffff;
    font-family: 'DeltaSans', Inter, sans-serif;
    font-weight: 700;
    letter-spacing: .2px;
    border-radius: 10px;
}

/* Ensure empty results message can be force-shown via JS */
.products-empty-state.show{ display:block !important; }

/* Social + footer alignment helpers to reuse across pages (no style.css edits) */
.sc-footer-align .container-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-left:4vw; padding-right:4vw; }
.sc-footer-align .footer-link ul{ display:flex; gap:22px; list-style:none; margin:0; padding:0; }
.sc-footer-align .footer-link .bottom-nav-link{ font-size:70% !important; }

/* Standardize Social Connect icons sizing like index.html */
.sc-icon svg{ width:40px!important; height:40px!important; }
/* Guard: ensure social connect layout matches index across pages */
#social-connect .container-inner{ padding-left:4vw; padding-right:4vw; }

/* Increase section spacing for partner detail pages where requested */
.section-spacious{ padding-top:clamp(44px,6vw,100px)!important; padding-bottom:clamp(44px,6vw,100px)!important; }
.section-spacious + .section-spacious{ margin-top:clamp(18px,2.5vw,36px)!important; }

/* ============================================
   PAGE-SPECIFIC NAV REINFORCEMENTS
   ============================================ */
nav.nav-block.nav-transparent .nav-link,
nav#scrollNav .nav-link {
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-weight: 500 !important; /* was 800; align with index */
    color: #ffffff !important;
    letter-spacing: normal !important; /* align with index default */
}

/* ============================================
   FILTER CLEAR CONTROL
   ============================================ */
.filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 24px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(9, 55, 102, 0.35);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #ffffff !important;
    font-family: 'DeltaSans', Inter, sans-serif;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    margin-top: auto; /* push to bottom of sidebar */
    margin-bottom: 0; /* sit on bottom padding of sidebar */
}

.filter-clear:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .55);
}

/* ============================================
   PRODUCT CARDS (Grid items)
   ============================================ */
.product-card {
    position: relative; /* anchor ::before ring */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    /* Persistent gradient border via layered background */
    /* background: linear-gradient(rgba(6, 28, 58, 0.85), rgba(6, 28, 58, 0.85)) padding-box,
                linear-gradient(90deg, rgba(0, 144, 255, 0.5) 0%, rgba(83, 211, 255, 0.5) 45%, rgba(201, 247, 66, 0.5) 100%) border-box !important; */
    /* Use inner fill only; gradient border rendered by ::before on hover */
    background: linear-gradient(rgba(6, 28, 58, 0.85), rgba(6, 28, 58, 0.85)) !important;
    border: 0 !important; /* no base border to prevent black flash */
    overflow: hidden;
    min-height: 300px;
    isolation: isolate;
    will-change: transform, box-shadow;
    cursor: pointer;
    transition: transform 1.2s cubic-bezier(.22, 1, .36, 1), box-shadow 1.2s ease, opacity .6s ease; /* add opacity */
}

/* Gradient hover ring (no flicker) */
.product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* Draw inner fill + gradient border using layered backgrounds */
    background: linear-gradient(rgba(6, 28, 58, 0), rgba(6, 28, 58, 0)) padding-box,
    linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%) border-box;
    border: 2px solid transparent; /* enables border-box gradient */
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
}

.product-card:hover::before,
.product-card:focus-within::before {
    opacity: 1; /* show ring on hover/focus */
}

/* Hover effects: scale, glow, and semi-transparent gradient ring */
.product-card {
    transition: transform .45s cubic-bezier(.22, .87, .52, 1), box-shadow .45s ease;
}

.product-card:hover,
.product-card:focus-within {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .45);
}

/* Soft glow behind card */
.product-card::after {
    content: "";
    position: absolute;
    inset: -14px; /* extend outside to look like behind */
    background: radial-gradient(120% 120% at 50% 30%, rgba(0, 144, 255, .18), rgba(83, 211, 255, .16) 45%, rgba(201, 247, 66, .18) 100%);
    filter: blur(22px);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 0; /* sits behind content */
}

.product-card:hover::after,
.product-card:focus-within::after {
    opacity: 1;
}

/* 30% transparent gradient ring */
.product-card::before {
    background: linear-gradient(rgba(6, 28, 58, 0), rgba(6, 28, 58, 0)) padding-box,
    linear-gradient(90deg, rgba(0, 144, 255, .30) 0%, rgba(83, 211, 255, .30) 45%, rgba(201, 247, 66, .30) 100%) border-box;
}

/* ============================================
   LEASING OPTIONS PAGE
   Centralized from leasing-options.html <style> block
   ============================================ */

/* Generic section helpers used on leasing page */
.section {
    padding: clamp(36px, 6vw, 80px) 4vw;
    width: 80vw !important;
}

.section h2.bottom-line::after {
    content: "";
    display: block;
    width: clamp(180px, 19vw, 320px);
    height: 12px;
    margin-top: 18px;
    background: linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%);
}

/* Container override for the product hero on ecosystem pages that need full width */
#product-section .container-inner {
    display: block !important;
    text-align: left !important;
    max-width: 1480px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 clamp(24px, 4vw, 60px) !important;
    box-sizing: border-box !important;
}

/* Hero - leasing */
.leasing-hero {
    display: grid !important;
    grid-template-columns: minmax(320px, 100vw) 1fr !important;
    gap: clamp(40px, 6vw, 80px) !important;
    align-items: center !important;
    justify-items: start !important;
    width: 100% !important;
    overflow: visible !important;
}

.leasing-hero .text {
    text-align: left !important;
    justify-self: start !important;
    max-width: 100% !important;
    width: 100% !important;
}

.leasing-hero .title {
    font-weight: 900;
    font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem);
    line-height: 1.05;
    margin: 0 0 18px;
    color: #b9eb5f;
    text-align: left !important;
}

.leasing-hero .subtitle {
    font-weight: 900;
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 8px;
    color: #ffffff;
    text-align: left !important;
}

.leasing-hero h3.bottom-line::after {
    content: "";
    display: block;
    width: clamp(180px, 19vw, 320px);
    height: 12px;
    margin-top: 18px;
    background: linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%);
}

.leasing-hero p {
    color: #e1ecfb;
    font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
    line-height: 1.7;
    margin: 16px 0 26px;
    text-align: left !important;
}

.cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cta-row .button {
    text-decoration: none !important;
}

.hero-art {
    justify-self: end !important;
    align-self: center !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    min-width: 0 !important;
}

.highlight-lime {
    color: #b9eb5f;
    font-weight: 900;
}

@media (max-width: 980px) {
    .leasing-hero {
        grid-template-columns: 1fr !important;
    }

    .hero-art {
        justify-self: center !important;
        max-width: 520px !important;
    }
}

/* Benefits grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: clamp(34px, 5vw, 60px);
    margin-top: 18px;
    align-items: stretch;
}

@media (max-width: 860px) {
    .benefits-grid {
        grid-template-columns: 1fr;
    }
}

.benefit-card {
    position: relative;
    border-radius: 18px;
    background: linear-gradient(135deg, #0aaeff 0, #53d3ff 40%, #b9eb5f 100%);
    padding: 0.8px;
    background-size: 200% 200%;
    background-position: 0 50%;
    transition: transform .45s cubic-bezier(.22, .87, .52, 1),
    background-position 1.2s cubic-bezier(.22, .87, .52, 1);
}

.benefit-card:focus-within, .benefit-card:hover {
    transform: translateY(-4px);
    background-position: 100% 50%;
}

.benefit-card .inner {
    background: rgba(8, 24, 44, 0.76);
    border-radius: inherit;
    padding: clamp(22px, 2.8vw, 32px);
    display: grid;
    justify-items: center;
    text-align: center;
    min-height: clamp(320px, 38vw, 420px);
    transition: background-color .45s cubic-bezier(.22, .87, .52, 1);
}

.benefit-card:hover .inner, .benefit-card:focus-within .inner {
    background: rgba(10, 28, 50, 0.59);
}

.benefit-card img {
    width: clamp(120px, 14vw, 180px);
    height: auto;
    object-fit: contain;
    opacity: .98;
    /* Smooth, GPU-accelerated baseline for transitions */
    transform: translateZ(0) scale(1);
    transition: transform 360ms cubic-bezier(.22, .87, .52, 1),
    filter 320ms cubic-bezier(.22, .87, .52, 1),
    opacity 320ms cubic-bezier(.22, .87, .52, 1);
    will-change: transform;
}

.benefit-card:hover img, .benefit-card:focus-within img {
    transform: translateZ(0) scale(1.08) translateY(-2px);
    filter: brightness(1.06) saturate(1.04);
}

/* Optional: subtle press feedback */
.benefit-card:active img {
    transform: translateZ(0) scale(1.04) translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .benefit-card, .benefit-card img {
        transition: none;
    }
}

.benefit-card h3 {
    font-weight: 800;
    margin: 12px 0 8px;
    font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.35rem);
    color: #b9eb5f;
}

.benefit-card p {
    color: #dae8f8;
    font-size: 0.98rem;
    max-width: 44ch;
}

/* Robot lineup */
.lineup {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr)); /* increased min width from 80px to 120px for bigger robots */
    align-items: end;
    justify-items: center;
    gap: clamp(12px, 2.2vw, 24px);
}

.lineup .bot {
    display: grid;
    gap: 4px; /* tighter spacing between image and button */
    justify-items: center;
    grid-template-rows: clamp(216px, 21.6vw, 504px) auto; /* uniform image row => equal bottom alignment */
    align-items: end; /* ensure content sits at the bottom of its rows */
}

.lineup .bot img {
    /* Uniform bottom-aligned images across lineup */
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center; /* force bottom baseline alignment visually */
    align-self: end; /* sit on the bottom of the image row */
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .4));
}

.chip {
    display: inline-flex; /* center text nicely */
    justify-content: center;
    align-items: center;
    width: 9rem;
    border-radius: 20px;
    padding: 8px 14px; /* base size for regular chips */
    white-space: nowrap; /* keep labels on one line */
    background: linear-gradient(90deg, rgba(0, 144, 255, .2), rgba(83, 211, 255, .18));
    border: 2px solid rgba(185, 235, 95, .8);
    color: #fff;
    font-weight: 800;
    font-size: .9rem;
    text-decoration: none; /* remove underline when used as <a> */
    cursor: pointer; /* pointer cursor for buttons */
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; /* smooth hover */
}

@media (max-width: 980px) {
    .lineup {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

.lineup-cta {
    margin-top: clamp(18px, 3vw, 28px);
    padding: 18px 24px;
    background: linear-gradient(90deg, #0090ff5c 0%, #53d3ff75 45%, #9ddc395c 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.chip:hover,
.chip:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
    border-color: rgba(185, 235, 95, 1);
}

/* FAQ */
.faq {
    display: block;
}

.faq-box {
    margin: 0 auto 28px;
    padding: 18px;
    width: 80vw;
}

@media (max-width: 980px) {
    .faq-box {
        width: 100%;
    }
}

.faq-item {
    border: 0;
    margin: 14px 0;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(0, 144, 255, 0.18) 0%, rgba(83, 211, 255, 0.14) 45%, rgba(185, 235, 95, 0.14) 100%);
}

.faq-question {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    font-weight: 800;
    color: #eaf3ff;
}

.faq-answer {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 18px;
    color: #dae8f8;
    will-change: max-height, opacity;
    transition: max-height .55s cubic-bezier(.22, .87, .52, 1),
    opacity .55s cubic-bezier(.22, .87, .52, 1);
}

.faq-item.active .faq-answer {
    opacity: 1;
    padding: 12px 18px 18px;
    /* keep overflow hidden to avoid jump */
    overflow: hidden;
}

.faq-item .chev {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    transition: transform .45s cubic-bezier(.22, .87, .52, 1);
}

.faq-item.active .chev {
    transform: rotate(180deg);
}

.faq-box h2 {
    margin-left: 6px;
}

/* Info CTA */
.info-cta {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 560px); /* enlarge robot image column */
    gap: clamp(20px, 4vw, 50px);
    align-items: center;
}

@media (max-width: 860px) {
    .info-cta {
        grid-template-columns: 1fr;
    }
}

.info-cta p {
    color: #dbe9f8;
    margin: 12px 0 22px;
    max-width: 58ch;
}

.info-cta img {
    width: 100%;
    height: auto;
}

/* ============================================
   ECOSYSTEM INFOBOX HERO (80% viewport header)
   ============================================ */
.ecosystem-infobox {
    position: relative;
    min-height: 70vh; /* 80% of viewport height */
    width: 80%;
    display: block; /* semantic header container */
    isolation: isolate;
    padding: 0 4vw; /* match .section lateral padding */
}

/* Place content grid at the bottom of the header */
.ecosystem-infobox .container-inner {
    /* remove side padding to rely on parent 4vw gutters */
    padding: 0 0 clamp(24px, 4vw, 60px) !important; /* bottom gutter only */
    box-sizing: border-box !important;
    min-height: inherit; /* match 80vh */
    display: grid; /* enable bottom alignment */
    align-content: end; /* push grid to the bottom */
}

/* 60 / 40 split grid with title row on top */
.ecosystem-infobox .infobox-grid {
    display: grid;
    grid-template-columns: 3fr 2fr; /* 60% / 40% */
    grid-template-rows: auto 1fr; /* row 1: title, row 2: content */
    gap: clamp(20px, 3.6vw, 48px);
    align-items: end; /* bottom align items for the content row */
}

@media (max-width: 980px) {
    .ecosystem-infobox {
        min-height: auto; /* allow content to define height on small screens */
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .ecosystem-infobox .container-inner {
        align-content: start;
        padding-bottom: clamp(28px, 6vw, 48px) !important;
        padding-top: clamp(16px, 4vw, 24px) !important;
    }

    .ecosystem-infobox .infobox-grid {
        grid-template-columns: 1fr; /* stack */
        grid-template-rows: auto auto; /* title + content */
        align-items: start;
        gap: clamp(16px, 4vw, 28px);
    }

    .ecosystem-infobox .art {
        justify-self: center;
        max-width: min(520px, 100%);
    }
}

/* Full-width title spanning both columns */
.ecosystem-infobox .title {
    grid-column: 1 / -1;
    font-weight: 900;
    font-size: clamp(2.8rem, 2.2rem + 3.2vw, 4.6rem);
    line-height: 1.03;
    margin: 0; /* keep tight to top of grid */
    color: #b9eb5f; /* lime headline */
}

/* Left text column */
.ecosystem-infobox .text {
    text-align: left !important;
    max-width: 100% !important;
}

.ecosystem-infobox .subtitle {
    font-weight: 900;
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 8px;
    color: #ffffff;
}

.ecosystem-infobox h3.bottom-line::after {
    content: "";
    display: block;
    width: clamp(180px, 19vw, 320px);
    height: 12px;
    margin-top: 18px;
    background: linear-gradient(90deg, #0090ff 0%, #53d3ff 45%, #c9f742 100%);
}

.ecosystem-infobox p {
    color: #e1ecfb;
    font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
    line-height: 1.7;
    margin: 16px 0 26px;
}

.ecosystem-infobox .cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Right image column */
.ecosystem-infobox .art {
    justify-self: end;
    align-self: end;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .45));
}

/* Leasing Benefits: smooth lift + icon scale (match Dynamic cards) */
#leasing-benefits .benefit-card {
    transition: .4s box-shadow, .4s transform;
    will-change: transform;
}

#leasing-benefits .benefit-card img {
    transition: transform .6s; /* slower, smooth icon scale */
    will-change: transform;
}

#leasing-benefits .benefit-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 18px 46px -12px rgba(42, 42, 42, 0.32), 0 0 0 1px rgba(255, 255, 255, .08);
}

#leasing-benefits .benefit-card:hover img {
    transform: scale(1.06);
}

@media (max-width: 700px) {
    #leasing-benefits .benefit-card:hover {
        transform: translateY(-4px) scale(1.01);
    }
}

/* ============================================
   TARGETED VISIBILITY: Bottom box on horizontal cards
   Make overlay description visible between 992x1114 and 580x844 (portrait)
   ============================================ */
@media (min-width: 580px) and (max-width: 1000px) and (orientation: portrait) {
    /* Unhide the bottom overlay text on ecosystem cards in this range */
    .ecosystem-card-content p {
        display: block !important;
    }

    /* Give the overlay more room so text isn’t clipped */
    .ecosystem-card-content {
        min-height: clamp(110px, 14vw, 180px) !important;
        height: auto !important;
    }
}

/* Best paired with: hover scale-up on DBot images */
@media (hover: hover) and (pointer: fine) {
    section.best-paired > div > div > div img {
        transition: transform .25s ease, filter .25s ease;
        transform-origin: center bottom;
        will-change: transform;
    }

    section.best-paired > div > div > div:hover img {
        transform: scale(1.08);
        filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
    }
}

@media (prefers-reduced-motion: reduce) {
    section.best-paired > div > div > div img {
        transition: none;
    }
}

/* ============================================
   PARTNER ITEM PAGES – VERTICAL SPACING TUNING (reduced by ~20%)
   ============================================ */
/* First section after the banner (top-content-section): reduce spacing ~20% */
.banner-material-handling + section.top-content-section {
    padding-top: clamp(22px, 4vw, 58px) !important;
    padding-bottom: clamp(22px, 4vw, 58px) !important;
}

/* General rule for all sections after the banner on partner item pages */
.banner-material-handling ~ section {
    margin-top: clamp(18px, 3.8vw, 52px) !important;
    margin-bottom: clamp(18px, 3.8vw, 52px) !important;
}

/* Known sections: reduce internal top/bottom padding ~20% */
.banner-material-handling ~ section.top-content-section,
.banner-material-handling ~ section.info-duo-section,
.banner-material-handling ~ section.specifications-section,
.banner-material-handling ~ section.best-paired {
    padding-top: clamp(19px, 3.6vw, 45px) !important;
    padding-bottom: clamp(19px, 3.6vw, 45px) !important;
}

/* Specifications: prefer outside spacing; reduce values ~20% */
.banner-material-handling ~ section.specifications-section {
    margin-top: clamp(21px, 4vw, 48px) !important;
    margin-bottom: clamp(21px, 4vw, 48px) !important;
    padding-top: clamp(10px, 2vw, 22px) !important;
    padding-bottom: clamp(10px, 2vw, 22px) !important;
}

/* Partner pages: shrink Specifications table width by 40% and center */
.banner-material-handling ~ section.specifications-section .specifications-table {
    width: 60% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Partner pages: also shrink the Specifications container to match and center */
.banner-material-handling ~ section.specifications-section .specifications-table-container {
    width: 60% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Fallback: ensure width reduction applies even if DOM structure differs */
section.specifications-section .specifications-table,
section.specifications-section .specifications-table-container {
    max-width: 100% !important;
    width: 60% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 1024px) {
    .banner-material-handling ~ section.specifications-section .specifications-table,
    .banner-material-handling ~ section.specifications-section .specifications-table-container,
    section.specifications-section .specifications-table,
    section.specifications-section .specifications-table-container {
        width: 100% !important;
    }
}

/* Social/footer: tone down margins slightly as well */
.banner-material-handling ~ section#social-connect {
    margin-top: clamp(14px, 2.8vw, 38px) !important;
    margin-bottom: clamp(14px, 2.8vw, 38px) !important;
}

/* Extra separation after "Best paired with" section (reduced ~20%) */
.banner-material-handling ~ section.best-paired {
    margin-bottom: clamp(44px, 6vw, 102px) !important;
}

/* Fallback padding for all sections after banner (reduced ~20%) */
.banner-material-handling ~ section:not(#social-connect) {
    padding-top: clamp(16px, 3.4vw, 42px) !important;
    padding-bottom: clamp(16px, 3.4vw, 42px) !important;
}

/* ============================================
   PRODUCT MEDIA SLIDER - GLOBAL OVERRIDES
   Make all partner page sliders transparent with full-width images
   ============================================ */
#product-media-splide,
#product-media-splide .splide__track,
#product-media-splide .splide__list,
#product-media-splide .splide__slide {
    background: transparent !important;
    height: auto !important;
}
#product-media-splide .splide__slide { padding: 0 !important; }
#product-media-splide .splide__slide img,
#product-media-splide .splide__slide picture img,
#product-media-splide .splide__slide svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
}