/* ============================================================
   Homepage 2026 - client-specified overrides

   These values were given explicitly by the client and take precedence over
   anything derived in dist/css/homepage-b.css. They live in their own file,
   enqueued after it, so a regeneration of the section CSS cannot silently
   revert them.
   ============================================================ */

/* The 2026 design is drawn on a ~1499px content column; the theme caps
   [class^="hp-"] .wrapper at 1230px, which renders every section ~18% small. */
body.hp-2026 [class^="hp-"] .wrapper {
    max-width: 1498px;
}

/* ============================================================
   Desktop values.

   Gated at min-width:993px to follow the site's own breakpoint convention:
   across style.css, child-theme.css and alex-css.css the dominant pairing is
   max-width:992px (375 uses) with min-width:993px (100 uses), and max-width:576px
   (583 uses) for mobile. Below 993px each section's own responsive CSS in
   homepage-b.css takes over, which is what these fixed px values would otherwise
   suppress - a 74px hero title does not fit a 375px screen.
   ============================================================ */
@media only screen and (min-width: 993px) {
    /* ---------- hero-b ---------- */
    .hp-hero-b .hp-hero-b__title {
        /* Client review 14 Sep, point 10: "Behavioral Intelligence" has to stay on
           one line. At 74px it measures 759.1px and 51.7% of the 1468 head gave it
           759.0 - short by a tenth of a pixel, which is why it broke after the
           first word here and not on the client's Mac. The export's own title box
           is 761 (node 2177:1980, 761x253 = the same three lines), and the next
           break point is "for Cyber & Operational" at 778.7, so 52.4% / 769px sits
           in the middle of that window and survives a font that renders a little
           wider or narrower. */
        flex: 0 1 52.4%;
        margin: 0;
        color: #001A36;
        font-size: 74px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0;
    }

    .hp-hero-b .hp-hero-b__aside p {
        margin: 0;
        color: #001A36;
        font-size: 30px;
        line-height: 1.5;
    }

    .hp-hero-b .hp-hero-b__aside .btn.btn-white {
        display: inline-block;
        margin-top: 35px;
        padding: 14px 21px;
        background: transparent;
        border: 1px solid #001A36;
        border-radius: 60px;
        color: #001A36;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        text-decoration: none;
        transition: background-color .25s ease, border-color .25s ease, color .25s ease;
    }

    .hp-hero-b__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding-bottom: 60px;
    }

    /* ---------- pillars ---------- */
    .hp-pillars {
        background: #F1F6FF;
        padding: 55px 0;
    }

    /* ---------- testimonials-b ---------- */
    /* Larger logo band than the derived value. Redeclared on the section itself so
       it wins over the custom property set in homepage-b.css. */
    .hp-testimonials-b {
        --hp-tb-logo: clamp(65px, 2.09vw, 101px);
    }

    /* ---------- agents ---------- */
    .hp-agents {
        background-color: #F1F6FF;
        padding: clamp(42px, 7.2vw, 135px) 0 clamp(34px, 6.12vw, 110px);
    }

    .hp-agents .wrapper>h2 {
        margin: 0 0 clamp(30px, 3.91vw, 70px);
        font-size: clamp(26px, 2.35vw, 44px);
        font-weight: 700;
        line-height: 1.25;
        color: #001A36;
        text-align: center;
    }

    .hp-agents__cols {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: .67%;
        margin-top: clamp(20px, 2.47vw, 50px);
    }

    .hp-agents__col {
        padding-left: 7.5%;
        overflow-wrap: break-word;
    }

    .hp-agents .hp-agents__col h3 {
        margin: 0 0 23px;
        font-size: 20px;
        font-weight: 700;
        line-height: 22px;
        color: #0061FA;
    }

    .hp-agents .hp-agents__col-txt {
        max-width: 500px;
    }
    .hp-agents .hp-agents__col-txt p {
        margin: 0 0 8px;
        font-size: 16px;
        line-height: 1.5;
        color: #001A36;
    }

    .hp-agents {
        background-color: #F1F6FF;
        padding: clamp(42px, 7.2vw, 135px) 0 clamp(34px, 6.12vw, 60px);
    }

    /* ---------- ecosystems ---------- */
    .hp-ecosystems .hp-ecosystems__card {
        position: relative;
        background-color: #fff;
        border-radius: 24px 24px 0 0;
        padding: 80px 6.5% 0;
    }

    .hp-ecosystems .hp-ecosystems__txt {
        max-width: 520px;
    }

    .hp-ecosystems .hp-ecosystems__txt h2 {
        font-size: 44px;
        font-weight: 700;
        line-height: 1.3;
        color: #001A36;
        margin: 0 0 90px;
    }

    .hp-ecosystems .hp-ecosystems__txt p {
        font-size: 26px;
        line-height: 1.3;
        color: #001A36;
        margin: 0;
    }

    .hp-ecosystems .hp-ecosystems__media {
        position: relative;
        width: 78.3%;
        max-width: 804px;
        margin: -20px -80px 0 0;
    }

    .hp-ecosystems .hp-ecosystems__intro {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        padding-bottom: 105px;
    }

    .hp-ecosystems .hp-ecosystems__panel h3 {
        font-size: 31px;
        font-weight: 400;
        line-height: 1.3;
        color: #0061FA;
        margin: 0 0 30px;
    }

    .hp-ecosystems .hp-ecosystems__panel p {
        font-size: 20px;
        line-height: 22px;
        color: #001A36;
        margin: 0;
    }

    .hp-ecosystems .hp-ecosystems__panel {
        position: relative;
        display: none;
        grid-template-columns: 21% 28.5% 1fr;
        column-gap: 2.6%;
        padding: 32px 0 16px;
    }

    .hp-ecosystems .hp-ecosystems__bar {
        position: relative;
        display: flex;
        align-items: center;
        gap: 90px;
        min-height: 92px;
    }

    .hp-ecosystems .hp-ecosystems__panel p {
        font-size: 16px;
        line-height: 22px;
        color: #001A36;
        margin: 0;
    }

    .hp-ecosystems .hp-ecosystems__toggle {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        overflow-wrap: anywhere;
        padding: 0;
        border: 0;
        background: none;
        font-size: 15px;
        line-height: 22px;
        color: #698CAE;
        text-align: left;
        font-weight: 300;
    }

    /* ---------- testimonials-b ---------- */
    .hp-testimonials-b .hp-testimonials-b__title {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        color: #001A36;
        font-size: clamp(26px, 2.3vw, 44px);
        line-height: 1.3636;
        font-weight: 700;
        letter-spacing: 0;
        overflow-wrap: break-word;
        max-width: 770px;
    }

    .hp-testimonials-b__nav-group {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: clamp(12px, 1.57vw, 30px);
    }

    /* ---------- page gutters ----------
       Without this the content column touches the viewport edges at widths just
       above the 1498px cap (at a 1536px viewport there are only ~19px left over),
       and again inside the 64.06vw band. 15px of breathing room on every width. */
    body.hp-2026 [class^="hp-"] .wrapper {
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Testimonial card logo on tablet and mobile. The desktop value above starts at
   65px; this ramps from 45px at 375 up to the same 65px at 992, so the two
   sides meet without a step at the 992/993 boundary. */
@media only screen and (max-width: 992px) {
    .hp-testimonials-b {
        --hp-tb-logo: clamp(45px, 12vw, 65px);
    }
}

/* ---------- pillars: divider strip ----------
   Figma "Rectangle 34625973": 1499x40, radius 20, 1px #698CAE border at 30%.
   It sits at the very bottom of the pillars section, so only its top edge shows -
   the white logos section that follows paints over the rest. Desktop only. */
@media only screen and (min-width: 993px) {
    .hp-pillars {
        position: relative;
    }
    .hp-pillars::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -33px;
        transform: translateX(-50%);
        width: 1498px;
        max-width: calc(100% - 30px);
        height: 40px;
        border: 1px solid rgba(105, 140, 174, .3);
        border-radius: 20px;
        pointer-events: none;
        background: rgba(105, 140, 174, .3);
    }
}

