/* ============================================================
   future.css — Sensi Homepage Redesign v2.1
   Block Editor companion stylesheet

   Sections:
     1.  Google Fonts import
     2.  Design tokens & @property declarations
     3.  Global utilities
     4.  Buttons
     5.  Hero banner
     6.  Video panel
     7.  Panel cards (Care / Work / Grow)
     8.  Agentic OS (intro + device fan view)
     9.  Agentic OS Spotlight (grid + passages)
     10. Stats section
     11. Trust panel
     12. Testimonial carousel
     13. CTA section
     14. Animation initial states
     15. Ring / ping animations
     16. Responsive
     17. Reduced motion
============================================================ */

/* ── 1. Google Fonts ──────────────────────────────────────────────
   NOTE: Poppins is loaded site-wide via Salient/functions.php.
   Caveat is added here for the homepage script accent lines.
   TODO: Move to wp_enqueue_style() in assets.php to avoid a
         render-blocking @import in production.
─────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap');


/* ── 2. Design tokens & @property declarations ────────────────── */

/* Register --fan-fp as a typed <number> so CSS calc() and
   interpolation work correctly in child elements.
   Requires Chrome 85+ / Firefox 128+ / Safari 16.4+.
   Fallback: CSS positions fall back to their --fan-fp: 0 (collapsed)
   initial value. The prefers-reduced-motion rule sets --fan-fp: 1
   for the no-motion case, keeping content visible. */
@property --fan-fp {
  syntax: '<number>';
  inherits: true;  /* child figures read the value set on .devices-wrapper */
  initial-value: 0;
}

:root {
    --ff-script: 'Caveat', cursive;
    --radius-card:      20px;
    --radius-card-md:   12px;
    --radius-card-sm:   10px;
    --radius-card-xs:    8px;
    --radius-pill:    9999px;

    --c-gray-25: #f5f5f7;

    --ease-cubic:   cubic-bezier( 0.645, 0.045, 0.355, 1.000 ); /* easeInOutCubic */
    --ease-out:     cubic-bezier( 0.215, 0.610, 0.355, 1.000 ); /* easeOutCubic   */
    --ease-spring:  cubic-bezier( 0.34,  1.56,  0.64,  1.000 ); /* overshoot      */
    --shdw-md-light: 0 10px 25px var(--shadow-color,#00000012),0 6px 20px var(--shadow-color,#00000012);

    --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%);
}

/* Scope overflow fix to just this page — needed for sticky spotlight grid */
body:is(.page-id-2,.page-id-4631) { overflow: visible; }

section:is(.video-panel, .care-work-grow, .spotlight-section-header, .agentic-os-spotlight, .agentic-os, .sensi-stats, .sensi-benefits, .sensi-testimonials,.cta-panel) { padding-inline: var(--s-lg);}
/* Shared h2 / h3 typographic treatment across major sections */
section:is(.video-panel, .spotlight-section-header, .agentic-os, .sensi-stats, .sensi-benefits, .sensi-testimonials) h2 { font-size: var(--fs-5xl); font-weight: 500; letter-spacing: -0.025em; line-height: 1.25; margin-bottom: .75rem; background: var(--grad-text-highlight); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
section:is(.video-panel, .spotlight-section-header, .agentic-os, .sensi-stats, .sensi-benefits, .sensi-testimonials) h3 { font-family: var(--ff-script); font-size: var(--fs-4xl); font-weight: 400; line-height: 1.3; margin-top: -.25em; margin-bottom: var(--s-md); letter-spacing: -0.02em; color: var(--c-gray-500) !important; }
/* ── 3. Global utilities ───────────────────────────────────────── */
.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); padding: 0; margin-bottom: var(--s-sm); }
.script-accent { font-family: var(--ff-script); font-weight: 400; }
p.intro { font-size: var(--fs-xl); line-height: 1.55; color: var(--c-gray-400); padding: 0; }
/* ── Video Player Overrides ───────────────────────────────────────── */
.plyr__poster { background-image: none !important; background-color: transparent;}
@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 */ }
/* ── 4. Buttons ────────────────────────────────────────────────── */
:root :where(.wp-block-button__link) { border-radius: var(--radius-pill); border: 1.5px solid var(--c-blue-500); transition: background 220ms ease, border-color 220ms ease, color 220ms ease; }
:root :where(.btn-primary .wp-block-button__link) { color: var(--c-lightest); background: var(--c-blue-500); }
:root :where(.btn-outline .wp-block-button__link),
:root :where(.is-style-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: var(--c-lightest); background: var(--c-blue-700); border-color: var(--c-blue-700); }
/* ── 5. Hero banner ────────────────────────────────────────────── */
.hero-banner { text-align: center; padding: clamp(5rem, 0.7143rem + 13.7143vw, 11rem) var(--s-lg); position: relative; overflow: hidden; background: linear-gradient(0deg, rgba(245,251,255,0) 0%, rgb(245,251,255) 100%); }
.hero-banner .wp-block-button.btn-outline .wp-block-button__link { border-color: var(--c-gray-100); }
.hero-banner .wp-block-button.btn-outline .wp-block-button__link:hover { border-color: var(--c-blue-700); }
/* Main headline — Apple-sized, tight tracking */
.hero-headline { font-family: 'Poppins', sans-serif; font-size: var(--fs-5xl); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; color: var(--c-gray-600); margin: 0 auto var(--s-sm); max-width: 18ch;}
.hero-headline span.hero-sans { display: block;}
/* Caveat script tagline — inline em inside h1 */
.hero-script { display: block; font-family: var(--ff-script); font-size: calc(var(--fs-5xl) * 1.25); font-weight: 400; line-height: .85; color: var(--c-gray-500); margin: 0 auto var(--s-lg); max-width: none; padding: 0; font-style: normal; }
@media (min-width: 701px) {
    .hero-script { position: relative; left: .35ch; }
 }
