/* Landing-page rhythm. Visuals and brand styles live in styles.css. */
:root{--section-space:64px;--layout-gap:64px;--header-height:76px}
html{scroll-padding-top:calc(var(--header-height) + 24px)}
.header-inner{height:var(--header-height)}
.hero{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:48px;padding:24px 0 40px;min-height:0}
.hero-copy{align-self:center}
.hero .eyebrow{margin-bottom:16px;letter-spacing:.09em}
.hero h1{font-size:clamp(40px,3.4vw,48px);line-height:1.26;letter-spacing:-.02em}
.hero h1>br{display:block}
.hero h1>span{display:block;margin-top:4px}
.hero-description{max-width:460px;margin-top:18px;line-height:1.8}
.hero-actions{gap:18px;margin-top:24px}
.hero-actions .button{min-height:50px;padding:12px 22px}
.hero-note{margin-top:12px;line-height:1.6}
.hero-product{width:100%;margin:0}
.product-tabs{margin:0 0 14px 22px;padding:4px}
.product-tabs button{padding:8px 13px;font-size:14px}
.product-stage{padding-bottom:60px}
.window-top{height:34px}
.app-layout{min-height:350px}
.app-content{padding:16px;min-height:350px}
.mock-heading h2{font-size:20px;line-height:1.3}
.mock-heading p{line-height:1.4;margin-bottom:3px}
.mock-toolbar{margin:12px 0 10px}
.mock-filter{padding:5px 8px}
.roster-head{padding:7px 9px;line-height:1.4}
.roster-row{padding:7px 9px;line-height:1.4}
.roster-name{line-height:1.4}
.shift{padding:4px 1px;line-height:1.35}
.mock-footer{margin-top:12px;line-height:1.5}
.phone-window{right:-8px;bottom:0;width:205px;border-width:4px;padding:0 12px 6px;transform:rotate(2deg);border-radius:25px}
.phone-status{padding:9px 0 10px;line-height:1.4}
.phone-heading{margin-bottom:12px;gap:6px;line-height:1.4}
.phone-heading strong{font-size:13px}
.phone-heading p{line-height:1.5}
.phone-section-heading{margin-bottom:8px;line-height:1.4}
.phone-timeline{padding:9px 7px}
.phone-shift{gap:7px}
.timeline-content{line-height:1.4}
.timeline-content strong{font-size:12px}
.timeline-content p{margin:3px 0 7px;font-size:9px;line-height:1.5}
.timeline-content>.badge{margin-bottom:5px;line-height:1.4}
.phone-checkin{padding:7px 3px;font-size:9px;line-height:1.4}
.phone-shift+.phone-shift{margin-top:12px}
.phone-nav{margin-top:12px;padding-bottom:3px;line-height:1.4}
.phone-nav>span{font-size:8px}
.phone-nav .icon{width:15px;height:15px}
.phone-home-indicator{margin:5px auto 0}
.product-caption{bottom:12px;left:0;max-width:calc(100% - 220px);font-size:12px;line-height:1.6;gap:7px}
.product-caption .icon{width:18px;height:18px}
.request-preview-list{margin-top:16px}
.request-preview-list>div{padding:12px 0}
.request-message{margin-top:14px}
.payroll-summary{margin:18px 0 14px;padding:14px}
.payroll-preview-table>div{padding:9px 0}
.context-band{padding-block:24px}
.context-band .container>div{gap:32px;font-size:14px}
.section-space,.product-overview{padding-block:var(--section-space)}
.eyebrow{margin-bottom:16px}
.section-intro h2{font-size:34px;line-height:1.4}
.section-intro>p:last-child{font-size:16px;line-height:1.8;max-width:580px;margin:16px auto 0}
.workflow{margin-top:32px}
.workflow>a{padding:4px 24px}
.workflow>a:first-child{padding-left:0}
.workflow-number{margin-bottom:8px}
.workflow>a>.icon{width:25px;height:25px;margin-bottom:8px}
.workflow h3{font-size:18px;margin-bottom:6px}
.workflow p{font-size:14px;line-height:1.75}
.feature-section{gap:var(--layout-gap);padding-block:var(--section-space)}
.feature-label{margin-bottom:16px}
.feature-copy h2,.requests-section .feature-copy h2,.scheduling-intro h2{font-size:36px;line-height:1.4}
.feature-copy>p{margin-top:18px;line-height:1.85}
.feature-points{gap:12px;margin-top:20px}
.feature-copy .feature-note{margin-top:18px}
.feature-visual{padding:24px}
.scheduling-section{padding-top:0;padding-bottom:var(--section-space)}
.scheduling-intro{gap:var(--layout-gap);margin-bottom:28px}
.scheduling-description>p{line-height:1.85}
.scheduling-benefits{margin-top:16px;gap:8px}
.schedule-demo{padding:24px}
.schedule-demo-heading{padding-bottom:18px}
.schedule-toolbar{margin-top:18px}
.schedule-legend{margin:16px 0}
.schedule-member-head{padding:12px 16px}
.schedule-member-cell{padding:12px 16px}
.schedule-member{min-height:48px}
.schedule-day-head{height:68px}
.schedule-day-cell{height:86px;padding-block:8px}
.schedule-shift{min-height:32px;font-size:12px}
.schedule-cell-shifts{gap:5px}
.schedule-off{min-height:32px}
.schedule-demo-footer{margin-top:14px}
.requests-section>.feature-section{padding-block:var(--section-space)}
.request-types{margin-top:20px}
.approval-demo{padding:24px}
.approval-demo>h3{margin-top:14px}
.approval-person{padding-bottom:16px;margin-top:14px}
.approval-progress{margin-top:16px}
.approvers{margin:12px 0 14px}
.approver{padding-block:8px}
.approver:not(:last-child):after{top:38px;height:16px}
.approval-comment{margin:14px 0}
.demo-footnote{padding-top:12px}
#payroll.feature-section{padding-block:var(--section-space)}
.pay-cycle-demo{padding:24px;margin-top:0;align-self:center}
.pay-cycle-demo>h3{margin-top:14px}
.cycle-tabs{margin-top:18px}
.cycle-document{margin-top:8px}
.roles-section{padding-block:var(--section-space)}
.roles-heading{gap:var(--layout-gap)}
.roles-heading h2{font-size:36px;line-height:1.4}
.roles-heading>.eyebrow{padding-top:6px}
.roles-layout{gap:var(--layout-gap);margin-top:32px}
.role-content>h3{font-size:29px;line-height:1.45}
.role-content>p{margin-top:16px;line-height:1.85}
.role-tags{margin-top:20px}
.business-section{gap:var(--layout-gap);padding-block:var(--section-space)}
.business-photo{min-height:440px}
.business-copy>h2{font-size:36px;line-height:1.4}
.business-copy>p:not(.eyebrow){margin-top:18px;line-height:1.85}
.industry-list{margin-top:20px}
.industry-list>details{padding-block:16px}
.faq-section{gap:var(--layout-gap);padding-top:0;padding-bottom:var(--section-space)}
.faq-list>details{padding-block:18px}
.faq-list details>p{margin-top:14px;line-height:1.85}
.contact-section{padding:48px 56px;margin-bottom:48px;gap:var(--layout-gap)}
.contact-copy>h2{font-size:36px;line-height:1.4}
.contact-copy>p:not(.eyebrow){margin-top:18px;line-height:1.85}
.contact-copy .eyebrow{margin-bottom:16px}
.contact-actions{margin-top:24px}
.footer-main{padding-bottom:32px}
.footer-bottom{padding-top:18px}