/* Between 992 and 1535 the theme already narrows the navbar to 80vw
   (style.css:10079). Match it for the homepage wrappers so the section content
   lines up with the navbar's own edges across that band. */
@media only screen and (max-width: 1535px) and (min-width: 992px) {
    body.hp-2026 [class^="hp-"] .wrapper {
        max-width: 80vw;
    }
}

/* ---------- 992-1535 band ----------
   The site scales hp- sections fluidly in vw across this band (style.css has 263
   vw declarations in exactly this media block: h1 3.23vw, h2 2vw, p 1.2vw ...).
   These are the desktop values above restated the same way, against the 80vw
   wrapper: px / 1498 * 80. Values already using clamp() or % are left alone.
   ---------------------------------------------------------------- */
@media only screen and (max-width: 1535px) and (min-width: 992px) {
    .hp-hero-b .hp-hero-b__title {
        font-size: 3.952vw;
    }
    /* Deliberately under the proportional 1.602vw (= the 30px used from 1536 up):
       at laptop widths that extra step is what lets the subtitle wrap cleanly. */
    .hp-hero-b .hp-hero-b__aside p {
        font-size: 1.502vw;
    }
    .hp-hero-b .hp-hero-b__aside .btn.btn-white {
        margin-top: 1.869vw;
        padding: 0.748vw 1.121vw;
        font-size: 0.854vw;
        line-height: 1.068vw;
    }
    .hp-hero-b__head {
        padding-bottom: 3.204vw;
    }
    .hp-pillars {
        padding: 2.937vw 0;
    }
    .hp-agents .hp-agents__col h3 {
        margin: 0 0 1.228vw;
        font-size: 1.068vw;
        line-height: 1.175vw;
    }
    .hp-agents .hp-agents__col-txt {
        max-width: 26.702vw;
    }
    .hp-agents .hp-agents__col-txt p {
        margin: 0 0 0.427vw;
        font-size: 0.854vw;
    }
    .hp-ecosystems .hp-ecosystems__txt {
        max-width: 27.770vw;
    }
    .hp-ecosystems .hp-ecosystems__txt h2 {
        font-size: 2.350vw;
        margin: 0 0 4.806vw;
    }
    .hp-ecosystems .hp-ecosystems__txt p {
        font-size: 1.189vw;
    }
    .hp-ecosystems .hp-ecosystems__media {
        max-width: 43.116vw;
        margin: -1.068vw -4.272vw 0 0;
    }
    .hp-ecosystems .hp-ecosystems__intro {
        gap: 2.136vw;
        padding-bottom: 5.607vw;
    }
    .hp-ecosystems .hp-ecosystems__panel h3 {
        font-size: 1.656vw;
        margin: 0 0 1.602vw;
    }
    .hp-ecosystems .hp-ecosystems__panel p {
        font-size: 1.068vw;
        line-height: 1.175vw;
    }
    .hp-ecosystems .hp-ecosystems__panel {
        padding: 1.709vw 0 0.854vw;
    }
    .hp-ecosystems .hp-ecosystems__bar {
        gap: 4.806vw;
        min-height: 4.913vw;
    }
    .hp-ecosystems .hp-ecosystems__panel p {
        font-size: 0.961vw;
        line-height: 1.175vw;
    }
    .hp-ecosystems .hp-ecosystems__toggle {
        gap: 0.374vw;
        font-size: 0.801vw;
        line-height: 1.175vw;
    }
    .hp-testimonials-b .hp-testimonials-b__title {
        max-width: 41.121vw;
    }
    body.hp-2026 [class^="hp-"] .wrapper {
        padding-left: 0.801vw;
        padding-right: 0.801vw;
    }
}

/* The pillars divider strip, restated in vw for the band. Width tracks the
   wrapper exactly (1498px at >=1536 is the same as 80vw here), the rest is
   px / 1498 * 80. The 1px border stays a hairline - in vw it would round away. */