/* Heart accent */
.hero-heart { color: #ef2121; font-style: normal; display: inline-block; font-size: .5em; position: relative; left: .5ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-sm); justify-content: center; margin-top: var(--s-md); }
/* ── 6. Video panel ────────────────────────────────────────────── */
.video-panel {  }
.video-panel > .wp-block-group { max-width: 1300px; margin-inline: auto; }
.video-panel .eyebrow { text-align: center; display: block; }
.video-panel .kadence-video-popup-wrap { border-radius: var(--radius-card-md); max-width: 55rem; margin: 0 auto; overflow: hidden; }
.video-panel .kadence-video-poster { transition: transform 0.7s cubic-bezier(0.2, 1, 0.22, 1); transform: scale(1.02); }
.video-panel .kadence-video-popup-wrap:hover .kadence-video-poster { transform: scale(1.08); }
.video-panel p.intro { text-align: center; max-width: 50ch; margin: var(--s-md) auto 0; }
/* ── 7. Panel cards (Care / Work / Grow) ──────────────────────── */
.panel-cards-wrapper { display: flex; flex-wrap: wrap; gap: var(--s-md); margin-top: var(--s-lg); max-width: 55rem; }
.panel-card { background: var(--c-lightest); padding: .5rem; border-radius: var(--radius-card-md); box-shadow: var(--shdw-md-light); position: relative; /* stretched link anchor */ isolation: isolate; /* contain z-index to card */ cursor: pointer; transition: box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out) !important /*<--!important set to override transition set by fade-in animation JS*/; }
.panel-card .wp-block-columns .wp-block-column:first-child { padding: var(--s-md); }
.panel-card h3 { font-size: var(--fs-3xl); letter-spacing: -0.02em; margin-bottom: 0; }
.panel-card h4 { font-size: var(--fs-3xl); letter-spacing: -0.025em; margin-bottom: var(--s-base); font-family: var(--ff-script) !important; }
.panel-card figure { margin-top: 0; margin-bottom: 0; }
.panel-card figure img { border-radius: var(--radius-card-sm); }
.panel-card :where(.wp-block-button__link) { padding: .65rem; border: none; }
.panel-card :where(.wp-block-button__link) svg { position: relative; left: 2px; }
.panel-cards-wrapper:nth-of-type(1) .panel-card:nth-of-type(1) { min-height: 25rem; }
.panel-cards-wrapper + .panel-cards-wrapper .panel-card { flex-basis: calc(50% - calc(var(--s-md) * .5)); max-width: calc(50% - calc(var(--s-md) * .5)); }
.panel-cards-wrapper + .panel-cards-wrapper .panel-card .wp-block-columns { flex-direction: column; }
/* Hover lift */
.panel-card:hover { box-shadow: var(--shdw-lg-light); transform: translateY(-3px); }
.panel-card .kb-buttons-wrap a { position: static; }
.panel-card .kb-buttons-wrap a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card-md); z-index: 1; }
/* Focus ring at card boundary for keyboard users */
.panel-card .kb-buttons-wrap a:focus-visible { outline: none; }
.panel-card .kb-buttons-wrap a:focus-visible::after { outline: 3px solid var(--c-blue-400); outline-offset: 3px; }

