/* ═══════════════════════════════════════
   HOMEPAGE MOTION LAYER
   Loaded after the page styles. Animates only opacity and the individual
   `translate` / `scale` properties, so it composes with the `transform`
   values components already use for hover/positioning instead of fighting them.
   Hidden "pre-reveal" states require html.motion-ok (set inline in <head>)
   and prefers-reduced-motion: no-preference, so content is never stuck hidden.
   ═══════════════════════════════════════ */
:root{
  --m-ease-out:cubic-bezier(.22,1,.36,1);
  --m-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --m-fast:160ms;
  --m-ui:320ms;
  --m-reveal:720ms;
  --m-hero:880ms;
  --m-stagger:80ms;
  --m-rise:20px;
}

@keyframes m-rise{from{opacity:0;translate:0 var(--m-rise)}to{opacity:1;translate:0 0}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-drop{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
@keyframes m-settle{from{scale:1.045}to{scale:1}}

/* ── Anchors land below the sticky nav ── */
html[data-landing="homepage"]{scroll-padding-top:calc(var(--nav-h) + 24px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── Sticky nav: fade the scrolled backdrop in instead of snapping it on ── */
.site-nav--on-hero,.site-nav--on-hero:not(.is-scrolled){background:none}
.site-nav--on-hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--white) 60%,rgba(255,255,255,0) 100%);
  opacity:0;transition:opacity var(--m-ui) var(--m-ease-out);
}
.site-nav--on-hero.is-scrolled::before{opacity:1}
.site-nav .nav-inner{
  transition:background-color var(--m-ui) var(--m-ease-out),backdrop-filter var(--m-ui) var(--m-ease-out),
    -webkit-backdrop-filter var(--m-ui) var(--m-ease-out),box-shadow var(--m-ui) var(--m-ease-out),border-color var(--m-ui) var(--m-ease-out);
}

/* ── Nav links: clean underline that draws in from the left ── */
.site-nav .nav-links a{position:relative}
.site-nav .nav-links a::after{
  content:'';position:absolute;left:16px;right:16px;bottom:3px;height:2px;border-radius:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--m-ui) var(--m-ease-out);pointer-events:none;
}
.site-nav .nav-links a:focus-visible::after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){
  .site-nav .nav-links a:hover{background:transparent;color:var(--ink)}
  .site-nav .nav-links a:hover::after{transform:scaleX(1)}
}

/* ── Buttons, chips, controls: press feedback (works on touch, no hover needed) ── */
.btn,.chip,.hero-search-btn,.hero-nav,.app-features-arrow,.carousel-dot,.hero-dot,.footer-social-link{-webkit-tap-highlight-color:transparent}
.btn{transition:background .22s,border-color .22s,transform .3s var(--m-ease-spring),box-shadow .25s,scale var(--m-fast) var(--m-ease-out)}
.btn:active{scale:.97}
.chip{transition:border-color .22s,background .22s,color .22s,transform .3s var(--m-ease-spring),box-shadow .22s,scale var(--m-fast) var(--m-ease-out)}
.chip:active{scale:.96}
.hero-search-btn{transition:background .15s,transform .25s var(--m-ease-spring),scale var(--m-fast) var(--m-ease-out)}
.hero-search-btn:active{scale:.95}
.hero-nav,.app-features-arrow{transition:background .15s,transform .15s,box-shadow .15s,scale var(--m-fast) var(--m-ease-out)}
.hero-nav:active,.app-features-arrow:active{scale:.92}

/* Arrow glyph inside CTAs nudges forward on hover */
.btn-arrow{display:inline-block;margin-left:-4px;transition:translate var(--m-ui) var(--m-ease-out)}
@media(hover:hover) and (pointer:fine){
  .btn:hover .btn-arrow{translate:4px 0}
}

/* ── Path split panels: CTA mirrors the button hover (it is pointer-events:none) ── */
.path-split-content{transition:translate .6s var(--m-ease-out)}
@media(hover:hover) and (pointer:fine){
  .path-split-panel:hover .path-split-content{translate:0 -6px}
  .path-split-panel:hover .path-split-cta{background:var(--green-100);transform:translateY(-2px)}
}

