* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #020a14; font-family: Arial, sans-serif; }
.page-stage { position: relative; width: 100%; max-width: 1448px; min-height: 100vh; margin: 0 auto; background: #020a14; }
.complete-layout { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; z-index: 2; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.hotspot:focus-visible { outline: 3px solid #00eaff; outline-offset: 2px; background: rgba(0,234,255,.12); }
.plan-highlight { position: absolute; z-index: 1; top: 32.45%; width: 29.25%; height: 34.05%; pointer-events: none; border: 2px solid transparent; border-radius: 14px; transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease, background .28s ease; }
.plan-highlight span { position: absolute; top: -15px; left: 50%; padding: 7px 17px; color: #00131d; border-radius: 999px; background: linear-gradient(90deg,#16a7ff,#14e7ed); box-shadow: 0 0 18px rgba(0,225,255,.85); font-size: clamp(8px,1vw,12px); font-weight: 900; white-space: nowrap; opacity: 0; transform: translate(-50%,8px) scale(.82); transition: opacity .24s ease, transform .3s cubic-bezier(.2,.9,.2,1.25); }
.plan-highlight.is-selected { border-color: #00edff; background: linear-gradient(180deg,rgba(0,232,255,.07),transparent 42%); box-shadow: 0 0 10px #00dfff, inset 0 0 25px rgba(0,221,255,.17), 0 0 34px rgba(0,183,255,.52); transform: translateY(-4px); animation: selected-pulse 1.7s ease-in-out infinite alternate; }
.plan-highlight.is-selected span { opacity: 1; transform: translate(-50%,0) scale(1); }
.essential-card { left: 4.45%; }
.professional-card { left: 35.35%; }
.custom-card { left: 66.45%; }
@keyframes selected-pulse { from { box-shadow: 0 0 8px #00dfff, inset 0 0 20px rgba(0,221,255,.13), 0 0 24px rgba(0,183,255,.38); } to { box-shadow: 0 0 15px #00f2ff, inset 0 0 30px rgba(0,221,255,.22), 0 0 42px rgba(0,183,255,.66); } }
@media (prefers-reduced-motion: reduce) { .plan-highlight, .plan-highlight span { transition: none; } .plan-highlight.is-selected { animation: none; } }
.login { left: 71.7%; top: 1%; width: 9%; height: 3.2%; }
.create { left: 83.2%; top: 1%; width: 13.5%; height: 3.2%; }
.essential { left: 6.8%; top: 61%; width: 24.8%; height: 3.5%; }
.professional { left: 37.6%; top: 61%; width: 24.8%; height: 3.5%; }
.custom { left: 68.7%; top: 61%; width: 24.5%; height: 3.5%; }
dialog { width: min(92vw, 590px); padding: 0; color: #f4fbff; border: 1px solid #00cfff; border-radius: 18px; background: #061525; box-shadow: 0 0 45px rgba(0,199,255,.32); }
dialog::backdrop { background: rgba(0,7,16,.82); backdrop-filter: blur(5px); }
#signup-form { position: relative; display: grid; gap: 15px; padding: 34px; }
#signup-form h1 { margin: -4px 0 8px; font-size: clamp(24px,4vw,34px); }
.form-eyebrow { color: #00dfff; font-size: 12px; font-weight: 800; letter-spacing: .28em; }
#signup-form label { display: grid; gap: 7px; color: #b8d0e6; font-size: 14px; font-weight: 700; }
#signup-form input, #signup-form select { width: 100%; min-height: 48px; padding: 0 14px; color: white; border: 1px solid #215172; border-radius: 9px; background: #020c17; font: inherit; }
#signup-form input:focus, #signup-form select:focus { outline: 2px solid #00dfff; border-color: transparent; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.close { position: absolute; top: 18px; right: 20px; color: #9edbff; border: 0; background: transparent; font-size: 30px; cursor: pointer; }
.submit { min-height: 52px; margin-top: 6px; color: white; border: 0; border-radius: 9px; background: linear-gradient(90deg,#087df6,#00d9ed); font-size: 16px; font-weight: 800; cursor: pointer; }
.submit:disabled { opacity: .65; cursor: wait; }
#form-message { min-height: 20px; margin: 0; color: #ff758e; text-align: center; }
#form-message.success { color: #47f2b1; }
@media (max-width: 600px) {
  body { overflow-x: auto; }
  .page-stage { width: 852px; min-width: 852px; margin: 0; }
  .complete-layout { width: 852px; max-width: none; }
  #signup-form { padding: 28px 20px; }
  .form-grid { grid-template-columns: 1fr; }
}