/* ============================================================
   product.css — Sensi Product Page v1.0
   Block Editor companion stylesheet

   Sections:
     1.  Font import
     2.  Token additions
     3.  Shared utilities
     4.  Button styles
     5.  Page layout fix
     6.  Hero
     7.  Intro section
     8.  Chapter structure
     9.  Feature panels
    10.  Dark panels
    11.  Video testimonials
    12.  Care Ecosystem
    13.  Animation initial states
    14.  Responsive
    15.  Reduced motion

   NOTE: Sections 3, 4, and 13 duplicate patterns from future.css.
   They should be migrated to main.css once the animation system
   and button styles are used across enough pages to justify it.
============================================================ */
/* ── 1. Font import ────────────────────────────────────────────
   TODO: Move to wp_enqueue_style() in assets.php to avoid a
         render-blocking @import. Match the approach used for
         Poppins in Salient/functions.php.
─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap');


/* ── 2. Token additions ────────────────────────────────────────
   These extend the main.css palette. Once future.css and
   product.css both define them, they belong in main.css :root.
─────────────────────────────────────────────────────────────── */
:root {
    --ff-script:        'Caveat', cursive;

    --radius-card:      20px;
    --radius-card-md:   12px;
    --radius-card-sm:   10px;
    --radius-card-xs:    8px;
    --radius-pill:    9999px;

    --ease-out:     cubic-bezier(0.215, 0.610, 0.355, 1.000);
    --ease-spring:  cubic-bezier(0.34,  1.56,  0.64,  1.000);

    --shdw-md-light: 0 10px 25px var(--shadow-color, #00000012), 0 6px 20px var(--shadow-color, #00000012);

    --grad-dark:            linear-gradient(150deg, #001729 0%, #002B4D 60%, #004275 100%);
    --grad-dark-teal:       linear-gradient(150deg, #00535C 0%, #006cc0 60%, #004275 100%);
    --grad-text-highlight:  radial-gradient(ellipse at 50% 140%, var(--c-teal-500) 0%, var(--c-blue-500) 70%, var(--c-blue-700) 80%);
    --grad-text-highlight2: radial-gradient(ellipse at 50% 140%, var(--c-blue-700) 0%, var(--c-blue-500) 30%, var(--c-teal-500) 80%);

    --ftr-blue-400: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(3987%) hue-rotate(187deg) brightness(102%) contrast(106%);
}

/* Resets & Overrides */
.wp-block-kadence-advancedbtn a.kb-button.kb-btn-global-fill { border-radius: var(--radius-pill);}
/* ── 3. Shared utilities ───────────────────────────────────────
   Duplicated from future.css — migrate to main.css when ready.
─────────────────────────────────────────────────────────────── */
.eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: var(--fw-sb); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-blue-500); margin-bottom: var(--s-sm); background: none; }
.grad-text { background: var(--grad-text-highlight); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* ── 4. Button styles ──────────────────────────────────────────
   Two token sets:
     a) WP button block (.wp-block-button__link) — used in hero CTAs.
     b) Raw anchor buttons (.btn) — used inside dark panels and
        feature panel CTAs within wp:html blocks.
   Duplicated from future.css — migrate to main.css when ready.
