/* Entrance layout and photo treatment: Workplify app/hr-demo/hr-demo.css. */
:root{font-family:HK Grotesk,Arial,sans-serif;font-synthesis:none;color:#252b24;background:#e8ebe1;line-height:1.6}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
a{color:inherit}
button,a{touch-action:manipulation}
:focus-visible{outline:2px solid #3f5945;outline-offset:4px}
.marketing-page{position:relative;isolation:isolate;padding:28px 48px 0}
.marketing-page::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,#e8ebe1 0%,#e8ebe1f5 34%,#e8ebe1ba 63%,#e8ebe18c 100%),linear-gradient(0deg,#e8ebe1 0%,#e8ebe100 28%,#e8ebe100 72%,#e8ebe1e6 100%),url('/assets/workplace.png');background-position:center,right center,right center;background-size:cover;background-repeat:no-repeat}
.auth-header{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;max-width:1504px;margin-inline:auto}
.auth-header a{display:block;flex:0 0 auto;max-width:100%;min-width:0}
/* Same Poppins em size as Workplify: 141.28px / 721 × .149953 × 1076. */
.auth-header img{display:block;width:auto;height:31.6px;max-width:100%;object-fit:contain}
.auth-header span{font-size:13px;color:#60665d;max-width:200px;text-align:right}
main{flex:1;display:flex;min-width:0}
.app-intro{width:100%;max-width:1150px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:80px;align-items:center;padding:64px 0}
.app-copy{min-width:0}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.12em;color:#60665d;margin:0 0 22px}
h1{font-size:clamp(34px,3.8vw,50px);font-weight:600;line-height:1.12;letter-spacing:-.03em;margin:0 0 28px}
.lead{font-size:17px;color:#60665d;margin:0 0 32px;max-width:540px}
.features{padding:0;margin:0 0 32px;list-style:none}
.features li{position:relative;padding-left:25px;margin:12px 0;font-size:16px}
.features li:before{content:'✓';position:absolute;left:0;color:#556b3e;font-weight:600}
.release-state{font-size:14px;font-weight:600;margin:0 0 8px}
.release-note{font-size:13px;color:#60665d;max-width:470px;margin:0 0 26px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:6px;background:#d6e1ca;color:#2c3a25;font-size:14px;font-weight:600;text-decoration:none}
.button:hover{background:#c5d5b6}
.button:active{background:#b8cba6}
.app-preview{margin:0;text-align:center;min-width:0}
.phone{width:min(330px,100%);margin:0 auto;border:8px solid #232622;border-radius:48px;overflow:hidden;background:#f1f4e9;box-shadow:0 24px 50px rgba(25,32,20,.14)}
.phone img{display:block;width:100%;height:auto}
.app-preview figcaption{font-size:11px;color:#60665d;margin-top:20px}
.skip-link{position:absolute;top:8px;left:12px;transform:translateY(-200%);padding:8px 12px;background:#fff;z-index:10}
.skip-link:focus{transform:none}
[hidden]{display:none!important}
@media(max-width:850px){
 .marketing-page::before{background-image:linear-gradient(180deg,#e8ebe1de,#e8ebe1ed 42%,#e8ebe1 72%),url('/assets/workplace.png');background-size:100% 680px,auto 680px;background-position:center top,right top;background-repeat:no-repeat}
 .app-intro{grid-template-columns:1fr;max-width:560px;gap:40px;padding:48px 0}
 .phone{width:min(310px,100%)}
}
@media(max-width:640px){
 .marketing-page{padding:22px 18px 0}
 .auth-header{gap:16px;flex-wrap:wrap}
 .auth-header span{font-size:10px;max-width:120px;text-align:left}
 .app-intro{padding:40px 0;gap:36px}
 h1{font-size:34px}
 .lead{font-size:16px}
 .phone{width:min(300px,100%)}
}

@media(max-width:680px){.auth-header img{height:28.1px}}