/* ============================================================
   Product Page template — sections rendered by
   template-parts/template-product-page.php and partials/pp-*.php.

   Convention: every selector is .pp-<section>__<element>--<modifier>.
   No Kadence classes are referenced — the template renders own DOM.

   This file is the production stylesheet. The SCSS source at
   assets/sass/page-product-page.scss mirrors it for editor convenience
   but is compiled by hand (no build pipeline in this project).
   ============================================================ */

/* ------------------------------------------------------------
   Container / layout primitives
   ------------------------------------------------------------ */
.pp-main {
    font-family: Inter, "Helvetica Neue", helvetica, arial, sans-serif;
    color: #54565a;
    overflow-x: hidden;
}

.pp-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Per-section width overrides — mirrors the per-section rowlayout widths used
   in the 11916 reference. Order matches DOM order top-to-bottom. */
.pp-hero .pp-container        { max-width: 1080px; }
.pp-logos .pp-container       { max-width: 1080px; }
.pp-features .pp-container    { max-width: 1240px; }
.pp-storyline .pp-container   { max-width: 1080px; }
.pp-counters .pp-container    { max-width: 1240px; }
.pp-altrows .pp-container     { max-width: 1080px; }
.pp-testimonials .pp-container { max-width: 1240px; }
.pp-integrations .pp-container { max-width: 1000px; }
.pp-faq .pp-container         { max-width: 1040px; }
.pp-cta .pp-container         { max-width: 1200px; }
.pp-related .pp-container     { max-width: 1200px; }

/* Wrap in :where() so these section-level defaults have 0 specificity for
   the .pp-main selector — per-section heading classes (.pp-features__card-heading
   etc.) reliably win without needing artificial specificity bumps. */
/* Reset ul/ol defaults. main.css:125 has `.site-main ul, .site-main ol { padding-left: 20px }`
   (specificity 0,1,1). To override we need at least 0,1,1 — using `:where()` here would
   drop it to 0,1,0 and lose. With matching specificity, source order decides; this file
   is enqueued after main.css, so our reset wins. */
.pp-main ul,
.pp-main ol {
    padding-left: 0;
    margin: 0;
}

:where(.pp-main) h2 {
    font-size: 36px;
    line-height: 1.2;
    color: #041d35;
    font-weight: 700;
    margin: 0 0 24px;
}

:where(.pp-main) h3 {
    font-size: 22px;
    line-height: 1.3;
    color: #041d35;
    font-weight: 700;
    margin: 0 0 12px;
}

@media (max-width: 768px) {
    :where(.pp-main) h2 { font-size: 28px; }
    :where(.pp-main) h3 { font-size: 20px; }
    .pp-container { padding: 0 16px; }
}

/* ------------------------------------------------------------
   1. HERO
   ------------------------------------------------------------ */
.pp-hero {
    padding: 75px 0 60px;
}

.pp-hero .pp-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-gap: 48px;
    gap: 48px;
    align-items: center;
}

.pp-hero__eyebrow {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #336aea;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

/* <mark> inside eyebrow is used purely for inline color highlight (e.g.
   "Ivy & Ocelot" in brand blue). Browsers default to yellow background;
   strip it so only the inline color attribute shows. */
.pp-hero__eyebrow mark {
    background: transparent;
}

.pp-hero__h1 {
    font-size: 50px;
    line-height: 1.2;
    color: #092362;
    font-weight: 700;
    margin: 0 0 20px;
}

.pp-hero__subhead {
    font-size: 18px;
    line-height: 1.4;
    color: #404040;
    margin: 0 0 32px;
    max-width: 540px;
}

.pp-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

/* ------------------------------------------------------------
   Hero CTA buttons — pill shape, matches 11916 reference (no arrow icon)
   ------------------------------------------------------------ */
.pp-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-family: Inter, "Helvetica Neue", helvetica, arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pp-hero__cta--primary {
    background: #336aea;
    color: #fff;
    border-color: #336aea;
}
.pp-hero__cta--primary:hover,
.pp-hero__cta--primary:focus {
    background: #001a49;
    border-color: #001a49;
    color: #fff;
}

.pp-hero__cta--secondary {
    background: transparent;
    color: #336aea;
    border-color: #336aea;
}
.pp-hero__cta--secondary:hover,
.pp-hero__cta--secondary:focus {
    background: #336aea;
    color: #fff;
}

.pp-hero__image {
    margin: 0;
}

.pp-hero__image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 480px;
    margin-left: auto;
}

