/* MDAi Health shared styles: logo marks, nav states, icons, hover and scroll motion.
   Rules: every animation or transition sits in a prefers-reduced-motion: no-preference block;
   pointer effects also need (hover: hover) and (pointer: fine). Without JavaScript or this
   file, every page is still complete and readable. */

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* DM Serif Display ships one weight; stop browsers synthesising bold */
h1,h2,h3{font-weight:400}
.count{display:inline-block;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* LOGO MARKS */
.mark{display:block;flex-shrink:0;width:30px;height:30px}
.mark-chip{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;border-radius:7px;background:#fff}
.mark-chip .mark{width:24px;height:24px;border-radius:0}

/* NAV: shadow layer and current-section underline (state only; movement is in the motion block) */
nav::after{content:'';position:absolute;inset:0;box-shadow:0 6px 24px rgba(10,30,63,.12);opacity:0;pointer-events:none}
nav.scrolled::after{opacity:1}
nav.scrolled{background:rgba(247,246,242,.97)}
.nav-links a:not(.nav-cta),.nav-dropdown-trigger{position:relative}
.nav-links a:not(.nav-cta)::after,.nav-dropdown-trigger::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left}
.nav-links .is-current:not(.nav-cta){color:var(--navy)}
.nav-links .is-current::after,.nav-links a:not(.nav-cta):hover::after,.nav-dropdown-trigger:hover::after{transform:scaleX(1)}

/* SCROLL PROGRESS (created by script) */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none;background:linear-gradient(90deg,#FF6B00,#FF9A4D);transform:scaleX(0);transform-origin:0 50%}

/* LINKS: underline drawn with a background so it can sweep on hover */
.footer-links a,.cta-note a,.product-link,.nav-dd-item.live .nav-dd-name{background:linear-gradient(90deg,currentColor 50%,transparent 50%) no-repeat calc(100% - 2px) 100%/200% 1px;padding-bottom:2px}
.spine-lead a,.rppeo p a,main p a,main li a{text-decoration:none!important;background:linear-gradient(90deg,var(--orange) 50%,currentColor 50%) no-repeat 100% 100%/200% 1px;padding-bottom:2px}
.footer-links a:hover,.footer-links a:focus-visible,.cta-note a:hover,.product-link:hover,.nav-dd-item.live:hover .nav-dd-name,
.spine-lead a:hover,.rppeo p a:hover,main p a:hover,main li a:hover,
.spine-lead a:focus-visible,.rppeo p a:focus-visible,main p a:focus-visible,main li a:focus-visible{background-position:0 100%}

/* BUTTON ARROWS AND ICONS */
.btn-primary,.btn-secondary{display:inline-flex;align-items:center;gap:9px}
.arr{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-email .ico,.cta-email .ico{width:19px;height:19px}

/* HOVER GLOW CARDS: --cx/--cy are set by script; ring is masked to the edge */
.gc{position:relative;--glow:255,122,31}
.gc::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--cx,50%) var(--cy,0%),rgba(var(--glow),.95),rgba(var(--glow),0) 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)}

/* HERO ECG LINE (decorative, behind the headline) */
.ecg{position:absolute;left:0;top:50%;width:max(100%,900px);height:160px;margin-top:-30px;pointer-events:none;z-index:0}
.ecg svg{display:block;width:100%;height:100%;overflow:visible}
.ecg path{fill:none;stroke-linejoin:round;stroke-linecap:round}
.ecg-base{stroke:rgba(255,255,255,.065);stroke-width:2}
.ecg-sweep{stroke:rgba(255,150,80,.36);stroke-width:2;stroke-dasharray:.16 2;stroke-dashoffset:.16;opacity:0}
.ecg-dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#FF7A1F;opacity:0;box-shadow:0 0 0 4px rgba(255,122,31,.18),0 0 18px rgba(255,122,31,.8)}
.ecg.live .ecg-sweep{opacity:1}
.hero-spot{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(560px circle at var(--hx,50%) var(--hy,40%),rgba(255,255,255,.075),rgba(255,140,60,.035) 35%,transparent 65%)}
.hero.spot-on .hero-spot{opacity:1}

/* TILT WRAPPER: deeper shadow layer behind a phone frame */
.tilt{position:relative;width:fit-content;max-width:100%;margin:0 auto}
.tilt::before{content:'';position:absolute;inset:8% 6% 2%;border-radius:40px;box-shadow:0 50px 90px rgba(5,15,33,.42);opacity:0;z-index:-1;pointer-events:none}

/* DECORATIVE DOT FIELD on dark sections */
.dots::after{content:'';position:absolute;inset:-20% 0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1.2px,transparent 1.7px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 40% 45% at 88% 35%,#000 0%,transparent 100%);mask-image:radial-gradient(ellipse 40% 45% at 88% 35%,#000 0%,transparent 100%)}

@media(prefers-reduced-motion:no-preference){
  nav{transition:transform .35s ease,background-color .3s ease}
  nav::after{transition:opacity .3s ease}
  nav .nav-inner{transition:transform .35s ease}
  nav.scrolled{transform:translateY(-6px)}
  nav.scrolled .nav-inner{transform:translateY(3px)}
  nav .nav-logo img,nav .nav-logo .mark{transition:transform .35s ease}
  nav.scrolled .nav-logo img,nav.scrolled .nav-logo .mark{transform:scale(.88)}
  .nav-links a:not(.nav-cta)::after,.nav-dropdown-trigger::after{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .footer-links a,.cta-note a,.product-link,.nav-dd-item.live .nav-dd-name,.spine-lead a,.rppeo p a,main p a,main li a{transition:background-position .35s cubic-bezier(.2,.7,.2,1),color .15s ease}
  .arr{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  .btn-primary:hover .arr,.btn-secondary:hover .arr,.btn-primary:focus-visible .arr,.btn-secondary:focus-visible .arr{transform:translateX(4px)}
  .contact-email:hover .ico,.cta-email:hover .ico{animation:mailWiggle .6s ease}
  @keyframes mailWiggle{30%{transform:rotate(-10deg) scale(1.1)}60%{transform:rotate(6deg)}}
  .gc::after{transition:opacity .3s ease}
  .chip{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .gc:hover .chip,.gc:focus-within .chip{transform:translateY(-2px)}
  .gc:hover .chip .ico,.gc:focus-within .chip .ico{animation:chipPop .7s cubic-bezier(.3,.7,.3,1) forwards}
  @keyframes chipPop{0%{transform:none}35%{transform:scale(1.2) rotate(-10deg)}65%{transform:scale(.95) rotate(6deg)}100%{transform:scale(1.06)}}
  .progress{will-change:transform}
  .hero-spot{transition:opacity .5s ease}
  .split .hw{display:inline-block;animation:wordUp .65s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 38ms + 60ms)}
  @keyframes wordUp{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
  .px::before{translate:0 calc(var(--sy,0px) * .22)}
  .px::after{translate:0 calc(var(--sy,0px) * -.1)}
  .px.dots::after{translate:0 calc(var(--sy,0px) * .14)}
  .tilt::before{transition:opacity .4s ease}
}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .gc:hover::after{opacity:1}
  .gc:hover{background-image:radial-gradient(420px circle at var(--cx,50%) var(--cy,0%),rgba(var(--glow),.07),transparent 65%)}
  [data-tilt]{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
  .tilt:hover::before{opacity:1}
  .mag{translate:var(--mx,0px) var(--my,0px);transition:translate .25s cubic-bezier(.2,.7,.2,1),transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease}
}