/* ── 8. Agentic OS — intro text + device fan view ─────────────── */
section.agentic-os { padding: var(--s-3xl) 0 var(--s-lg); text-align: center; }
section.agentic-os > p { font-size: var(--fs-lg); max-width: 60ch; margin: var(--s-md) auto var(--s-lg); color: var(--c-gray-500); line-height: 1.6; }
section.agentic-os-spotlight.alignfull img { width: auto !important; }
/* ── Device fan view ──────────────────────────────────────────────
   The --fan-fp custom property (0 → 1) is driven by s3_device_fan.js
   via an IntersectionObserver. All figure positions are calculated
   with CSS calc() relative to --fan-fp.

   All three figures share left: 50% as their anchor point. The fan
   spread is applied via transform: translateX(), keeping figure 2
   (center device) as the visual pivot at all viewport widths.

   Start state (--fan-fp = 0): all three figures stacked at center.
   End state   (--fan-fp = 1): fanned out symmetrically around figure 2.

   Spread amounts use min() to freeze at their 1800px pixel equivalents
   at wide viewports — preventing unbounded spreading on large displays:
     Figure 1 fans left:  min(24vw, 432px)  [24 × 1800/100 = 432px]
     Figure 3 fans right: min(20vw, 360px)  [20 × 1800/100 = 360px]
     Figure 2 top drift:  max(-3vw, -54px)  [capped at -54px upward]

   @property --fan-fp (declared above) is required for calc() to treat
   the custom property as a typed <number> in child elements.
─────────────────────────────────────────────────────────────────── */
.sensi-device-view { padding-top: var(--s-md); }
.sensi-device-view .devices-wrapper { position: relative; /* Initialise --fan-fp at 0; JS overwrites this each frame */ --fan-fp: 0; /*background-image: url("https://sensi.ai/wp-content/uploads/2026/04/sensi_device-view1_shadow.png"); background-position: bottom center; background-repeat: no-repeat; background-size: 100%;*/ }
/* Base figure rules — all three anchor to left: 50%.
   transform: translateX() on each figure handles the fan spread,
   keeping figure 2 as the pivot. Rotation is applied to the inner
   img so it doesn't interfere with the figure's positioning transform. */
