.auth-screen{background:#edf2f5}
.landing-shell{border-color:#fff;box-shadow:0 24px 70px rgba(26,48,67,.09)}
.public-nav{border-color:#e5ebef}
.public-nav .auth-caption{color:#75838d;border-color:#e0e7ec}
.nav-cta{background:#153b50;border-radius:24px}

.auth-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:26px;min-height:620px;padding:42px 0 36px}
.auth-intro{position:relative;z-index:2;max-width:510px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #d6e7e9;border-radius:5px;background:#edf7f8;color:#176c7b;font-size:9px;font-weight:700;letter-spacing:.8px}
.hero-kicker span{display:grid;width:21px;height:21px;place-items:center;border-radius:5px;background:#d9eef0;color:#126d7a;font-size:12px}
.auth-intro h1{max-width:520px;margin:21px 0 17px;color:#172d3e;font-family:Arial,sans-serif;font-size:clamp(42px,3.7vw,48px);font-weight:700;line-height:1.08;letter-spacing:-2.4px}
.auth-intro h1 span{color:#147f8e;white-space:normal}
.auth-intro h1 span:after{display:none}
.auth-intro>p:not(.eyebrow):not(.hero-kicker){max-width:455px;color:#4f626f;font-size:14px;line-height:1.7}
.hero-actions{gap:11px;margin-top:25px}
.hero-primary,.hero-secondary{padding:13px 21px;border-radius:5px;font-size:11px}
.hero-primary{background:#126d85;color:#fff;box-shadow:0 5px 14px rgba(18,109,133,.19)}
.hero-primary:hover{background:#0d596e}
.hero-secondary{border:1px solid #c7d5dd;background:#fff;color:#294858}
.hero-social-proof{display:flex;align-items:center;gap:11px;margin-top:24px}
.hero-social-proof .proof-module{color:#526570;font-size:8px}
.proof-divider{width:4px;height:4px;border-radius:50%;background:#8fa1aa}

.auth-showcase{position:relative;inset:auto;width:100%;height:530px;margin:0;overflow:visible;transform:none;isolation:isolate}
.auth-showcase:before{inset:4% 0;border-radius:44px;background:linear-gradient(145deg,#e5f8f4,#edf5ff 58%,#f4eeff);z-index:-2}
.auth-showcase:after{top:8%;right:8%;width:70px;height:70px;border-color:rgba(33,113,161,.12);z-index:-1}
.auth-modules{display:none}
.hero-visual{position:relative;width:min(100%,640px);height:100%;margin:0 auto;padding:23px 14px}
.recruitment-preview{height:100%;overflow:hidden;border:1px solid #dce7ec;border-radius:17px;background:#fff;box-shadow:0 22px 56px rgba(41,77,99,.14);color:#263b4d}
.preview-toolbar{display:flex;height:46px;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid #edf1f3;background:#fff}
.preview-brand{display:flex;align-items:center;gap:5px;color:#153b50;font-size:11px;font-weight:800;letter-spacing:-.4px}
.preview-brand>span{display:grid;width:19px;height:19px;place-items:center;border-radius:6px;background:#153b50;color:#fff;font-size:12px}
.preview-workspace{padding-left:12px;border-left:1px solid #e7edf0;color:#738391;font-size:9px}
.preview-live{display:flex;align-items:center;gap:5px;margin-left:auto;color:#697d87;font-size:8px;font-weight:700;letter-spacing:.5px}
.preview-live i,.preview-footnote>span:first-child i{width:6px;height:6px;border-radius:50%;background:#18ad83}
.preview-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px}
.preview-heading p{margin:0 0 5px;color:#83939e;font-size:8px;font-weight:700;letter-spacing:1px}
.preview-heading h2{margin:0;color:#1b3346;font-size:19px;letter-spacing:-.6px}
.preview-period{padding:7px 9px;border:1px solid #e6ecef;border-radius:7px;color:#5d7180;font-size:8px;font-weight:600}
.preview-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:0 16px 13px}
.preview-metric{display:flex;min-width:0;align-items:center;gap:8px;padding:10px;border:1px solid #eaf0f3;border-radius:10px;background:#fff}
.metric-icon{display:grid;width:31px;height:31px;flex:0 0 31px;place-items:center;border-radius:9px;font-size:15px}
.metric-blue{background:#e8f3ff;color:#3882db}.metric-violet{background:#f0ebff;color:#7b66d1}.metric-mint{background:#e3f7ee;color:#168d69}
.preview-metric>div{display:grid;min-width:0;grid-template-columns:1fr auto;align-items:baseline;column-gap:6px}
.preview-metric small{grid-column:1/-1;overflow:hidden;color:#738391;font-size:8px;text-overflow:ellipsis;white-space:nowrap}
.preview-metric strong{margin-top:2px;color:#1b3346;font-size:19px;line-height:1.1}
.preview-metric>div>span{justify-self:end;overflow:hidden;color:#17865f;font-size:7px;text-overflow:ellipsis;white-space:nowrap}
.preview-metric>div>.metric-note{color:#7a8994}
.pipeline-preview{margin:0 16px;border:1px solid #e5ecef;border-radius:10px;background:#f7f9fa;overflow:hidden}
.pipeline-preview-heading{display:flex;align-items:center;justify-content:space-between;padding:10px 11px 8px}
.pipeline-preview-heading strong{color:#30495b;font-size:10px}
.pipeline-preview-heading>span{color:#87959f;font-size:7px}
.pipeline-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:0 8px 9px}
.pipeline-stage{min-width:0;padding:7px 6px;border:1px solid #e8edf0;border-radius:8px;background:#f0f3f5}
.pipeline-stage>header{display:flex;align-items:center;gap:4px;min-height:24px;margin-bottom:6px}
.stage-dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#4789d8}
.stage-review .stage-dot{background:#8a70dc}.stage-interview .stage-dot{background:#e3a33c}.stage-offer .stage-dot{background:#19a57c}
.pipeline-stage>header>div{display:flex;min-width:0;align-items:center;gap:3px}
.pipeline-stage>header b{overflow:hidden;color:#465b6a;font-size:7px;text-overflow:ellipsis;white-space:nowrap}
.pipeline-stage>header small{padding:2px 4px;border-radius:8px;background:#fff;color:#637684;font-size:7px}
.stage-more{margin-left:auto;color:#85949e;font-size:12px;line-height:1}
.mini-candidate{display:flex;gap:5px;margin-top:5px;padding:7px 5px;border:1px solid #e8edf0;border-radius:7px;background:#fff;box-shadow:0 2px 5px rgba(40,63,77,.035)}
.mini-avatar{display:grid;width:24px;height:24px;flex:0 0 24px;place-items:center;border-radius:50%;font-size:7px;font-weight:700}
.avatar-peach{background:#fde7dc;color:#a45e43}.avatar-blue{background:#e2efff;color:#426ea9}.avatar-lilac{background:#eee8ff;color:#735eb1}.avatar-mint{background:#dcf4e9;color:#287b5e}.avatar-yellow{background:#fff1ce;color:#9a762c}
.mini-candidate>div{display:flex;min-width:0;flex-direction:column;gap:3px}
.mini-candidate>div>b{overflow:hidden;color:#304657;font-size:7px;text-overflow:ellipsis;white-space:nowrap}
.mini-candidate>div>small{overflow:hidden;color:#83919b;font-size:6px;text-overflow:ellipsis;white-space:nowrap}
.candidate-match{align-self:flex-start;padding:2px 4px;border-radius:8px;background:#e5f6ee;color:#14825d;font-size:6px;font-weight:700}
.preview-footnote{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;color:#7a8993;font-size:7px}
.preview-footnote>span:first-child{display:flex;align-items:center;gap:5px;color:#4f6976}
.preview-footnote>span:first-child i{width:5px;height:5px}
#auth-panel{display:none}
.auth-panel-open #auth-panel{position:fixed;z-index:30;top:50%;left:50%;display:block;width:min(460px,calc(100vw - 30px));max-height:calc(100vh - 30px);overflow:auto;transform:translate(-50%,-50%);box-shadow:0 24px 75px rgba(24,42,55,.24)}

@media(max-width:1100px) and (min-width:901px){
  .auth-layout{gap:14px;min-height:570px}
  .auth-intro h1{font-size:clamp(40px,4.1vw,46px);letter-spacing:-2.2px}
  .auth-showcase{height:560px}
  .hero-visual{padding:17px 10px}
  .preview-metrics{gap:6px;padding-right:11px;padding-left:11px}
  .preview-metric{gap:6px;padding:8px 6px}
  .metric-icon{width:27px;height:27px;flex-basis:27px}
  .pipeline-preview{margin-right:11px;margin-left:11px}
  .pipeline-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pipeline-stage>header b{font-size:9px}
  .mini-candidate>div>b{font-size:8px}
  .mini-candidate>div>small{font-size:7px}
}
@media(max-width:900px){
  .public-nav{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand actions" "links links";height:auto;min-height:66px;row-gap:12px;padding:12px 0}
  .public-nav .auth-brand{grid-area:brand}
  .public-nav .auth-caption{display:none}
  .public-actions{grid-area:actions;gap:9px}
  .public-nav-links{grid-area:links;display:flex;justify-content:space-between;gap:10px;margin:0;padding:0 1px 3px}
  .public-nav-links a,.nav-menu summary,.nav-link-button{font-size:10px}
  .public-nav-links .nav-menu:nth-child(2){display:none}
  .nav-dropdown{top:23px;left:0;width:230px}
  .product-mega{left:-2px!important;grid-template-columns:1fr 1fr;gap:6px 14px;width:min(350px,calc(100vw - 40px));padding:18px 16px 0}
  .product-mega .mega-column:last-of-type{display:none}
  .mega-column h3{font-size:8px}
  .mega-column a{padding:6px 0;font-size:9px}
  .mega-footer{margin-top:10px;padding:11px 0;font-size:8px}
  .mega-footer a{font-size:9px}
  .auth-layout{display:flex;min-height:0;flex-direction:column;align-items:stretch;gap:0;padding:42px 0 22px}
  .auth-intro{max-width:640px}
  .auth-intro h1{font-size:clamp(42px,7.2vw,58px);letter-spacing:-2.8px}
  .auth-intro>p:not(.eyebrow):not(.hero-kicker){font-size:14px}
  .auth-showcase{width:min(100%,680px);height:470px;margin:27px auto 8px}
  .hero-visual{padding:16px 9px}
  .auth-footer{font-size:9px}
}
@media(max-width:560px){
  .auth-screen{padding:12px;background:#edf2f5}
  .landing-shell{min-height:calc(100vh - 24px);padding:0 16px 14px}
  .public-actions{gap:8px}
  .nav-cta{padding:9px 11px;font-size:10px}
  .nav-signin{font-size:10px}
  .auth-layout{padding:34px 0 17px}
  .hero-kicker{gap:6px;padding:6px 8px;font-size:7px;letter-spacing:.6px}
  .hero-kicker span{width:18px;height:18px;font-size:10px}
  .auth-intro h1{margin:17px 0;font-size:clamp(38px,10vw,48px);letter-spacing:-2px}
  .auth-intro>p:not(.eyebrow):not(.hero-kicker){font-size:13px;line-height:1.65}
  .hero-actions{gap:8px;margin-top:19px}
  .hero-primary,.hero-secondary{padding:11px 13px;font-size:9px}
  .hero-social-proof{flex-wrap:wrap;gap:7px;margin-top:16px}
  .hero-social-proof .proof-module{font-size:7px}
  .auth-showcase{height:495px;margin:22px auto 5px}
  .auth-showcase:before{inset:3% 0;border-radius:26px}
  .hero-visual{padding:10px 0}
  .recruitment-preview{border-radius:12px}
  .preview-toolbar{height:38px;padding:0 10px}
  .preview-heading{padding:12px 11px 9px}
  .preview-heading h2{font-size:16px}
  .preview-heading p{font-size:7px}
  .preview-period{padding:6px;font-size:7px}
  .preview-metrics{gap:5px;padding:0 8px 9px}
  .preview-metric{gap:5px;padding:7px 5px;border-radius:8px}
  .metric-icon{width:25px;height:25px;flex-basis:25px;border-radius:7px;font-size:12px}
  .preview-metric small{font-size:8px}
  .preview-metric strong{font-size:17px}
  .preview-metric>div>span{display:none}
  .pipeline-preview{margin:0 8px;border-radius:8px}
  .pipeline-preview-heading{padding:8px 8px 6px}
  .pipeline-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0 6px 7px}
  .pipeline-stage{padding:7px 6px}
  .pipeline-stage>header{gap:4px}
  .pipeline-stage>header b,.pipeline-stage>header small{font-size:8px}
  .mini-candidate{gap:5px;padding:6px 5px}
  .mini-avatar{width:22px;height:22px;flex-basis:22px;font-size:7px}
  .mini-candidate>div>b{font-size:8px}
  .mini-candidate>div>small{font-size:7px}
  .candidate-match{font-size:6px}
  .preview-footnote{padding:8px 11px;font-size:7px}
  .auth-footer{font-size:8px}
  .auth-footer span:nth-child(2){display:none}
}
@media(max-width:390px){
  .landing-shell{padding-inline:13px}
  .public-actions{gap:6px}
  .nav-cta{padding:8px 9px;font-size:9px}
  .auth-showcase{height:495px}
  .auth-intro h1{font-size:clamp(35px,9.4vw,42px);letter-spacing:-1.8px}
  .preview-workspace{font-size:8px}
  .preview-metric{gap:3px;padding:6px 4px}
  .metric-icon{width:22px;height:22px;flex-basis:22px;font-size:11px}
}