@media only screen and (max-width: 1535px) and (min-width: 992px) {
    .hp-pillars::after {
        width: 80vw;
        height: 2.136vw;
        bottom: -1.762vw;
        border-radius: 1.068vw;
    }
}

/* ============================================================
   Mobile, from the 375px Figma export (Mobile_A.png), measured 1:1.
   Fixed px throughout - the site uses px in every mobile block
   (97% of declarations) and reserves vw for the 992-1535 band only.
   ============================================================ */
@media only screen and (max-width: 992px) {

    /* --- hero --- */
    .hp-hero-b .hp-hero-b__title {
        font-size: 32px;
        line-height: 38px;
    }
    .hp-hero-b .hp-hero-b__aside p {
        font-size: 20px;
        line-height: 26px;
        font-weight: 300;
    }
    .hp-hero-b__aside {
        padding-top: 26px;          /* title -> paragraph */
        max-width: 100%;
    }
    .hp-hero-b .hp-hero-b__aside .btn.btn-white {
        display: block;
        width: 100%;
        margin-top: 44px;           /* paragraph -> button */
        padding: 12px 20px;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
    }
    .hp-hero-b__head {
        padding-bottom: 43px;       /* button -> panel */
    }
    .hp-hero-b__visual {
        aspect-ratio: 335 / 219;    /* measured off the export */
        border-radius: 12px;
    }

    /* --- pillars: the export stacks title, badge, button, then the columns --- */
    .hp-pillars .hp-pillars__row {
        display: flex;
        flex-direction: column;
        column-gap: 0;
        row-gap: 0;
    }
    .hp-pillars .hp-pillars__badge {
        order: 1;
        width: 100%;
        max-width: 100%;
        margin-bottom: 21px;
    }
    .hp-pillars .hp-pillars__cols {
        order: 3;                   /* after the button */
        display: block;
        width: 100%;
    }
    .hp-pillars .hp-pillars__col {
        border-left: 0;
        border-top: 1px solid #C8D6E7;
        padding: 24px 0 0;
        margin-top: 24px;
    }
    .hp-pillars .hp-pillars__col:first-child {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }
    .hp-pillars .btn {
        order: 2;
        display: block;
        width: 100%;
        margin: 0 0 32px;
        text-align: center;
    }
    /* the tab strip scrolls sideways instead of wrapping */
    .hp-pillars .hp-pillars__tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        margin-bottom: 24px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .hp-pillars .hp-pillars__tabs::-webkit-scrollbar {
        display: none;
    }

    /* --- agents: the export centres both text blocks --- */
    .hp-agents .hp-agents__col {
        padding-left: 0;
        text-align: center;
    }
    .hp-agents .hp-agents__col-txt {
        max-width: 100%;
    }

    /* --- ecosystems: the product shot sits above the copy --- */
    .hp-ecosystems .hp-ecosystems__intro {
        flex-direction: column;
    }
    .hp-ecosystems .hp-ecosystems__media {
        order: -1;
        width: 100%;
        max-width: 100%;
        margin: 0 0 24px;
    }
    .hp-ecosystems .hp-ecosystems__txt {
        max-width: 100%;
    }

    /* --- cta: the mascot only exists in the mobile design --- */
    .hp-cta-assets .hp-cta-assets__mascot {
        display: block;
        width: 70%;
        margin: 30px auto 0;
        position: relative;
        z-index: 1;
        max-width: 250px;
    }
    .hp-cta-assets .hp-cta-assets__mascot img {
        display: block;
        width: 100%;
        height: auto;
    }
}

/* The 1920 export places "Aduard_Character" (2177:3146) at x1400-1696, y5381-5824
   while the footer starts at y5729: the mascot's right edge sits 13px inside the
   1498 content column, and its bottom hangs 95px OVER the footer. In flow it cannot
   do that - a downward shift only makes the section taller and carries the footer
   with it - so it leaves the flow and anchors to .wrapper, whose bottom edge is the
   section's own 165px of padding above the footer line: 165 + 95 = 260.
   right:0 lands on the wrapper's content edge, which is the same 1498 column. */
@media only screen and (min-width: 993px) {
    .hp-cta-assets {
        overflow: visible;      /* the overhang would otherwise be clipped away */
    }
    .hp-cta-assets .hp-cta-assets__mascot {
        display: block;
        position: absolute;
        /* right resolves against .wrapper's padding box, not its content box, so
           the 15px gutter is already outside it: 13px is the export's own inset of
           the character from the column edge (1696 against 1709). */
        right: 13px;
        /* The overhang has to be measured from the FOOTER line, but the containing
           block is .wrapper, whose bottom sits one section padding-bottom above it.
           That padding is clamp(86px, 16.189vw - 77.51px, 165px) in homepage-b.css
           and already saturates at 165 from 1536 up, so restating it here covers the
           whole desktop range in one declaration - a fixed -260px was only correct
           at the 165px end and overhung by 48px at 1200. */
        bottom: calc(-1 * (clamp(86px, 16.189vw - 77.51px, 165px) + 95px));
        z-index: 1;
        max-width: 296px;
        margin: 0;
    }
}

/* 992-1535 the column stops being capped at 1498 and becomes 80vw, so the mascot has
   to shrink with it like every other value in this file: px / 1498 * 80. Fixed 296px
   left it at full size inside a column already down to 64% at 1200. The image needs
   its own width:100% here - the rule that gives it one lives in the <=992 block, so
   on desktop it would otherwise keep drawing at its natural 296px and overflow. */
@media only screen and (max-width: 1535px) and (min-width: 993px) {
    .hp-cta-assets .hp-cta-assets__mascot {
        width: 15.808vw;                                    /* 296 */
        right: 0.694vw;                                     /* 13 */
        bottom: calc(-1 * (clamp(86px, 16.189vw - 77.51px, 165px) + 5.073vw));  /* 95 */
    }
    .hp-cta-assets .hp-cta-assets__mascot img {
        display: block;
        width: 100%;
        height: auto;
    }
}

