/* A lighter, more playful layer for the existing multi-step signup journey. */
body.entry-page .hero-parallax-top { position:relative; overflow:hidden; }
body.entry-page .hero-parallax-top::after { content:""; position:absolute; width:520px; height:520px; right:-180px; top:-260px; border-radius:50%; border:1px solid rgba(98,178,255,.16); box-shadow:0 0 0 50px rgba(47,125,244,.025),0 0 0 100px rgba(34,211,238,.018); pointer-events:none; animation:signup-orbit 24s linear infinite; }
body.entry-page .hero-visual img,
body.entry-page .image-block img,
body.entry-page .split-media img { object-fit:cover; object-position:center; }
body.entry-page .hero-visual img { aspect-ratio:4 / 3; }

#signupOverlay.overlay { padding:18px; background:rgba(1,8,20,.76); backdrop-filter:blur(18px); }
#signupOverlay .signup-shell { width:min(1180px,100%); height:min(800px,calc(100vh - 36px)); max-height:none; overflow:hidden; grid-template-columns:minmax(340px,.76fr) minmax(0,1.24fr); border:1px solid rgba(130,188,255,.22); border-radius:28px; background:#07172c; box-shadow:0 38px 120px rgba(0,0,0,.56); }
#signupOverlay.entry-dialog-open .signup-shell { animation:signup-shell-pop .48s cubic-bezier(.2,.8,.2,1) both; }
#signupOverlay .signup-info { position:relative; min-width:0; overflow:hidden; padding:36px; display:flex; align-items:flex-end; color:#fff; background:linear-gradient(to top,rgba(2,12,27,.96),rgba(3,19,40,.38)),url("/assets/images/photos/photo-forwarder-partnership.png") center / cover; }
#signupOverlay .signup-info::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(37,99,235,.22),transparent 48%,rgba(34,211,238,.08)); }
#signupOverlay .signup-info .parallax-bg { display:none; }
#signupOverlay .signup-info .info-content { position:relative; z-index:2; width:100%; padding:0; background:transparent; }
#signupOverlay .signup-info .entry-kicker { color:#8bdaf0; font-size:9px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
#signupOverlay .signup-info h2 { max-width:430px; margin:12px 0 13px; color:#fff; font-size:clamp(32px,3.4vw,48px); line-height:1.02; letter-spacing:-.05em; }
#signupOverlay .signup-info p { color:#b8cbe0; font-size:12px; line-height:1.65; }
#signupOverlay .signup-info ul { display:grid; gap:8px; margin:18px 0 0; padding:0; list-style:none; }
#signupOverlay .signup-info li { padding:10px 12px; border:1px solid rgba(145,194,255,.14); border-radius:10px; color:#d8e8f7; background:rgba(5,24,48,.54); font-size:9px; backdrop-filter:blur(8px); }
#signupOverlay .change-role { width:auto; margin:0 0 20px; padding:9px 12px; border:1px solid rgba(255,255,255,.2); border-radius:10px; color:#fff; background:rgba(4,18,36,.55); font-size:9px; font-weight:850; }

#signupOverlay .signup-form { position:relative; min-width:0; overflow-y:auto; padding:clamp(30px,4vw,52px); color:#183858; background:radial-gradient(circle at 100% 0,rgba(47,125,244,.09),transparent 25rem),#f8fbff; }
#signupOverlay .signup-form::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.26; background-image:linear-gradient(rgba(66,108,158,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(66,108,158,.08) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,#000,transparent 48%); }
#signupOverlay .signup-form > * { position:relative; }
#signupOverlay .signup-form > h1 { margin:0; color:#06172c; font-size:clamp(33px,4vw,49px); letter-spacing:-.05em; }
#signupOverlay .signup-form > .subtitle { margin:10px 0 25px; color:#758aa1; font-size:12px; }
#signupOverlay .close-btn { position:sticky !important; z-index:20; top:0; float:right; width:40px; height:40px; margin:-2px -3px -40px 0; display:grid; place-items:center; border:1px solid #d3e0ee; border-radius:12px; color:#416182; background:rgba(255,255,255,.9); box-shadow:0 8px 25px rgba(3,22,48,.08); }