─────────────────────────────────────────────────────────────── */
/* WP Block Button */
:root :where(.wp-block-button__link) { border-radius: var(--radius-pill); border: 1.5px solid var(--c-blue-500); font-weight: var(--fw-sb); transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), color 220ms var(--ease-out), transform 220ms var(--ease-out); }
:root :where(.btn-primary .wp-block-button__link) { color: #fff; background: var(--c-blue-500); }
:root :where(.btn-outline .wp-block-button__link) { color: var(--c-blue-500); background: transparent; border-color: var(--c-blue-500); }
:root :where(.wp-block-button__link):hover { color: #fff; background: var(--c-blue-700); border-color: var(--c-blue-700); transform: translateY(-1px); }
/* Raw anchor buttons (inside wp:html) */
.btn, .wp-block-kadence-advancedbtn a { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7em 1.8em; border-radius: var(--radius-pill); font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-sb); cursor: pointer; text-decoration: none; transition: all 220ms var(--ease-out); border: 1.5px solid transparent; white-space: nowrap; }
.btn-primary a { background: var(--c-blue-500); color: #fff; border-color: var(--c-blue-500); }
.btn-primary:hover a { background: var(--c-blue-700); border-color: var(--c-blue-700); transform: translateY(-1px); }
.btn-outline a { background: transparent; color: var(--c-blue-500); border-color: var(--c-blue-500); }
.btn-outline:hover a { background: var(--c-blue-700); color: #fff; border-color: var(--c-blue-700); transform: translateY(-1px); }
.btn-ghost, .wp-block-kadence-advancedbtn a.btn-ghost { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.35); backdrop-filter: blur(10px); }
.btn-ghost:hover, .wp-block-kadence-advancedbtn a.btn-ghost:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.6); transform: translateY(-1px); }
/* ── 5. Page layout fix ────────────────────────────────────────
   Salient sets body { overflow: hidden } which breaks
   position: sticky. Override here, scoped to product page IDs.
   See also: future.css for the home page equivalent.
─────────────────────────────────────────────────────────────── */
body:is(.page-id-3362, .page-id-4366) { overflow: visible; }

@media only screen and (max-width: 782px) {
 .is-style-columns-reverse { flex-direction: column-reverse; }
}

/* ── 6. Hero ───────────────────────────────────────────────────
   Mesh gradient background, animated ambient orbs,
   centred headline + Caveat script tagline.
─────────────────────────────────────────────────────────────── */
.product-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(5rem, 0.7143rem + 13.7143vw, 11rem) var(--s-lg); position: relative; overflow: hidden; }
/* Fade to white at the bottom so the hero bleeds cleanly into
   the next section without a hard edge */
.product-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to bottom, transparent, #fff); pointer-events: none; z-index: 1; }
/* Orbs */
.hero-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; }
.hero-orb-1 { width: clamp(300px, 42vw, 600px); height: clamp(300px, 42vw, 600px); background: radial-gradient(circle, hsla(207, 100%, 80%, 0.7) 0%, transparent 70%); top: -10%; right: -5%; animation: orb-drift 12s ease-in-out infinite alternate; }
.hero-orb-2 { width: clamp(250px, 35vw, 500px); height: clamp(250px, 35vw, 500px); background: radial-gradient(circle, hsla(187, 100%, 75%, 0.5) 0%, transparent 70%); bottom: -5%; left: -5%; animation: orb-drift 15s ease-in-out 2s infinite alternate-reverse; }
.hero-orb-3 { width: clamp(200px, 28vw, 400px); height: clamp(200px, 28vw, 400px); background: radial-gradient(circle, hsla(240, 70%, 85%, 0.4) 0%, transparent 70%); top: 30%; left: 10%; animation: orb-drift 18s ease-in-out 1s infinite alternate; }
@keyframes orb-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, 30px) scale(1.08); }
}
/* Content wrapper — sits above the orbs and ::after fade */
.product-hero__content { position: relative; z-index: 2; }
/* Headline */
.product-hero__headline { font-family: 'Poppins', sans-serif; font-size: clamp(2.8rem, 8vw, 6.5rem); font-weight: 500; line-height: 1.03; letter-spacing: -0.038em; color: var(--c-gray-600); margin: 0 auto var(--s-sm); max-width: 18ch; }
.product-hero__headline em { font-style: normal; background: var(--grad-text-highlight); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 500; }
/* Caveat script tagline */
.product-hero__script { font-family: var(--ff-script); font-size: clamp(2rem, 4.5vw, 3.8rem); font-weight: 400; color: var(--c-gray-500); line-height: 0.9; display: block; letter-spacing: -0.025em; position: relative; z-index: 2; margin-bottom: var(--s-lg); padding: 0; }
/* CTA row — slight z-index lift over ::after fade */
.product-hero__ctas { position: relative; z-index: 2; }
/* ── 7. Intro section ──────────────────────────────────────────*/
.product-intro { background: linear-gradient(0deg, var(--c-blue-50) 0%, var(--c-blue-25) 100%); padding: var(--s-2xl) var(--s-lg); }
.product-intro__grid { max-width: 1300px; margin-inline: auto; gap: var(--s-2xl) !important; }
.product-intro__logo-col { }
.product-intro__pictogram { text-align: center;}
.product-intro__pictogram img { width: 100%; max-width: 430px !important; height: auto; margin-inline: auto; /* Soft drop shadow echoing the brand blue */ filter: drop-shadow(0 12px 32px rgba(0, 108, 192, 0.18)); }
.intro-statement { font-size: calc(var(--fs-xl) * 1.2); font-weight: 400; line-height: 1.38; letter-spacing: -0.022em; color: var(--c-gray-500); padding: 0 !important; }
.intro-statement strong { font-weight: 600; color: var(--c-blue-600); }