/* Tablet & down: center the CTA cluster horizontally. */
@media (max-width: 1024px) {
    .pp-hero__ctas { justify-content: center; }
}

@media (max-width: 768px) {
    .pp-hero { padding: 40px 0 30px; }
    .pp-hero .pp-container { grid-template-columns: 1fr; gap: 24px; }
    .pp-hero__h1 { font-size: 32px; }
    .pp-hero__subhead { font-size: 16px; }
    .pp-hero__image img { margin: 0 auto; }
}

/* Phones: full-width stacked buttons. */
@media (max-width: 576px) {
    .pp-hero__cta { width: 100%; }
}

/* ------------------------------------------------------------
   2. LOGOS
   ------------------------------------------------------------ */
.pp-logos {
    padding: 30px 0;
    background: #fff;
    border-top: 1px solid #d4dfe5;
    border-bottom: 1px solid #d4dfe5;
}

.pp-logos__heading {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #6d6e76;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 24px;
}

.pp-logos__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pp-logos__item {
    flex: 0 0 auto;
}

.pp-logos__link {
    display: block;
}

.pp-logos__item img {
    display: block;
    /* Fixed height + auto width: SVGs without explicit width/height attrs
       (e.g. Susan_G_Komen_Logo.svg has only viewBox) would render 0×0 under
       a max-height rule because the browser has no intrinsic dimensions to
       cap. With height set explicitly, browsers compute width from viewBox. */
    height: 45px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

@media (max-width: 768px) {
    /* On phones/tablets the row wraps; centering keeps the last partial row
       neat instead of left-aligning leftover items. */
    .pp-logos__list {
        justify-content: center;
        gap: 20px 32px;
    }
    .pp-logos__item { display: flex; justify-content: center; }
    .pp-logos__item img { height: 40px; max-width: 130px; }
}

/* ------------------------------------------------------------
   3. FEATURES (dark-blue cards)
   ------------------------------------------------------------ */
.pp-features {
    background: #092362;
    color: #fff;
    padding: 80px 0;
}

.pp-features__header {
    text-align: center;
    margin-bottom: 48px;
}

.pp-features__heading {
    color: #fff;
    margin-bottom: 16px;
}

.pp-features__subhead {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    line-height: 1.5;
    max-width: 720px;
    margin: 0 auto;
}

.pp-features__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* Default — fall back to a 3-col grid which auto-wraps. Count-aware
       modifiers below pick the best column count for N so we never end up
       with a single orphan card sitting alone on the last row. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: stretch;
}

/* Count-aware column choices (`pp-features__list--N` is set by the partial). */
.pp-features__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-features__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-features__list--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } /* 3 + 2 */
.pp-features__list--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } /* 3 × 2 */
.pp-features__list--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 40px; } /* 4 + 3 */
.pp-features__list--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 40px; } /* 4 × 2 */

.pp-features__card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
}

.pp-features__icon {
    margin: 0 0 4px;
}

.pp-features__icon img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.pp-features__card-heading {
    color: #3cebb7;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.pp-features__card-text {
    color: #d4dfe5;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    letter-spacing: -0.12px;
}

@media (max-width: 768px) {
    .pp-features { padding: 50px 0; }
    /* Override every count-aware modifier (same specificity, but our media
       block is later in the file) so all feature lists collapse to 1 col. */
    .pp-features__list,
    .pp-features__list--3,
    .pp-features__list--4,
    .pp-features__list--5,
    .pp-features__list--6,
    .pp-features__list--7,
    .pp-features__list--8 {
        grid-auto-flow: row;
        grid-auto-columns: unset;
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .pp-features__heading { font-size: 26px; }
    .pp-features__icon img { width: 28px; height: 28px; }
}

/* ------------------------------------------------------------
   4. STORYLINE
   ------------------------------------------------------------ */
.pp-storyline {
    padding: 75px 0;
    background: #fff;
}

.pp-storyline__heading {
    text-align: center;
    margin-bottom: 32px;
}

.pp-storyline__embed {
    /* The embed sets its own aspect ratio via inline padding-bottom on
       a wrapper div (Storylane's .sl-embed). We just provide width context. */
    max-width: 100%;
}

/* When the embed is a Storylane snippet (.sl-embed), its inline styles win.
   For other embeds we keep the wrapper full-width and let the iframe decide. */
.pp-storyline__embed iframe {
    max-width: 100%;
}

@media (max-width: 768px) {
    .pp-storyline { padding: 50px 0; }
}

/* ------------------------------------------------------------
   5. COUNTERS (animated count-up over blue bg)
   ------------------------------------------------------------ */
.pp-counters {
    background: #336aea;
    color: #fff;
    padding: 70px 0;
}

.pp-counters__inner {
    display: grid;
    /* Default split (1/1.8) suits long descriptions like 11916. For wider counter
       lists (`--3` modifier, see below) we narrow the heading column so labels
       like "of alumni donors" have room to sit on 2 lines instead of clipping. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
    gap: 56px;
    /* Center the counter list vertically against the heading. Long headings
       (6+ lines) used to push the heading column tall while the stat row
       stayed glued to the top. */
    align-items: center;
    max-width: 1240px;
}

.pp-counters__inner--3 {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 2.25fr);
    gap: 40px;
}