/* ── Touch: hover lifts would otherwise "stick" after a tap ── */
@media(hover:none){
  .coach-card:hover{transform:none;border-color:var(--border);box-shadow:0 2px 4px rgba(42,42,42,.04),0 12px 28px rgba(42,42,42,.06)}
  .coach-card:hover::before{opacity:0}
  .coach-card:hover .coach-photo img{transform:none}
  .chip:hover{transform:none;box-shadow:none}
  .path-split-panel:hover .path-split-img img{transform:none}
}

/* ── Keyboard focus ── */
html[data-landing="homepage"] :is(a,button,[tabindex]):focus-visible{outline:2px solid var(--blue-600);outline-offset:3px}
html[data-landing="homepage"] :is(.site-footer,.closing-cta) :is(a,button):focus-visible{outline-color:#fff}
html[data-landing="homepage"] .path-split-panel:focus-visible{outline:2px solid #fff;outline-offset:-6px}
html[data-landing="homepage"] .story-card:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
html[data-landing="homepage"] .hero-search:focus-within{transition:border-color var(--m-ui) var(--m-ease-out),box-shadow var(--m-ui) var(--m-ease-out)}

/* ── Hero slides crossfade instead of hard-cutting (slides are stacked in one grid cell) ── */
@media(prefers-reduced-motion:no-preference){
  /* Outgoing slide leaves faster than the incoming one arrives, and its copy drops out
     almost immediately, so two headlines never ghost over each other */
  @media(min-width:768px){
    .hero-slider--fixed-search .hero-slide.hero-slide--photo{opacity:0;transition:opacity .45s var(--m-ease-out),visibility 0s linear .45s}
    .hero-slider--fixed-search .hero-slide.hero-slide--photo.is-active{opacity:1;transition:opacity .8s var(--m-ease-out),visibility 0s}
    .motion-ok .hero-slider--fixed-search .hero-slide:not(.is-active) .hero-copy-top{opacity:0;transition:opacity .15s linear}
  }
  @media(max-width:767px){
    .hero-slider--fixed-search .hero-mobile-slide{opacity:0;transition:opacity .45s var(--m-ease-out),visibility 0s linear .45s}
    .hero-slider--fixed-search .hero-mobile-slide.is-active{opacity:1;transition:opacity .8s var(--m-ease-out),visibility 0s}
    .hero-slider--fixed-search .hero-mobile-slide:not(.is-active) .hero-mobile-content{opacity:0;transition:opacity .15s linear}
  }
}

/* ── Hero entrance + per-slide text replay ── */
@media(prefers-reduced-motion:no-preference){
  /* The hero runs its own sequence, so the generic scroll reveal is neutralized here */
  .motion-ok .hero .reveal{opacity:1;transform:none;transition:none}

  .motion-ok .site-nav .nav-inner{animation:m-drop .6s var(--m-ease-out) backwards}

  .motion-ok .hero-slide.is-active .hero-bg,
  .motion-ok .hero-mobile-slide.is-active .hero-mobile-photo{animation:m-settle 1.6s var(--m-ease-out) backwards}

  .motion-ok .hero-slide.is-active .hero-copy-top>*,
  .motion-ok .hero-mobile-slide.is-active .hero-mobile-content>*{animation:m-rise var(--m-hero) var(--m-ease-out) 160ms backwards}
  .motion-ok .hero-slide.is-active .hero-copy-top>*+*,
  .motion-ok .hero-mobile-slide.is-active .hero-mobile-content>*+*{animation-delay:260ms}

  .motion-ok .hero-fixed-search .hero-search-wrap{animation:m-rise var(--m-hero) var(--m-ease-out) 260ms backwards}
  .motion-ok .hero-fixed-search .hero-chips{animation:m-rise var(--m-hero) var(--m-ease-out) 340ms backwards}
  .motion-ok .hero-fixed-search .hero-trust{animation:m-rise var(--m-hero) var(--m-ease-out) 420ms backwards}
  .motion-ok .hero-nav,.motion-ok .hero-dots{animation:m-fade .6s var(--m-ease-out) 600ms backwards}
}

/* ── Scroll reveals ──
   [data-motion]          → the element fades up once
   [data-motion-stagger]  → its direct children fade up in sequence
   motion.js adds .is-inview (and .is-instant for content already scrolled past). */
@media(prefers-reduced-motion:no-preference){
  .motion-ok [data-motion]:not(.is-inview),
  .motion-ok [data-motion-stagger]:not(.is-inview)>*{opacity:0}

  .motion-ok [data-motion].is-inview,
  .motion-ok [data-motion-stagger].is-inview>*{
    animation:m-rise var(--m-reveal) var(--m-ease-out) backwards;
    animation-delay:calc(var(--m-i,0) * var(--m-stagger) + var(--m-delay,0ms));
  }
  .motion-ok [data-motion-stagger]>:nth-child(2){--m-i:1}
  .motion-ok [data-motion-stagger]>:nth-child(3){--m-i:2}
  .motion-ok [data-motion-stagger]>:nth-child(4){--m-i:3}
  .motion-ok [data-motion-stagger]>:nth-child(5){--m-i:4}
  .motion-ok [data-motion-stagger]>:nth-child(n+6){--m-i:5}

  .motion-ok .is-instant,
  .motion-ok .is-instant>*{animation:none !important}
}

/* ── Parallax (motion.js enables .motion-parallax on desktop fine-pointer only) ──
   Section images get a little overscan so the drift never exposes an edge. */
.motion-parallax .hero-slide--photo .hero-bg{overflow:hidden}
.motion-parallax [data-parallax]{will-change:translate}
.motion-parallax .path-split-img img[data-parallax]{position:absolute;left:0;top:-5%;height:110%}

/* ── Banner 3D camera ──
   The photo is one flat image, so the room orbits in perspective instead of
   a separate 3D model covering the logo. Copy stays on the flat layer above.
   Desktop: motion.js writes --rx/--ry and adds .is-3d (idle orbit, then pointer).
   Mobile and no-JS: the CSS orbit runs on its own. */
@media(prefers-reduced-motion:no-preference){
  .hero-slide--photo .hero-bg{perspective:1800px;overflow:hidden}
  .hero-slide--photo .hero-bg img{transform-origin:64% 48%;scale:1.14}
  .motion-ok .hero-slider:not(.is-3d) .hero-slide--photo .hero-bg img{animation:m-banner-orbit 12s ease-in-out infinite}
  .hero-slider.is-3d .hero-slide--photo .hero-bg img{transform:rotateX(var(--rx,1.6deg)) rotateY(var(--ry,-6deg))}

  .hero-mobile-photo{perspective:900px;overflow:hidden}
  .motion-ok .hero-mobile-photo img{transform-origin:50% 42%;scale:1.08;animation:m-banner-orbit-sm 18s ease-in-out infinite}
}
@keyframes m-banner-orbit{
  0%,100%{transform:rotateX(1.6deg) rotateY(-6deg)}
  50%{transform:rotateX(-1.6deg) rotateY(6deg)}
}
@keyframes m-banner-orbit-sm{
  0%,100%{transform:rotateX(.8deg) rotateY(-2.2deg)}
  50%{transform:rotateX(-.8deg) rotateY(2.2deg)}
}

/* ═══════════════════════════════════════
   HERO "VITAL SIGNAL" LAYER
   Sits between the slide photo (z0) and the copy (z2) on desktop, masked to the
   copy column so the photo subject on the right stays untouched.
   Resting state (reduced motion / no JS loop): grid + glow + fully drawn trace.
   ═══════════════════════════════════════ */
@keyframes m-breathe{
  0%{scale:.94;opacity:.72}
  40%{scale:1.05;opacity:1}
  100%{scale:.94;opacity:.72}
}
@keyframes m-draw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes m-pulse-travel{from{stroke-dashoffset:60}to{stroke-dashoffset:-1000}}

.hero-vitals{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-vitals>*{position:absolute}
.hero-vitals-grid{
  inset:0;
  background-image:linear-gradient(rgba(13,50,86,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(13,50,86,.05) 1px,transparent 1px);
  background-size:48px 48px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 32% 62% at 22% 46%,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%);
          mask-image:radial-gradient(ellipse 32% 62% at 22% 46%,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%);
}
.hero-vitals-field{
  left:-6%;top:-10%;width:58%;height:120%;
  background:
    radial-gradient(ellipse 46% 40% at 44% 46%,rgba(0,220,109,.2) 0%,rgba(0,220,109,.08) 45%,transparent 72%),
    radial-gradient(ellipse 30% 26% at 30% 30%,rgba(31,154,224,.12) 0%,transparent 70%);
  transform-origin:40% 46%;
  transition:filter .9s var(--m-ease-out);
}
.hero-vitals-light{
  left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,220,109,.13) 0%,rgba(0,220,109,.05) 40%,transparent 70%);
  opacity:0;transition:opacity .6s var(--m-ease-out);will-change:transform;
}
.hero-vitals.is-pointer .hero-vitals-light{opacity:var(--lo,1)}
.hero-vitals-canvas{
  left:0;top:0;width:52%;height:100%;opacity:0;transition:opacity 1.6s var(--m-ease-out);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 60%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0%,#000 60%,transparent 100%);
}
.hero-vitals.is-live .hero-vitals-canvas{opacity:1}
.hero-vitals-ticks{
  left:0;right:0;bottom:2px;height:7px;
  background:
    repeating-linear-gradient(90deg,rgba(13,50,86,.22) 0 1px,transparent 1px 60px) bottom/100% 7px no-repeat,
    repeating-linear-gradient(90deg,rgba(13,50,86,.14) 0 1px,transparent 1px 12px) bottom/100% 3px no-repeat;
}
.hero-vitals-wave{left:0;bottom:6px;width:max(100%,1100px);height:44px;overflow:visible}
.hero-vitals-wave path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.hero-vitals-wave-base{stroke:rgba(0,137,68,.28);stroke-width:1.25;stroke-dasharray:1000;stroke-dashoffset:0}
.hero-vitals-wave-halo,.hero-vitals-wave-pulse{stroke-dasharray:60 1100;stroke-dashoffset:60;opacity:0;transition:opacity .6s var(--m-ease-out)}
.hero-vitals-wave-halo{stroke:rgba(0,220,109,.22);stroke-width:7}
.hero-vitals-wave-pulse{stroke:#00b259;stroke-width:2}
.hero-vitals-ticks,.hero-vitals-wave{
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 22%,transparent 50%);
          mask-image:linear-gradient(90deg,#000 0%,#000 22%,transparent 50%);
}
/* Engaged (search focused): the signal quickens and the field warms up */
.hero-slider.is-engaged .hero-vitals-field{filter:saturate(1.5) brightness(1.04)}

@media(prefers-reduced-motion:no-preference){
  .motion-ok .hero-vitals-grid{animation:m-fade 1.4s var(--m-ease-out) 200ms backwards}
  .motion-ok .hero-vitals-wave-base{animation:m-draw 2s cubic-bezier(.65,0,.35,1) 500ms backwards}
  /* CSS loop until/unless motion.js takes over with the JS-driven, interaction-aware loop */
  .motion-ok .hero-vitals:not(.is-js) .hero-vitals-field{animation:m-breathe 10s ease-in-out infinite}
  .motion-ok .hero-vitals:not(.is-js) .hero-vitals-wave-halo,
  .motion-ok .hero-vitals:not(.is-js) .hero-vitals-wave-pulse{opacity:1;animation:m-pulse-travel 3.6s cubic-bezier(.45,0,.55,1) 2.6s infinite backwards}
}
.hero-vitals.is-js .hero-vitals-wave-halo,.hero-vitals.is-js .hero-vitals-wave-pulse{opacity:1}

/* Mobile: the copy sits on an opaque white panel above the photo, so the layer is lifted
   on top and multiplied — it tints the white without ever covering text. Glow only. */
@media(max-width:767px){
  .hero-vitals{z-index:4;mix-blend-mode:multiply;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 52%);
            mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 52%)}
  .hero-vitals-grid,.hero-vitals-light,.hero-vitals-canvas,.hero-vitals-ticks,.hero-vitals-wave{display:none}
  .hero-vitals-field{left:-20%;top:2%;width:140%;height:46%;transform-origin:50% 50%;
    background:radial-gradient(ellipse 48% 46% at 50% 52%,rgba(0,220,109,.14) 0%,rgba(0,220,109,.05) 50%,transparent 74%)}
}

