/* Home page hero (index.php): the slide images (assets/images/slider/imgslider2-wide, imgslider1-wide, imgslider-nano-glucometer-wide, imgslider-anupath-nano-wide;
   1920 x 640 since 2026-11-11, was 1920 x 820; the words of slides 1 and 2 are in the pictures and in the alt text) in a Splide 4 slider (assets/splide/, started by
   assets/js/site-hero.js). The slider is as tall as the pictures at the page's width (1920 : 640, 3 : 1), on every screen above phones. Tokens from site-tokens.css. */
.ps-hero{position:relative;visibility:visible;background:var(--bg-dark)}   /* Splide hides itself until it starts; the first picture shows at once instead */
.ps-hero *,.ps-hero *::before,.ps-hero *::after{box-sizing:border-box}
.ps-hero .splide__slide a{display:block}
.ps-hero picture{display:block}
.ps-hero .ps-gl-copy.ps-ph-copy{display:none}   /* slides 1 and 2: their words as text, for phones only (above 767px they are in the pictures) */
.ps-hero .splide__slide img{display:block;width:100%;height:auto;aspect-ratio:1920/640}
.ps-hero .splide__slide{overflow:hidden}
/* each slide's picture settles as it comes in: the entrance of Photoshoot/Website-Hero/index.html ("anp-settle": from 4% larger and
   40% opacity to rest, 1.6 s). Its text rise and underline draw need live text; these slides' words are in the pictures. */