.pp-counters__header {
    /* Lives in column 1 of pp-counters__inner; holds the heading + optional
       subhead so the grid sees a single cell instead of two siblings. */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pp-counters__heading {
    color: #fff;
    font-size: 40px;
    line-height: 1;
    margin: 0;
    max-width: 360px;
}

.pp-counters__subhead {
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    max-width: 360px;
}

/* ------------------------------------------------------------
   Section-level scroll reveal (slide-in from bottom).
   Applied to .pp-features and .pp-counters; JS adds .is-visible when the
   section crosses the viewport threshold. Both sections wait a beat before
   sliding so the animation reads as deliberate, not as the page settling;
   pp-counters lags further so when both are above the fold at once they
   animate in sequence instead of simultaneously.
   ------------------------------------------------------------ */
.pp-section-reveal-init {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
    /* No `will-change`: it spawns a compositor layer that exposed a 1px
       hairline gap on the seam between pp-features (#092362) and
       pp-counters (#336aea). The animation is short and infrequent, so
       browsers handle it fine without the hint. */
}
/* Bleed pp-features 1px into the next section so any subpixel rounding
   from the transform/opacity transition can't expose the page bg as a
   hairline at the seam. */
.pp-features {
    margin-bottom: -1px;
    position: relative;
}
.pp-section-reveal-init.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.pp-features.pp-section-reveal-init {
    transition-delay: 150ms;
}
.pp-counters.pp-section-reveal-init {
    transition-delay: 300ms;
}
@media (prefers-reduced-motion: reduce) {
    .pp-section-reveal-init,
    .pp-section-reveal-init.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.pp-counters__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Count-aware layouts. The partial appends `pp-counters__list--N` where N is
   the validated item count, so we can adapt the grid without measuring DOM. */
.pp-counters__list--1 { grid-template-columns: 1fr; max-width: 480px; }
.pp-counters__list--2 { grid-template-columns: repeat(2, 1fr); }
.pp-counters__list--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pp-counters__list--4 { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }

.pp-counters__item {
    color: #d4dfe5;
}

.pp-counters__row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 6px;
    min-height: 48px;
}

.pp-counters__number {
    font-size: 48px;
    line-height: 1;
    color: #61f2c2;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pp-counters__labels {
    display: flex;
    flex-direction: column;
    color: #61f2c2;
    font-weight: 700;
    line-height: 0.9;
    padding-bottom: 4px;
}

.pp-counters__label {
    font-size: 20px;
    line-height: 0.95;
}

.pp-counters__description {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: #d4dfe5;
    max-width: 220px;
}

@media (max-width: 768px) {
    .pp-counters { padding: 40px 0; }
    .pp-counters__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .pp-counters__heading { font-size: 30px; }
    .pp-counters__list {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .pp-counters__number { font-size: 40px; }
    .pp-counters__label { font-size: 20px; }
}

/* ------------------------------------------------------------
   6. ALT ROWS
   ------------------------------------------------------------ */
.pp-altrows {
    padding: 75px 0;
}

.pp-altrows__heading {
    text-align: center;
    margin-bottom: 48px;
}

.pp-altrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    margin-bottom: 64px;
}

.pp-altrow:last-child {
    margin-bottom: 0;
}

.pp-altrow--image-left .pp-altrow__image { order: 1; }
.pp-altrow--image-left .pp-altrow__text  { order: 2; }
.pp-altrow--image-right .pp-altrow__image { order: 2; }
.pp-altrow--image-right .pp-altrow__text  { order: 1; }

.pp-altrow__image {
    margin: 0;
}

.pp-altrow__image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 540px;
}