/* ═══════════════════════════════════════
   TACTILE LAYER — pointer light, tilt, depth, magnetic, ripple
   All pointer-driven effects are enabled by motion.js on fine pointers only.
   ═══════════════════════════════════════ */
[data-surface]{--gx:50%;--gy:50%;--rx:0deg;--ry:0deg}

/* Luminous edge: a 1px ring lit where the pointer is */
.coach-card::after,.story-card::after,.cta-vitals::after{
  content:'';position:absolute;inset:0;z-index:6;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(240px circle at var(--gx) var(--gy),rgba(0,220,109,.85),rgba(0,178,89,.25) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .45s var(--m-ease-out);
}
.story-card::after{background:radial-gradient(260px circle at var(--gx) var(--gy),rgba(255,255,255,.9),rgba(125,255,184,.35) 40%,transparent 70%)}
[data-surface].is-lit::after{opacity:1}

/* Path panels: soft light falloff over the photo + counter-moving image for depth */
.path-split-panel::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(560px circle at var(--gx) var(--gy),rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,transparent 70%);
  opacity:0;transition:opacity .6s var(--m-ease-out);
}
.path-split-panel.is-lit::after{opacity:1}
.path-split-img[data-depth]{transition:transform .9s var(--m-ease-out)}

/* Gentle 3D tilt */
[data-tilt]{transform-style:flat}
[data-tilt].is-lit{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .18s ease-out,box-shadow .35s ease}
.story-card[data-tilt].is-lit{box-shadow:0 18px 40px -12px rgba(0,0,0,.35)}