.product-intro [class*="hero-text-highlight"] { font-size: var(--fs-sm); padding: var(--s-sm) var(--s-base); }
.product-intro .hero-text-highlight1 { position: absolute; top: 10%; left: 10%; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); text-align: center; will-change: transform; max-width: 13ch; }
.product-intro .hero-text-highlight2 { position: absolute; bottom: 0%; right: -10%; z-index: 9; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); will-change: transform; }
.product-intro .hero-text-highlight2 strong { display: block; font-weight: 500; }

@media (min-width: 782px) and (max-width: 1200px) {
   .product-intro [class*="hero-text-highlight"] { font-size: var(--fs-sm); padding: var(--s-sm); }
}

@media (min-width: 782px) and (max-width: 940px) {
   .product-intro .hero-text-highlight1 { top: 0%; }
   .product-intro .hero-text-highlight2 { bottom: -10%;   }
}

@media (min-width: 421px) and (max-width: 781px) {
   .product-intro .hero-text-highlight1 { left: 20vw; }
   .product-intro .hero-text-highlight2 { right: 10vw; }
}

@media (max-width: 420px) {
   .product-intro .hero-text-highlight1 { left: 0; top: 4vw }
   .product-intro .hero-text-highlight2 { right: 0; bottom: -3vw; }
}

