/* Human imagery, section rhythm, and restrained motion in the Workfin CI. */
.hero{position:relative;isolation:isolate}
.hero:before{content:"";position:absolute;inset:0 -20px 0 38%;z-index:-1;background:radial-gradient(ellipse at 70% 38%,#d8eae4b3,transparent 68%),radial-gradient(ellipse at 30% 70%,#e4eaf580,transparent 58%);pointer-events:none}
.hero h1>span{background:linear-gradient(100deg,#126d73 20%,#257976 55%,#126d73 85%);background-clip:text;-webkit-background-clip:text;color:transparent}
.desktop-window{box-shadow:0 20px 60px -30px #126d7333}
.product-overview-band{background:var(--mist)}
.product-overview-band .workflow>a{border-color:#c2d8d3}
.product-overview-band+.scheduling-section{padding-top:var(--section-space)}
.workflow>a{transition:transform .24s ease,color .24s ease}
.workflow>a:hover{transform:translateY(-4px)}
.attendance-section{background:radial-gradient(ellipse at 14% 44%,#c6e4dca6,transparent 55%),linear-gradient(120deg,#e9f3ed 0%,#f0f6f4 50%,#edf1f7 100%);overflow:clip}
.attendance-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--layout-gap);align-items:center;padding-block:var(--section-space)}
.attendance-visual{position:relative;min-height:635px;max-width:570px;isolation:isolate}
.attendance-visual:before{content:"";position:absolute;inset:80px 0 80px 10px;border:1px solid #a8ccc980;border-radius:50%;z-index:-1}
.attendance-photo-slot{position:absolute;left:0;top:102px;width:230px;height:380px;border-radius:100px 100px 20px 20px;overflow:hidden;background:#dceae4}
.attendance-photo-slot:empty{visibility:hidden}
.attendance-photo-slot img{width:100%;height:100%;object-fit:cover;object-position:49% center}
.attendance-photo-label{position:absolute;left:14px;bottom:16px;padding:8px 12px;border-radius:30px;background:#faf8f4f2;color:var(--ink);font-size:13px;font-weight:550}
.day-phone{position:relative;margin-left:auto;width:318px;max-width:100%;padding:0 17px 8px;background:#fcfdfc;border:5px solid var(--ink);border-radius:34px;box-shadow:0 25px 65px -30px #20343866;font-size:14px;line-height:1.5;transform:rotate(1.5deg)}
.day-phone-status{display:flex;justify-content:space-between;padding:13px 5px 15px;font-size:12px}
.day-phone-status>span{font-size:10px;letter-spacing:1px}
.day-phone-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:3px 0 16px}
.day-phone-heading p{font-size:12px;color:var(--muted);margin-bottom:4px}
.day-phone-heading h3{font-size:18px;font-weight:650;line-height:1.4}
.day-phone-heading .avatar{width:32px;height:32px;font-size:13px}
.day-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-bottom:17px}
.day-week>span{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:14px;padding:8px 0 12px;color:var(--muted);font-size:11px}
.day-week b{font:600 14px Manrope,sans-serif}
.day-week .selected{background:var(--teal);color:white;box-shadow:0 5px 14px -7px #126d7366}
.day-week i{position:absolute;bottom:6px;width:3px;height:3px;border-radius:50%;background:white}
.day-schedule-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px}
.day-schedule-heading>span{color:var(--muted);font-size:12px}
.day-shifts{background:white;border:1px solid #dce6e1;border-radius:20px;padding:13px 11px}
.day-shift{display:grid;grid-template-columns:43px 7px minmax(0,1fr);gap:9px;position:relative}
.day-time{display:flex;flex-direction:column;gap:3px;text-align:right;padding-top:8px;font:600 13px Manrope,sans-serif;color:#516a6c}
.day-time>span{font-size:11px;font-weight:450;color:#7e9092}
.day-track{position:relative;background:#dee8e4;width:2px;margin:0 auto}
.day-track:before{content:"";position:absolute;top:8px;bottom:8px;left:-2px;width:6px;border-radius:4px;background:#5b94d3}
.day-track>i{position:absolute;top:18px;left:-5px;width:12px;height:12px;border:3px solid white;border-radius:50%;background:#5b94d3;box-shadow:0 0 0 1px #5b94d333;z-index:1}
.day-shift-body{padding:9px 0 16px;min-width:0}
.day-shift-body strong{font-size:14px;font-weight:600}
.day-shift-body>p{font-size:12px;color:var(--muted);margin-top:4px}
.next-shift .day-shift-body{padding:10px;background:#f3f7fb;border:1px solid #cbdce9;border-radius:14px;margin-bottom:7px}
.day-shift-title{display:flex;justify-content:space-between;align-items:center;gap:4px}
.day-shift-title>span{font-size:10px;background:#e6eef9;color:#315f9c;border-radius:7px;padding:3px 5px;white-space:nowrap}
.day-checkin{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;padding:9px 4px;background:var(--teal);color:white;border-radius:10px;font-size:12px;font-weight:600;box-shadow:0 4px 9px -6px #126d7380}
.day-checkin .icon{width:16px;height:16px}
.support-shift .day-track:before{background:#dab46a}
.afternoon-shift .day-track:before{background:#83b7be}
.evening-shift .day-track:before{background:#b5a2d4}
.evening-shift .day-shift-body{padding-bottom:5px}
.day-history{display:flex;align-items:center;gap:7px;margin-top:13px;color:var(--muted);font-size:12px}
.day-history .icon{width:15px;height:15px}
.day-phone-nav{display:flex;justify-content:space-around;align-items:center;padding:12px 0 7px;margin-top:13px;border-top:1px solid var(--line)}
.day-phone-nav>span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--muted)}
.day-phone-nav .icon{width:18px;height:18px}
.day-phone-nav .active{color:var(--teal);font-weight:600}
.day-home-indicator{width:90px;height:3px;border-radius:3px;background:var(--ink);margin:5px auto 0}
.attendance-sample{position:absolute;right:22px;bottom:0;font-size:12px;color:var(--muted)}
.attendance-copy h2{font-size:36px;line-height:1.4}
.attendance-note{display:flex;gap:12px;padding-top:22px;margin-top:26px;border-top:1px solid #c8ddda}
.attendance-note>.icon{width:22px;height:22px;color:var(--teal);margin-top:3px;flex-shrink:0}
.attendance-note p{font-size:14px;line-height:1.7}
.attendance-note strong{display:block;font-weight:600}
.attendance-note span{display:block;color:var(--muted);margin-top:3px}
.requests-section{background:#fff}
.request-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px}
.request-types>span{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;border:0;border-radius:12px;padding:12px;color:var(--ink);font-size:14px;background:#f4f7f5;line-height:1.6}
.request-types .icon{width:22px;height:22px;color:var(--teal)}
.request-types>span:nth-child(3n+2){background:#f7f4ed}
.request-types>span:nth-child(3n){background:#f3f2f8}
.request-types>span:nth-child(3n) .icon{color:#72559f}
.request-types>span:nth-child(3n+2) .icon{color:#92672c}
.approval-demo{box-shadow:0 16px 50px -32px #20343840}
.payroll-band{background:radial-gradient(ellipse at 85% 15%,#e9ebe988,transparent 65%),var(--paper)}
.roles-section{background:radial-gradient(ellipse at 80% 0,#22585880,transparent 70%),var(--ink)}
.business-band{background:#fff}
.faq-section{padding-top:var(--section-space)}
.contact-section{background:radial-gradient(ellipse at 85% 15%,#4eaaa255,transparent 65%),linear-gradient(120deg,#126d73,#165d64 70%,#203f49)}
.button,.text-button{transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.button:hover{transform:translateY(-2px);box-shadow:0 8px 20px -12px #126d7380}
.button:active{transform:translateY(0)}
.preview-panel:not([hidden]){animation:panel-in .32s ease both}
@keyframes panel-in{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(min-width:961px){
 .hero .phone-window{animation:phone-float 7s ease-in-out infinite}
 .day-track>i{animation:status-glow 3.5s ease-in-out infinite}
}
@keyframes phone-float{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-4px)}}
@keyframes status-glow{0%,100%{box-shadow:0 0 0 1px #5b94d330}50%{box-shadow:0 0 0 5px #5b94d315}}
/* Progressive enhancement: content remains visible if scripts or observers fail. */
.motion-ready [data-reveal].reveal-pending{opacity:0;transform:translateY(18px)}
.motion-ready [data-reveal]{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.65,.3,1);transition-delay:var(--reveal-delay,0ms)}
@media(max-width:1150px){
 .attendance-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px}
 .attendance-photo-slot{width:190px;height:350px}
 .day-phone{width:300px;padding-inline:15px}
 .attendance-copy h2{font-size:32px}
 .request-types>span{padding:10px;font-size:13px}
}
@media(max-width:960px){
 .attendance-layout{gap:28px}
 .attendance-visual{min-height:625px}
 .attendance-photo-slot{width:155px;height:310px;top:126px}
 .day-phone{width:280px;padding-inline:13px}
 .day-phone-heading h3{font-size:16px}
 .day-shift{gap:7px;grid-template-columns:40px 6px minmax(0,1fr)}
 .next-shift .day-shift-body{padding:8px}
 .day-shift-title{flex-wrap:wrap;gap:3px}
 .attendance-sample{right:12px}
 .attendance-photo-label{font-size:11px;padding:6px 9px;left:8px}
 .attendance-copy h2{font-size:29px}
 .attendance-copy .feature-points{font-size:14px}
 .request-types{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 .hero:before{inset:22% -15px 0 0}
 .attendance-layout{grid-template-columns:1fr;gap:28px}
 .attendance-copy{grid-row:1;max-width:none}
 .attendance-visual{width:100%;max-width:475px;margin:auto;min-height:635px}
 .attendance-photo-slot{width:42%;max-width:200px;height:330px;top:125px}
 .day-phone{width:305px;padding-inline:15px;margin-right:5px}
 .day-phone-heading h3{font-size:18px}
 .day-shift{grid-template-columns:43px 7px minmax(0,1fr);gap:9px}
 .day-shift-title{flex-wrap:nowrap}
 .next-shift .day-shift-body{padding:10px}
 .attendance-sample{right:22px}
 .attendance-note{margin-top:22px;padding-top:18px}
 .request-types{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .request-types>span{padding:10px;font-size:13px}
 .faq-section{padding-top:var(--section-space)}
}
@media(max-width:420px){
 .day-phone{width:286px;padding-inline:13px;margin-right:0;border-width:4px}
 .day-phone-heading h3{font-size:17px}
 .day-shift{grid-template-columns:39px 6px minmax(0,1fr);gap:7px}
 .next-shift .day-shift-body{padding:9px}
 .attendance-visual{min-height:630px}
 .request-types>span{font-size:12px;padding:9px}
}
@media(prefers-reduced-motion:reduce){
 .hero .phone-window,.day-track>i,.preview-panel:not([hidden]){animation:none}
 .motion-ready [data-reveal],.motion-ready [data-reveal].reveal-pending{opacity:1;transform:none;transition:none}
 .workflow>a,.button,.text-button{transition:none}
 .workflow>a:hover,.button:hover{transform:none}
}
/* Keep the complete day readable within the product illustration. */
.day-phone-status{padding-block:10px}
.day-phone-heading{margin-top:0;margin-bottom:12px}
.day-week{margin-bottom:12px}
.day-week>span{padding-top:6px;padding-bottom:10px}
.day-schedule-heading{margin-bottom:10px}
.day-shifts{padding:10px}
.day-shift-body{padding-top:8px;padding-bottom:12px}
.day-phone-nav{margin-top:10px;padding-top:10px;padding-bottom:5px}
.day-history{margin-top:10px}
.attendance-visual{min-height:620px}
@media(max-width:960px){.attendance-visual{min-height:610px}}
@media(max-width:700px){.attendance-visual{min-height:620px}.request-types>span{font-size:14px}}
@media(max-width:600px){
 .attendance-photo-slot{display:none}
 .attendance-visual{max-width:320px;margin-inline:auto}
 .day-phone{margin-inline:auto;transform:none}
 .attendance-visual:before{inset:50px -10px 55px}
 .attendance-sample{right:0;left:0;text-align:center}
}

.attendance-visual{padding-bottom:30px}
@media(prefers-reduced-motion:no-preference){.hero-copy{animation:hero-enter .65s ease both}.hero-product{animation:hero-enter .8s ease both}}
@keyframes hero-enter{from{opacity:.7;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Shared message, with every business visible together. */
.business-band{background:linear-gradient(180deg,#fff 65%,#f1f6f3)}
.business-audience{display:block}
.business-heading{text-align:center;max-width:780px;margin:0 auto 32px}
.business-heading .eyebrow{font-size:14px;letter-spacing:0;margin-bottom:12px}
.business-heading h2{font-size:36px;line-height:1.4;letter-spacing:-.02em}
.business-lead{font-size:17px;line-height:1.85;color:var(--muted);margin-top:16px}
.business-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.business-scene{margin:0;min-width:0}
.business-scene>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px;background:var(--mist)}
.business-scene>figcaption{font-size:16px;line-height:1.65;font-weight:550;text-align:center;margin-top:16px;color:var(--ink)}
@media(max-width:960px){
 .business-heading h2{font-size:32px}
 .business-gallery{gap:18px}
 .business-scene>figcaption{font-size:14px}
}
@media(max-width:700px){
 .business-heading h2{font-size:29px}
 .business-lead{font-size:16px}
 .business-gallery{gap:14px}
 .business-scene>img{border-radius:12px}
}
@media(max-width:600px){
 .business-heading{text-align:left;margin:0 0 28px}
 .business-heading h2{max-width:360px}
 .business-lead br{display:none}
 .business-gallery{grid-template-columns:1fr;gap:28px}
 .business-scene>figcaption{text-align:left;font-size:16px;margin-top:12px}
}
/* All three roles visible: one shared example from request to payout. */
.team-flow-section{background:radial-gradient(ellipse at 50% 0,#24595788,transparent 75%),var(--ink)}
.team-flow-heading{text-align:center;margin:0 auto 28px;max-width:850px}
.team-flow-heading .eyebrow{font-size:14px;letter-spacing:0;margin-bottom:12px;color:#b7d8d1}
.team-flow-heading h2{font-size:36px;font-weight:600;line-height:1.4;letter-spacing:-.02em}
.team-flow-heading h2>span{color:#b8dcd3}
.team-flow-heading>p:last-child{font-size:16px;line-height:1.8;margin-top:16px;color:#c3d5d2}
.team-flow-stages{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0;padding:0;position:relative}
.team-flow-stage:not(:last-child):after{content:"";position:absolute;left:100%;top:20px;width:32px;height:1px;background:#91b6af}
.team-flow-stage{min-width:0;position:relative}
.team-flow-role{display:flex;align-items:center;gap:12px;position:relative;font-size:16px;font-weight:550;margin-bottom:16px}
.team-flow-role>b{margin-left:auto;color:#aecbc6;font:500 13px Manrope,sans-serif;padding:8px 0 8px 12px}
.team-flow-icon{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border:1px solid #688f88;border-radius:50%;background:#284c4c;color:#d1ece5}
.team-flow-icon .icon{width:22px;height:22px}
.team-flow-stage h3{font-size:22px;line-height:1.5;font-weight:550;letter-spacing:-.01em}
.team-flow-stage>p{font-size:16px;line-height:1.8;color:#c3d5d2;margin:8px 0 18px}
.team-flow-preview{background:#fff;color:var(--ink);border:1px solid #e1ece7;border-radius:14px;padding:16px 18px 12px;box-shadow:0 12px 25px -20px #07191a80}
.team-flow-preview-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px;font-size:14px;color:var(--muted);margin-bottom:12px}
.team-flow-preview-head>.icon{width:20px;height:20px;color:var(--teal)}
.flow-status{font-size:12px;line-height:1.5;border-radius:6px;padding:4px 8px;white-space:nowrap}
.flow-status.pending{background:#eef3fb;color:#315f9c}
.flow-status.approved{background:#e7f2f0;color:var(--teal)}
.flow-expense{display:flex;gap:10px;align-items:center;min-height:44px}
.flow-expense>.avatar,.flow-doc{width:36px;height:36px;border-radius:50%;font-size:14px;flex-shrink:0}
.flow-doc{display:grid;place-items:center;background:#e7f2f0;color:var(--teal);border-radius:10px}
.flow-doc .icon{width:20px;height:20px}
.flow-expense>div{flex:1;min-width:0}
.flow-expense strong{display:block;font-size:14px;font-weight:600;line-height:1.5}
.flow-expense>div>span{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
.flow-expense>b{font:650 18px Manrope,sans-serif;white-space:nowrap}
.flow-expense small{font:400 12px NotoSansThai,sans-serif}
.flow-preview-footer{display:flex;align-items:center;gap:7px;border-top:1px solid #e3ebe7;margin-top:14px;padding-top:10px;color:var(--muted);font-size:12px;line-height:1.6}
.flow-preview-footer .icon{width:15px;height:15px;color:var(--teal);flex-shrink:0}
.team-flow-caption{text-align:center;font-size:12px;line-height:1.7;color:#acc6c1;margin-top:22px}
@media(max-width:1150px){
 .team-flow-stages{gap:24px}
 .team-flow-stage:not(:last-child):after{width:24px}
 .team-flow-stage h3{font-size:20px}
 .team-flow-preview{padding:16px 14px 12px}
 .flow-expense{gap:8px}
}
@media(max-width:960px){
 .team-flow-heading h2{font-size:32px}
 .team-flow-stages{gap:18px}
 .team-flow-stage:not(:last-child):after{width:18px}
 .team-flow-stage h3{font-size:18px}
 .team-flow-stage>p{font-size:16px}
 .team-flow-stage>p br{display:none}
 .flow-expense>.avatar,.flow-doc{display:none}
 .flow-expense>b{font-size:16px}
}
@media(max-width:700px){
 .team-flow-heading{text-align:left;margin:0 0 32px}
 .team-flow-heading h2{font-size:29px;max-width:410px}
 .team-flow-heading h2>span{display:block}
 .team-flow-stages{grid-template-columns:1fr;gap:30px;padding-left:26px}
 .team-flow-stages:before{content:"";position:absolute;top:22px;bottom:22px;left:0;width:1px;background:#6d9691}
 .team-flow-stage:not(:last-child):after{display:none}
 .team-flow-stage:before{content:"";position:absolute;left:-30px;top:19px;width:9px;height:9px;background:#b7d8d1;border-radius:50%;box-shadow:0 0 0 5px #203f40}
 .team-flow-role{font-size:16px;margin-bottom:14px;background:transparent}
 .team-flow-role>b{background:none;font-size:12px}
 .team-flow-icon{width:40px;height:40px}
 .team-flow-stage h3{font-size:21px}
 .team-flow-stage>p{font-size:16px;margin:8px 0 16px}
 .team-flow-preview{padding:16px;max-width:450px}
 .flow-expense>.avatar,.flow-doc{display:grid}
 .flow-expense>b{font-size:18px}
 .team-flow-caption{text-align:left;margin-left:26px}
}
@media(max-width:380px){
 .team-flow-stage h3{font-size:20px}
 .team-flow-preview{padding:14px 12px 12px}
 .flow-expense>.avatar,.flow-doc{display:none}
}