/* Magnetic CTAs + ripple. .btn already transitions; translate joins the list. */
.btn{transition:background .22s,border-color .22s,transform .3s var(--m-ease-spring),box-shadow .25s,scale var(--m-fast) var(--m-ease-out),translate .5s var(--m-ease-spring)}
.btn,.hero-search-btn,.chip{position:relative;overflow:hidden;isolation:isolate}
@keyframes m-ripple{from{scale:0;opacity:.26}to{scale:1;opacity:0}}
.m-ripple{position:absolute;z-index:-1;border-radius:50%;background:currentColor;pointer-events:none;animation:m-ripple .65s cubic-bezier(.2,.7,.3,1) forwards}

/* Luminous edge sweep on the primary closing CTA */
.closing-cta-btn::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(0,220,109,.22) 48%,rgba(255,255,255,.7) 52%,transparent 70%) no-repeat;
  background-size:250% 100%;background-position:120% 0;
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .closing-cta-btn:hover::before{background-position:-20% 0;transition:background-position 1.1s var(--m-ease-out)}
}

/* ═══════════════════════════════════════
   SCROLL STORYTELLING — mask reveals, scroll-linked settle, counters
   ═══════════════════════════════════════ */
@keyframes m-mask{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes m-mask-rise{
  from{opacity:0;translate:0 28px;clip-path:inset(26% 0 0 0 round 28px)}
  to{opacity:1;translate:0 0;clip-path:inset(0 0 0 0 round 28px)}
}
@keyframes m-settle-lg{from{scale:1.16}to{scale:1}}
@keyframes m-cta-open{from{clip-path:inset(0 4.5% round 44px)}to{clip-path:inset(0 0 round 28px)}}

@media(prefers-reduced-motion:no-preference){
  .motion-ok [data-motion-stagger="mask"].is-inview>*{
    animation-name:m-mask;animation-duration:1.15s;animation-timing-function:cubic-bezier(.77,0,.18,1);
    --m-stagger:140ms;
  }
  .motion-ok #pathSplitTrack.is-inview .path-split-img{
    animation:m-settle-lg 1.8s var(--m-ease-out) backwards;animation-delay:calc(var(--m-i,0) * 140ms)
  }
  .motion-ok #pathSplitTrack.is-inview>:nth-child(2) .path-split-img{--m-i:1}
  .motion-ok #pathSplitTrack.is-inview .path-split-content>*{
    animation:m-rise .8s var(--m-ease-out) backwards;
    animation-delay:calc(520ms + var(--m-c,0) * 70ms + var(--m-i,0) * 140ms)
  }
  .motion-ok #pathSplitTrack>:nth-child(2) .path-split-content>*{--m-i:1}
  .motion-ok .path-split-content>:nth-child(2){--m-c:1}
  .motion-ok .path-split-content>:nth-child(3){--m-c:2}
  .motion-ok .path-split-content>:nth-child(4){--m-c:3}

  .motion-ok .stories-track[data-motion-stagger="mask"].is-inview>*{
    animation-name:m-mask-rise;animation-duration:.95s;animation-timing-function:var(--m-ease-out);--m-stagger:90ms
  }

  @supports (animation-timeline:view()){
    .motion-ok .closing-cta{animation:m-cta-open linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  }

  .motion-ok .trust-strip[data-count-up]:not(.is-counted) .trust-stat strong{opacity:0}
}
.trust-stat strong{font-variant-numeric:tabular-nums;transition:opacity .3s var(--m-ease-out)}