/* ── 8. Chapter structure ──────────────────────────────────────*/
section:is(#care-better,#work-smarter) { padding-top: var(--s-3xl); padding-bottom: var(--s-3xl); }
section:is(#grow-faster) { padding-top: var(--s-3xl); padding-bottom: 0; }
section:is(#grow-faster) .feature-panels { padding-bottom: 0; }
.chapter-wrap { position: relative; padding-bottom: var(--s-xl); }
.chapter-wrap--gray { background: linear-gradient(180deg, #f6f8fa 0%, #fff 100%); }
.chapter-title { font-size: var(--fs-5xl); font-weight: 600; letter-spacing: -0.038em; line-height: 1.03; background: var(--grad-text-highlight); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; text-align: center; max-width: 900px; margin: 0 auto; padding-inline: var(--s-lg); }
/* ── 9. Feature panels ─────────────────────────────────────────
   Two-column layout: visual (video / image) + content (text).
   Alternating direction uses CSS order instead of direction:rtl
   — the original approach caused RTL text-flow for screen readers.
─────────────────────────────────────────────────────────────── */
/* Replace the entire .feature-panel, .feature-panel--reversed, and
   .product-divider block with: */
.feature-panels { max-width: 1300px; margin-inline: auto; padding: var(--s-2xl) var(--s-lg) var(--s-lg); width: 100%; }
.feature-panel { margin: var(--s-2xl) 0; border-top: 1px solid var(--c-gray-50); padding-top: var(--s-2xl); }
.feature-panels > .feature-panel:first-child { padding-top: 0; margin-top: 0; }
.feature-panel:first-child { border-top: none; }
/* Override wp:columns flexbox with CSS grid — matches the original
   feature-panel grid layout. !important needed to beat WordPress's
   inline style="flex-basis:50%" on each column. */
.feature-panel .wp-block-columns { gap: var(--s-xl);  }
.feature-panel .wp-block-columns .wp-block-column { flex-basis: unset !important; width: 100% !important; min-width: 0; /* prevent grid blowout on long words */ }
/* feature-visual inside a wp:column: fill column height, min-height
   ensures it always has presence even with short text siblings. */
.feature-panel .wp-block-column { height: 100%; }
.feature-panel .wp-block-column .feature-visual { height: 100%; min-height: 240px; aspect-ratio: unset; /* height driven by sibling column, not ratio */ }
/* Suppress default WordPress paragraph/heading block spacing so
   native blocks in the text column pick up only our classes. */
.feature-panel p.feature-sub,
.feature-panel p.wp-block-paragraph.feature-sub { font-family: var(--ff-script); font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 400; color: var(--c-gray-500); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: var(--s-md); padding: 0; }
.feature-panel p.feature-desc,
.feature-panel p.wp-block-paragraph.feature-desc { font-size: var(--fs-lg); line-height: 1.65; color: var(--c-gray-400); padding: 0; margin-bottom: 0; }
.feature-panel h3.feature-title,
.feature-panel h3.wp-block-heading.feature-title { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -0.028em; line-height: 1.12; color: var(--c-gray-600); margin-bottom: 0.2em; padding: 0; }
/* wp:buttons inside feature panels — suppress default margin */
.feature-panel .wp-block-buttons { margin-top: var(--s-md); }
/* wp:separator rendered as <hr> */
hr.product-divider,
hr.wp-block-separator.product-divider { max-width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--c-gray-50), transparent); border: none; margin: 0; }
/* ── Responsive update (replace the tablet feature-panel rule) ── */
@media (max-width: 1024px) {
    /* Restore single-column stack */
    .feature-panel .wp-block-columns { grid-template-columns: 1fr !important; gap: var(--s-lg); }
    /* Restore aspect-ratio now that we're stacked */
    .feature-panel .wp-block-column .feature-visual { height: auto; aspect-ratio: 16 / 10; min-height: unset; }
}
/* ── Visual (video container) */
.feature-panels .wp-block-video video { border-radius: var(--radius-card-md);}
.feature-visual { border-radius: var(--radius-card); overflow: hidden; position: relative; background: var(--c-blue-50); aspect-ratio: 16 / 10; box-shadow: 0 24px 60px rgba(0, 42, 75, 0.12), 0 8px 24px rgba(0, 42, 75, 0.08); }
/* Teal gradient background variant — used for Sally / Growth Agent */
.feature-visual--teal { background: linear-gradient(140deg, var(--c-teal-100) 0%, var(--c-teal-50) 100%); display: flex; align-items: center; justify-content: center; padding: var(--s-lg); }
.feature-visual--teal .feature-visual__contain-img { max-width: 80%; height: auto; display: block; object-fit: contain; }
/* Cover image variant — no intrinsic aspect lock needed, img fills */
.feature-visual--cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Inline video */
.feature-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Placeholder shown while video loads */
.vid-placeholder { position: absolute; inset: 0; background: var(--grad3); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vid-placeholder::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 60%); }
.vid-placeholder span { color: rgba(255, 255, 255, 0.25); font-size: 0.65rem; font-family: monospace; letter-spacing: 0.1em; text-align: center; z-index: 1; pointer-events: none; }
/* Vimeo thumbnail link used in Plug & Play panel */
.feature-video-link { display: block; position: absolute; inset: 0; text-decoration: none; color: inherit; }
.feature-video-link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out); }
.feature-video-link:hover img { transform: scale(1.03); }
.feature-video-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; }
.feature-video-link:hover .feature-video-overlay { background: rgba(0, 0, 0, 0.3); }