/* The reordering above needs real flex parents: the panel is display:block and the
   intro is block on mobile, so `order` was inert. `display: contents` dissolves the
   badge/columns wrapper so the button can sit between them, as the export shows. */
@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__panel {
        display: flex;
        flex-direction: column;
    }
    .hp-pillars .hp-pillars__title { order: 0; }
    .hp-pillars .hp-pillars__row  { display: contents; }
    .hp-pillars .hp-pillars__badge { order: 1; }
    .hp-pillars .btn               { order: 2; }
    .hp-pillars .hp-pillars__cols  { order: 3; }

    .hp-ecosystems .hp-ecosystems__intro {
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (max-width: 992px) {
    .hp-pillars .btn.btn-white {
        display: flex;
        justify-content: center;
    }
}

@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__tabs {
        gap: 6px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__col {
        border-left: 0;
        border-top: 1px solid #C8D6E7;
        padding: 24px 15px 0;
        margin-top: 24px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__badge {
        order: 1;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__panel {
        display: flex;
        flex-direction: column;
        border: 1px solid #C8D6E7;
        padding: 16px 14px 13px;
        border-radius: 15px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-logos-b .wrapper > h2 {
        margin: 0 auto 50px;
        font-size: 20px;
        line-height: 30px;
        max-width: 50%;
        display: block;
        text-align: center;
    }
}

@media only screen and (max-width: 576px) {
    .hp-logos-b .wrapper > h2 {
        margin: 0 auto 50px;
        font-size: 18px;
        line-height: 26px;
    }
}

/* The mobile export uses a different Agents panel - one continuous panel with the
   avatars rearranged, not the desktop's two halves split by a divider. Swap it as a
   background so the markup stays unchanged; the panel is decorative.

   22 Sep: Amram's "Creative cards" replaces the first export. Same 335:198 frame, but
   drawn at 1340x792 - four times the slot - so it stops being soft on a 2x or 3x phone,
   which the original 335x198 file could not avoid. It carries its own 3px corner
   rounding; the 12px radius below clips further in, so the two never compete. New
   filename rather than overwriting the old one: the URL is what busts the CDN. */
@media only screen and (max-width: 992px) {
    .hp-agents .hp-agents__visual {
        aspect-ratio: 335 / 198;
        border-radius: 12px;
        overflow: hidden;
        background: url(../../img/homepage/agents-visual-mobile-cards.png) no-repeat center / cover;
    }
    .hp-agents .hp-agents__visual img,
    .hp-agents .hp-agents__visual picture {
        display: none;
    }
}


/* the bar sits under the panel on desktop, above it on mobile */
.hp-ecosystems .hp-ecosystems__item {
    display: flex;
    flex-direction: column;
}
.hp-ecosystems .hp-ecosystems__bar        { order: 1; }

/* desktop keeps the button on the bar line */

@media only screen and (max-width: 992px) {
    /* mobile: label on top, then heading, tagline, button, text, tags */
    .hp-ecosystems .hp-ecosystems__bar        { order: 0; }
}


/* Mobile only: the export puts the "/0.N LABEL" bar above its panel; on desktop it
   stays below, so this is scoped and cannot reach the desktop layout. */
@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__item {
        display: flex;
        flex-direction: column;
    }
    .hp-ecosystems .hp-ecosystems__bar   { order: 0; }
    .hp-ecosystems .hp-ecosystems__panel { order: 1; }
}

@media only screen and (max-width: 576px) {
    .hp-hero-b {
        padding: 96px 0 0;
    }
}

@media only screen and (max-width: 992px) {
    .hp-hero-b {
        padding: 112px 0 0;
    }
}

@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__tab {
        padding: 10px 16px;
        font-size: 14px;
        line-height: 20px;
        border-radius: 8px;
        text-transform: capitalize;
        border: 1px solid #698CAE;
    }
}

/* The tab strip scrolls sideways when the pills do not fit, as in the export where
   the row is cut off mid-pill at both edges. It runs full-bleed past the wrapper's
   gutters so a pill can sit under the screen edge, and the scrollbar is hidden. */
@media only screen and (max-width: 992px) {
    .hp-pillars .hp-pillars__tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x proximity;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .hp-pillars .hp-pillars__tabs::-webkit-scrollbar {
        display: none;
    }
    .hp-pillars .hp-pillars__tabs li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    .hp-pillars .hp-pillars__tab {
        white-space: nowrap;
    }
}

@media only screen and (max-width: 576px) {
    .hp-agents .wrapper > h2 {
        margin-bottom: 24px;
        font-size: 32px;
    }
}

@media only screen and (max-width: 576px) {
    .hp-agents .hp-agents__col h3 {
        margin-bottom: 12px;
        font-size: 16px;
    }
}

@media only screen and (max-width: 992px) {
  .hp-agents__cols {
    margin-top: 26px;
    grid-template-columns: 1fr;
    row-gap: 26px;
  }
}

@media only screen and (max-width: 576px) {
    .hp-agents__cols {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: 35px;
        margin-top: 22px;
        padding: 0 20px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-agents .hp-agents__col {
        padding-left: 0;
        text-align: center;
        border-bottom: 1px solid #C8D6E7;
        padding: 0 0 35px;
    }
}
@media only screen and (max-width: 992px) {
.hp-agents .hp-agents__col:last-child {
    border-bottom: none;
    padding: 0;
}
}

@media only screen and (max-width: 576px) {
    .hp-ecosystems {
        padding: 0 0 48px;
        background: #fff;
    }
}
@media only screen and (max-width: 992px) {
.hp-ecosystems .hp-ecosystems__item.is-open::before {
width: 100%;
}
}

/* The relocated Learn more button (see the JS in section-ecosystems.php) sits under
   the tagline on mobile and spans the panel width, as in the export. */
@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__panel .hp-ecosystems__more {
        display: block;
        margin: 0 0 20px;
    }
    .hp-ecosystems .hp-ecosystems__panel .hp-ecosystems__more .btn {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__bar {
        min-height: 0;
        padding: 24px 0 20px 15px;
        background: #fff;
        border-bottom: 1px solid #AFC4D8;
    }
}

@media only screen and (max-width: 576px) {
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__bar {
        padding: 24px 0 20px 15px;
        background: #fff;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__panel {
        order: 1;
        padding: 29px 30px 35px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__bar {
        order: 0;
        padding: 24px 0 20px 15px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__more .btn.btn-white {
        padding: 10px 22px;
        font-size: 14px;
        line-height: 20px;
        border-radius: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .hp-ecosystems .hp-ecosystems__more .btn.btn-white {
        padding: 10px 20px;
    }
}

/* shevro-right.svg inlined as a data URI - one less request, and it cannot 404.
   Sized 9x13 as drawn; the gap matches the button's own letter spacing. */
@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__more .btn.btn-white::after {
        content: "";
        /* homepage-b.css kills this pseudo-element (display:none) to drop the theme's
           default .btn.btn-white arrow, so the chevron has to switch it back on. */
        display: inline-block;
        /* the same theme rule positions its arrow absolutely at -7px/-7px, so the
           chevron has to be put back into the button's flow as well. */
        position: static;
        align-self: center;
        vertical-align: middle;
        flex: 0 0 auto;
        width: 9px;
        height: 13px;
        margin-left: 10px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='13' viewBox='0 0 9 13' fill='none'%3E%3Cpath d='M1 11.4648L7.27929 6.2321L0.999999 0.999355' stroke='%23001A36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__panel h3 {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.2;
        color: #0061FA;
        margin: 0 0 32px;
    }
}

/* The accordion scrolls the opened item under the fixed header; scroll anchoring would
   fight that by re-adjusting scrollY when the previous item collapses. */
@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__list,
    .hp-ecosystems .hp-ecosystems__item {
        overflow-anchor: none;
    }
}

@media only screen and (max-width: 576px) {
    .hp-ecosystems .hp-ecosystems__list {
        padding: 0 0;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__list {
        padding: 0 0;
    }
}

@media only screen and (max-width: 576px) {
    .hp-ecosystems .hp-ecosystems__txt h2 {
        font-size: 20px;
        line-height: 34px;
        margin: 0 0 22px;
        max-width: 75%;
    }
}

@media only screen and (max-width: 992px) {
    .hp-ecosystems .hp-ecosystems__media {
        order: -1;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
}

/* ---------- testimonials-b, mobile ----------
   Measured off Mobile_A.png at 375: card x20-322 (303 wide), the next card at
   x339 (a 16px gap), both arrow circles 48 across with 16 between them and their
   right edge on the same 20px gutter as the card. Neither edge of the strip is
   faded in the export - the first card is flush with the heading, so a left ramp
   would dim exactly the card the design draws solid. */
@media only screen and (max-width: 992px) {
    /* The section's script hands the arrows to Swiper's navigation module but
       never shows the group; the rule that does starts at 993. */
    .hp-testimonials-b .hp-testimonials-b__nav-group {
        display: flex;
    }
}

@media only screen and (max-width: 576px) {
    .hp-testimonials-b {
        --hp-tb-card: min(80.8vw, 360px);
        --hp-tb-gap: 16px;
        --hp-tb-arrow: 48px;
        --hp-tb-fade: none;
    }
    .hp-testimonials-b .wrapper {
        padding: 0 20px;
    }
    /* Measured off the export by glyph: cap height 14px, x-height 11px and a
       23px baseline pitch - Roboto's 0.7109 / 0.5283 em put that at 20px on a
       23px line. The shared clamp() bottoms out at 26px, which is its desktop
       floor rather than a mobile value. */
    .hp-testimonials-b .hp-testimonials-b__title {
        font-size: 20px;
        line-height: 23px;
        /* The export breaks after "analysts." and again after "&", which is a
           natural wrap only inside a capped column: "Recognized by analysts.
           Appreciated" measures 331.35px at this size and the full gutter-to-
           gutter box is 335, so it would otherwise fit. 80% of that box is 268px
           - wide enough for the 253.49px middle line, narrow enough to push
           "Appreciated" down - and it lands the longest line's ink on x271,
           where the export draws it. */
        max-width: 80%;
    }
    .hp-testimonials-b .hp-testimonials-b__nav-group {
        justify-content: flex-end;
        gap: 16px;
        margin-top: 18px;
    }
    .hp-testimonials-b .hp-testimonials-b__head {
        padding-bottom: 32px;
    }
}

@media only screen and (max-width: 576px) {
    .hp-ecosystems .hp-ecosystems__card {
        border-radius: 16px 16px 0 0;
        padding: 32px 0 0;
    }
}

@media only screen and (max-width: 992px) {
    .hp-cta-assets .hp-cta-assets__txt h2 {
        margin-bottom: 24px;
        font-size: 32px;
        line-height: 1.1667;
    }
}

@media only screen and (max-width: 992px) {
    .hp-cta-assets .hp-cta-assets__txt .btn.btn-white {
        display: inline-block;
        padding: 13px 21px;
        font-size: 16px;
        line-height: 21px;
        border-radius: 60px;
        width: 100%;
        max-width: 375px;
    }
}

@media only screen and (max-width: 992px) {
    .hp-cta-assets {
        padding: 120px 0 0;
        background-image: radial-gradient(circle 38px at 24.29% 8.75%, rgba(197, 215, 253, 1) 0 7px, rgba(216, 231, 255, 1) 7px 17px, rgba(197, 215, 253, .25) 17px, rgba(197, 215, 253, 0) 100%), radial-gradient(circle 38px at 81.66% 11.79%, rgba(197, 215, 253, 1) 0 7px, rgba(216, 231, 255, 1) 7px 17px, rgba(197, 215, 253, .25) 17px, rgba(197, 215, 253, 0) 100%), radial-gradient(circle 38px at 21.52% 64.87%, rgba(197, 215, 253, 1) 0 7px, rgba(216, 231, 255, 1) 7px 17px, rgba(197, 215, 253, .25) 17px, rgba(197, 215, 253, 0) 100%), radial-gradient(circle 38px at 87.14% 79.45%, rgba(197, 215, 253, 1) 0 7px, rgba(216, 231, 255, 1) 7px 17px, rgba(197, 215, 253, .25) 17px, rgba(197, 215, 253, 0) 100%), radial-gradient(circle 11px at 6.88% 74.19%, rgba(197, 215, 253, .95) 0, rgba(197, 215, 253, 0) 100%), radial-gradient(circle 14px at 55.67% 12.37%, rgba(197, 215, 253, .27) 0, rgba(197, 215, 253, 0) 100%), radial-gradient(circle 7.5px at 93.43% 67.85%, rgba(197, 215, 253, .39) 0, rgba(197, 215, 253, 0) 100%), radial-gradient(circle 6.3px at 7.09% 15.25%, rgba(197, 215, 253, 1) 0 5.4px, rgba(197, 215, 253, 0) 6.3px), radial-gradient(circle 6.3px at 16.55% 78.78%, rgba(197, 215, 253, 1) 0 5.4px, rgba(197, 215, 253, 0) 6.3px), radial-gradient(circle 6.3px at 61.7% 96.03%, rgba(197, 215, 253, 1) 0 5.4px, rgba(197, 215, 253, 0) 6.3px), radial-gradient(circle 6.3px at 5.3% 63.50%, rgba(197, 215, 253, 1) 0 5.4px, rgba(197, 215, 253, 0) 6.3px), radial-gradient(circle 5.3px at 87.24% 5.72%, rgba(197, 215, 253, 1) 0 4.4px, rgba(197, 215, 253, 0) 5.3px), radial-gradient(circle 4.5px at 63.05% 58.45%, rgba(197, 215, 253, 1) 0 3.6px, rgba(197, 215, 253, 0) 4.5px), radial-gradient(circle 3.9px at 29.37% 41.86%, rgba(197, 215, 253, 1) 0 3px, rgba(197, 215, 253, 0) 3.9px), radial-gradient(circle 3.6px at 12.34% 60.12%, rgba(197, 215, 253, 1) 0 2.7px, rgba(197, 215, 253, 0) 3.6px);
        margin: 0 0 -50px;
    }
}

/* ---------- client review 14 Sep, points 1-2 ----------
   The three pillar columns fall out of line whenever one heading fits on a single
   line and its neighbours wrap: at 1300 the middle column's body copy started 18px
   above the other two. Equal-length headings would fix it only for one width and
   one font, so instead each column becomes a subgrid of the row it already sits in
   - every h3 then shares one grid row and every paragraph shares the next, and they
   line up at any width whatever the wraps do.
   row-gap goes to 0 because the h3 keeps its own margin-bottom, which is the same
   number; leaving both would double the space. The grid holds three items in three
   tracks here and never wraps, so the gap has no other job at this breakpoint.
   The badge is dropped to the bottom of the row, which is the bottom of the text -
   the client asked for exactly that. */
@media only screen and (min-width: 993px) {
    .hp-pillars .hp-pillars__cols {
        grid-template-rows: auto auto;
        row-gap: 0;
    }
    .hp-pillars .hp-pillars__col {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
    }
    .hp-pillars .hp-pillars__badge {
        align-self: flex-end;
    }
}

/* ---------- client review 14 Sep, points 5-6 ----------
   5) The panel tagline read as a second headline rather than a subhead: 20px
      against a 31px heading. One step down to 18px keeps it clear of the 16px
      body copy, so the three levels stay distinct.
   6) 90px between the section heading and its paragraph is what the export draws,
      and the client knows it - it still reads as a hole, so it comes down to 56px.
   Both restated in vw for 993-1535, where the column is 80vw: px / 1498 * 80. */
@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__panel p.hp-ecosystems__tagline {
        font-size: 18px;
        line-height: 24px;
    }
    .hp-ecosystems .hp-ecosystems__txt h2 {
        margin-bottom: 56px;
    }
}

@media only screen and (max-width: 1535px) and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__panel p.hp-ecosystems__tagline {
        font-size: 0.961vw;         /* 18 */
        line-height: 1.282vw;       /* 24 */
    }
    .hp-ecosystems .hp-ecosystems__txt h2 {
        margin-bottom: 2.991vw;     /* 56 */
    }
}

/* ---------- client review 14 Sep, point 7 ----------
   Measured off the export's open row (Frame 1437255506, 1308 wide):
       col 1  x0   w267      gap 47
       body   x314 w337      gap 47
       pills  x698 w610
   so the columns are 20.413% / 25.765% / the rest with a 3.593% gutter - ours ran
   a 2.6% gutter, which is the "missing spacing between the columns".
   The open row's bar is set further down the file - it is a percentage of the same
   box, so the two stay related wherever its width is tuned. */
@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__panel {
        grid-template-columns: 20.413% 25.765% 1fr;
        column-gap: 3.593%;
    }
}

/* ---------- Figma comment #47 (Amram, 14 Sep) ----------
   "also - no need for hover effect" on the row's CTA. The base rule repaints it
   #0061FA on hover; this holds it at its resting colours instead. The transition
   is dropped too, so nothing animates towards a state that no longer changes.
   :focus-visible is deliberately left alone - that is the keyboard ring, not a
   hover effect, and removing it would make the control unusable without a mouse. */
.hp-ecosystems .hp-ecosystems__more .btn.btn-white,
.hp-ecosystems .hp-ecosystems__more .btn.btn-white:hover,
.hp-ecosystems .hp-ecosystems__more .btn.btn-white:active {
    color: #001A36;
    background-color: transparent;
    border-color: #001B38;
    transition: none;
}

/* ---------- Figma comment #48 (Amram, 14 Sep) ----------
   The row grows first and the content arrives after. The height travel is driven from
   JS (display cannot be animated, and the open height is only knowable once the panel
   is laid out); this is the other half - the contents are held transparent while the
   row is still moving, and fade in when .is-growing comes off. Both breakpoints, since
   the designer asked for the interaction itself rather than a desktop detail. */
.hp-ecosystems .hp-ecosystems__panel > * {
    transition: opacity 0.2s ease;
}
.hp-ecosystems .hp-ecosystems__item.is-growing .hp-ecosystems__panel > * {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hp-ecosystems .hp-ecosystems__panel > * {
        transition: none;
    }
    .hp-ecosystems .hp-ecosystems__item.is-growing .hp-ecosystems__panel > * {
        opacity: 1;
    }
}

/* The bar owns two step changes that used to ride along un-animated beside the panel
   travel: its own min-height (92 -> 0 when the row opens) and the CTA switching from
   display:none to block. The first now transitions on the same stride as the height;
   the second cannot be transitioned at all, so the button is faded with the rest of
   the content instead and its display flip happens while it is already invisible. */
.hp-ecosystems .hp-ecosystems__more {
    transition: opacity 0.2s ease;
}
.hp-ecosystems .hp-ecosystems__item.is-growing .hp-ecosystems__more {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hp-ecosystems .hp-ecosystems__more {
        transition: none;
    }
    .hp-ecosystems .hp-ecosystems__item.is-growing .hp-ecosystems__more {
        opacity: 1;
    }
}

.hp-ecosystems .hp-ecosystems__panel p {
    font-weight: 300;
}

/* ---------- a visual slot can now be a still, a video or a Lottie ----------
   hero-b already listed every element it might receive; agents and ecosystems only
   ever styled <img>, so a video or a player dropped into them would ignore the box
   it is supposed to fill. Same rules, same elements.
   On mobile the agents panel paints its own artwork as a background and hides the
   picture; anything else in that slot has to disappear with it, or it would sit on
   top of the mobile asset. */
.hp-agents__visual video,
.hp-agents__visual lottie-player,
.hp-agents__visual dotlottie-player,
.hp-agents__visual iframe,
.hp-agents__visual canvas {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.hp-ecosystems .hp-ecosystems__media video,
.hp-ecosystems .hp-ecosystems__media lottie-player,
.hp-ecosystems .hp-ecosystems__media dotlottie-player,
.hp-ecosystems .hp-ecosystems__media iframe,
.hp-ecosystems .hp-ecosystems__media canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}

@media only screen and (max-width: 992px) {
    .hp-agents .hp-agents__visual video,
    .hp-agents .hp-agents__visual lottie-player,
    .hp-agents .hp-agents__visual dotlottie-player,
    .hp-agents .hp-agents__visual iframe,
    .hp-agents .hp-agents__visual canvas {
        display: none;
    }
}


/* ------------------------------------------------------------------------- *
 * Client feedback, 16 Sep - Lara.
 * ------------------------------------------------------------------------- */

/* "the menu background and hero background are different"
   The navbar paints itself white on every page (child-theme.css). This hero sits
   directly under the fixed navbar, so the white bar reads as a separate strip on
   top of the hero's #F1F6FF. Matching it to the hero makes the two one surface.
   Only the unscrolled state is touched - once the page scrolls past the hero the
   navbar keeps the site-wide translucent white, as on every other page, and the
   .is-scrolled / .is-active rules that carry !important stay in charge there.
   .hp-2026 is the body hook this layout already sets (extras/setup.php), so no
   other template can pick the rule up. */
.hp-2026 .upstream-partial_navbar:not(.is-scrolled) {
    background-color: #F1F6FF;
}

/* "still not aligned in the center as in the Figma" - agents columns */
.hp-agents .hp-agents__col h3 {
    margin: 0 0 21px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #0061FA;
    text-align: center;
}
.hp-agents .hp-agents__col-txt {
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
}

/* "spacing is still off, not as in the Figma" - ecosystems intro */
@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__txt p {
        font-size: 26px;
        line-height: 1.4;
        color: #001A36;
        margin: 0;
    }
}

@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__txt h2 {
        font-size: 44px;
        font-weight: 700;
        line-height: 1.3;
        color: #001A36;
        margin: 0 0 48px;
    }
}

@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__media {
        position: relative;
        width: 94.3%;
        max-width: 837px;
        margin: -65px -116px 0 0;
    }
}

