/**
 * solutions.css
 * Page-level overrides for the 2026 Solutions pages (Personalization, Merchandising,
 * AI Shopping Assistants, AI Search, Commerce-Native AI): page background, header,
 * FAQ, Featured In logos, testimonials slider, logos carousel.
 * Loaded by enqueue_styles_by_page() for $solutions_v2_pages. Section styles live in
 * common-sections.css; table styles in tables.css.
 */

/* -------------------------------------------------------------------------
   Content width: these pages use the full content width (~50px side margins,
   20px on phones). The section wrapper already carries that margin, so the
   section variants drop the inner container padding.
   ------------------------------------------------------------------------- */

.section-wrap.section-intro > .container,
.section-wrap.value-cards > .container,
.section-wrap.features-checklist > .container {
    padding-left: 0;
    padding-right: 0;
}

/* Capability rows keep the container padding on desktop (text/media at 100-1340px)
   but go full width on phones */
@media (max-width: 768px) {
    .section-wrap.feature-row > .container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* -------------------------------------------------------------------------
   Full page background — 2026 re-skin (Figma 1609:5958): white page with
   white → lavender bands (Gradient 3: #f9f9fe → #e3e1fc) behind the
   capability rows, the testimonials and Featured In + FAQ.
   ------------------------------------------------------------------------- */

body,
#page,
#content,
#primary,
#main,
.site,
.site-content,
.inside-article {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* The legacy lavender page-background picture showed through the gap above the footer */
.bg-image-picture.page-bg {
    display: none;
}

/* Intros are white unless they open the capabilities band below */
.section-wrap.section-intro {
    background-color: #ffffff !important;
}

/* Capabilities band: one gradient split over intro + rows (row count varies per page,
   so the middle rows stay flat and only the band's ends fade). !important beats the
   sections' inline background-color. */
.section-wrap.section-intro:has(+ .section-wrap.feature-row) {
    background-color: #f9f9fe !important;
    background-image: linear-gradient(180deg, #f9f9fe 0%, #f3f2fd 100%) !important;
}

.section-wrap.feature-row {
    background-color: #f3f2fd !important;
    background-image: none !important;
}

.section-wrap.feature-row:not(:has(+ .section-wrap.feature-row)) {
    background-image: linear-gradient(180deg, #f3f2fd 0%, #e3e1fc 100%) !important;
}

/* Header — Figma Header - Site 930:999: white bg; bottom rule via --gray-border */
.site-header,
#masthead {
    background-color: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid var(--gray-border, #e8e8e8);
    box-shadow: none;
}

@media (max-width: 945px) {
    #mobile-header {
        background-color: #ffffff !important;
        background-image: none !important;
        border-bottom: 1px solid var(--gray-border, #e8e8e8);
        box-shadow: none;
    }
}

/* -------------------------------------------------------------------------
   QnA + y2026-closing-banner backgrounds
   Featured In + FAQ share one band (Figma 1609:6467): Featured In fades
   #f9f9fe → #f3f2fd, FAQ continues to #e3e1fc; card (.container) stays white.
   Closing banner 1609:6545: white
   (beat inline background-color:#ffffff00)
   ------------------------------------------------------------------------- */

.section-wrap.qna {
    background-color: #e3e1fc !important;
    background-image: linear-gradient(180deg, #f3f2fd 0%, #e3e1fc 100%) !important;
}

.section-wrap.qna .container {
    background-color: #ffffff !important;
}

/* FAQ answer links — Figma 1186:532 */
.section-wrap.qna .answer-wrapper a {
    color: inherit;
    text-decoration-line: underline !important;
    text-decoration-style: solid;
    text-decoration-color: currentColor;
    text-decoration-thickness: auto;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

.section-wrap.image-side.y2026-closing-banner {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* -------------------------------------------------------------------------
   QnA → y2026-closing-banner — Figma 1609:6487 / 1609:6545: the lavender band runs 130px
   below the FAQ card, then the white closing banner starts with its own 130px
   ------------------------------------------------------------------------- */

.section-wrap.qna:has(+ .section-wrap.image-side.y2026-closing-banner) {
    padding-bottom: 130px !important;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 90px;
}

.section-wrap.qna + .section-wrap.image-side.y2026-closing-banner {
    margin-top: 0;
    padding-top: 130px;
}

@media screen and (max-width: 768px) {
    .section-wrap.qna:has(+ .section-wrap.image-side.y2026-closing-banner) {
        padding-bottom: 50px !important;
    }
}

/* Featured In → FAQ card: Featured In's 130px bottom is the only gap (Figma 1609:6467) */
.section-wrap.hp-logos + .section-wrap.qna {
    margin-top: 0;
    padding-top: 0 !important;
}

@media screen and (max-width: 768px) {
    /* Featured In → FAQ: 50px between sections */
    .section-wrap.hp-logos:has(+ .section-wrap.qna) {
        margin-bottom: 0 !important;
        padding-bottom: 50px !important;
    }

    .section-wrap.hp-logos + .section-wrap.qna {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* FAQ mobile — section lavender band (top/bottom); white card full width */
    .section-wrap.qna {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .section-wrap.qna .container {
        background-color: #ffffff !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .section-wrap.qna:has(+ .section-wrap.image-side.y2026-closing-banner) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Closing banner mobile — Figma 736:648: full width, mt 0, pt 50 */
    .section-wrap.image-side.y2026-closing-banner,
    .section-wrap.qna + .section-wrap.image-side.y2026-closing-banner {
        margin-top: 0 !important;
        padding-top: 50px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background-color: #ffffff !important;
        background-image: none !important;
    }

    .section-wrap.image-side.y2026-closing-banner .container {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        background-color: transparent !important;
    }

    /* QnA question — Figma 738:1783: 14px / 600 (live was 16/700) */
    .section-wrap.qna summary {
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 20px !important;
        color: #383700 !important;
    }
}


/* -------------------------------------------------------------------------
   hp-logos — Featured In background
   Figma 1609:6468: top of the Featured In + FAQ band (beat inline #ffffff00)
   ------------------------------------------------------------------------- */

.section-wrap.hp-logos {
    background-color: #f9f9fe !important;
    background-image: linear-gradient(180deg, #f9f9fe 0%, #f3f2fd 100%) !important;
}

/* Featured In (Figma 1609:6468): 130px band, title 36 / 700 #383700,
   logos tinted #8279c1 in a 1000px space-between row */

.section-wrap.hp-logos {
    padding-top: 130px;
    padding-bottom: 130px;
}

.section-wrap.hp-logos h2.title {
    width: auto !important;
    margin-bottom: 50px;
    font-size: 36px !important;
    font-weight: 700;
    line-height: 1.3 !important;
    color: #383700 !important;
}

.section-wrap.hp-logos .images-gallery {
    width: 1000px !important;
    max-width: 100%;
    margin-top: 0;
    justify-content: space-between;
}

.section-wrap.hp-logos .images-gallery li img {
    filter: brightness(0) saturate(100%) invert(52%) sepia(12%) saturate(1785%) hue-rotate(207deg) brightness(91%) contrast(86%);
}

/* Uploads are padded differently, so each logo's width is set from its ink box: 28px-tall
   wordmarks at the Figma widths (NYT 178, AIThority 128, Forbes 110, Inc. 87, Martech 173) */
.section-wrap.hp-logos .images-gallery li.image-item {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 30px;
    margin: 0 !important;
}

.section-wrap.hp-logos .images-gallery li.image-item a {
    position: static;
    transform: none;
}

.section-wrap.hp-logos .images-gallery li img {
    max-width: none;
    max-height: none !important;
    height: auto !important;
    transform: none !important;
}

.section-wrap.hp-logos .images-gallery li img.The.New.York.Times { width: 181px !important; }
.section-wrap.hp-logos .images-gallery li img.AITHORITY          { width: 137px !important; }
.section-wrap.hp-logos .images-gallery li img.Forbes             { width: 110px !important; }
.section-wrap.hp-logos .images-gallery li img.Inc\.              { width: 96px !important; }
.section-wrap.hp-logos .images-gallery li img.Martech.Series     { width: 179px !important; }

@media screen and (max-width: 768px) {
    .section-wrap.hp-logos {
        padding-top: 50px;
    }

    /* Figma's mobile frame clips the desktop row; logos wrap centered at ~22px tall instead */
    .section-wrap.hp-logos .images-gallery {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 24px 36px;
    }

    .section-wrap.hp-logos .images-gallery li img.mobile {
        max-height: none !important;
        transform: none !important;
    }

    .section-wrap.hp-logos .images-gallery li img.The.New.York.Times { width: 143px !important; }
    .section-wrap.hp-logos .images-gallery li img.AITHORITY          { width: 108px !important; }
    .section-wrap.hp-logos .images-gallery li img.Forbes             { width: 87px !important; }
    .section-wrap.hp-logos .images-gallery li img.Inc\.              { width: 76px !important; }
    .section-wrap.hp-logos .images-gallery li img.Martech.Series     { width: 141px !important; }

    .section-wrap.hp-logos h2.title {
        margin-bottom: 30px;
        font-size: 26px !important;
    }
}

/* -------------------------------------------------------------------------
   platform-text-test-slider
   Arrows use negative bottom (-38 / -50 / -70 / -82). Section overflow-y must stay
   visible or they get clipped. Keep arrow fully visible + 50px under it.
   ------------------------------------------------------------------------- */

.section-wrap.platform-text-test-slider {
    /* inline arrow bottom:-38px + 50px clearance */
    padding-bottom: 88px !important;
    /* Figma 1609:6418: Gradient 3 */
    background-color: #e3e1fc !important;
    background-image: var(--gradient-lavender) !important;
    /* Clip horizontally only: arrows below stay visible, but the Smart Slider strip (~950px on
       phones) no longer makes the page scroll sideways. */
    overflow-x: clip !important;
    overflow-y: visible !important;
}

@media screen and (min-width: 1251px) {
    .section-wrap.platform-text-test-slider h2.title,
    .section-wrap.platform-text-test-slider .title {
        font-size: 46px !important;
    }
}

@media screen and (max-width: 768px) {
    .section-wrap.platform-text-test-slider h2.title,
    .section-wrap.platform-text-test-slider .title {
        font-size: 26px !important;
    }
}

@media screen and (max-width: 1730px) {
    .section-wrap.platform-text-test-slider {
        /* common-sections arrow bottom: -50px */
        padding-bottom: 100px !important;
    }
}

@media screen and (max-width: 1676px) {
    .section-wrap.platform-text-test-slider {
        /* common-sections arrow bottom: -70px */
        padding-bottom: 120px !important;
    }
}

@media screen and (max-width: 1550px) {
    .section-wrap.platform-text-test-slider {
        /* common-sections arrow bottom: -82px */
        padding-bottom: 132px !important;
    }
}


/* Trust bar (logos-carousel): moved to common-sections.css (".logos-carousel.trust-bar"), shared by
   the 2026 pages */

/* -------------------------------------------------------------------------
   QA (Trello 3214–3216). body.page-child = the Solutions pages: the homepage and the platform
   pages also load this stylesheet, and their Figma differs here.
   ------------------------------------------------------------------------- */

/* Trust bar: the logos end the bar (Figma 1609:7663: 50 / title / 50 / logos, nothing below) */
body.page-child .section-wrap.logos-carousel {
    padding-bottom: 0;
}

@media screen and (max-width: 768px) {
    body.page-child .section-wrap.logos-carousel {
        padding-bottom: 0;
    }

    /* The slides are 90px tall around ~20px logos, which left a band of white under them */
    body.page-child .section-wrap.logos-carousel .logos-swiper,
    body.page-child .section-wrap.logos-carousel .swiper-wrapper,
    body.page-child .section-wrap.logos-carousel .swiper-slide {
        height: auto !important;
    }

    /* Intro button (Figma ButtonPrimary 1609:5268): full width, 58px pill, 15 / 600, 40px under
       the text (its 20px margin + 20) */
    body.page-child .section-wrap.section-intro .btn-solid {
        margin-top: 20px;
        padding: 0 24px;
        border-radius: 30px;
        font-size: 15px;
        font-weight: 600;
    }

    /* Featured In (Figma 2064:4703): on white, 24px title, one row of 28px logos centred on the
       page and running off both edges, as in Figma */
    body.page-child .section-wrap.hp-logos {
        padding: 50px 0 !important;
        overflow: hidden;
        background-color: #ffffff !important;
        background-image: none !important;
    }

    body.page-child .section-wrap.hp-logos h2.title {
        margin-bottom: 25px;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.95;
    }

    /* 1000px row, logos 81px apart (Figma Frame 108 1609:5636); !important: the gallery is
       otherwise capped at the container width, which packed the logos together */
    body.page-child .section-wrap.hp-logos .images-gallery {
        flex-wrap: nowrap;
        justify-content: space-between !important;
        gap: 0;
        width: 1000px !important;
        min-width: 1000px;
        max-width: none !important;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    body.page-child .section-wrap.hp-logos .images-gallery li {
        flex: 0 0 auto;
        padding: 0 !important;
    }

    /* Figma's logo widths (178 / 128 / 110 / 87 / 173); height follows each file, as some
       uploads carry padding (the Inc. file is square) */
    body.page-child .section-wrap.hp-logos .images-gallery {
        align-items: center;
    }

    body.page-child .section-wrap.hp-logos .images-gallery li img.mobile {
        height: auto !important;
        max-width: none !important;
    }

    body.page-child .section-wrap.hp-logos .images-gallery li img.The.New.York.Times { width: 178px !important; }
    body.page-child .section-wrap.hp-logos .images-gallery li img.AITHORITY          { width: 128px !important; }
    body.page-child .section-wrap.hp-logos .images-gallery li img.Forbes             { width: 110px !important; }
    body.page-child .section-wrap.hp-logos .images-gallery li img.Inc\.              { width: 87px !important; }
    body.page-child .section-wrap.hp-logos .images-gallery li img.Martech.Series     { width: 173px !important; }

    /* FAQ on white, a bordered card (Figma FAQs 2065:5293): the lavender band showed as a
       purple strip above the closing banner */
    body.page-child .section-wrap.qna,
    body.page-child .section-wrap.qna:has(+ .section-wrap.image-side.y2026-closing-banner) {
        padding: 0 20px 50px !important;
        background-color: #ffffff !important;
        background-image: none !important;
    }

    body.page-child .section-wrap.qna .container {
        border: 1px solid #c5c5c5;
        border-radius: 16px !important;
        box-shadow: none;
    }
}

/* -------------------------------------------------------------------------
   QA round 2 (Trello cf4grvfB), Moxie wireframes desktop 1609:5958 / mobile 1609:5163.
   ------------------------------------------------------------------------- */

/* Intro → cards (who benefits, UVPs): the gallery's hidden title still added a 46 / 30px top
   margin. Figma: 80px under the button (40 on phones) */
body.page-child .section-wrap.section-intro + .section-wrap.value-cards .features-container {
    margin-top: 30px !important;
}

/* Featured In: 50px between the title and the logos (ACF sets an inline -19px on the row) */
body.page-child .section-wrap.hp-logos .images-gallery {
    margin-top: 0 !important;
}

@media screen and (min-width: 769px) {
    /* Trust bar: 67px logo strip ending the bar (Figma 1609:6060: 195px in all) */
    body.page-child .section-wrap.logos-carousel .logos-swiper,
    body.page-child .section-wrap.logos-carousel .swiper-wrapper,
    body.page-child .section-wrap.logos-carousel .swiper-slide {
        height: 67px !important;
    }

    /* Capabilities intro: 30px between the text and its button (Figma 1609:6097; the text
       keeps 20px under it) */
    body.page-child .section-wrap.section-intro:has(+ .section-wrap.feature-row) .btn-solid {
        margin-top: 10px;
    }

    /* Closing banner text: 504px (Figma Subheading 1609:6550) */
    body.page-child .image-side.y2026-closing-banner .big-text,
    body.page-child .image-side.y2026-closing-banner .medium-text {
        width: 504px !important;
    }

    /* AI Merchandising: text boxes at the Figma widths so the lines break as designed
       (UVPs 1609:6065, capabilities 1609:6095, who benefits 1609:6437) */
    body.page-id-31341 .section-wrap.value-cards.features-gallery h2.title {
        max-width: 776px;
    }

    body.page-id-31341 .section-wrap.value-cards.features-gallery .sub-title {
        max-width: 744px;
    }

    body.page-id-31341 .section-wrap.section-intro:has(+ .section-wrap.feature-row) h2.title {
        max-width: 766px;
    }

    body.page-id-31341 .section-wrap.section-intro:has(+ .section-wrap.value-cards) h2.title {
        max-width: 726px;
    }

    body.page-id-31341 .section-wrap.section-intro:has(+ .section-wrap.value-cards) .sub-title,
    body.page-id-31341 .section-wrap.section-intro:has(+ .section-wrap.value-cards) .content {
        max-width: 822px;
    }
}

@media screen and (max-width: 768px) {
    body.page-child .section-wrap.section-intro + .section-wrap.value-cards .features-container {
        margin-top: -10px !important;
    }

    /* Trust bar: logos only on phones */
    body.page-child .section-wrap.logos-carousel h2.title {
        display: none;
    }

    body.page-child .section-wrap.logos-carousel .logos-swiper {
        margin-top: 0;
    }

    /* Who benefits button (Figma Link 1609:5609): 151 × 50, 8px corners, 18 / 500, left */
    body.page-child .section-wrap.section-intro:has(+ .section-wrap.value-cards) .btn-solid {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto !important;
        height: 50px;
        padding: 0 21px;
        margin-left: 0 !important;
        margin-right: auto !important;
        align-self: flex-start;
        border-radius: 8px;
        font-size: 18px;
        font-weight: 500;
        line-height: 50px !important; /* the intro button rule sets 58px, which pushed the text down */
    }

    /* FAQ card: 30px above and below its content, as on the homepage and platform pages (QA) */
    body.page-child .section-wrap.qna {
        padding-bottom: 0 !important;
    }

    body.page-child .section-wrap.qna .container {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /* Closing banner text: 20 / 28 (Figma 1609:5701) */
    body.page-child .image-side.y2026-closing-banner .big-text,
    body.page-child .image-side.y2026-closing-banner .medium-text {
        font-size: 20px !important;
        line-height: 28px;
    }
}

/* -------------------------------------------------------------------------
   QA round 2 (Trello DPkOk0TH), Moxie AI Shopping Agents desktop 1609:7594 / mobile 2064:4255.
   ------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
    /* AI Shopping Assistants: text boxes at the Figma widths so the lines break as designed
       (UVPs 1609:7668, capabilities 1609:7698, who benefits 1609:8014 / 1609:8019) */
    body.page-id-31381 .section-wrap.value-cards.features-gallery h2.title {
        max-width: 776px;
    }

    body.page-id-31381 .section-wrap.value-cards.features-gallery .sub-title {
        max-width: 822px;
    }

    body.page-id-31381 .section-wrap.section-intro:has(+ .section-wrap.feature-row) h2.title {
        max-width: 906px;
    }

    body.page-id-31381 .section-wrap.section-intro:has(+ .section-wrap.value-cards) h2.title {
        max-width: 726px;
    }

    body.page-id-31381 .section-wrap.section-intro:has(+ .section-wrap.value-cards) .sub-title,
    body.page-id-31381 .section-wrap.section-intro:has(+ .section-wrap.value-cards) .content {
        max-width: 822px;
    }

    body.page-id-31381 .section-wrap.section-intro + .section-wrap.value-cards .feature-container:nth-child(3) .text-container {
        max-width: 331px;
    }
}

@media screen and (max-width: 768px) {
    /* 20px side margins, 350px content (Figma mobile frames) */
    body.page-child .section-wrap.section-intro,
    body.page-child .section-wrap.value-cards,
    body.page-child .section-wrap.feature-row,
    body.page-child .section-wrap.features-checklist,
    body.page-child .section-wrap.testimonial-stats,
    body.page-child .section-wrap.ai-cta {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Cards: 24px padding (Figma FeatureCard 2064:4291); who-benefits cards add a 1px border and
       12px corners (VerticalCard 2064:4682) */
    body.page-child .section-wrap.value-cards .feature {
        padding: 24px !important;
    }

    body.page-child .section-wrap.section-intro + .section-wrap.value-cards .feature {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
    }

    /* Hero text: 297px on every Solutions page (Figma 1609:5247, 2064:4283) */
    body.page-child .image-side.y2026-hero-card .big-text {
        max-width: 297px !important;
    }
}

/* -------------------------------------------------------------------------
   QA round 2 (Trello pap7enPC), Moxie AI Personalization desktop 1609:6799 / mobile 2064:348.
   ------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
    /* Testimonials end 50px under the arrows (Figma Testimonials 1609:7258, 1609:6418) */
    body.page-child .section-wrap.testimonial-stats {
        padding-bottom: 50px !important;
    }

    /* AI Personalization: text boxes at the Figma widths so the lines break as designed
       (UVPs 1609:6872, capabilities 1609:6901, who benefits 1609:7276) */
    body.page-id-31221 .section-wrap.value-cards.features-gallery h2.title {
        max-width: 676px;
    }

    body.page-id-31221 .section-wrap.value-cards.features-gallery .sub-title {
        max-width: 744px;
    }

    body.page-id-31221 .section-wrap.section-intro:has(+ .section-wrap.feature-row) h2.title {
        max-width: 740px;
    }

    body.page-id-31221 .section-wrap.section-intro:has(+ .section-wrap.feature-row) .sub-title,
    body.page-id-31221 .section-wrap.section-intro:has(+ .section-wrap.feature-row) .content {
        max-width: 700px;
    }

    body.page-id-31221 .section-wrap.section-intro:has(+ .section-wrap.value-cards) h2.title,
    body.page-id-31221 .section-wrap.section-intro:has(+ .section-wrap.value-cards) .sub-title,
    body.page-id-31221 .section-wrap.section-intro:has(+ .section-wrap.value-cards) .content {
        max-width: 822px;
    }

    /* Who-benefits cards: 20 / 28 text here (Figma Descr 1609:7287) */
    body.page-id-31221 .section-wrap.section-intro + .section-wrap.value-cards .feature .text-container,
    body.page-id-31221 .section-wrap.section-intro + .section-wrap.value-cards .feature .text-container p {
        font-size: 20px;
        line-height: 28px;
    }

    body.page-id-31221 .section-wrap.section-intro + .section-wrap.value-cards .feature-container:nth-child(3) .text-container {
        max-width: 339px;
    }
}

/* -------------------------------------------------------------------------
   AI Search QA round 3: the AI Search wireframe (desktop 1216:1745) keeps 20px card text.
   ------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
    /* Intro text: 926px, 20 / 30 (1216:1823, 1216:1853, 1216:2184) */
    body.page-id-31553 .section-wrap.section-intro .sub-title,
    body.page-id-31553 .section-wrap.section-intro .content,
    body.page-id-31553 .section-wrap.value-cards.features-gallery .sub-title {
        max-width: 926px;
        line-height: 30px;
    }

    /* UVP cards: 20 / 30, 25px under the title (1216:1829) */
    body.page-id-31553 .section-wrap.value-cards.cards-lavender .feature .text-container,
    body.page-id-31553 .section-wrap.value-cards.cards-lavender .feature .text-container p {
        font-size: 20px;
        line-height: 30px;
    }

    body.page-id-31553 .section-wrap.value-cards.cards-lavender .feature .text-container {
        margin-top: 25px;
    }

    /* Who-benefits cards: 20 / 28 (1216:2192) */
    body.page-id-31553 .section-wrap.section-intro + .section-wrap.value-cards .feature .text-container,
    body.page-id-31553 .section-wrap.section-intro + .section-wrap.value-cards .feature .text-container p {
        font-size: 20px;
        line-height: 28px;
    }

    body.page-id-31553 .section-wrap.section-intro + .section-wrap.value-cards .feature .text-container {
        margin-top: 25px;
    }

    /* Closing banner: "Scale Your Storefront With / AI Search" at 40 / 50 over 548px of text */
    body.page-id-31553 .image-side.y2026-closing-banner h2.title {
        max-width: 500px;
        line-height: 50px;
    }

    body.page-id-31553 .image-side.y2026-closing-banner .big-text,
    body.page-id-31553 .image-side.y2026-closing-banner .medium-text {
        width: 548px !important;
    }
}

/* -------------------------------------------------------------------------
   AI Shopping Agents check against Moxie desktop 1609:7594 / mobile 2064:4255.
   ------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
    /* Who-benefits cards end their section; Featured In follows with its own 130px
       (Figma who benefits 1609:8013 / 1609:7276: 683px, nothing under the cards) */
    body.page-child .section-wrap.section-intro + .section-wrap.value-cards:has(+ .section-wrap.hp-logos) {
        padding-bottom: 0 !important;
    }

    body.page-child .section-wrap.section-intro + .section-wrap.value-cards:has(+ .section-wrap.hp-logos) .features-container {
        margin-bottom: 0 !important;
    }
}

@media screen and (max-width: 768px) {
    /* "Why … Love Fast Simon": heading on the 20px margin, 329px of text (Figma 2064:4632) */
    body.page-child .section-wrap.features-checklist h2.title {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.page-child .section-wrap.features-checklist .feature .text-container {
        width: 329px !important;
        max-width: calc(100vw - 61px) !important;
    }
}

/* Commerce-Native AI: text boxes and sizes at the Figma values (2569:4502) so every line breaks as designed */
@media screen and (min-width: 769px) {
    body.page-id-31914 .section-wrap.logos-carousel + .section-wrap.value-cards.features-gallery h2.title {
        max-width: 776px;
    }

    body.page-id-31914 .section-wrap.feature-row .big-text {
        font-size: 20px;
        line-height: 28px;
    }

    body.page-id-31914 .section-wrap.section-intro:has(+ .table-flat) h2.title {
        max-width: 894px;
    }

    body.page-id-31914 .section-wrap.section-intro:has(+ .table-flat) .sub-title {
        max-width: 1098px;
    }

    body.page-id-31914 .section-wrap.section-intro + .section-wrap.table-flat h2.title {
        max-width: 930px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 1230 + the border, so the content is Figma's 1230 wide */
    body.page-id-31914 .table-flat .table-wrapper.table-lavender.table-grouped {
        max-width: 1232px;
    }

    body.page-id-31914 .section-wrap.section-intro:has(+ .value-cards) .content {
        max-width: 614px;
    }

    body.page-id-31914 .section-wrap.section-intro + .section-wrap.value-cards .feature .text-container p {
        font-size: 18px;
        line-height: 27px;
    }

    body.page-id-31914 .section-wrap.three-features-lp h2.title {
        max-width: 974px;
    }

    body.page-id-31914 .section-wrap.qna .answer-wrapper p {
        max-width: 1150px;
    }
}

/* Figma's 46px titles; below 1251px the tablet sizes of tables.css / common-sections.css apply */
@media screen and (min-width: 1251px) {
    body.page-id-31914 .section-wrap.feature-row h2.title,
    body.page-id-31914 .section-wrap.section-intro + .section-wrap.table-flat h2.title {
        font-size: 46px !important;
        line-height: 1.1;
    }
}

/* Phones (no Figma mobile frame): no one-word last lines */
@media screen and (max-width: 768px) {
    body.page-id-31914 .section-wrap.feature-row h2.title,
    body.page-id-31914 .section-wrap.table-flat + .section-wrap.table-flat h2.title {
        text-wrap: balance;
    }

    body.page-id-31914 .section-wrap.section-intro .sub-title,
    body.page-id-31914 .table-flat table.table-grouped tbody td {
        text-wrap: pretty;
    }
}

/* Commerce-Native AI — client QA against Figma 2569:4502 */
/* Hero badge 2569:4540: white at 80%, black 15px / 700 (the purple pill was an earlier design) */
body.page-id-31914 .image-side.y2026-hero-card .content {
    padding: 5px 12px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #000000;
}

body.page-id-31914 .image-side.y2026-hero-card .content p {
    color: #000000;
}

/* Highlights 2569:4545: one line on desktop, as in Figma */
@media screen and (min-width: 1025px) {
    body.page-id-31914 .image-side.y2026-hero-card .medium-text {
        white-space: nowrap;
    }
}

/* "One Shopper, One Product, One Moment" 2569:4647: white band, 80px above and below */
body.page-id-31914 .section-wrap.feature-row,
body.page-id-31914 .section-wrap.feature-row:not(:has(+ .section-wrap.feature-row)) {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* "Merchants Define the Strategy" 2569:4697: 130px from the intro above, title 20px over its subtitle,
   subtitle 70px over the table */
body.page-id-31914 .section-wrap.section-intro + .section-wrap.table-flat {
    padding-top: 0 !important;
}

body.page-id-31914 .section-wrap.section-intro:has(+ .section-wrap.table-flat) .sub-title {
    margin-bottom: 0;
}

/* !important: tables.css sets .table-flat title margins with !important */
body.page-id-31914 .section-wrap.section-intro + .section-wrap.table-flat h2.title {
    margin-bottom: 20px !important;
}

body.page-id-31914 .section-wrap.section-intro + .section-wrap.table-flat .sub-title {
    margin-bottom: 0 !important;
    font-size: 20px;
    line-height: 1.4;
}

body.page-id-31914 .section-wrap.section-intro + .section-wrap.table-flat .table-wrapper {
    margin-top: 70px;
}

/* Its table 2569:4701: 18px / 400 rows (no 76px minimum), 24px / 600 headings, the left heading white */
body.page-id-31914 .table-flat table.table-lavender.table-centered thead th,
body.page-id-31914 .table-flat table.table-lavender.table-centered tbody td {
    height: auto;
    padding: 14.4px 19.2px;
    font-weight: 400;
}

body.page-id-31914 .table-flat table.table-lavender.table-centered tbody td {
    font-size: 18px;
    line-height: 1.5;
}

body.page-id-31914 .table-flat table.table-lavender.table-centered .cell-text {
    display: inline;
    max-width: none;
}

body.page-id-31914 .table-flat table.table-lavender.table-centered thead th {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

body.page-id-31914 .table-flat table.table-lavender.table-centered thead th:last-child {
    background-color: #e3e1fc;
}

/* "Measuring the impact of Commerce-Native AI" 2569:4816: 20px / 600 */
body.page-id-31914 .section-wrap.section-intro h3.sub-title.like-blog-header-text {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

@media screen and (min-width: 769px) {
    body.page-id-31914 .section-wrap.feature-row {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
}

@media screen and (max-width: 768px) {
    body.page-id-31914 .section-wrap.section-intro + .section-wrap.table-flat .table-wrapper {
        margin-top: 30px;
    }

    body.page-id-31914 .table-flat table.table-lavender.table-centered tbody td {
        font-size: 16px;
    }

    body.page-id-31914 .table-flat table.table-lavender.table-centered thead th {
        font-size: 18px;
    }

    body.page-id-31914 .section-wrap.section-intro h3.sub-title.like-blog-header-text {
        font-size: 18px;
    }


}

/* Commerce-Native AI hero — Figma 2813:1425 (Nov 2026): text at the content edge, then 42px / 30px / 42px between
   title, body, "Proven To Deliver…" (24px / 800) and the button; the visual's card 660px wide at x 680-1340
   (the image has ~10% transparent margin around the card), centred on the 434px text block; 574px hero.
   The 42px above the body is the section's "big text top margin" field (printed inline) */
@media screen and (min-width: 1025px) {
    body.page-id-31914 .image-side.y2026-hero-card .divider {
        justify-content: space-between;
        gap: 0;
    }

    body.page-id-31914 .image-side.y2026-hero-card .content-container {
        flex: 0 0 548px;
        align-items: flex-start;
        margin-top: 0 !important;
    }

    body.page-id-31914 .image-side.y2026-hero-card .image-container {
        flex: 0 0 auto;
        width: min(720px, calc(100% - 590px));
        margin: 0 15px 0 0 !important;
        padding: 0;
        justify-content: center;
    }

    /* the image may sit in a <picture> (desktop/mobile sources) */
    body.page-id-31914 .image-side.y2026-hero-card .image-container picture,
    body.page-id-31914 .image-side.y2026-hero-card .image-container img {
        width: 100% !important;
        max-width: none;
        height: auto;
    }

    body.page-id-31914 .image-side.y2026-hero-card .medium-text {
        margin-top: 30px;
    }

    body.page-id-31914 .image-side.y2026-hero-card .medium-text,
    body.page-id-31914 .image-side.y2026-hero-card .medium-text p {
        font-size: 24px;
        font-weight: 800;
        line-height: 1.4;
    }

    body.page-id-31914 .image-side.y2026-hero-card .medium-text ~ .contact-button {
        margin-top: 42px;
        margin-bottom: 0;
    }
}

/* Tablet and phones (no mobile design): "Proven To Deliver…" as a bold 18px line that wraps (the old one-line
   highlights rule shrank it to 12.5px at 390) */
@media screen and (max-width: 1024px) {
    body.page-id-31914 .image-side.y2026-hero-card .medium-text,
    body.page-id-31914 .image-side.y2026-hero-card .medium-text p {
        white-space: normal;
        font-size: 18px;
        font-weight: 800;
        line-height: 1.4;
    }
}