/* ═══════════════════════════════════════
   SAMPLE BIOMETRIC WIDGET (closing CTA, wide desktop only — sits in the
   banner's white top-right area and echoes the phone UI's progress rings)
   ═══════════════════════════════════════ */
.cta-vitals{display:none}
@media(min-width:1200px){
  .cta-vitals{
    position:absolute;z-index:2;top:7%;right:3%;
    display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;border-radius:18px;
    background:rgba(255,255,255,.92);border:1px solid rgba(13,50,86,.08);
    box-shadow:0 1px 2px rgba(13,50,86,.06),0 10px 28px -10px rgba(13,50,86,.22),0 24px 48px -24px rgba(0,137,68,.25);
    color:var(--ink);transition:transform .5s var(--m-ease-out),box-shadow .35s ease;
  }
}
.cta-vitals-ring{width:76px;height:76px;flex-shrink:0;rotate:-90deg;overflow:visible;filter:drop-shadow(0 2px 6px rgba(0,178,89,.25))}
.cta-vitals-tick{stroke:rgba(13,50,86,.16);stroke-width:1;stroke-linecap:round;transition:stroke .3s ease}
.cta-vitals-tick.is-lit{stroke:var(--green-700)}
.cta-vitals-track{fill:none;stroke:rgba(0,137,68,.1);stroke-width:5}
.cta-vitals-arc{fill:none;stroke:var(--green-700);stroke-width:5;stroke-linecap:round;stroke-dasharray:72 100;transition:stroke-dasharray 1.5s cubic-bezier(.65,0,.35,1) .25s}
.cta-vitals-value{position:absolute;left:12px;top:50%;width:76px;margin-top:-11px;text-align:center;font-size:17px;line-height:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cta-vitals-value b{font-weight:800}
.cta-vitals-meta{display:flex;flex-direction:column;gap:2px;min-width:118px}
.cta-vitals-label{font-size:13px;font-weight:700;line-height:1.2}
.cta-vitals-sub{font-size:12px;color:var(--muted);line-height:1.3}
.cta-vitals-spark{width:118px;height:22px;margin:4px 0 2px;overflow:visible}
.cta-vitals-spark path{fill:none;stroke:var(--green-700);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) .5s}
.cta-vitals-tag{align-self:flex-start;margin-top:2px;padding:2px 7px;border-radius:999px;border:1px solid var(--border);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media(prefers-reduced-motion:no-preference){
  .motion-ok .cta-vitals:not(.is-inview) .cta-vitals-arc{stroke-dasharray:0 100}
  .motion-ok .cta-vitals:not(.is-inview) .cta-vitals-tick.is-lit{stroke:rgba(13,50,86,.16)}
  .motion-ok .cta-vitals:not(.is-inview) .cta-vitals-spark path{stroke-dashoffset:100}
  .motion-ok .cta-vitals .cta-vitals-tick.is-lit{transition-delay:calc(250ms + var(--t) * 30ms)}
  .motion-ok .cta-vitals[data-motion].is-inview{--m-delay:350ms}
}

@media print{
  .motion-ok [data-motion],.motion-ok [data-motion-stagger]>*{opacity:1 !important;animation:none !important}
}