/* The three blocks above are plain px and sit last in the file, so on their own
   they would shadow the 993-1535 band where the column is 80vw and every value is
   restated as px / 1498 * 80. The band is exactly the width the client reviews at,
   so it is restated here: the new artwork box converted, and the typography the
   band already carried re-emitted unchanged so the px block cannot bury it. */
@media only screen and (max-width: 1535px) and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__txt h2 {
        font-size: 2.350vw;         /* 44 */
        margin: 0 0 2.563vw;        /* 48 */
    }
    .hp-ecosystems .hp-ecosystems__txt p {
        font-size: 1.189vw;
    }
    .hp-ecosystems .hp-ecosystems__media {
        max-width: 44.700vw;        /* 837 */
        margin: -3.471vw -6.195vw 0 0;  /* -65 / -116 */
    }
}

@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__intro {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 1535px) and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__intro {
        gap: 2.136vw;               /* 40 */
        padding-bottom: 2.136vw;    /* 40 */
    }
}

@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__card {
        position: relative;
        background-color: #fff;
        border-radius: 24px 24px 0 0;
        padding: 130px 6.5% 0;
    }
}

/* The blocks above are px and sit last in the file, so in the 993-1535 band they
   would shadow the vw restatements further up. Everything they touch is repeated
   here on the band's own scale: px / 1498 * 80, the vw values the band already
   carried where the number did not change, converted where it did. */