@media (prefers-reduced-motion:no-preference){
  .ps-hero .splide__slide.is-active img{animation:ps-settle 1.6s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes ps-settle{from{transform:scale(1.04);opacity:.4}to{transform:none;opacity:1}}
.ps-hero a:focus-visible,.ps-hero button:focus-visible{outline:3px solid var(--action-primary);outline-offset:-3px}

/* arrows (made by Splide): round, white, at the sides */
.ps-hero .splide__arrow{position:absolute;z-index:2;top:50%;display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-top:-26px;padding:0;
  border:0;border-radius:50%;background:rgba(255,255,255,.88);color:var(--bg-dark);box-shadow:0 10px 30px -12px rgba(18,23,53,.6);cursor:pointer;
  opacity:0;transition:opacity .25s,background-color .2s,color .2s}
.ps-hero:hover .splide__arrow,.ps-hero .splide__arrow:focus-visible{opacity:1}
.ps-hero .splide__arrow:hover{background:var(--action-primary);color:var(--text-on-accent)}
.ps-hero .splide__arrow:disabled{opacity:0!important;cursor:default}
.ps-hero .splide__arrow svg{width:18px;height:18px;fill:currentColor}
.ps-hero .splide__arrow--prev{left:clamp(12px,2vw,32px)}
.ps-hero .splide__arrow--prev svg{transform:scaleX(-1)}
.ps-hero .splide__arrow--next{right:clamp(12px,2vw,32px)}

/* the bar in the lower left corner (clear of the slides' words and the glucometer): one dash per slide and the pause/play button, on a dark pill */
.ps-hero .ps-hero-bar{position:absolute;z-index:2;left:clamp(8px,2vw,32px);bottom:clamp(8px,1.6vw,24px);display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;
  border-radius:var(--radius-pill);background:rgba(18,23,53,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ps-hero .ps-hero-dots{position:static;display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none;transform:none}
.ps-hero .ps-hero-dots li{display:flex;margin:0;line-height:0}
.ps-hero .splide__pagination__page{position:relative;display:block;width:28px;height:4px;margin:0;padding:0;border:0;border-radius:2px;background:rgba(255,255,255,.45);cursor:pointer;
  transition:width .3s,background-color .3s}
.ps-hero .splide__pagination__page::before{content:"";position:absolute;inset:-12px -4px}   /* a taller target to tap */
.ps-hero .splide__pagination__page.is-active{width:48px;background:var(--crimson-300)}
.ps-hero .ps-hero-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:background-color .2s}
.ps-hero .ps-hero-toggle:hover{background:rgba(255,255,255,.3)}
.ps-hero .splide__toggle__pause,.ps-hero .splide__toggle.is-active .splide__toggle__play{display:none}
.ps-hero .splide__toggle.is-active .splide__toggle__pause{display:flex}
.ps-hero .splide__toggle__play{display:flex}
/* the time left on the slide: a thin crimson line along the bottom edge */
.ps-hero .ps-hero-progress{position:absolute;z-index:2;left:0;right:0;bottom:0;height:3px;background:transparent}
.ps-hero .splide__progress__bar{height:100%;width:0;background:var(--action-primary)}

/* phone: no arrows (swipe), a smaller bar */
@media (max-width:767px){
  .ps-hero .splide__arrow{display:none}
  .ps-hero .ps-hero-bar{gap:6px;padding:3px 3px 3px 10px;left:6px;bottom:6px}
  .ps-hero .splide__pagination__page{width:16px;height:3px}
  .ps-hero .splide__pagination__page.is-active{width:28px}
  .ps-hero .ps-hero-toggle{width:24px;height:24px}
  .ps-hero .ps-hero-toggle svg{width:11px;height:11px}
}
@media (hover:none){.ps-hero .splide__arrow{opacity:1}}
@media (prefers-reduced-motion:reduce){.ps-hero .splide__arrow,.ps-hero .splide__pagination__page{transition:none}}

/* slide 3, the nano Glucometer slide (Photoshoot/Website-Hero/homepage-slide), rebuilt with live text: the same photograph without
   its words (imgslider-nano-glucometer-wide, from images/hero-4096, the plain wall stretched at the left to fill the 3 : 1 frame) and the slide's words, set where the
   picture had them, in its typeface (Poppins, the site's own files) and colours. Sizes in container units (1cqw = 1% of the slider's
   width), so the slide scales exactly like the pictures. Animation as in Website-Hero/index.html: the photograph settles (above),
   the words rise in one after another, and a cyan line draws itself under "5 seconds." */
@font-face{font-family:"PS Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-v21-latin/poppins-v21-latin-regular.woff2) format("woff2")}
@font-face{font-family:"PS Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-v21-latin/poppins-v21-latin-600.woff2) format("woff2")}
@font-face{font-family:"PS Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-v21-latin/poppins-v21-latin-700.woff2) format("woff2")}
.ps-hero .ps-gl .ps-gl-board{position:relative;display:block;container-type:inline-size;text-decoration:none;background:#f7efe9}   /* the photo's wall colour, shown while it loads */
.ps-hero .ps-gl-copy{position:absolute;left:5.85cqw;top:calc(50% - .35cqw);transform:translateY(-50%);display:block;width:46cqw;font-family:"PS Poppins",var(--font-sans);text-align:left}
.ps-hero .ps-gl-eyebrow{display:flex;align-items:center;gap:.95cqw;margin:0 0 1.55cqw;font-size:1.6cqw;font-weight:600;line-height:1.2;letter-spacing:.035em;color:#9a2a30}
.ps-hero .ps-gl-eyebrow::before{content:"";width:2.35cqw;height:.16cqw;border-radius:2px;background:#a52a2f}
.ps-hero .ps-gl-title{margin:0;font-family:inherit;font-size:5.1cqw;font-weight:700;line-height:1.12;letter-spacing:-.012em;color:#141a22;text-transform:none}
.ps-hero .ps-gl-title em{position:relative;font-style:normal;white-space:nowrap;color:#a52a2f}
.ps-hero .ps-gl-title em svg{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.28em;overflow:visible}
.ps-hero .ps-gl-title em path{fill:none;stroke:#7acfde;stroke-width:5;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:0}
.ps-hero .ps-gl-lede{display:block;margin-top:1.15cqw;font-size:1.74cqw;font-weight:400;line-height:1.32;color:#4a5058}
@media (prefers-reduced-motion:no-preference){
  .ps-hero .splide__slide.is-active .ps-gl-copy>*{animation:ps-gl-rise .8s cubic-bezier(.2,.7,.2,1) both}
  .ps-hero .splide__slide.is-active .ps-gl-copy>:nth-child(1){animation-delay:.10s}
  .ps-hero .splide__slide.is-active .ps-gl-copy>:nth-child(2){animation-delay:.22s}
  .ps-hero .splide__slide.is-active .ps-gl-copy>:nth-child(3){animation-delay:.34s}
  .ps-hero .splide__slide.is-active .ps-gl-title em path{animation:ps-gl-draw 1s .9s cubic-bezier(.6,0,.2,1) both}
}
@keyframes ps-gl-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ps-gl-draw{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}
/* slide 4, anuPath nano (glucose and hemoglobin): the same build. The picture is the nano Glucometer slide's backdrop rebuilt without
   its products, with PathShodh's own render of the anuPath nano box and device (Photoshoot-HB/Transparent/06) on the right; the words
   are the product page's ("2-in-1 Device", "Glucose and Hemoglobin Test in a Single Device"). One line of title, so a little larger. */
.ps-hero .ps-nano .ps-gl-title{font-size:5.6cqw}
.ps-hero .ps-nano .ps-gl-lede{margin-top:1.5cqw}
/* ---------- phone (up to 767px): each slide is a picture and its words under it ----------
   At phone width the 1920 x 820 slides were 167px tall, with their words at 5-9px. Here every slide shows a 3:2 crop with no words in it
   (the *-phone.webp files, made by E:\work_scratch\make_hero_phone.py) and, under it on the photos' wall colour, the slide's own words
   as text at sizes that read: label 13px, title 28px, line under it 17px. The bar (dashes and pause) sits under the words, off the picture. */
@media (max-width:767px){
  .ps-hero{background:#f7efe9}
  .ps-hero .splide__slide{display:flex}
  .ps-hero .splide__slide>a{display:flex;flex-direction:column;flex:1 1 auto;width:100%;background:#f7efe9;color:#141a22;text-decoration:none}
  .ps-hero .splide__slide img{aspect-ratio:3/2;height:auto;object-fit:cover}
  .ps-hero .ps-gl .ps-gl-board{container-type:normal}
  .ps-hero .ps-gl-copy,.ps-hero .ps-gl-copy.ps-ph-copy{position:static;display:block;flex:1 1 auto;width:auto;padding:24px 20px 72px;transform:none}
  .ps-hero .ps-gl-eyebrow{gap:10px;margin:0 0 10px;font-size:13px;letter-spacing:.04em}
  .ps-hero .ps-gl-eyebrow::before{width:20px;height:2px}
  .ps-hero .ps-gl-title,.ps-hero .ps-nano .ps-gl-title{display:block;font-size:28px;line-height:1.16;letter-spacing:-.015em;text-wrap:balance}
  .ps-hero .ps-ph-copy em{white-space:normal}
  .ps-hero .ps-gl-lede,.ps-hero .ps-nano .ps-gl-lede{margin-top:10px;font-size:17px;line-height:1.45}
  .ps-hero .ps-gl-lede{text-wrap:pretty}
  .ps-hero .ps-nw{white-space:nowrap}   /* "Point-of-Care" is not split at its hyphens */
  .ps-hero .ps-ph-strong{font-weight:500;color:#141a22}
  .ps-hero .ps-ph-strong b{font-weight:700}
  .ps-hero .ps-hero-bar{left:20px;bottom:22px;gap:8px;padding:4px 4px 4px 12px;background:var(--bg-dark)}
  .ps-hero .ps-hero-toggle{width:32px;height:32px}
}