@media(min-width:961px) and (max-height:760px){
  :root{--header-height:64px}
  .hero{padding:16px 0 28px}
  .hero h1{font-size:42px}
  .hero .eyebrow{margin-bottom:12px}
  .hero-description{margin-top:16px;line-height:1.75}
  .hero-actions{margin-top:20px}
  .hero-note{margin-top:10px}
  .product-stage{padding-bottom:48px}
  .app-layout,.app-content{min-height:330px}
  .app-content{padding:14px}
  .roster-row{padding-block:5px}
  .product-caption{bottom:4px}
}
@media(max-width:1150px){
  :root{--layout-gap:40px}
  .hero{gap:32px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .hero h1{font-size:40px}
  .hero-actions{gap:14px}
  .hero .text-button{font-size:13px}
  .product-tabs{margin-left:0}
  .app-content{padding:14px}
  .roster-head,.roster-row{gap:6px;padding-inline:7px}
  .phone-window{width:190px;right:-4px}
  .product-caption{max-width:calc(100% - 200px)}
  .context-band .container>div{gap:20px}
  .feature-copy h2,.requests-section .feature-copy h2,.scheduling-intro h2,.business-copy>h2{font-size:32px}
}
@media(min-width:961px) and (max-height:640px){
  .hero{padding-block:12px 20px}
  .hero .window-top{height:30px}
  .hero .app-content{padding-block:12px}
  .hero .roster-row{padding-block:4px}
  .hero .mock-toolbar{margin:8px 0}
  .hero .mock-footer{margin-top:8px}
  .hero .product-stage{padding-bottom:40px}
  .hero .request-preview-list{margin-top:12px}
  .hero .request-preview-list>div{padding-block:9px}
  .hero .request-message{margin-top:10px;padding:10px}
  .hero .payroll-summary{margin:14px 0 12px;padding:10px}
  .hero .payroll-summary strong{font-size:24px;line-height:1.3}
  .hero .payroll-summary .pay-date{font-size:18px}
  .hero .payroll-preview-table>div{padding-block:6px}
}
@media(max-width:960px){
  :root{--section-space:56px;--layout-gap:32px;--header-height:72px}
  .mobile-menu-button{display:flex}
  .hero{grid-template-columns:1fr;gap:28px;padding:24px 0 32px}
  .hero-copy{max-width:640px;margin-inline:auto;text-align:center}
  .hero h1{font-size:44px}
  .hero h1>br{display:block}
  .hero-description{max-width:530px;margin:18px auto 0}
  .hero-actions{justify-content:center;margin-top:22px}
  .hero-note{margin-top:12px}
  .hero-product{max-width:640px;margin-inline:auto}
  .product-tabs{margin-inline:auto}
  .app-layout,.app-content{min-height:350px}
  .app-content{padding:16px}
  .roster-head,.roster-row{gap:8px;padding-inline:10px}
  .roster-name{font-size:12px}
  .roster-name small{font-size:11px}
  .mock-heading h2{font-size:20px}
  .mock-date{font-size:12px}
  .phone-window{width:205px}
  .product-caption{max-width:calc(100% - 220px);font-size:12px}
  .context-band .container>div{gap:8px}
  .section-intro h2{font-size:31px}
  .workflow>a{padding-inline:16px}
  .workflow h3{font-size:16px}
  .workflow p{font-size:14px}
  .roles-heading h2,.business-copy>h2,.contact-copy>h2{font-size:32px}
  .business-photo{min-height:420px}
  .contact-section{padding:40px;margin-bottom:40px}
}
@media(max-width:700px){
  :root{--section-space:48px;--layout-gap:28px;--header-height:64px}
  .header-actions>.login{display:none}
  .hero{padding:20px 0 28px;gap:28px}
  .hero h1{font-size:clamp(30px,7.9vw,36px);line-height:1.3}
  .hero .eyebrow{font-size:12px;margin-bottom:12px;letter-spacing:.035em}
  .hero-description{font-size:16px;line-height:1.75;margin-top:16px}
  .hero-actions{gap:14px;margin-top:20px}
  .hero-note{margin-top:12px;font-size:12px}
  .hero .text-button{font-size:14px}
  .product-tabs{margin-bottom:12px;gap:0}
  .product-tabs button{font-size:12px;padding:7px 10px;gap:5px}
  .product-stage{padding-bottom:62px}
  .window-top{height:30px}
  .app-layout,.app-content{min-height:295px}
  .app-content{padding:14px 10px}
  .mock-heading h2{font-size:17px}
  .mock-heading p{font-size:11px}
  .mock-date{font-size:10px}
  .mock-toolbar{margin:12px 0 10px}
  .roster-head,.roster-row{padding:6px;gap:5px;grid-template-columns:1.75fr repeat(4,1fr)}
  .roster-name{font-size:10px;gap:4px}
  .roster-name small{font-size:9px}
  .shift,.shift small{font-size:10px}
  .mock-footer{font-size:10px;margin-top:10px}
  .phone-window{width:174px;right:0;border-radius:22px;padding-inline:9px}
  .phone-status{font-size:9px;padding:8px 0}
  .phone-heading strong{font-size:11px}
  .phone-heading p{font-size:9px}
  .phone-heading .avatar{width:23px;height:23px;font-size:10px}
  .phone-section-heading{font-size:11px}
  .timeline-time{width:26px;font-size:9px}
  .timeline-time b{font-size:10px}
  .timeline-content strong{font-size:11px}
  .timeline-content p{font-size:8px}
  .phone-checkin{font-size:8px}
  .phone-nav>span{font-size:7px}
  .phone-nav .icon{width:14px;height:14px}
  .product-caption{bottom:11px;max-width:calc(100% - 185px);font-size:11px;gap:6px}
  .product-caption .icon{width:16px;height:16px}
  .context-band{padding-block:20px}
  .context-band>.container{gap:20px}
  .context-band p{font-size:14px}
  .context-band .container>div{font-size:12px;gap:8px}
  .section-intro h2{font-size:28px;line-height:1.4}
  .section-intro>p:last-child{margin-top:14px;line-height:1.75}
  .workflow{margin-top:28px;row-gap:28px}
  .workflow>a{padding:0 14px 0 0}
  .workflow>a:nth-child(even){padding-left:16px;padding-right:0}
  .workflow h3{font-size:17px}
  .feature-copy h2,.requests-section .feature-copy h2,.scheduling-intro h2,.roles-heading h2,.business-copy>h2,.contact-copy>h2{font-size:29px;line-height:1.4}
  .feature-label{margin-bottom:12px;font-size:13px}
  .feature-copy>p,.business-copy>p:not(.eyebrow){margin-top:16px}
  .feature-points{margin-top:18px;gap:10px}
  .feature-section{gap:28px}
  .feature-visual{padding:22px}
  .scheduling-intro{gap:16px;margin-bottom:24px}
  .schedule-demo{padding:18px}
  .schedule-demo-heading{padding-bottom:16px}
  .schedule-toolbar{margin-top:16px}
  .schedule-legend{margin:16px 0 14px}
  .schedule-member-head,.schedule-member-cell{padding:12px}
  .schedule-member{min-height:44px}
  .schedule-day-cell{height:82px}
  .schedule-day-head{height:66px}
  .schedule-demo-footer{gap:8px}
  .request-types{margin-top:18px}
  .pay-cycle-demo{padding:22px}
  .roles-layout{margin-top:24px}
  .role-tabs{margin-bottom:24px}
  .role-content>h3{font-size:25px}
  .role-content>p{min-height:0}
  .role-tags{margin-top:18px}
  .business-section{gap:28px}
  .business-photo{min-height:0;height:300px}
  .industry-list{margin-top:16px}
  .faq-section{gap:24px}
  .faq-list summary{line-height:1.7}
  .faq-list>details{padding-block:16px}
  .contact-section{padding:32px 24px;margin-bottom:32px}
  .contact-copy>p:not(.eyebrow){margin-top:16px}
  .contact-actions{gap:16px;margin-top:22px}
  .footer-main{gap:16px;padding-bottom:24px}
  .footer-main>nav{padding-top:4px}
  .footer-bottom{padding-top:16px}
}
@media(max-width:460px){
  .hero-actions{flex-direction:column}
  .hero-actions .button{min-width:195px}
  .schedule-demo{padding:16px}
  .schedule-member-head,.schedule-member-cell{padding:10px}
}