/* ── Video Player Overrides ───────────────────────────────────────── */
.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container { transform: translateY(-12.963%); /*<-- this is a fix for the re-adjustment flicker of mobile videos in the video popup overlay. Not set with !important to ensure that horiztonal videos are able to set their own transform dynamically  */ }
.gcontainer { display: grid; place-items: center; }
.gcontainer #glightbox-slider { max-height: 98%; }
@media (min-width: 769px) {
  .goverlay { background: #001729; opacity: .9; }
  }
.glightbox-mobile .goverlay { background: #001729; opacity: .9; }
.plyr__controls [data-plyr="pip"] { display: none !important; /* Hides the PIP option in player */ }
.glightbox-container :is(.gslide-video,.gslide-local) { margin: 0 auto;}
@media (min-width: 480px) {
#glightbox-body.glightbox-container.is-landscape :is(.gslide-video,.gslide-local) { max-width: 80% !important; }
}

/* Portrait lightbox — constrain height so it doesn't overflow viewport 
#glightbox-body.is-portrait .gslide-media {
  max-width: px or %; 
}

/* Landscape lightbox — full-width treatment 
#glightbox-body.is-landscape .gslide-media {
  max-width: px or %;
}*/

/* ── Content (text) */
.feature-pill { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--fs-xs); font-weight: var(--fw-b); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-blue-400); margin-bottom: var(--s-sm); padding: 0; }
.feature-pill-sep { color: var(--c-gray-100); font-weight: var(--fw-n); }
.feature-title { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -0.028em; line-height: 1.12; color: var(--c-gray-600); margin-bottom: 0.2em; }
.feature-sub { font-family: var(--ff-script); font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 400; color: var(--c-gray-500); display: block; line-height: 1.05; margin-bottom: var(--s-md); letter-spacing: -0.025em; }
.feature-desc { font-size: var(--fs-lg); line-height: 1.65; color: var(--c-gray-400); }
.feature-content__cta { margin-top: var(--s-md); display: inline-flex; }
/* ── Section divider between panels */
.product-divider { max-width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--c-gray-50), transparent); border: none; margin: 0; }
/* ── 10. Dark panels ───────────────────────────────────────────
   Rounded card panel with dark gradient, thumbnail + text.
   Used for: Solo Care, Teepa Snow, Ops Agent.
─────────────────────────────────────────────────────────────── */
/* Section wrapper — just controls spacing around the card */
@media only screen and (min-width: 1200px) {
.product-dark-section { padding: 0 var(--s-lg); }
}
.product-dark-section + hr.product-divider { margin-top: var(--s-2xl); }
hr.product-divider + .product-dark-section { margin-top: var(--s-2xl); }
.product-dark-section--spaced { padding-bottom: var(--s-xl); }
.product-dark-section--ops { padding-bottom: var(--s-3xl); }
/* The card itself */
.panel-dark { background: var(--grad-dark); border-radius: 2rem; position: relative; overflow: hidden; max-width: 1000px; margin: 0 auto; padding: var(--s-lg); }
.panel-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 0%, rgba(0, 201, 224, 0.18) 0%, transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(0, 108, 192, 0.15) 0%, transparent 55%); pointer-events: none; }
/* Teal gradient variant — Solo Care */
.panel-dark--teal { background: var(--grad-dark-teal); }
.panel-dark-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-lg); align-items: center; }

.panel-dark .wp-block-kadence-videopopup { border-radius: var(--radius-card); overflow: hidden; position: relative; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.35); }
.panel-dark .wp-block-columns { column-gap: var(--s-lg); }