#signupOverlay .role-picker { display:grid !important; grid-template-columns:1fr 1fr; gap:13px; }
#signupOverlay .role-picker[style*="none"] { display:none !important; }
#signupOverlay .role-picker button { min-height:188px; padding:22px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:8px; overflow:hidden; border:1px solid #d5e2ef; border-radius:18px; color:#173b61; background:linear-gradient(145deg,#fff,#f0f6fd); box-shadow:0 13px 32px rgba(3,22,48,.06); text-align:left; transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .2s ease,box-shadow .2s ease; }
#signupOverlay .role-picker button::before { content:""; position:absolute; width:160px; height:160px; right:-76px; top:-80px; border-radius:50%; background:radial-gradient(circle,rgba(47,125,244,.22),transparent 67%); transition:transform .35s ease; }
#signupOverlay .role-picker button:hover { transform:translateY(-6px) rotate(-.4deg); border-color:#8dbbef; box-shadow:0 22px 44px rgba(37,99,235,.13); }
#signupOverlay .role-picker button:nth-child(2):hover { transform:translateY(-6px) rotate(.4deg); }
#signupOverlay .role-picker button:hover::before { transform:scale(1.3); }
#signupOverlay .entry-role-icon { width:45px; height:45px; margin-bottom:auto; display:grid; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(135deg,#2563eb,#0891b2); font-size:10px; font-weight:900; box-shadow:0 11px 24px rgba(37,99,235,.24); }
#signupOverlay .role-picker strong { color:#0d2c4c; font-size:17px; }
#signupOverlay .role-picker small { color:#71879e; font-size:9px; line-height:1.5; }
.signup-delight-route { grid-column:1 / -1; padding:15px 17px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid #dbe6f1; border-radius:14px; background:rgba(255,255,255,.82); }
.signup-delight-route span { position:relative; display:grid; justify-items:center; gap:6px; color:#7c91a7; font-size:8px; font-weight:800; }
.signup-delight-route span:not(:last-child)::after { content:""; position:absolute; left:calc(50% + 12px); right:calc(-50% + 12px); top:8px; height:1px; background:linear-gradient(90deg,#76a9e4,#b9d1ea); }
.signup-delight-route i { position:relative; z-index:1; width:17px; height:17px; display:grid; place-items:center; border:3px solid #e3edf7; border-radius:50%; background:#4e91df; box-shadow:0 0 0 4px #fff; }

#signupOverlay .progress-bar { margin:0 0 25px; padding:14px; border:1px solid #dce6f1; border-radius:14px; background:#fff; box-shadow:0 10px 28px rgba(3,22,48,.05); }
#signupOverlay .progress-step { color:#8799ad; }
#signupOverlay .progress-step span { border-color:#cfdeec; background:#eff5fb; }
#signupOverlay .progress-step.active span,#signupOverlay .progress-step.is-complete span { color:#fff; border-color:#2563eb; background:linear-gradient(135deg,#2563eb,#0891b2); box-shadow:0 0 0 5px rgba(37,99,235,.09); }
.signup-completion { margin:-10px 0 20px; display:flex; align-items:center; justify-content:space-between; color:#68809b; font-size:9px; font-weight:800; }
.signup-completion div { width:150px; height:5px; overflow:hidden; border-radius:99px; background:#dce7f2; }
.signup-completion i { width:0; height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#2563eb,#22d3ee,#63e6b4); transition:width .3s ease; }

#signupOverlay #signupForm .step { padding:0; }
#signupOverlay #signupForm .step h3 { margin:0; color:#0b2948; font-size:24px; letter-spacing:-.03em; }
#signupOverlay #signupForm .step > p { margin:7px 0 22px; color:#7a8fa5; font-size:10px; }
#signupOverlay #signupForm input:not([type="checkbox"]),#signupOverlay #signupForm select,#signupOverlay #signupForm textarea { min-height:49px; margin-bottom:12px; padding:12px 14px; border:1px solid #d0deeb; border-radius:11px; color:#173553; background:#fff; font-size:13px; box-shadow:0 4px 14px rgba(3,22,48,.03); }
#signupOverlay #signupForm input:focus { border-color:#3b82f6; box-shadow:0 0 0 4px rgba(59,130,246,.11),0 9px 23px rgba(37,99,235,.07); }
#signupOverlay .entry-field-label { color:#254868; font-size:9px; font-weight:850; }
#signupOverlay .entry-password-toggle { width:auto; min-width:58px; color:#3974bd; background:#edf5ff; }
#signupOverlay .checkbox-group { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:5px 0 16px; }
#signupOverlay .checkbox-group label { min-height:48px; padding:10px; display:flex; align-items:center; gap:8px; border:1px solid #d9e5f0; border-radius:11px; background:#fff; color:#506b86; font-size:9px; }
#signupOverlay .checkbox-group input { width:17px; height:17px; accent-color:#2563eb; }
#signupOverlay .step-controls { margin-top:19px; display:flex; gap:10px; }
#signupOverlay .step-controls button { min-height:47px; border-radius:11px; font-size:10px; font-weight:900; }
#signupOverlay .next-btn,#signupOverlay .submit-btn { color:#fff; background:linear-gradient(135deg,#2563eb,#2f7df4 58%,#0891b2); box-shadow:0 11px 27px rgba(37,99,235,.23); }
#signupOverlay .back-btn { color:#315b88; border:1px solid #cadbea; background:#fff; }
#signupOverlay .review-details { padding:17px; border:1px solid #dbe6f1; border-radius:14px; background:#fff; }
#signupOverlay #signupError:not(:empty) { padding:10px 12px; border:1px solid #fecaca; border-radius:10px; color:#b4233a; background:#fff1f2; animation:signup-error-shake .35s ease both; }
.signup-spark { position:fixed; z-index:4000; width:7px; height:7px; border-radius:50%; pointer-events:none; background:#22d3ee; animation:signup-spark .7s ease-out forwards; }

@keyframes signup-shell-pop { from{opacity:0;transform:translateY(18px) scale(.97)} }
@keyframes signup-orbit { to{transform:rotate(360deg)} }
@keyframes signup-spark { to{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.2)} }
@keyframes signup-error-shake { 0%,100%{transform:translateX(0)} 35%{transform:translateX(-5px)} 70%{transform:translateX(4px)} }

@media (max-width:900px) {
  #signupOverlay { padding:0 !important; }
  #signupOverlay .signup-shell { width:100%; height:100vh; display:block; border:0; border-radius:0; }
  #signupOverlay .signup-info { min-height:260px; padding:27px 22px; align-items:flex-end; }
  #signupOverlay .signup-info h2 { font-size:34px; }
  #signupOverlay .signup-info ul { grid-template-columns:repeat(3,1fr); }
  #signupOverlay .signup-form { min-height:calc(100vh - 260px); padding:32px 22px 55px; }
  #signupOverlay .close-btn { position:fixed !important; top:12px; right:12px; margin:0; }
}

@media (max-width:620px) {
  body.entry-page .page-content { padding-left:14px; padding-right:14px; }
  body.entry-page .section-container.two-col,body.entry-page .split-feature-section .two-col { grid-template-columns:1fr !important; }
  body.entry-page .image-block { order:-1; }
  body.entry-page .image-block img,body.entry-page .hero-visual img { width:100%; max-height:280px; aspect-ratio:16 / 10; object-fit:cover; }
  body.entry-page .benefits-grid,body.entry-page .process-grid,body.entry-page .space-grid { grid-template-columns:1fr !important; }
  #signupOverlay .signup-info { min-height:220px; }
  #signupOverlay .signup-info p,#signupOverlay .signup-info ul { display:none; }
  #signupOverlay .signup-info h2 { max-width:330px; margin-bottom:0; font-size:30px; }
  #signupOverlay .signup-form { min-height:calc(100vh - 220px); padding:27px 16px 60px; }
  #signupOverlay .signup-form > h1 { padding-right:45px; font-size:37px; }
  #signupOverlay .role-picker { grid-template-columns:1fr; }
  #signupOverlay .role-picker button { min-height:135px; }
  #signupOverlay .signup-delight-route { padding:12px 8px; }
  #signupOverlay .signup-delight-route span { font-size:7px; }
  #signupOverlay .progress-bar { overflow-x:auto; }
  #signupOverlay .progress-step small { font-size:7px; }
  #signupOverlay #signupForm input:not([type="checkbox"]),#signupOverlay #signupForm select,#signupOverlay #signupForm textarea { font-size:16px; }
  #signupOverlay .checkbox-group { grid-template-columns:1fr; }
  #signupOverlay .step-controls { position:sticky; bottom:0; padding:10px 0; background:linear-gradient(transparent,#f8fbff 23%); }
}

@media (prefers-reduced-motion:reduce) {
  .signup-spark { display:none; }
}
