.nxt-hero {
    background-color: #f4f6f8;
}

.nxt-hero-image {
    background: url('/a/img/schedule-demo/hero-gradient.png') center / contain no-repeat;
}

/* Source's whole-section background here (#lp-pom-block-621) is a flat
   rgb(248,248,248) tint, not a glow image — sampled directly off its computed
   style. Same "smoke" idea as the hero section's light tint, just a different exact shade. */
.nxt-enterprise-section {
    background-color: #f8f8f8;
}

/* Thin orange section-divider bars — color/thickness sampled directly off the
   source page's computed styles (rgb(244,148,36) = #F49424, 2px). */
.nxt-divider {
    border: none;
    border-top: 2px solid #f49424;
    opacity: 100%;
}

/* Laptop mockup: laptop_shadow.png has a transparent cutout for the screen;
   the gif sits behind it at the cutout's exact bounds (measured via ImageMagick
   pixel sampling: left 13.3% / top 6.0% / width 73.5% / height 78.4% of the frame). */
.nxt-laptop-mockup {
    position: relative;
    margin: 0 auto;
}

.nxt-laptop-mockup-frame {
    display: block;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Rendered as a background (not <img>) so independent x/y zoom can crop the gif's
   own ~40px baked-in padding border (measured via ImageMagick: real content occupies
   only 91.7% width / 89.3% height of the 1200x767 canvas) — object-fit can't do that
   asymmetric a crop, background-size can. */
.nxt-laptop-mockup-screen {
    position: absolute;
    left: 13.3%;
    top: 6%;
    width: 73.5%;
    height: 78.4%;
    background: url('/a/img/landing/mealsuite-nxt-ui.gif') center / 109.1% 112% no-repeat;
    z-index: 1;
}

.nxt-cta-banner {
    background: url('/a/img/landing/mealsuite-cta-background-v2.jpg') center / cover no-repeat;
    background-color: #3e9dd2;
}

/* Vertical dividers between the 3 benefit cards — color sampled off the source
   page's computed styles (rgb(231,231,231) = #E7E7E7). Only at md+ where the
   row is actually side-by-side (row-cols-md-3); stacked single-column has none. */
@media (min-width: 768px) {
    .nxt-benefit-col + .nxt-benefit-col {
        border-left: 2px solid #e7e7e7;
    }
}

/* "Breathing" pulse on the benefit-card icons and persona badge icons —
   exact spec copied from the source page's own animation CSS: 2s pulse,
   scale up to 1.1 at 50%. Hooks into the site's existing AOS library
   (already loaded/initialized globally in inc/head.php + inc/footer.php)
   instead of a custom observer — AOS toggles .aos-animate on scroll-into-view
   and replays it on re-entry (default `once: false`), matching source's
   ub-ani-pulse behavior with no extra JS needed. */
@keyframes nxt-pulse {
    0% { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.1, 1.1, 1.1); }
    100% { transform: scale3d(1, 1, 1); }
}

[data-aos="nxt-pulse"].aos-animate {
    animation: nxt-pulse 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.nxt-benefit-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1rem;
    object-fit: contain;
}

/* Badge overlap + title clearance both derive from one variable so they can never
   drift out of sync again — clearance comes from the photo-wrap's own margin-bottom
   (real box-model space), not from fighting main.css's global `h3{margin:...!important}`
   (that !important always won regardless of our specificity, so h3 had zero top
   clearance and the badge sat directly over the title text). */
.nxt-persona-card {
    --nxt-badge-size: 80px;
}

.nxt-persona-photo-wrap {
    position: relative;
    margin-bottom: calc(var(--nxt-badge-size) / 2 + 12px);
}

.nxt-persona-photo-wrap img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: .5rem;
    background: #eaeaea;
}

.nxt-persona-badge {
    position: absolute;
    left: 50%;
    bottom: calc(var(--nxt-badge-size) / -2);
    transform: translateX(-50%);
    width: var(--nxt-badge-size);
    height: var(--nxt-badge-size);
    border-radius: 50%;
    background: #3e9dd2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.nxt-persona-badge img {
    height: auto;
    border-radius: 50%;
}

.nxt-video-wrap {
    max-width: 700px;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .nxt-persona-card {
        --nxt-badge-size: 48px;
    }
}