/* A brighter brand canvas, with compact product storytelling. */
.hero-band{overflow:clip;background:radial-gradient(ellipse at 85% 18%,#e4f0e880,transparent 58%),linear-gradient(180deg,var(--paper) 55%,#f7faf7)}
.hero:before{display:none}
.hero h1{font-size:clamp(42px,3.65vw,52px);font-weight:650;line-height:1.24;letter-spacing:-.035em}
.hero h1>span{background:linear-gradient(100deg,#126d73 10%,#237f7b 65%,#126d73);background-clip:text;-webkit-background-clip:text}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;font-weight:600}
.hero .eyebrow:before{content:"";width:24px;height:2px;background:var(--teal);border-radius:2px}
.hero-description{font-size:17px;line-height:1.8;margin-top:22px;max-width:460px}
.hero-product{isolation:isolate}
.hero-product:before{content:"";position:absolute;inset:50px -26px 16px 12px;z-index:-2;border-radius:100px 30px 110px 34px;background:radial-gradient(ellipse at 90% 20%,#cce7e4,transparent 56%),linear-gradient(130deg,#dceee5 5%,#dbe9ee 58%,#e9e5f0);border:1px solid #fff9;transform:rotate(-3deg);box-shadow:0 24px 60px -38px #487c7240;pointer-events:none}
.hero-product:after{content:"";position:absolute;top:10px;right:-28px;width:260px;height:260px;border:1px solid #97bfb660;border-radius:50%;z-index:-1;box-shadow:0 0 0 26px #ffffff2e;pointer-events:none}
.product-tabs{position:relative;background:#ffffffbd;border:1px solid #fff;border-radius:14px;padding:5px;box-shadow:0 6px 22px -12px #20343840;backdrop-filter:blur(12px);margin-left:20px}
.product-tabs button{border-radius:10px;transition:background .2s,color .2s,box-shadow .2s}
.product-tabs button.active{background:white;box-shadow:0 3px 12px -6px #126d7370}
.hero .desktop-window{border-color:#b6cec7;border-radius:18px;box-shadow:0 25px 55px -26px #214d5260,0 2px 4px #20343806}
.hero .window-top{background:linear-gradient(90deg,#f8fbfa,#f0f6f4)}
.hero .phone-window{box-shadow:0 24px 36px -16px #20343850,0 3px 10px -5px #20343840}
.hero .product-caption{background:#ffffffe6;padding:9px 12px;border:1px solid #d9e6df;border-radius:12px;box-shadow:0 7px 24px -17px #20343845;max-width:calc(100% - 222px);backdrop-filter:blur(8px)}
.hero-note{color:#657a77}
.button{border-radius:12px;background:linear-gradient(135deg,#147c7d,var(--teal) 65%);border-color:#126d73;box-shadow:inset 0 1px 0 #ffffff20,0 5px 14px -9px #126d7355}
.button:hover{background:linear-gradient(135deg,#168387,#105e64);box-shadow:inset 0 1px 0 #ffffff25,0 9px 20px -12px #126d7380}
.hero-actions .button{min-height:52px;padding-inline:24px}
.text-button .icon{border-radius:50%;transition:background .2s,color .2s}
.text-button:hover .icon{background:var(--teal);color:#fff}
.site-header{background:#faf8f4ed;box-shadow:0 1px 0 #20343804}
.desktop-nav>a{position:relative}
.desktop-nav>a:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.desktop-nav>a:hover:after,.desktop-nav>a:focus-visible:after{transform:scaleX(1)}
.product-overview-band{position:relative;background:linear-gradient(120deg,#e7f2f0,#edf5ef);border-top:1px solid #d5e6df;border-bottom:1px solid #d5e6df}
.workflow-number{font:500 13px Manrope,sans-serif;letter-spacing:.06em;color:#637e79}
.workflow>a>.icon{width:30px;height:30px;margin-bottom:12px}
.workflow h3{font-weight:600}
.workflow p{color:#566e69}
.feature-label{background:#e8f2ed;border:1px solid #d9e8e2;border-radius:30px;padding:7px 12px;gap:8px;font-size:13px;line-height:1.5}
.feature-label .icon{width:18px;height:18px}
.feature-copy h2,.requests-section .feature-copy h2,.scheduling-intro h2,.attendance-copy h2{font-weight:620;letter-spacing:-.025em}
.feature-copy h2 em,.scheduling-intro h2 em{background:linear-gradient(100deg,#126d73,#257f7c);background-clip:text;-webkit-background-clip:text;color:transparent}
.schedule-demo,.approval-demo,.pay-cycle-demo{border-color:#cadfd7;border-radius:22px;box-shadow:0 22px 50px -32px #2349434d,0 2px 8px -6px #20343835}
.schedule-demo{position:relative}
.schedule-demo-heading{border-bottom-color:#d7e7df}
.attendance-section{background:radial-gradient(ellipse at 10% 55%,#c9e7dcbf,transparent 57%),linear-gradient(125deg,#e5f1ea,#edf5f2 58%,#e4edf5)}
.attendance-visual:before{border-color:#aacdc4b3;box-shadow:0 0 0 24px #ffffff30}
.day-phone{box-shadow:0 32px 60px -30px #244a4f66,0 3px 9px -5px #20343840}
.attendance-photo-slot{box-shadow:0 15px 32px -24px #20343870}
.requests-section{background:radial-gradient(ellipse at 92% 55%,#e8f1ed85,transparent 48%),#fff}
.request-types>span{border:1px solid #e6ece6;transition:transform .25s,box-shadow .25s}
.request-types>span:nth-child(3n+2){border-color:#eee5d8}
.request-types>span:nth-child(3n){border-color:#e7e1f0}
.approval-demo{background:#fff}
.approval-top{padding-bottom:4px}
.attachment{background:#fafbf9}
.payroll-band{background:radial-gradient(ellipse at 6% 30%,#dcebe466,transparent 52%),var(--paper)}
.pay-cycle-demo{background:linear-gradient(140deg,#fff,#fcfdfb)}
.cycle-tabs{background:#eaf2ed;border:1px solid #e0ebe3}
.cycle-document{background:#edf5ef;border-color:#d9e9e0}
.team-flow-section{background:radial-gradient(ellipse at 50% 0,#28646190,transparent 74%),linear-gradient(120deg,#203438,#193d3f)}
.team-flow-icon{background:#315c5a;border-color:#7baca0;box-shadow:0 0 0 5px #b7d8d10a}
.team-flow-preview{border-radius:16px;border-color:#e0ebe5;box-shadow:0 16px 32px -23px #071c20b0}
.team-flow-heading h2>span{color:#bce1d4}
.business-band{background:linear-gradient(180deg,#fff 50%,#edf5ef)}
.business-heading h2{font-weight:620;letter-spacing:-.025em}
.business-gallery{gap:24px;align-items:start}
.business-scene>img{border-radius:20px;border:1px solid #d7e3dc;box-shadow:0 16px 32px -24px #274b4060}
.business-scene:nth-child(2){padding-top:20px}
.business-scene>figcaption{font-weight:550;margin-top:14px}
.faq-section{align-items:start}
.faq-list{border:1px solid #dce7df;border-radius:20px;background:#ffffffa6;padding:6px 24px;box-shadow:0 12px 34px -28px #20343850}
.faq-list>details,.faq-list>details:first-child{padding-block:18px}
.faq-list>details:last-child{border-bottom:0}
.faq-list summary>.icon{padding:4px;width:27px;height:27px;border:1px solid #dbe7df;border-radius:50%;background:#f2f7f3;margin-top:0;flex-shrink:0}
.faq-list>details[open] summary{color:var(--teal)}
.faq-list>details[open] summary>.icon{background:var(--teal);border-color:var(--teal);color:#fff}
.contact-section{position:relative;isolation:isolate;border:1px solid #277d7c;border-radius:26px;background:radial-gradient(ellipse at 90% 12%,#55aba470,transparent 55%),linear-gradient(125deg,#146f75,#135d64 60%,#213e46);box-shadow:0 22px 46px -32px #19484b75}
.contact-section:before{content:"";position:absolute;width:430px;height:430px;border:1px solid #ffffff17;border-radius:50%;right:-75px;top:-85px;box-shadow:0 0 0 60px #ffffff06;z-index:-1;pointer-events:none}
.contact-actions .button-white{background:#f1f7f3;color:var(--teal);border-color:#f1f7f3;box-shadow:0 8px 16px -10px #082e4050}
.contact-actions .button-white:hover{background:#fff;color:#105e64}
.contact-wordmark>img{filter:drop-shadow(0 6px 12px #0b303830)}
.footer-main>p{max-width:250px}
@media(min-width:961px) and (max-height:760px){
 .hero h1{font-size:42px}
 .hero-description{margin-top:16px;font-size:16px}
 .hero-product:before{inset:44px -18px 8px 12px}
 .hero .product-caption{padding:7px 10px}
 .hero-actions .button{min-height:50px}
}
@media(max-width:1150px){
 .hero h1{font-size:40px}
 .hero .product-caption{max-width:calc(100% - 204px);padding:8px 10px}
 .hero-product:before{inset:52px -14px 15px 5px}
 .hero-product:after{right:-10px;width:210px;height:210px}
}
@media(max-width:960px){
 .hero h1{font-size:44px}
 .hero-description{font-size:17px;margin-inline:auto}
 .hero-product:before{inset:45px -18px 16px 0}
 .hero .product-caption{max-width:calc(100% - 222px)}
 .business-gallery{gap:18px}
 .business-scene:nth-child(2){padding-top:16px}
 .faq-list{padding-inline:20px}
}
@media(max-width:700px){
 .hero h1{font-size:clamp(30px,7.9vw,36px);line-height:1.3;letter-spacing:-.025em}
 .hero .eyebrow{font-size:11px;letter-spacing:.05em;gap:8px}
 .hero .eyebrow:before{width:18px}
 .hero-description{font-size:16px;line-height:1.75;margin-top:16px}
 .hero-product:before{inset:38px -12px 16px 4px;border-radius:70px 22px 70px 26px;transform:rotate(-2deg)}
 .hero-product:after{top:10px;right:-10px;width:160px;height:160px;box-shadow:0 0 0 15px #ffffff30}
 .hero .desktop-window{border-radius:14px}
 .product-tabs{margin-left:auto;border-radius:12px;padding:4px}
 .hero .product-caption{font-size:11px;padding:7px 8px;max-width:calc(100% - 182px);border-radius:10px}
 .hero-actions .button{min-height:50px}
 .feature-label{font-size:13px;padding:6px 10px}
 .workflow>a>.icon{width:26px;height:26px;margin-bottom:10px}
 .schedule-demo,.approval-demo,.pay-cycle-demo{border-radius:18px}
 .business-scene>img{border-radius:16px}
 .faq-list{padding-inline:18px;border-radius:16px}
 .contact-section{border-radius:22px}
 .contact-section:before{width:260px;height:260px;right:-80px;top:-65px}
}
@media(max-width:600px){
 .business-scene:nth-child(2){padding-top:0}
 .business-gallery{gap:26px}
 .business-scene>figcaption{margin-top:12px}
}
@media(max-width:380px){
 .hero .product-caption{padding:6px;border:0;background:none;box-shadow:none;backdrop-filter:none;font-size:11px;max-width:calc(100% - 176px)}
 .faq-list{padding-inline:14px}
}
@media(prefers-reduced-motion:reduce){
 .desktop-nav>a:after,.product-tabs button,.request-types>span,.text-button .icon{transition:none}
}