.sensi-device-view .devices-wrapper figure { position: absolute; left: 50%; max-width: 800px; opacity: 1; /* Suppress any lazy-load opacity transitions that would fight the fan tween */ transition: none !important; }
.sensi-device-view .devices-wrapper figure img { position: relative; max-width: 800px; /* Individual img transitions also suppressed */ transition: none !important; }
/* ── Figure 1 (fans left)
   Start: left 50%, translateX(-50%)      — stacked at center
   End:   translateX(-50% - 432px)        — 432px left of center
   432px = 24vw at 1800px viewport width.
───────────────────────────────────────────────────────── */
.sensi-device-view .devices-wrapper figure:nth-of-type(1) { z-index: 1; transform: translateX(calc(-50% - var(--fan-fp) * min(24vw, 432px))); top: 0; }
.sensi-device-view .devices-wrapper figure:nth-of-type(1) img { transform: rotate(calc(var(--fan-fp) * 3deg)); filter: drop-shadow(-1rem 3rem 2rem #5a606533); }
/* ── Figure 2 (centre card — always centered, slight upward drift)
   Stays at left: 50%, translateX(-50%) at all times.
   top drifts upward as fan-fp increases, capped at -54px
   (equivalent of -3vw at 1800px) so it doesn't over-lift on
   very wide viewports.
───────────────────────────────────────────────────────── */
.sensi-device-view .devices-wrapper figure:nth-of-type(2) { z-index: 2; transform: translateX(-50%); top: calc(var(--fan-fp) * max(-3vw, -54px)); }
.sensi-device-view .devices-wrapper figure:nth-of-type(2) img { transform: rotate(calc(var(--fan-fp) * 1deg)); filter: drop-shadow(-1rem 3rem 2rem #5a606545); }
/* ── Figure 3 (fans right — topmost in z-order)
   Start: left 50%, translateX(-50%)      — stacked at center
   End:   translateX(-50% + 360px)        — 360px right of center
   360px = 20vw at 1800px viewport width.
───────────────────────────────────────────────────────── */
.sensi-device-view .devices-wrapper figure:nth-of-type(3) { z-index: 3; transform: translateX(calc(-50% + var(--fan-fp) * min(20vw, 360px))); top: 0; }
.sensi-device-view .devices-wrapper figure:nth-of-type(3) img { transform: rotate(calc(var(--fan-fp) * 10deg)); filter: drop-shadow(-1rem 3rem 2rem #5a606545); }
/* Responsive wrapper heights */
@media (min-width: 1551px) and (max-width: 4000px) {
    .sensi-device-view .devices-wrapper { height: 44rem; }
}
@media (max-width: 1550px) {
    .sensi-device-view .devices-wrapper { min-height: 50svw; }
}
@media (max-width: 1450px) {
    /* Increase left fan slightly to match the smaller image width (700px) */
    .sensi-device-view .devices-wrapper figure:nth-of-type(1) { transform: translateX(calc(-50% - var(--fan-fp) * 26vw)); }
    /* Figure 2 needs no override — it stays centered at all breakpoints */
    .sensi-device-view .devices-wrapper figure img { max-width: 700px; }
}
@media (max-width: 1200px) {
    .sensi-device-view .devices-wrapper figure img { max-width: 50svw; }
    .sensi-device-view .devices-wrapper figure:nth-of-type(1) { transform: translateX(calc(-50% - var(--fan-fp) * 22vw)); }
    /* Figure 2 needs no override */
    .sensi-device-view .devices-wrapper figure:nth-of-type(3) { transform: translateX(calc(-50% + var(--fan-fp) * 22vw)); top: -1vw; }
}
/* ── 9. Agentic OS Spotlight ───────────────────────────────────── */
/*
   Two-column layout:
     Left  (.spotlight-grid-col)      — sticky grid of feature cards
     Right (.spotlight-passages-col)  — three tall scrolling passages,
                                        one per agent (care / growth / ops)

   s3_spotlight.js watches each .spotlight-passage and sets
   [data-spotlight-active="care|growth|ops"] on .agentic-os-spotlight.
   CSS reads that attribute to dim/illuminate card groups and toggle the
   aria-live label.
*/
/* Section header — sticky above the two-column layout */
.spotlight-section-header { text-align: center; margin-bottom: var(--s-xl);  position: sticky; top: 7rem; background: #fff; padding-top: 1rem; padding-bottom: 1rem; z-index: 99; max-width: 1300px; }
.admin-bar .spotlight-section-header { top: calc(7rem + 32px); }
section:is(.agentic-os-spotlight) .spotlight-section-header h2 { font-size: var(--fs-3xl); line-height: 1.2; text-wrap: balance; text-align: left; }
section:is(.agentic-os-spotlight) .spotlight-section-header h3 { font-size: var(--fs-xl); line-height: 1.2; margin-bottom: 0; text-wrap: balance;text-align: left; }

/* Two-column inner wrapper */
.spotlight-inner { display: grid; grid-template-columns: 50% 1fr; gap: var(--s-xl); align-items: start; max-width: 1300px; margin-inline: auto; padding-inline: var(--s-lg); }
/* Left column: sticky grid */
.spotlight-grid-col { position: sticky; top: 13rem; align-self: start; }
.spotlight-grid-sticky { padding-bottom: var(--s-lg); }
/* Active-group label (aria-live) */
.spotlight-active-label { display: flex; justify-content: flex-start; gap: var(--s-sm); margin-bottom: var(--s-sm); min-height: 2.25rem; }
.spotlight-active-label span { display: none; align-items: center; padding: 0.35em 1.1em; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-sb); letter-spacing: 0.05em; transition: all 0.3s ease; }
.spotlight-active-label .label-care { background: var(--c-blue-50); color: var(--c-blue-700); border: 1px solid #c9e8ff; }
.spotlight-active-label .label-growth { background: var(--c-blue-37); color: var(--c-blue-600); border: 1px solid #bddbf2; }
.spotlight-active-label .label-ops { background: var(--c-blue-25); color: var(--c-blue-500); border: 1px solid #daebf6; }
.agentic-os-spotlight[data-spotlight-active="care"]   .label-care { display: inline-flex; }
.agentic-os-spotlight[data-spotlight-active="growth"] .label-growth { display: inline-flex; }
.agentic-os-spotlight[data-spotlight-active="ops"]    .label-ops { display: inline-flex; }
/* 2-column card grid */
.spotlight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
/* Individual feature card */
.spotlight-card { padding: 0.5rem 1rem; border-radius: var(--radius-card-xs); display: grid; grid-template-columns: 1.75rem auto; gap: 0.75rem; align-items: center; transition: opacity 0.55s var(--ease-out), filter 0.55s var(--ease-out), transform 0.45s var(--ease-out); cursor: default; }
.spotlight-card .card-icon { display: flex; align-items: center; }
.spotlight-card .card-icon img { display: block; max-width: 24px; max-height: 24px; width: auto; height: auto; }
.spotlight-card h4 { font-size: var(--fs-xs); font-weight: var(--fw-sb); line-height: 1.3; margin: 0; }
.spotlight-card p { display: none; }
/* Card colour variants */
.spotlight-card.care { background: var(--c-blue-50); }
.spotlight-card.care   h4 { color: var(--c-blue-700); }
.spotlight-card.care   .card-icon img { filter: var(--ftr-blue-700); }
.spotlight-card.growth { background: var(--c-blue-37); }
.spotlight-card.growth h4 { color: var(--c-blue-600); }
.spotlight-card.growth .card-icon img { filter: var(--ftr-blue-600); }
.spotlight-card.ops { background: var(--c-blue-25) }
.spotlight-card.ops    h4 { color: var(--c-blue-500); }
.spotlight-card.ops    .card-icon img { filter: var(--ftr-blue-500); }

/* Spotlight dim / illuminate states */
.agentic-os-spotlight[data-spotlight-active] .spotlight-card { opacity: 0.22; filter: grayscale(0.5); transform: scale(0.97); }
.agentic-os-spotlight[data-spotlight-active="care"]   .spotlight-card.care,
.agentic-os-spotlight[data-spotlight-active="growth"] .spotlight-card.growth,
.agentic-os-spotlight[data-spotlight-active="ops"]    .spotlight-card.ops { opacity: 1; filter: none; transform: scale(1); }
/* Right column: scrolling passages */
.spotlight-passages-col { display: flex; flex-direction: column; }
.spotlight-passage { min-height: 75vh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--s-xl); }

/* Passage intro */
.spotlight-passage-intro { font-size: var(--fs-xl); font-weight: 500; line-height: 1.3; color: var(--c-gray-500); margin-bottom: var(--s-sm); padding: 0; }
.spotlight-passage[data-group="care"]   .spotlight-passage-intro strong { color: var(--c-blue-700); }
.spotlight-passage[data-group="growth"] .spotlight-passage-intro strong { color: var(--c-blue-600); }
.spotlight-passage[data-group="ops"]    .spotlight-passage-intro strong { color: var(--c-blue-500); }
/* Testimonial within each passage — CSS-driven transition on .is-active */
.spotlight-testimonial { padding: var(--s-md); border-radius: var(--radius-card); margin-top: var(--s-sm); opacity: 0; opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); background: linear-gradient(180deg, #fff 0%, #f6fbff 100%)}
.spotlight-passage.is-active .spotlight-testimonial { opacity: 1; transform: translateY(0); }
/* Testimonial colour variants */
.spotlight-passage[data-group="care"]   .spotlight-testimonial { border: 1px solid #c9e8ff; }
.spotlight-passage[data-group="growth"] .spotlight-testimonial { border: 1px solid #bddbf2; }
.spotlight-passage[data-group="ops"]    .spotlight-testimonial { border: 1px solid #daebf6; }
/* Testimonial quote text */
.spotlight-testimonial > p { font-size: var(--fs-md); line-height: 1.4; color: var(--c-gray-500); padding: 0; margin-bottom: var(--s-sm); }
.spotlight-testimonial > p::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); }
.spotlight-passage[data-group="care"]   .spotlight-testimonial > p::before { filter: var(--ftr-blue-700); }
.spotlight-passage[data-group="growth"] .spotlight-testimonial > p::before { filter: var(--ftr-blue-600); }
.spotlight-passage[data-group="ops"]    .spotlight-testimonial > p::before { filter: var(--ftr-blue-500); }
.spotlight-testimonial > p strong { color: var(--c-blue-700); }
.spotlight-passage[data-group="care"]   .spotlight-testimonial > p strong { color: var(--c-blue-700); }
.spotlight-passage[data-group="growth"] .spotlight-testimonial > p strong { color: var(--c-blue-600); }
.spotlight-passage[data-group="ops"]    .spotlight-testimonial > p strong { color: var(--c-blue-500); }
/* Testimonial attribution row */
.spotlight-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); }
.spotlight-passage[data-group="care"] .spotlight-testimonial .testimonial-meta {border-top-color: #c9e8ff; }
.spotlight-testimonial .testimonial-meta img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.spotlight-testimonial .testimonial-meta p { font-size: var(--fs-xs); line-height: 1.5; color: var(--c-gray-400); padding: 0; margin: 0; }
.spotlight-testimonial .testimonial-meta p::before { display: none; }
.spotlight-testimonial .testimonial-meta strong { display: block; color: var(--c-gray-600); font-size: var(--fs-sm); font-weight: var(--fw-sb); }
.spotlight-testimonial .testimonial-meta em { font-style: italic; }

@media (min-resolution: 1.5dppx) and (min-width: 1000px) {
    .spotlight-grid-col { top: 14rem; }
    .admin-bar .spotlight-grid-col { top: 16rem; }
    .spotlight-section-header { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    section:is(.agentic-os-spotlight) .spotlight-section-header :is(h2) { font-size: var(--fs-3xl); text-align: left; }
    section:is(.agentic-os-spotlight) .spotlight-section-header :is(h3) { font-size: var(--fs-2xl); text-align: left; }
    .spotlight-section-header h3 { font-size: var(--fs-2xl); }
    .spotlight-grid { gap: var(--s-xs); }
    .spotlight-card { padding: 0.9rem 1rem; }
    .spotlight-card h4 { font-size: var(--fs-sm); }
}

@media (min-width: 701px) {
section.agentic-os-spotlight:is(.agentic-os-spotlight-mobile) { display: none; }
.spotlight-section-header { padding-inline: var(--s-lg);}
}
@media (max-width: 700px) {
    section.agentic-os-spotlight:not(.agentic-os-spotlight-mobile) { display: none; }
    section.agentic-os-spotlight:is(.agentic-os-spotlight-mobile) { display: block; }
    .spotlight-section-header { position: static; margin-bottom: 0; }
    .spotlight-passage { min-height: auto; padding-block: var( --s-lg ); }
    .spotlight-testimonial { opacity: 1; transform: none; transition: none; margin-top: var(--s-lg); }
    .spotlight-inner { grid-template-columns: 1fr; gap: var(--s-lg); }
    .spotlight-grid-sticky { position: static; }
    .spotlight-grid { grid-template-columns: repeat(2, 1fr); }
    .spotlight-passage { min-height: initial; }
    .spotlight-passage { display: flex; justify-content: flex-start; gap: var(--s-sm); margin-bottom: var(--s-sm); min-height: 2.25rem; }
    .spotlight-passage span { width: fit-content; align-items: center; padding: 0.35em 1.1em; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-sb); letter-spacing: 0.05em; transition: all 0.3s ease; }
    .spotlight-passage[data-group="care"] .spotlight-passage-label { background: var(--c-blue-50); color: var(--c-blue-700); border: 1px solid #c9e8ff; }
    .spotlight-passage[data-group="growth"] .spotlight-passage-label { background: var(--c-blue-37); color: var(--c-blue-600); border: 1px solid #bddbf2; }
    .spotlight-passage[data-group="ops"] .spotlight-passage-label { background: var(--c-blue-25); color: var(--c-blue-500); border: 1px solid #daebf6; }
}
@media (max-width: 360px) {
    .spotlight-grid { grid-template-columns: 1fr; }
}
/* ── 10. Stats section ─────────────────────────────────────────── */
.sensi-stats { padding: var(--s-3xl) var(--s-lg); text-align: center; background: var(--c-gray-25); }
.sensi-stats .hero-script { font-size: var(--fs-xl); color: var(--c-gray-300); display: block; margin: 0 auto var(--s-xl); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-md); max-width: 880px; margin-inline: auto; }
.stat-card { padding: var(--s-md) var(--s-base); border-radius: var(--radius-card); background: var(--c-lightest); display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; }
.stat-number { font-family: 'Poppins', sans-serif; font-size: var(--fs-4xl); font-weight: 700; line-height: 1; letter-spacing: -0.03em; display: block; background: var(--grad-text-highlight2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.stat-eyebrow { font-size: var(--fs-lg); font-weight: 400; display: block; }
.stat-label { font-size: var(--fs-sm); color: var(--c-gray-400); font-weight: var(--fw-sb); line-height: 1.4; max-width: 14ch; display: block; }
/* ── 11. Trust panel ───────────────────────────────────────────── */
.sensi-benefits { padding: var(--s-xl) var(--s-lg); background: linear-gradient(180deg, #fff 0%, #f3faff 100%); }
section:is(.sensi-benefits) h2 { font-size: var(--fs-4xl); }
/* Trust panel logo wall */
.trust-panel { padding-block: var(--s-lg) 0; }
.trust-panel > .wp-block-columns { align-items: flex-start; gap: var(--s-md) var(--s-lg); flex-wrap: nowrap; }
.trust-panel .wp-block-column { flex: 1 1 0; min-width: 0; }
/* Ruled-line panel headings */
.trust-panel p.has-text-align-center { display: flex; align-items: center; gap: var(--s-sm); font-size: var(--fs-base); font-weight: var(--fw-n); color: var(--c-blue-500); white-space: nowrap; justify-content: center; padding: 0; margin: 0 0 var(--s-base); }
.trust-panel p.has-text-align-center::before,
.trust-panel p.has-text-align-center::after { content: ''; flex: 1 1 auto; height: 2px; background: var(--c-blue-500); border-radius: 1px; min-width: 0.75rem; max-width: 10%; }
.trust-panel > p.has-text-align-center { margin-block-start: var(--s-lg); margin-block-end: var(--s-base); }
/* Logo flex groups */
.trust-panel .wp-block-column .wp-block-group,
.trust-panel > .wp-block-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-sm) var(--s-md); }
/* Logo images */
.trust-panel .wp-block-image { margin: 0; line-height: 0; flex-basis: auto !important; }
.trust-panel .wp-block-image img { display: block; width: auto; max-height: 2.5rem; max-width: 8rem !important; height: auto; object-fit: contain; }
/* Staggered entrance animation — driven by .is-visible toggled by s3_animate.js.
   Reset behaviour: when the section scrolls out, s3_animate.js removes
   .is-visible, returning logos to opacity:0 so they re-animate on next entry. */
@keyframes trust-logo-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
    .trust-panel:not(.is-visible) :is(.wp-block-image, p.has-text-align-center) { opacity: 0; }
    .trust-panel.is-visible :is(.wp-block-image, p.has-text-align-center) { animation: trust-logo-in 1s ease both; }
    .trust-panel.is-visible .wp-block-column:first-child .wp-block-image:nth-child(1) { animation-delay: 0.05s; }
    .trust-panel.is-visible .wp-block-column:first-child .wp-block-image:nth-child(2) { animation-delay: 0.10s; }
    .trust-panel.is-visible .wp-block-column:first-child .wp-block-image:nth-child(3) { animation-delay: 0.15s; }
    .trust-panel.is-visible .wp-block-column:first-child .wp-block-image:nth-child(4) { animation-delay: 0.20s; }
    .trust-panel.is-visible .wp-block-column:last-child  .wp-block-image:nth-child(1) { animation-delay: 0.25s; }
    .trust-panel.is-visible .wp-block-column:last-child  .wp-block-image:nth-child(2) { animation-delay: 0.30s; }
    .trust-panel.is-visible .wp-block-column:last-child  .wp-block-image:nth-child(3) { animation-delay: 0.35s; }
    .trust-panel.is-visible > .wp-block-group .wp-block-image:nth-child(1) { animation-delay: 0.40s; }
    .trust-panel.is-visible > .wp-block-group .wp-block-image:nth-child(2) { animation-delay: 0.45s; }
    .trust-panel.is-visible > .wp-block-group .wp-block-image:nth-child(3) { animation-delay: 0.50s; }
    .trust-panel.is-visible > .wp-block-group .wp-block-image:nth-child(4) { animation-delay: 0.55s; }
    .trust-panel.is-visible > .wp-block-group .wp-block-image:nth-child(5) { animation-delay: 0.60s; }
    .trust-panel.is-visible > .wp-block-group .wp-block-image:nth-child(6) { animation-delay: 0.65s; }
    .trust-panel.is-visible > .wp-block-group .wp-block-image:nth-child(7) { animation-delay: 0.70s; }
}
/* ── 12. Testimonial carousel ──────────────────────────────────── */
.sensi-testimonials { padding: var(--s-xl) 0; background: linear-gradient(0deg, #fff 0%, #f3faff 100%); overflow: hidden; }
section.sensi-testimonials.alignfull img { width: auto !important; }
.testimonial-carousel { display: flex; flex-wrap: wrap; gap: var( --s-md ); padding: var( --s-sm ) 0 var( --s-md ); }
@media (min-width: 701px) {
    .testimonial-carousel { display: flex; flex-wrap: wrap; gap: var( --s-md ); padding: var( --s-sm ) var( --s-lg ) var( --s-md ); }
}
.testimonial-card { flex: 1 1 min( 340px, 100% ); padding: var( --s-md ) var( --s-lg ); border-radius: var( --radius-card ); background: var( --c-lightest ); border: 1px solid var( --c-gray-50 ); box-shadow: var( --shdw-md-light ); display: flex; flex-direction: column; gap: var( --s-sm ); }
.testimonial-card > p { font-size: var(--fs-md); line-height: 1.5; color: var(--c-gray-500); padding: 0; flex: 1; }
.testimonial-card > p::before { content: ''; display: block; width: 28px; height: 24px; 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-sm); filter: brightness(0) saturate(100%) invert(21%) sepia(100%) saturate(1806%) hue-rotate(188deg) brightness(88%) contrast(101%); }
.testimonial-card > p strong { color: var(--c-blue-600); }
.testimonial-card .testimonial-meta { display: flex; align-items: center; gap: var(--s-sm); padding-top: var(--s-sm); border-top: 1px solid var(--c-gray-50); }
.testimonial-card .testimonial-meta img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.testimonial-card .testimonial-meta p { font-size: var(--fs-xs); line-height: 1.5; color: var(--c-gray-400); padding: 0; margin: 0; }
.testimonial-card .testimonial-meta p::before { display: none; }
.testimonial-card .testimonial-meta strong { display: block; color: var(--c-gray-600); font-size: var(--fs-sm); font-weight: var(--fw-sb); }
.testimonial-card .testimonial-meta em { font-style: italic; }
/* ── 13. CTA / form section ────────────────────────────────────── */
/* The WPBakery form section stays as-is — add cosmetic overrides here. */
/* ── 14. Animation initial states ──────────────────────────────── */
/*
   CSS pre-hide states. s3_animate.js also writes these in JS (applyInitialState),
   but declaring them here prevents any flash of visible content between
   the browser painting the HTML and the script running — particularly
   important for elements that appear above the fold.
*/
[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); }
/* ── 15. Ring / ping animations (hero card) ────────────────────── */
.ping-wrapper { position: relative; display: inline-block; border-radius: 50%; }
.ping-wrapper figure { display: block; border-radius: 50%; }
.ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; aspect-ratio: 1; max-width: 80%; }
@keyframes ping-inward {
    0% { box-shadow: 0 0 0 32px rgba(55,138,221,0); }
    60% { box-shadow: 0 0 0 2px rgba(55,138,221,0.55); }
    100% { box-shadow: 0 0 0 0 rgba(55,138,221,0); }
}
.ring-1 { animation: ping-inward 3.5s ease-out 0.00s infinite; }
.ring-2 { animation: ping-inward 3.5s ease-out 0.50s infinite; }
.ring-3 { animation: ping-inward 3.5s ease-out 1.00s infinite; }
/* ── 16. Responsive ────────────────────────────────────────────── */

/* Mobile */
@media (max-width: 600px) {
    .hero-headline { letter-spacing: -0.02em; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-sm); }
    .trust-panel > .wp-block-columns { flex-wrap: wrap; gap: var(--s-xl); }
    .trust-panel p.has-text-align-center { white-space: normal; text-align: center; }
    .trust-panel p.has-text-align-center::before,
    .trust-panel p.has-text-align-center::after { flex: 0 0 1.5rem; min-width: 0; }
}
/* ── 17. Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    /* Panel card: suppress hover lift */
    .panel-card { transition: none; }
    .panel-card:hover { transform: none; box-shadow: var(--shdw-md-light); }
    /* Device fan: show all figures at their full fanned-out positions
       immediately, with no animation. --fan-fp: 1 makes all calc()
       expressions evaluate to their end-state values. */
    .sensi-device-view .devices-wrapper { --fan-fp: 1; }
    /* Also restore opacity since we use opacity: var(--fan-fp) on figures */
    .sensi-device-view .devices-wrapper figure { opacity: 1; }
    /* Spotlight transitions */
    .spotlight-card,
    .spotlight-testimonial { transition: none; }
    /* Testimonials visible immediately */
    .spotlight-testimonial { opacity: 1; transform: none; }
    /* Hero heart */
    .hero-heart { animation: none; }
    /* Ring animations */
    .ring-1,
    .ring-2,
    .ring-3 { animation: none; }
    /* Trust logo animation */
    .trust-panel:not(.is-visible) :is(.wp-block-image, p.has-text-align-center) { opacity: 1; }
    .trust-panel.is-visible :is(.wp-block-image, p.has-text-align-center) { animation: none; }
    /* Fade-up initial states — keep 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; }
}
/* ── 18. Responsive ────────────────────────────────────────── */
@media ( max-width: 1024px ) {
    /* Panel cards: all go full-width at tablet and below */
    .panel-cards-wrapper + .panel-cards-wrapper .panel-card { flex-basis: 100%; max-width: 100%; }
    .panel-cards-wrapper + .panel-cards-wrapper .panel-card .wp-block-columns { flex-direction: row; /* restore side-by-side image + text now that card is full-width */ }
}
@media ( max-width: 600px ) {
    /* ── Panel cards: stack text above image on mobile ── */
    .panel-cards-wrapper + .panel-cards-wrapper .panel-card .wp-block-columns { flex-direction: column; }
    .panel-card { min-height: auto; }
    /* ── Device view: single centred card, no fan ──
       Hide figures 1 and 3; show figure 2 as a normal in-flow element
       at a comfortable mobile size. s3_device_fan.js still runs but its
       --fan-fp changes have no visible effect on the hidden figures.    */
    .sensi-device-view .devices-wrapper { display: flex; justify-content: center; background-image: none; /* shadow bg doesn't read well at this size */ }
    .sensi-device-view .devices-wrapper figure:nth-of-type(2) { left: auto; top: auto; /* Reset the centering transform so flexbox controls positioning */ transform: none; opacity: 1 !important; max-width: min( 400px, 90vw ); }
    .sensi-device-view .devices-wrapper figure img { transform: none; filter: drop-shadow( .25rem .5rem 1.5rem #002c4d22 ); }
    /* ── Testimonials: full-width stack on mobile ── */
    .testimonial-card { flex-basis: 100%; }
}