@media only screen and (max-width: 1535px) and (min-width: 993px) {
    .hp-agents .hp-agents__col h3 {
        margin: 0 0 1.228vw;        /* 23 */
        font-size: 1.068vw;         /* 20 */
        line-height: 1.175vw;       /* 22 */
        text-align: center;
    }
    .hp-agents .hp-agents__col-txt {
        max-width: 26.702vw;        /* 500 */
        text-align: center;
        margin: 0 auto;
    }
    .hp-ecosystems .hp-ecosystems__card {
        padding: 6.942vw 6.5% 0;    /* 130 */
    }
}

/* The open row's bar, widened past the panel's first column (20.413%) so the CTA
   clears the column edge. Percentages of the same box, so it holds at every width
   and needs no vw counterpart. */
@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__bar {
        width: 18.413%;
        gap: 0;
        justify-content: space-between;
    }
}

/* The open row's own label repeats the panel heading sitting directly above it, so it
   goes once the row is open. Now that the bar carries the full headline rather than a
   three-letter code, an invisible button left in the flow is not free: at 18.4% of the
   row the label wrapped to two lines and squeezed the CTA from 121px down to 76px. It
   is therefore taken out of the flow - the bar is already position: relative - and the
   CTA is pinned to the same right edge the old layout gave it.
   opacity rather than visibility keeps the control in the accessibility tree, so the
   row still reports its expanded state. */
