/* ============================================================
   SIGNUP PAGE
   Design: matches index.html (Inter font, light theme)
   Colors: #0f172a (text), #2563eb (primary), #64748b (muted)
   ============================================================ */

/* --- RESET --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, sans-serif; color: #0f172a; background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   NAV (shared with index)
   ============================================================ */
.nav { position: fixed; top: 0; width: 100%; background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); z-index: 100; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.nav-logo { font-size: 20px; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; }
.nav-logo span { font-weight: 400; color: #94a3b8; margin-left: 6px; font-size: 14px; }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a { color: #64748b; font-size: 14px; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: #0f172a; }
.btn { display: inline-flex; align-items: center; padding: 10px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: all 0.2s; cursor: pointer; border: none; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }

/* ============================================================
   PAGE CONTAINER
   ============================================================ */
.page { margin-top: 64px; padding: 60px 48px; max-width: 680px; margin-left: auto; margin-right: auto; }
.page-title { font-size: 36px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 8px; }
.page-sub { font-size: 17px; color: #64748b; margin-bottom: 40px; line-height: 1.6; }

/* ============================================================
   FORM
   ============================================================ */
.signup-form { display: flex; flex-direction: column; gap: 24px; }
.form-label { font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: 0.5px; }
.form-input,
.form-select { width: 100%; padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; color: #0f172a; font-size: 15px; font-family: 'Inter', sans-serif; transition: border-color 0.2s; }
.form-input:focus,
.form-select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.form-input::placeholder { color: #94a3b8; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ============================================================
   PLAN CARDS
   ============================================================ */
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.plan-card { padding: 20px; background: #fff; border: 2px solid #e2e8f0; border-radius: 12px; cursor: pointer; text-align: center; transition: all 0.2s; }
.plan-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.plan-card.selected { border-color: #2563eb; background: rgba(37,99,235,0.02); }
.plan-card input[type="radio"] { display: none; }
.plan-card-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; color: #0f172a; }
.plan-card-price { color: #2563eb; font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.plan-card-desc { color: #94a3b8; font-size: 13px; }

/* ============================================================
   ESTIMATE
   ============================================================ */
.estimate { background: #f8fafc; border: 1px solid #e2e8f0; padding: 20px; border-radius: 12px; text-align: center; }
.estimate-label { font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 4px; }
.estimate-amount { font-size: 28px; color: #2563eb; font-weight: 800; letter-spacing: -0.5px; }

/* ============================================================
   SUBMIT BUTTON
   ============================================================ */
.submit-btn { padding: 14px 32px; background: #2563eb; color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; transition: background 0.2s; }
.submit-btn:hover { background: #1d4ed8; }
.submit-btn:disabled { background: #94a3b8; cursor: not-allowed; }

/* ============================================================
   ERROR + SUCCESS
   ============================================================ */
.form-error { color: #ef4444; font-size: 14px; display: none; }
.success { text-align: center; padding: 80px 20px; }
.success-title { font-size: 30px; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
.success-text { font-size: 17px; color: #64748b; line-height: 1.6; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
    .nav { padding: 0 20px; }
    .page { padding: 40px 20px; }
    .plan-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}