/* =========================================
   SECTION DESIGN  -  index + platforms

   The problem this replaces: each of these
   two sections was three layers fighting.
   A photographic artwork positioned in fixed
   pixels, a white wash laid over part of it
   to rescue the dark text, and - because the
   wash was 18px narrower than the document -
   two purple slivers down the edges. The
   result read as an accident: a light island
   floating in purple with seams at both
   sides.

   The design instead:

     1. One graded light field per section,
        full width, no artwork and no islands.
        White at the top where the editorial
        copy sits, warming to the brand lilac
        as it falls.

     2. The block that is set in light text
        becomes a deliberate deep-violet
        panel - a feature band inside the
        light field. It carries its own
        ground, so its contrast no longer
        depends on where an artwork happens
        to darken.

   That removes the whole class of bug these
   sections kept producing, because nothing
   is left to guess: the field is light by
   declaration and the panel is dark by
   declaration.

   The panel is contained rather than
   full-bleed. Nothing in these sections clips
   overflow-x, so a bleed would either add a
   scrollbar or leave the same edge seams the
   design is meant to remove.
   ========================================= */

/* ---- 1. the light field ------------------------------------ */
.elementor .elementor-element-b11f28c,
.elementor .elementor-element-3caca68 {
    background-image: linear-gradient(
        180deg,
        #FFFFFF 0%,
        #FDFCFF 32%,
        #F8F4FF 68%,
        #F1EBFF 100%
    ) !important;
    background-color: #FFFFFF !important;
    background-blend-mode: normal !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
}

/* The wash that used to rescue the Technology grid is what created the
   slivers. The field is light by declaration now, so it is not needed. */
.elementor .elementor-element-3852bf6 {
    background: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* ---- 2. the feature panel ---------------------------------- */
.elementor .elementor-element-2265245,
.elementor .elementor-element-503ca20 {
    /* the earlier mobile bleed is replaced by containment */
    margin-inline: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 60px 52px 64px !important;
    border-radius: 24px;
    background-image: linear-gradient(
        160deg,
        #3A1078 0%,
        #2A0A5E 52%,
        #1E0742 100%
    ) !important;
    background-color: #2A0A5E !important;
}

@media (max-width: 1024px) {
    .elementor .elementor-element-2265245,
    .elementor .elementor-element-503ca20 {
        padding: 48px 36px 52px !important;
    }
}

@media (max-width: 767px) {
    .elementor .elementor-element-2265245,
    .elementor .elementor-element-503ca20 {
        padding: 40px 24px 44px !important;
        border-radius: 18px;
    }
}

/* ---- 3. the panel's text, at every width -------------------
   These colours existed already but only inside a max-width:767px block,
   from when the panel was dark on mobile alone. The panel is dark at every
   width now, so they have to be too - otherwise the desktop keeps the
   light-ground palette and two elements fail on the violet:
   .solution-numbers at 2.81:1 and .heading-3-style at 2.79:1.
   ----------------------------------------------------------- */
.elementor .elementor-element-2265245 .eyebrow-text,
.elementor .elementor-element-503ca20 .eyebrow-text {
    color: rgba(236, 231, 255, .66) !important;
}

.elementor .elementor-element-2265245 .heading-2-style,
.elementor .elementor-element-503ca20 .heading-2-style {
    color: #ECE7FF !important;
}

.elementor .elementor-element-2265245 p,
.elementor .elementor-element-503ca20 p {
    color: rgba(236, 231, 255, .78) !important;
}

.elementor .elementor-element-2265245 .solution-numbers,
.elementor .elementor-element-503ca20 .solution-numbers {
    color: rgba(236, 231, 255, .42) !important;
}

/* #7E29FE is only 2.79:1 on this violet; the lighter brand tint clears it */
.elementor .elementor-element-2265245 .heading-3-style,
.elementor .elementor-element-503ca20 .heading-3-style,
.elementor .elementor-element-2265245 .elementor-icon-box-title,
.elementor .elementor-element-503ca20 .elementor-icon-box-title {
    color: #B98CFF !important;
}

.elementor .elementor-element-2265245 .elementor-icon-box-description,
.elementor .elementor-element-503ca20 .elementor-icon-box-description {
    color: rgba(236, 231, 255, .78) !important;
}