@media only screen and (min-width: 993px) {
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__toggle {
        opacity: 0;
        pointer-events: none;
        position: absolute;
        left: 0;
        top: 0;
    }
    .hp-ecosystems .hp-ecosystems__item.is-open .hp-ecosystems__bar {
        justify-content: flex-end;
    }
}

/* The section corrects the scroll itself while a row opens, so that the row being read
   stays put as the list changes height. The browser's own scroll anchoring is doing the
   same job in the same frames, and the two corrections land on top of each other - which
   is what reads as a stutter in the travel. Below 992 this was already switched off for
   the same reason; it belongs at every width now that the rows follow the scroll. */
.hp-ecosystems .hp-ecosystems__list,
.hp-ecosystems .hp-ecosystems__item {
    overflow-anchor: none;
}

/* The card carried a solid #0061FA behind its artwork. It is never seen once the
   artwork paints - the animation covers the box exactly, and the mobile PNG has no
   alpha - so all it did was flash blue while the animation loaded, and stand as a
   solid blue panel on any browser where the player fails. The section's own
   background shows instead. */
.hp-agents .hp-agents__visual {
    background-color: transparent;
}

/* Client review 17 Sep: the "/0.1" counters come off the product rows. Hidden rather
   than cut from the template so the markup, and the numbering if it is ever wanted
   back, survive; the toggle is a flex row, so the span leaves no gap behind it. */
