
/* VerbaNote signup navy/cyan redesign, scoped to the existing signup screen.
   No backend form, OTP, session, or portal event handlers are replaced. */
:root{--vn-signup-accent:#04c5d9;--vn-signup-blue:#087b9d}
html,body{background:#061b2a!important}
.vn-new-hero{position:absolute;inset:0;display:block;overflow:hidden;color:#fff;background:radial-gradient(circle at 65% 22%,#126d91 0%,#072b45 44%,#031525 100%);font-family:inherit}
.vn-new-hero-brand{position:absolute;z-index:3;top:34px;left:4.5%;font-size:25px;font-weight:900;letter-spacing:-.035em}
.vn-new-monogram{color:#05c8d4;font-size:29px;margin-right:8px}
.vn-new-hero-copy{position:absolute;z-index:3;left:4.5%;top:17%;width:41%;max-width:430px}
.vn-new-eyebrow{font-size:11px;letter-spacing:.15em;color:#a7f4fa;font-weight:900}
.vn-new-hero-copy h1{margin:12px 0 16px;font-size:clamp(36px,4.2vw,68px);line-height:.98;letter-spacing:-.05em;font-weight:900;color:white}
.vn-new-hero-copy h1 span{color:#10d0e2}
.vn-new-hero-copy p{max-width:390px;color:#d4e7f0;font-size:clamp(12px,1.1vw,16px);line-height:1.55}
.vn-new-benefits{display:grid;gap:10px;margin-top:20px}
.vn-new-benefits div{display:flex;gap:11px;align-items:center;color:#e4f8ff;font-size:13px}
.vn-new-benefits i{width:30px;height:30px;border-radius:8px;background:#0b6792;display:grid;place-items:center;color:#3ce4f3;flex-shrink:0}
.vn-new-photo{position:absolute;z-index:1;right:0;top:5%;bottom:10%;width:63%;background:url('../images/signup/signup-workplace-new.webp') center 38% / cover no-repeat;mask-image:linear-gradient(90deg,transparent 0%,#000 27%)}
.vn-new-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,20,34,.65),transparent 48%)}
.vn-new-photo-chip{position:absolute;z-index:4;top:14%;right:5%;display:flex;gap:10px;align-items:center;background:rgba(231,251,255,.93);color:#082c45;padding:11px 15px;border:1px solid white;border-radius:13px;box-shadow:0 15px 35px #001c3360}
.vn-new-photo-chip i{color:#028aa5;font-size:20px}
.vn-new-photo-chip b{display:block;font-size:12px}
.vn-new-photo-chip small{display:block;font-size:10px}
.vn-new-paths{position:absolute;z-index:5;bottom:3%;left:3%;right:3%;padding:14px 16px;border:1px solid #b6eff044;background:rgba(5,39,62,.82);backdrop-filter:blur(14px);border-radius:18px}
.vn-new-paths>strong{font-size:19px;color:white;display:block;margin-bottom:10px}
.vn-new-path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.vn-new-path-grid a{display:flex;gap:10px;align-items:center;background:#f7fdff;color:#09273c;text-decoration:none!important;border:1px solid #a8dfe9;border-radius:12px;padding:10px;min-width:0}
.vn-new-path-grid a.featured{border:2px solid #08d2df}
.vn-new-path-grid a i{color:#038eb1;font-size:20px}
.vn-new-path-grid b{display:block;font-size:11px;line-height:1.25}
.vn-new-path-grid small{display:block;color:#55778b;font-size:10px}
@media(min-width:901px){
  html,body,.page,.main{overflow:hidden!important;background:#061b2a!important}
  .vn-signup-intro{display:none!important}
  .form-head,.form-head:before,.form-head:after{background:none!important}
  .form-head{isolation:isolate}
  .form-card,body.portal-workspace-active .form-card{grid-template-columns:minmax(0,1fr) minmax(370px,28%)!important;background:#fff!important}
  .form-body,body.portal-workspace-active .form-body{width:100%!important;min-width:0!important;max-width:none!important;background:#fafdff!important;color:#09273c!important;border-left:1px solid #d8e9f0!important;box-shadow:none!important;padding:34px 24px!important}
  .form-body input,.form-body select,.form-body textarea{color:#09273c!important;background:#fff!important;border-color:#cbdfe9!important}
  .form-body label,.form-body h3,.form-body .login-heading,.form-body .login-heading h3{color:#09273c!important}
  .form-body .login-heading p,.form-body .field-help{color:#5d788a!important}
  .form-body .submit,.form-body .step-next{background:linear-gradient(110deg,#087e9e,#05a6b8)!important;color:#fff!important}
}
@media(max-width:900px){
  html,body,.page,.main{overflow:auto!important;background:#061b2a!important}
  .vn-signup-intro{display:none!important}
  .form-head{display:block!important;position:relative!important;min-height:330px!important;height:330px!important;padding:0!important;background:#07283e!important;overflow:hidden!important}
  .form-head > :not(.vn-new-hero){display:none!important}
  .vn-new-hero{position:absolute;inset:0}
  .vn-new-hero-brand{top:16px;left:17px;font-size:17px}
  .vn-new-monogram{font-size:20px}
  .vn-new-hero-copy{top:23%;left:17px;width:55%}
  .vn-new-hero-copy h1{font-size:clamp(27px,7vw,42px);margin:6px 0}
  .vn-new-hero-copy p{font-size:10px;line-height:1.4}
  .vn-new-benefits,.vn-new-paths,.vn-new-photo-chip{display:none}
  .vn-new-photo{right:-12%;top:0;bottom:0;width:74%;background-image:url('../images/signup/signup-mobile-new.webp');background-position:center}
  .form-card{background:#fff!important}
  .form-body{background:#fafdff!important;color:#09273c!important}
  .form-body .login-heading h3{color:#09273c!important}
  .form-body input,.form-body select{background:white!important;color:#09273c!important}
  .form-body .submit,.form-body .step-next{background:#087e9e!important;color:white!important}
  .portal-modal-backdrop.portal-landing-mode{background:#071e31!important}
  .portal-modal-backdrop.portal-landing-mode::before{background:linear-gradient(90deg,#061e32bb,#061e3255),url('../images/signup/signup-mobile-new.webp') center 20% / cover no-repeat!important;opacity:1!important}
  .portal-modal-backdrop.portal-landing-mode::after{display:none!important}
  .portal-modal-backdrop.portal-landing-mode .portal-modal-card{width:min(440px,calc(100vw - 22px))!important;height:auto!important;max-height:calc(100dvh - 18px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;margin:auto!important;border-radius:18px!important;background:#fafdff!important;color:#09273c!important}
  .portal-modal-head{padding:14px 16px 10px!important;flex-shrink:0}
  .portal-modal-head h3{font-size:21px!important;color:#09273c!important}
  .portal-modal-head p{font-size:11px!important;color:#617c8d!important;line-height:1.35!important}
  .portal-modal-kicker{color:#078ca3!important}
  .portal-option-list{overflow-y:auto!important;min-height:0!important;flex:1!important;padding:8px 12px!important}
  .portal-option{min-height:0!important;padding:10px!important;margin-bottom:7px!important;border-radius:12px!important;background:#f5fbfd!important;border:1px solid #d7e9f1!important;color:#09273c!important}
  .portal-option.selected{border:2px solid #07b6c9!important;background:#e9faff!important}
  .portal-option-copy strong{color:#09273c!important;font-size:12px!important}
  .portal-option-copy small{color:#587789!important;font-size:10px!important;line-height:1.35!important}
  .portal-option-arrow{color:#078ca3!important}
  .portal-modal-actions{position:sticky!important;bottom:0!important;z-index:2;background:#fafdff!important;padding:10px 12px 14px!important;flex-shrink:0}
  .portal-continue{background:linear-gradient(90deg,#087e9e,#06a8ba)!important;color:white!important}
  .portal-modal-foot{display:none!important}
}

/* v2.0 FINAL OVERRIDES: remove the legacy green photographic landing and expose the new split hero. */
@media(min-width:901px){
 .form-card,body.portal-workspace-active .form-card{display:grid!important;grid-template-columns:minmax(0,1fr) 350px!important;min-height:min(780px,calc(100dvh - 100px))!important;max-width:1500px!important;margin:auto!important}
 .form-head,body.portal-workspace-active .form-head{position:relative!important;min-width:0!important;min-height:680px!important;padding:0!important;background:#05273d!important;background-image:none!important}
 .form-head>:not(.vn-new-hero){display:none!important}
 .vn-new-hero{display:block!important;position:absolute!important;inset:0!important;z-index:5!important}
 .form-body,body.portal-workspace-active .form-body{display:block!important;width:350px!important;min-width:350px!important;max-width:350px!important;box-sizing:border-box!important;background:#fafdff!important;color:#09273c!important}
 .portal-modal-backdrop.portal-landing-mode{position:fixed!important;inset:0!important;align-items:center!important;justify-content:center!important;background:rgba(3,21,36,.62)!important;backdrop-filter:blur(4px)!important;overflow:auto!important;padding:20px!important}
 .portal-modal-backdrop.portal-landing-mode::before,.portal-modal-backdrop.portal-landing-mode::after{content:none!important;display:none!important;background:none!important}
 .portal-modal-backdrop.portal-landing-mode .portal-modal-card{position:relative!important;width:min(440px,calc(100vw - 32px))!important;max-height:calc(100dvh - 40px)!important;overflow:auto!important;margin:auto!important;border-radius:20px!important;background:#fafdff!important;color:#09273c!important}
 .portal-modal-backdrop.portal-landing-mode .portal-modal-head h3,.portal-modal-backdrop.portal-landing-mode .portal-option-top strong{color:#09273c!important}
 .portal-modal-backdrop.portal-landing-mode .portal-modal-head p,.portal-modal-backdrop.portal-landing-mode .portal-option-copy small{color:#587789!important}
 .portal-modal-backdrop.portal-landing-mode .portal-option{background:#f5fbfd!important;border:1px solid #d7e9f1!important;color:#09273c!important}
 .portal-modal-backdrop.portal-landing-mode .portal-option.selected{background:#e9faff!important;border:2px solid #07b6c9!important}
 .portal-modal-backdrop.portal-landing-mode #portalContinue{background:#078eac!important;color:#fff!important}
}
@media(max-width:900px){
 .form-head,body.portal-workspace-active .form-head{height:310px!important;min-height:310px!important;max-height:none!important;background:#05273d!important;background-image:none!important;padding:0!important}
 .form-head>:not(.vn-new-hero){display:none!important}
 .vn-new-hero{display:block!important;position:absolute!important;inset:0!important;z-index:5!important}
 .portal-modal-backdrop.portal-landing-mode{background:rgba(2,18,33,.85)!important;align-items:flex-end!important;justify-content:center!important}
 .portal-modal-backdrop.portal-landing-mode::before,.portal-modal-backdrop.portal-landing-mode::after{content:none!important;display:none!important;background:none!important}
 .portal-modal-backdrop.portal-landing-mode .portal-modal-card{position:relative!important;max-height:calc(100dvh - 18px)!important;background:#fafdff!important;color:#09273c!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
 .portal-modal-backdrop.portal-landing-mode .portal-modal-head h3,.portal-modal-backdrop.portal-landing-mode .portal-option-top strong{color:#09273c!important}
 .portal-modal-backdrop.portal-landing-mode .portal-modal-head p,.portal-modal-backdrop.portal-landing-mode .portal-option-copy small{color:#587789!important}
 .portal-modal-backdrop.portal-landing-mode .portal-option-list{overflow-y:auto!important;min-height:0!important;flex:1!important}
 .portal-modal-backdrop.portal-landing-mode .portal-option{background:#f5fbfd!important;border:1px solid #d7e9f1!important;color:#09273c!important}
 .portal-modal-backdrop.portal-landing-mode .portal-option.selected{background:#e9faff!important;border:2px solid #07b6c9!important}
 .portal-modal-backdrop.portal-landing-mode #portalContinue{background:#078eac!important;color:#fff!important}
}

/* v3: visual parity and readability refinements */
@media(min-width:901px){
 .form-card,body.portal-workspace-active .form-card{grid-template-columns:minmax(0,1fr) minmax(410px,31%)!important;min-height:min(800px,calc(100dvh - 88px))!important}
 .form-body,body.portal-workspace-active .form-body{width:100%!important;min-width:0!important;max-width:none!important;padding:30px 25px!important;background:#fff!important}
 .form-body .tab-btn,.form-body label,.form-body .account-type-card,.form-body .account-type-card strong,.form-body .account-type-card small,.form-body .account-type-card span{color:#0b3043!important;opacity:1!important}
 .form-body .account-type-card,.form-body .account-type-choice{background:#f5fbfd!important;border-color:#c9e3ec!important}
 .form-body .account-type-card.selected,.form-body .account-type-choice.selected{background:#e7faf8!important;border-color:#09b9bd!important}
 .form-body input,.form-body select,.form-body textarea{background:#fff!important;color:#0b3043!important}
 .vn-new-hero-copy{top:17%!important;left:4.5%!important;width:37%!important}
 .vn-new-hero-copy h1{font-size:clamp(36px,3.6vw,58px)!important;line-height:1.02!important}
 .vn-new-photo{right:0!important;top:6%!important;bottom:9%!important;width:58%!important;background-size:auto 130%!important;background-position:47% 40%!important;mask-image:linear-gradient(90deg,transparent 0%,black 25%)!important}
 .vn-new-photo-chip{display:none!important}
 .vn-new-paths{bottom:2.5%!important}
}
@media(max-width:900px){
 .form-body,body.portal-workspace-active .form-body{background:#fff!important}
 .form-body label,.form-body strong,.form-body .tab-btn{color:#0b3043!important;opacity:1!important}
 .vn-new-photo{background-size:auto 120%!important;background-position:48% center!important}
}