/* Text column */
.panel-dark h2 { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; color: #fff; margin-bottom: var(--s-sm); text-wrap: balance; }
.panel-dark p:not(.eyebrow) { font-size: var(--fs-lg); line-height: 1.65; color: rgba(255, 255, 255, 0.82); margin-bottom: var(--s-md); }
.panel-dark .eyebrow { color: rgba(255, 255, 255, 0.75); padding: 0 !important; }
/* ── 11. Testimonials ────────────────────────────────────*/
/* Testimonial within each passage — CSS-driven transition on .is-active */
.card-testimonial { padding: var(--s-md); border-radius: var(--radius-card); margin-top: var(--s-sm); transform: translateY(18px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); background: linear-gradient(180deg, #fff 0%, #f6fbff 100%); border: 1px solid #c9e8ff;}
/* Testimonial quote text */
.card-testimonial > p { font-size: var(--fs-md); line-height: 1.4; color: var(--c-gray-500); padding: 0; margin-bottom: var(--s-xs); }
.card-testimonial > p:first-child::before { content: ''; display: block; width: 18px; height: 15px; background-image: url('https://sensistg.wpenginepowered.com/wp-content/uploads/2024/06/icon_quotemark.svg'); background-size: contain; background-repeat: no-repeat; margin-bottom: var(--s-xs);  filter: var(--ftr-blue-700); }
.card-testimonial > p strong { color: var(--c-blue-700); }
/* Testimonial attribution row */
.card-testimonial .testimonial-meta { display: flex; align-items: center; gap: var(--s-sm); margin-top: var(--s-sm); padding-top: var(--s-sm); border-top: 1px solid rgba(0,0,0,0.07); }
.card-testimonial .testimonial-meta img { width: 52px !important; height: 52px !important; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.card-testimonial .testimonial-meta p { font-size: var(--fs-xs); line-height: 1.5; color: var(--c-gray-400); padding: 0; margin: 0; }
.card-testimonial .testimonial-meta p::before { display: none; }
.card-testimonial .testimonial-meta strong { display: block; color: var(--c-gray-600); font-size: var(--fs-sm); font-weight: var(--fw-sb); }
.card-testimonial .testimonial-meta em { font-style: italic; }

/* ── 11b. Video testimonials ────────────────────────────────────*/
.product-vid-tests { padding: 0 var(--s-lg); margin: var(--s-2xl) 0; }
.product-vid-tests:last-child { padding-bottom: 0; margin-bottom: 0; }
.product-vid-tests--light { background: #fff; }
.product-vid-tests h2 { font-size: var(--fs-4xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; background: var(--grad-text-highlight); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-wrap: balance; margin-bottom: var(--s-lg); }
.vid-test-grid { max-width: 680px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
/* Card */
.vid-test-card { background: #fff; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shdw-md-light); position: relative; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); text-decoration: none; color: inherit; display: block; padding: .75rem; --vid-max-height: 580px; }
/*@media (max-width: 600px) {
   .vid-test-card { --vid-max-height: 320px; }
   .kadence-video-intrinsic .kadence-video-poster { object-position: top center; }
   }*/
.vid-test-card:hover { transform: translateY(-4px); box-shadow: var(--shdw-xl); }
.vid-test-card:focus-visible { outline: 3px solid var(--c-blue-400); outline-offset: 3px; }
.vid-test-card :is(.wp-block-kadence-videopopup,.kadence-video-popup-wrap) { max-height: var(--vid-max-height); }
.vid-test-card .wp-block-kadence-videopopup { margin-bottom: 1rem; }
.vid-test-card p { padding: 0; }
/* Thumbnail */
.vid-test-thumb { aspect-ratio: 9 / 16; position: relative; overflow: hidden; max-height: var(--vid-max-height); padding: 0.5rem; }
.vid-test-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: calc(var(--radius-card) - 6px); }
.vid-test-overlay { position: absolute; inset: 0.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 50%); display: flex; align-items: center; justify-content: center; border-radius: calc(var(--radius-card) - 6px); }
.vid-test-play { width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 108, 192, 0.9); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; transition: transform 0.3s var(--ease-spring); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.vid-test-play svg { position: relative; left: 1px; }
.vid-test-card:hover .vid-test-play { transform: scale(1.12); }
/* Meta */
.vid-test-meta { padding: var(--s-sm) var(--s-md) var(--s-md); }
.vid-test-name { font-weight: var(--fw-b); font-size: var(--fs-sm); color: var(--c-gray-600); }
.vid-test-role { font-size: var(--fs-xs); color: var(--c-gray-300); margin-top: 0.15em; }
/* ── 12. Care Ecosystem ────────────────────────────────────────
   Redesigned from the original absolute-positioned layout.
   Uses CSS grid: text column left, diagram (side/center/side) right.
   Fully responsive; falls back to a stacked card grid on mobile.
─────────────────────────────────────────────────────────────── */
#care-ecosystem { background: #f6f8fa; padding: var(--s-3xl) var(--s-lg); }
/* Text column */
#care-ecosystem h2 { font-size: var(--fs-4xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; background: var(--grad-text-highlight); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: var(--s-sm); }
#care-ecosystem  p { font-size: var(--fs-lg); line-height: 1.65; color: var(--c-gray-400); }
#care-ecosystem .wp-block-columns { max-width: 1200px; column-gap: var(--s-lg); }

/* ── Section shell ─────────────────────────────────────────────── */
.ecosystem-section { background: #f6f8fa; padding: var(--s-3xl) var(--s-lg); }
.ecosystem-section > .wp-block-columns { max-width: 1300px; margin-inline: auto; align-items: center; gap: var(--s-2xl); }
/* ── Text column ───────────────────────────────────────────────── */
.ecosystem-section .wp-block-column:not(.ecosystem-diagram) h2 { font-size: var(--fs-4xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; background: var(--grad-text-highlight); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: var(--s-sm); }
.ecosystem-section .wp-block-column:not(.ecosystem-diagram) p { font-size: var(--fs-lg); line-height: 1.65; color: var(--c-gray-400); }
/* ── Diagram column canvas ─────────────────────────────────────── */
/* Kill flow layout; all children will be absolutely positioned.
   display: block !important overrides WP's is-layout-flow flex context. */
.ecosystem-diagram { position: relative; min-height: 480px; display: block !important; overflow: visible; /* nodes overhang edges intentionally */ }
/* Suppress WP block-gap margin injected between children */
.ecosystem-diagram > * { margin-block: 0 !important; }
/* ── Centre logo ───────────────────────────────────────────────── */
.ecosystem-diagram > .wp-block-image:not(.ecosystem-node) { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 400px; margin: 0; z-index: 2; }
.ecosystem-diagram > .wp-block-image:not(.ecosystem-node) img { width: 400px; height: 400px; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0, 108, 192, 0.28)); }
/* ── Node card — base styles ───────────────────────────────────── */
/* Override WP's display:table on figure[+figcaption] pairs */
.ecosystem-diagram .ecosystem-node { position: absolute; display: flex !important; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; padding: var(--s-sm); width: 110px; margin: 0; background: #fff; border-radius: var(--radius-card-md); box-shadow: var(--shdw-md-light); border: 1px solid var(--c-gray-50); z-index: 3; transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease; cursor: default; }
.ecosystem-diagram .ecosystem-node:hover { transform: translateY(-3px); box-shadow: var(--shdw-md); }
/* Icon — fake the .eco-icon circle via padding + border-radius on the img itself.
   box-sizing: content-box keeps the image at 32px; padding builds the 52px circle. */
#care-ecosystem .ecosystem-diagram .ecosystem-node::before { content: ""; position: absolute; top: var(--s-sm); /* aligns with your card padding */ left: 50%; transform: translateX(-50%); width: 52px; /* 32px img + 10px padding × 2 */
    height: 52px; border-radius: 50%; background: var(--c-blue-50); z-index: 0; }
#care-ecosystem .ecosystem-diagram .ecosystem-node img {  position: relative; z-index: 1; /* sits above the ::before circle */  width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; padding: 10px; box-sizing: content-box; }
@media (max-width: 600px) {
#care-ecosystem .ecosystem-diagram .ecosystem-node img { padding: 2px; width: 24px; height: 24px;}
#care-ecosystem .ecosystem-diagram .ecosystem-node::before { display: none;}
}
/* Care Continuum Facilities: SVG needs colour filter to render blue.
   Also resets the HTML-level width/height attributes visually. */
.ecosystem-diagram .ecosystem-node:nth-child(5) img { filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(3987%) hue-rotate(187deg) brightness(102%) contrast(106%); }
/* Label */
.ecosystem-diagram .ecosystem-node figcaption { font-size: var(--fs-xs); font-weight: var(--fw-sb); color: var(--c-gray-400); line-height: 1.3; max-width: 10ch; margin: 0; font-style: normal; text-align: center; }
/* Left — top */
.ecosystem-diagram .ecosystem-node:nth-child(2) { top: 0%; left: 12%; }
/* Left — middle (overhangs column left edge) */
.ecosystem-diagram .ecosystem-node:nth-child(3) { top: 37%; left: 1%; }
/* Left — bottom */
.ecosystem-diagram .ecosystem-node:nth-child(4) { top: 74%; left: 12%; }
/* Right — top */
.ecosystem-diagram .ecosystem-node:nth-child(5) { top: 0%; right: 12%; }
/* Right — middle (overhangs column right edge) */
.ecosystem-diagram .ecosystem-node:nth-child(6) { top: 37%; right: 1%; }
/* Right — bottom */
.ecosystem-diagram .ecosystem-node:nth-child(7) { top: 74%; right: 12%; }
@media (max-width: 1024px) {
    .ecosystem-diagram.wp-block-column { max-width: 480px; margin-inline: auto; min-height: 520px; /* slightly taller to fit nodes at full container width */ }
}
@media (max-width: 600px) {
    .ecosystem-diagram.wp-block-column { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: var(--s-sm); min-height: auto; max-width: 100%; align-items: start; }
    .ecosystem-diagram > .wp-block-image:not(.ecosystem-node) { width: 100%; }
    .ecosystem-diagram .ecosystem-node { padding: var(--s-xs) var(--s-xs) var(--s-sm); gap: 0.4rem; }
}
/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ecosystem-diagram .ecosystem-node { transition: none; }
    .ecosystem-diagram .ecosystem-node:hover { transform: none; box-shadow: var(--shdw-md-light); }
}





#work-smarter { /*background: linear-gradient(180deg, #f6f8fa 0%, #fff 100%);*/ background: #f6f8fa;}
figure.growth-agent { background: radial-gradient(circle at bottom, #0002ff 0%, #30a9ff 76%); border-radius: var(--radius-card-md); text-align: center; }
.growth-agent img { max-height: 362px; background: none !important; padding: 1.5rem 4rem !important; width: auto !important; }
@media (max-width: 480px) {
   .growth-agent img { width: 100% !important; }
}
figure.growth-hub, figure.growth-hub img { border-radius: var(--radius-card-md); }

#book { margin-top: 0 !important;}

/* ── 13. Animation initial states ──────────────────────────────
   CSS pre-hide states. s3_animate.js also writes these in JS
   (applyInitialState), but declaring them here prevents a flash
   of visible content between first paint and script execution.
   Particularly important for above-fold elements like the hero.

   Duplicated from future.css — migrate to main.css when the
   animation system is adopted across more pages.
─────────────────────────────────────────────────────────────── */
[data-animate="fade-up"] { opacity: 0; transform: translateY(30px); }
[data-animate="mask-reveal"] { clip-path: inset(0 100% 0 0 round var(--radius-card)); }
[data-animate="grow-in"] { transform: scale(0); }
/* ── 14. Responsive ────────────────────────────────────────────*/
/* Tablet — single column for feature panels and intro */
@media (max-width: 1024px) {
    .feature-panel { grid-template-columns: 1fr; gap: var(--s-lg); }
    /* Reset reversed order — no visual/content to swap in single-col */
    .feature-panel--reversed .feature-visual,
    .feature-panel--reversed .feature-content { order: unset; }
    .panel-dark-inner { grid-template-columns: 1fr; gap: var(--s-xl); }
    .ecosystem-inner { grid-template-columns: 1fr; }
    .product-intro__grid { gap: var(--s-lg) !important; }
}
/* Mobile */
@media (max-width: 768px) {
    .vid-test-grid { grid-template-columns: 1fr; }
    .ecosystem-diagram { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
    /* Hide the centre image on mobile — nodes carry the content */
    .eco-center { display: none; }
    /* Both eco-side columns span the full 2-col grid */
    .eco-side--left,
    .eco-side--right { grid-column: auto; }
}
@media (max-width: 600px) {
    .product-hero__headline { font-size: clamp(2.4rem, 8vw, 4rem); }
    .panel-dark { padding: var(--s-md); }
    .feature-panels { padding-inline: var(--s-sm); }
    .ecosystem-diagram { grid-template-columns: 1fr; }
    .eco-center { display: none; }
}
/* ── 15. Reduced motion ────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
    /* Stop ambient orb drift */
    .hero-orb { animation: none; }
    /* Keep animated elements visible */
    [data-animate="fade-up"] { opacity: 1 !important; transform: none !important; }
    [data-animate="mask-reveal"] { clip-path: none !important; }
    [data-animate="grow-in"] { transform: none !important; }
    /* Suppress hover lifts */
    .vid-test-card:hover,
    .eco-node:hover { transform: none; }
    /* Suppress video link scale */
    .feature-video-link:hover img { transform: none; }
}