.hp-ecosystems .hp-ecosystems__num {
    display: none;
}

/* Client review 21 Sep: the agents columns go back to the left on phones, "so that it
   fits the whole page". Centring was asked for on 16 Sep from a desktop screenshot and
   was written without a breakpoint, so it reached mobile too - where a centred, capped
   column leaves ragged margins on both sides. Desktop keeps the centring. */
@media only screen and (max-width: 992px) {
    .hp-agents .hp-agents__col,
    .hp-agents .hp-agents__col h3,
    .hp-agents .hp-agents__col-txt {
        text-align: left;
    }
    .hp-agents .hp-agents__col-txt {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Client review 22 Sep: "The Burger menu on mobile is white and is not seen on the gray
   bg, can we turn it to blue please?"

   The icon is not a glyph or a bordered span - it is an SVG carried as a data URI in the
   button's background-image, so its colour is a character in the stylesheet, not a CSS
   colour property. child-theme.css already paints the site's burger in the brand blue;
   style.css then repaints it white for every page whose navbar has not been scrolled yet
   (body:not(.search) #wrapper-navbar .upstream-partial_navbar:not(.is-scrolled) ...,
   max-width: 991px). That blanket rule was written for headers sitting on a dark hero.
   This page keeps a light #F1F6FF bar at the top, so the white bars disappear into it.

   Restating the child theme's own blue SVG under a selector one class heavier than the
   white one switches it back for this page alone - the same result as deleting the white
   rule, without changing the burger on the twenty-odd templates that still rely on it.
   Geometry is the child theme's (20x14), so the icon is identical to the scrolled state.

   The band is the white rule's own 991px rather than this file's usual 992px: the point
   is to shadow that one declaration, and at 992px the burger is display:none anyway.
   The open menu is untouched - it swaps in icon-close-text.svg with !important. */
@media only screen and (max-width: 991px) {
    body.hp-2026:not(.search) #wrapper-navbar .upstream-partial_navbar:not(.is-scrolled) .upstream-partial_navbar__hamburger {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='14' viewBox='0 0 20 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 2V0H0V2H20ZM20 6V8H0V6H20ZM20 12V14H0V12H20Z' fill='%230061FA'/%3E %3C/svg%3E ");
    }
}

/* 22 Sep: the mascot was cut off at the footer line for logged-out visitors only.

   WP Rocket's Lazy Rendering marks below-the-fold sections `data-wpr-lazyrender="1"`
   and prints `[data-wpr-lazyrender]{content-visibility:auto}` inline. It does this for
   anonymous traffic only, which is why the page looked right while logged into wp-admin.
   `content-visibility: auto` implies `contain: layout style paint`, and paint containment
   clips descendants to the padding box - so the 77-95px the mascot deliberately hangs
   over the footer was clipped away, exactly at the section boundary.

   The section cannot carry paint containment: it is the one section on the page whose
   content is meant to leave its box (see the min-width 993px block above). The rest of
   the page is unaffected - the footer has nothing outside its box, and the testimonials
   track is already clipped by its own overflow, so their lazy rendering is left alone.

   `content-visibility: visible` is the initial value; the attribute in the selector both
   documents the cause and keeps the rule inert on installs where the feature is off. */
.hp-cta-assets[data-wpr-lazyrender] {
    content-visibility: visible;
}