.pp-altrow--image-right .pp-altrow__image img { margin-left: auto; }

.pp-altrow__heading {
    margin-bottom: 16px;
    font-size: 33px;
    line-height: 1.15;
    color: #336aea;
}

.pp-altrow__body {
    font-size: 17px;
    line-height: 1.55;
    color: #404040;
    margin-bottom: 20px;
}

.pp-altrow__body p { margin: 0 0 12px; }
.pp-altrow__body p:last-child { margin-bottom: 0; }
.pp-altrow__body strong { color: #041d35; }

/* Text-link CTA with trailing arrow — matches 11916 reference. The arrow uses
   a real ⟶ character so it stays in the link's text run for keyboard navigation. */
.pp-altrow__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    color: #336aea;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}
.pp-altrow__cta::after {
    content: "\27F6"; /* ⟶ */
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.pp-altrow__cta:hover,
.pp-altrow__cta:focus {
    color: #001a49;
}
.pp-altrow__cta:hover::after {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .pp-altrows { padding: 50px 0; }
    .pp-altrow {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 40px;
    }
    .pp-altrow__heading { font-size: 24px; }
    .pp-altrow--image-left .pp-altrow__image,
    .pp-altrow--image-right .pp-altrow__image { order: 0; }
    .pp-altrow--image-left .pp-altrow__text,
    .pp-altrow--image-right .pp-altrow__text { order: 1; }
    .pp-altrow__image img { margin: 0 auto; }
}

/* ------------------------------------------------------------
   7. TESTIMONIALS
   ------------------------------------------------------------ */
.pp-testimonials {
    padding: 80px 0;
    background: #092362;
    color: #fff;
    overflow: hidden;
}

.pp-testimonials__heading {
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
}

.pp-testimonials--static .pp-testimonials__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.pp-testimonial {
    padding: 0 56px;
}

.pp-testimonial__quote {
    margin: 0 0 32px;
    font-size: 40px;
    line-height: 1.2;
    color: #fff;
    font-weight: 400;
}

.pp-testimonial__quote p { margin: 0 0 12px; }
.pp-testimonial__quote p:last-child { margin-bottom: 0; }

.pp-testimonial__quote mark,
.pp-testimonial__quote .kt-highlight {
    background: transparent;
    color: #3cebb7;
    padding: 0;
}

.pp-testimonial__attribution {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* "Author photo" is often a wide SVG wordmark (e.g. Savanah-Whitney.svg on
   the student-engagement slide), not a face. Keep height fixed at 56px and
   let width follow the aspect ratio — no circular crop. */
.pp-testimonial__photo {
    height: 56px;
    width: auto;
    max-width: 200px;
    flex: 0 0 auto;
    object-fit: contain;
}

.pp-testimonial__person {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-testimonial__name {
    margin: 0;
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
}

.pp-testimonial__title {
    margin: 4px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.pp-testimonial__org-logo {
    flex: 0 0 auto;
    max-height: 40px;
    max-width: 140px;
    width: auto;
    object-fit: contain;
    margin-left: auto;
}

/* Extended slide — intro headline above quote; stats/CTA stack below the
   main content. Only kicks in when partial sets `.pp-testimonial--has-extras`. */
.pp-testimonial--has-extras .pp-testimonial__extras {
    margin-top: 32px;
}

.pp-testimonial__intro {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pp-testimonial__extras {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pp-testimonial__stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 32px;
}

.pp-testimonial__stat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
}

.pp-testimonial__stat-number {
    font-size: 48px;
    line-height: 1;
    color: #3cebb7;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pp-testimonial__stat-labels {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.15;
}

.pp-testimonial__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: background 0.2s ease, color 0.2s ease;
}

.pp-testimonial__cta::after {
    content: "\27F6"; /* ⟶ */
    transition: transform 0.2s ease;
}

.pp-testimonial__cta:hover,
.pp-testimonial__cta:focus {
    background: #fff;
    color: #092362;
}

.pp-testimonial__cta:hover::after {
    transform: translateX(4px);
}

/* Slider mode */
.pp-testimonials--slider .pp-testimonials__slider {
    position: relative;
    overflow: hidden;
}

.pp-testimonials--slider .swiper-wrapper {
    align-items: stretch;
}

.pp-testimonials--slider .pp-testimonial {
    padding: 0 96px;
    height: auto;
    box-sizing: border-box;
}

.pp-testimonials--slider .swiper-button-prev,
.pp-testimonials--slider .swiper-button-next {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #fff;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pp-testimonials--slider .swiper-button-prev { left: 24px; }
.pp-testimonials--slider .swiper-button-next { right: 24px; }

.pp-testimonials--slider .swiper-button-prev::after,
.pp-testimonials--slider .swiper-button-next::after {
    font-family: 'swiper-icons';
    font-size: 16px;
    font-weight: 700;
}

.pp-testimonials--slider .swiper-button-prev:hover,
.pp-testimonials--slider .swiper-button-next:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* Hide pagination dots — 11916 reference uses arrows only. */
.pp-testimonials--slider .swiper-pagination { display: none; }

@media (max-width: 768px) {
    .pp-testimonials { padding: 50px 0; }
    .pp-testimonial { padding: 0 8px; }
    .pp-testimonial__quote { font-size: 22px; line-height: 1.35; margin-bottom: 24px; }
    .pp-testimonial__attribution { flex-wrap: wrap; gap: 16px; }
    .pp-testimonial__org-logo { max-height: 32px; max-width: 110px; margin-left: 0; }
    /* Extended-slide layout collapses to single column on mobile. */
    .pp-testimonial__stat-number { font-size: 40px; }
    /* Slider mode: 64px is more than half the viewport width on small phones,
       which is what made the quote column read as a tall narrow strip. */
    .pp-testimonials--slider .pp-testimonials__slider { padding: 0 8px; }
    .pp-testimonials--slider .pp-testimonial { padding: 0 48px; }
    .pp-testimonials--slider .swiper-button-prev { left: 4px; }
    .pp-testimonials--slider .swiper-button-next { right: 4px; }
    .pp-testimonials--slider .swiper-button-prev,
    .pp-testimonials--slider .swiper-button-next { width: 32px; height: 32px; }
}

@media (max-width: 576px) {
    .pp-testimonial__quote { font-size: 18px; }
}

/* ------------------------------------------------------------
   8. INTEGRATIONS (logo grid)
   ------------------------------------------------------------ */
.pp-integrations {
    padding: 40px 0;
    background: #fff;
    border-top: 1px solid #d4dfe5;
    border-bottom: 1px solid #d4dfe5;
}

.pp-integrations__heading {
    text-align: center;
    color: #092362;
    font-size: 40px;
    margin: 0 0 32px;
}

/* Flex wrap so an odd last row (e.g. 11 logos → 6 + 5) is centered instead of
   left-aligned. Each item takes a fixed share of the row; wrap fills the
   leftover. */
.pp-integrations__list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 24px;
    row-gap: 30px;
    align-items: center;
}

.pp-integrations__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 6 per row at 1000-container max-width: 6×130 + 5×24 = 900 → fits 952. */
    width: 130px;
}

.pp-integrations__item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .pp-integrations { padding: 30px 0; }
    .pp-integrations__heading { font-size: 28px; line-height: 30px; }
    .pp-integrations__list { column-gap: 24px; row-gap: 24px; }
    .pp-integrations__item { width: 100px; }
    .pp-integrations__item img { max-height: 48px; }
}

/* ------------------------------------------------------------
   9. FAQ
   ------------------------------------------------------------ */
.pp-faq {
    padding: 75px 0;
    background: #fff;
}

.pp-faq__heading {
    text-align: center;
    color: #092362;
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 30px;
}

.pp-faq__list {
    max-width: 800px;
    margin: 0 auto;
}

.pp-faq__item {
    background: #f4f4f4;
    margin-bottom: 16px;
}

.pp-faq__q {
    cursor: pointer;
    list-style: none;
    padding: 32px 70px 32px 35px;
    font-size: 23px;
    font-weight: 700;
    color: #336aea;
    line-height: 1.2;
    position: relative;
    user-select: none;
}

.pp-faq__q::-webkit-details-marker { display: none; }

.pp-faq__q::after {
    content: "+";
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    line-height: 1;
    color: #336aea;
    transition: transform 0.2s ease;
}

.pp-faq__item[open] .pp-faq__q::after {
    content: "−";
}

.pp-faq__a {
    padding: 0 35px 32px;
    font-size: 17px;
    line-height: 1.6;
    color: #404040;
}

.pp-faq__a p { margin: 0 0 12px; }
.pp-faq__a p:last-child { margin-bottom: 0; }
.pp-faq__a a { color: #336aea; }

@media (max-width: 768px) {
    .pp-faq { padding: 50px 0; }
    .pp-faq__q { font-size: 16px; padding-right: 32px; }
}

/* ------------------------------------------------------------
   10. BOTTOM CTA + HubSpot form styling
   (ported from 11916 kadenceBlockCSS so all 235 product pages share one style)
   ------------------------------------------------------------ */
.pp-cta {
    padding: 60px 0;
    background: #1e3a8a;
    color: #fff;
}

/* 2-column layout: heading+subhead left, form/button right (matches prod
   product-page bottom CTA where text and form are side-by-side). */
.pp-cta__inner {
    display: grid;
    grid-template-columns: 1fr minmax(380px, 480px);
    gap: 64px;
    align-items: center;
}

.pp-cta__header {
    text-align: left;
    margin: 0;
    max-width: 660px;
}

.pp-cta__heading {
    margin: 0 0 16px;
    font-size: 40px;
    line-height: 1.1;
    color: #fff;
}

.pp-cta__subhead {
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    max-width: 445px;
}

.pp-cta__form {
    background: #fff;
    border: 0;
    border-radius: 8px;
    padding: 32px;
    max-width: none;
    margin: 0;
    justify-self: stretch;
    color: #041d35;
}

/* Button-CTA pages (most of the 235): the form area holds a single
   styled <a class="pp-cta__button"> coming from pp_cta_custom_form_html. */
.pp-cta__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: transparent;
    color: #336aea;
    text-decoration: none;
    font-family: Inter, "Helvetica Neue", helvetica, arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    border: 1px solid #336aea;
    transition: background 0.2s ease, color 0.2s ease;
    position: relative;
}
.pp-cta__button::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M16.3125 19.199219L14.539062 17.550781L19.1875 13.207031H0V10.792969H19.1875L14.539062 6.441406L16.3125 4.800781L24 12L16.3125 19.199219Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M16.3125 19.199219L14.539062 17.550781L19.1875 13.207031H0V10.792969H19.1875L14.539062 6.441406L16.3125 4.800781L24 12L16.3125 19.199219Z'/></svg>");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    transition: transform 0.3s ease-in-out;
}
.pp-cta__button:hover,
.pp-cta__button:focus {
    background: #336aea;
    color: #fff;
}
.pp-cta__button:hover::after {
    animation: pp-arrow-move 0.5s linear infinite;
}

.pp-cta__form-placeholder {
    text-align: center;
    color: #b44f4f;
    padding: 40px 16px;
    font-size: 14px;
    border: 1px dashed #b44f4f;
    border-radius: 4px;
}

/* HubSpot form — ported from 11916 kadenceBlockCSS, scoped to .pp-cta__form. */
.pp-cta__form .hbspt-form { margin: 0 auto; }

.pp-cta__form .hbspt-form .hs-form-field {
    padding: 0 5px;
    margin-bottom: 10px;
}

.pp-cta__form .hbspt-form .hs-form-field label {
    display: block;
    margin-bottom: 4px;
    color: #404040;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.pp-cta__form .hbspt-form .hs-form-required {
    color: #b44f4f;
    padding-left: 2px;
}

.pp-cta__form .hbspt-form .hs-form-field .input {
    margin-right: 0;
    align-items: center;
    align-self: stretch;
    border: 1px solid #d4dfe5;
    background: #fff;
}

.pp-cta__form .hbspt-form .hs-input.invalid.error {
    border: 1px solid #b44f4f;
}

.pp-cta__form .hbspt-form select,
.pp-cta__form .hbspt-form input[type="text"],
.pp-cta__form .hbspt-form input[type="email"],
.pp-cta__form .hbspt-form input[type="tel"] {
    background: #fff;
    width: 100% !important;
    border: none;
    height: 40px;
    padding: 0 14px;
    border-radius: 4px;
}

.pp-cta__form .hbspt-form select {
    appearance: none;
    box-sizing: border-box;
    background: #fff url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L6 6L1 1' stroke='%23D9D9D9' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 100% 50% !important;
    background-size: 27px 7px !important;
    padding: 0 30px 0 14px !important;
}

.pp-cta__form .hbspt-form form.hs-form > fieldset {
    width: 100%;
    max-width: 100%;
}

.pp-cta__form .hbspt-form .hs-richtext {
    color: #939393;
    font-size: 12px;
    line-height: 1.4;
}

.pp-cta__form .hbspt-form .hs-richtext p {
    font-size: 12px;
    line-height: 1.4;
}

.pp-cta__form .hbspt-form .hs-richtext a {
    color: var(--gr-blue);
}

.pp-cta__form .hbspt-form .hs_submit {
    margin-top: 20px;
}

.pp-cta__form .hbspt-form .hs_submit .actions .hs-button {
    background: #336aea;
    color: #fff;
    height: 35px;
    font-family: Inter;
    font-size: 13px;
    font-weight: 700;
    padding: 0 18px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
}

.pp-cta__form .hbspt-form .hs_submit .actions .hs-button:hover {
    background: #001a49;
}

.pp-cta__form .hbspt-form .hs_submit .actions .hs-button::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PGcgaWQ9InN1cmZhY2UxIj48cGF0aCBkPSJNIDE2LjMxMjUgMTkuMTk5MjE5IEwgMTQuNTM5MDYyIDE3LjU1MDc4MSBMIDE5LjE4NzUgMTMuMjA3MDMxIEwgMCAxMy4yMDcwMzEgTCAwIDEwLjc5Mjk2OSBMIDE5LjE4NzUgMTAuNzkyOTY5IEwgMTQuNTM5MDYyIDYuNDQxNDA2IEwgMTYuMzEyNSA0LjgwMDc4MSBMIDI0IDEyIFogTSAxNi4zMTI1IDE5LjE5OTIxOSAiPjwvcGF0aD48L2c+PC9zdmc+");
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-left: 10px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.pp-cta__form .hbspt-form .hs-error-msg {
    color: #b44f4f;
    font-size: 10px !important;
    margin-top: 5px;
    text-align: right;
}

@media (max-width: 990px) {
    .pp-cta__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .pp-cta__form { justify-self: start; }
}

@media (max-width: 768px) {
    .pp-cta { padding: 40px 0; }
    .pp-cta__heading { font-size: 28px; }
    .pp-cta__form .hbspt-form .hs_submit { width: 100%; }
}

/* ------------------------------------------------------------
   11. RELATED SEARCHES (link list over blue bg)
   ------------------------------------------------------------ */
.pp-related {
    background: #336aea;
    padding: 48px 0;
}

.pp-related__heading {
    text-align: left;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 24px;
}

/* Compact chip grid — 8 items = 4×2 at desktop, 2×4 on tablet, single col on
   phones. Long labels wrap inside their chip without breaking the grid. */
.pp-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.pp-related__item {
    margin: 0;
    display: flex;
}

.pp-related__link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.95);
    color: #092362;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    border-radius: 6px;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    word-break: break-word;
}

.pp-related__link::after {
    content: "\27F6"; /* ⟶ */
    color: #336aea;
    font-size: 14px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.pp-related__link:hover,
.pp-related__link:focus {
    background: #fff;
    color: #001a49;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.pp-related__link:hover::after {
    transform: translateX(4px);
}

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

@media (max-width: 640px) {
    .pp-related { padding: 32px 0; }
    .pp-related__heading { font-size: 22px; }
    .pp-related__list { grid-template-columns: 1fr; }
}

/* ---------- Scroll-reveal animations ----------
   `.pp-reveal-init` is applied by product-page.js at runtime so no-JS users
   see content with no hidden state. `.is-visible` switches to the rest state.
   Integrations stagger uses inline transition-delay set per-item. */

.pp-altrow__image.pp-reveal-init {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}
.pp-altrow--image-left .pp-altrow__image.pp-reveal-init {
    transform: translateX(-40px);
}
.pp-altrow__image.pp-reveal-init.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.pp-integrations__item.pp-reveal-init {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}
.pp-integrations__item.pp-reveal-init.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .pp-altrow__image.pp-reveal-init,
    .pp-integrations__item.pp-reveal-init {
        opacity: 1;
        transform: none;
        transition: none;
    }
}