/* TaskPay: scoped refinement. No catalogue, header, admin or TLS changes. */
#tp-hero.hero-with-video { isolation:isolate; position:relative; overflow:hidden; min-height:640px; padding-top:52px; padding-bottom:144px; gap:48px; }
#tp-hero .tp-carousel-media { z-index:0; }
#tp-hero::before { z-index:1; background:linear-gradient(90deg,rgba(244,241,234,.96) 0%,rgba(244,241,234,.91) 35%,rgba(244,241,234,.63) 52%,rgba(244,241,234,.24) 72%,rgba(244,241,234,.20) 100%); }
#tp-hero .hero-copy,#tp-hero .hero-feature { position:relative; z-index:2; }
#tp-hero .hero-copy { max-width:620px; }
#tp-hero .hero-copy h1 { font-size:clamp(42px,4.35vw,64px); line-height:1.07; }
#tp-hero .hero-copy .intro { max-width:47ch; }
#tp-hero .hero-feature { align-self:end; max-width:330px; background:rgba(255,255,255,.96); box-shadow:4px 4px 0 #191919; }
#tp-hero .featured-caption { padding:21px 23px; }
#tp-hero .featured-caption h2 { font-size:27px; }
#tp-hero .tp-slide { transition:opacity 700ms ease; }
#tp-hero .tp-slide img,#tp-hero .tp-slide video { object-fit:cover; object-position:62% center; }
#tp-hero .tp-slide.video-playing img { opacity:0; }
#tp-hero .tp-slide.video-playing video { opacity:1; }
#tp-hero .tp-carousel-controls { z-index:3; bottom:24px; gap:16px; align-items:flex-end; }
#tp-hero .tp-carousel-summary { display:flex; flex-direction:column; gap:3px; max-width:100%; padding:8px 12px; background:rgba(244,241,234,.96); border:1px solid #19191925; border-radius:10px; }
#tp-hero .tp-carousel-note { padding:0; background:transparent; font-size:10px; color:#55534d; }
#tp-hero .tp-carousel-caption { font-size:13px; font-weight:600; color:#191919; }
#tp-hero .tp-carousel-buttons { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
#tp-hero .tp-slide-select { position:relative; overflow:hidden; padding:0; min-width:56px; width:56px; height:44px; border:2px solid rgba(25,25,25,.32); border-radius:8px; background:#F4F1EA; box-shadow:none; }
#tp-hero .tp-slide-select img { display:block; width:100%; height:100%; object-fit:cover; opacity:.78; }
#tp-hero .tp-slide-select>span { position:absolute; bottom:2px; right:3px; padding:1px 4px; border-radius:3px; background:rgba(25,25,25,.83); color:white; font-size:9px; line-height:1.4; }
#tp-hero .tp-slide-select[aria-pressed=true] { border-color:#254e3e; box-shadow:0 0 0 2px #F4F1EA,0 0 0 3px #254e3e; }
#tp-hero .tp-slide-select[aria-pressed=true] img { opacity:1; }
#tp-hero .tp-carousel-toggle { min-height:44px; min-width:44px; padding:8px 13px; border-radius:8px; font-size:11px; background:#F4F1EA; }
#tp-hero .tp-slide-select:focus-visible,#tp-hero .tp-carousel-toggle:focus-visible { outline:3px solid #254e3e; outline-offset:4px; }
@media(max-width:1150px) { #tp-hero.hero-with-video { gap:30px; } #tp-hero .tp-carousel-controls { align-items:flex-start; } }
@media(max-width:900px) {
 #tp-hero.hero-with-video { grid-template-columns:minmax(0,1fr); padding:32px 24px 190px; gap:36px; }
 #tp-hero::before { background:linear-gradient(180deg,rgba(244,241,234,.86),rgba(244,241,234,.72) 48%,rgba(244,241,234,.28) 75%,rgba(244,241,234,.40)); }
 #tp-hero .hero-copy { background:rgba(244,241,234,.84); border-radius:14px; padding:18px; margin-inline:-6px; }
 #tp-hero .hero-copy h1 { font-size:clamp(37px,6.8vw,58px); }
 #tp-hero .hero-feature { max-width:390px; justify-self:end; width:100%; }
 #tp-hero .tp-carousel-controls { left:24px; right:24px; bottom:24px; flex-direction:column; align-items:flex-start; }
 #tp-hero .tp-slide img,#tp-hero .tp-slide video { object-position:56% center; }
}
@media(max-width:560px) {
 #tp-hero.hero-with-video { padding-inline:20px; padding-bottom:210px; }
 #tp-hero .hero-copy { padding:15px; }
 #tp-hero .hero-copy h1 { font-size:clamp(33px,8.7vw,43px); }
 #tp-hero .hero-copy .intro { font-size:15px; }
 #tp-hero .hero-feature { max-width:100%; }
 #tp-hero .featured-caption h2 { font-size:24px; }
 #tp-hero .tp-carousel-controls { left:20px; right:20px; }
 #tp-hero .tp-slide-select { min-width:44px; width:44px; height:44px; }
 #tp-hero .tp-carousel-buttons { gap:7px; }
 #tp-hero .tp-carousel-toggle { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { #tp-hero .tp-slide { transition:none; } }