/* ==========================================================================
   Ummah Tech — the pop wizard. The site's single call to action: three short
   steps (who you are → how we can help → where we reach you) that post to
   /api/inquiry (Neon + the projects@ummahtech.ai sequence).
   Brand tokens from theme.css; sharp-edge discipline (buttons 4px, card 6px).
   ========================================================================== */

.wz-overlay { position:fixed; inset:0; z-index:9000; display:grid; place-items:center;
  padding:clamp(12px, 4vh, 48px) clamp(12px, 4vw, 32px);
  background:rgba(7,12,10,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .22s ease; overflow-y:auto; }
.wz-overlay.on { opacity:1; }

.wz-plate { position:relative; width:min(680px, 100%); background:var(--cream);
  border:1px solid rgba(201,169,97,.5); border-radius:6px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7); overflow:hidden;
  transform:translateY(10px) scale(.99); transition:transform .24s ease;
  font-family:var(--font-body); color:var(--body-ink); }
.wz-overlay.on .wz-plate { transform:none; }

/* ---- chrome bar: the rail-plate language, matching the swp sheets ---- */
.wz-bar { display:flex; align-items:center; gap:10px; padding:0 10px; height:38px;
  background:linear-gradient(#20302b,#182420); border-bottom:1px solid rgba(201,169,97,.24); }
.wz-bar i { width:8px; height:8px; border-radius:50%; flex:none; background:rgba(247,243,234,.28); }
.wz-bar i:first-child { background:#e0725f; }
.wz-bar i:nth-child(2) { background:#dcb45c; }
.wz-bar span { font-family:var(--font-label); font-size:.68rem; letter-spacing:.04em;
  color:rgba(247,243,234,.8); margin-right:auto; }
.wz-x { width:28px; height:28px; display:grid; place-items:center; border-radius:3px;
  background:transparent; border:1px solid rgba(247,243,234,.28); color:#f7f3ea;
  font-size:.8rem; line-height:1; cursor:pointer; }
.wz-x:hover { border-color:var(--gold); color:var(--gold); }

/* ---- progress ---- */
.wz-steps { display:flex; gap:6px; padding:16px clamp(20px, 4vw, 34px) 0; }
.wz-steps b { flex:1; height:3px; border-radius:2px; background:rgba(44,62,55,.16); }
.wz-steps b.is-done { background:#7E6836; }
.wz-steps b.is-now { background:var(--gold); }

.wz-body { padding:clamp(18px, 3vh, 26px) clamp(20px, 4vw, 34px) clamp(20px, 3vh, 28px); }
.wz-kicker { display:block; font-family:var(--font-label); font-weight:700; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color:#7E6836; }
.wz-title { font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(1.7rem, 4.2vw, 2.3rem); color:var(--deep-green); margin:6px 0 0; }
.wz-lede { margin:8px 0 0; color:var(--secondary); font-size:.92rem; max-width:52ch; }

/* ---- choice tiles ---- */
.wz-choices { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:18px; }
@media (max-width:520px){ .wz-choices { grid-template-columns:1fr; } }
.wz-choice { position:relative; display:block; background:var(--cream-soft);
  border:1px solid var(--rule); border-radius:6px; padding:14px 16px; cursor:pointer;
  transition:border-color .18s, background .18s; }
.wz-choice input { position:absolute; opacity:0; pointer-events:none; }
.wz-choice b { display:block; font-family:var(--font-label); font-weight:700; font-size:.94rem;
  color:var(--deep-green); }
.wz-choice span { display:block; margin-top:3px; font-size:.8rem; color:var(--secondary); }
.wz-choice:hover { border-color:rgba(201,169,97,.6); }
.wz-choice:has(input:checked) { border-color:var(--dark-gold); background:#fdf9ef;
  box-shadow:0 0 0 1px var(--dark-gold) inset; }
.wz-choice:has(input:checked)::after { content:'✓'; content:'✓' / ''; position:absolute;
  top:10px; right:10px; width:20px; height:20px; display:grid; place-items:center;
  font-size:.7rem; font-weight:700; border-radius:3px; color:#fff;
  background:#7E6836; border:1px solid #7E6836; }
.wz-choice:has(input:focus-visible) { outline:3px solid var(--dark-gold); outline-offset:2px; }
.wz-choices--tight { grid-template-columns:repeat(3, 1fr); }
@media (max-width:520px){ .wz-choices--tight { grid-template-columns:1fr 1fr; } }
.wz-choices--tight b { font-size:.86rem; }

/* ---- fields ---- */
.wz-field { display:block; margin-top:16px; }
.wz-field > span { display:block; font-family:var(--font-label); font-weight:600; font-size:.82rem;
  color:var(--deep-green); margin-bottom:6px; }
.wz-field input, .wz-field textarea { width:100%; font-family:var(--font-body); font-size:.95rem;
  color:var(--body-ink); background:var(--cream-soft); border:1px solid rgba(44,62,55,.55);
  border-radius:4px; padding:12px 14px; }
.wz-field textarea { min-height:104px; resize:vertical; }
.wz-field input:focus-visible, .wz-field textarea:focus-visible {
  outline:3px solid var(--dark-gold); outline-offset:1px; border-color:var(--dark-gold); }
.wz-field small { display:block; margin-top:5px; font-size:.76rem; color:var(--secondary); }
.wz-field.is-bad input, .wz-field.is-bad textarea { border-color:#B8452E; }
.wz-err { display:block; margin-top:5px; font-size:.78rem; font-weight:600; color:#9A3623; }
.wz-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .wz-row { grid-template-columns:1fr; } }
@media (max-width:560px){ .wz-field input, .wz-field textarea { font-size:16px; } }

/* ---- footer / actions ---- */
.wz-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px clamp(20px, 4vw, 34px) clamp(18px, 3vh, 24px); border-top:1px solid var(--rule); }
.wz-note { font-size:.78rem; color:var(--secondary); margin:0 auto 0 0; max-width:34ch; }
.wz-btn { font-family:var(--font-label); font-weight:700; font-size:.88rem; letter-spacing:.02em;
  border-radius:4px; padding:12px 24px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; text-align:center; }
.wz-btn--gold { background:var(--gold); color:#1c2622; }
.wz-btn--gold:hover { background:#d8be84; }
.wz-btn--gold[disabled] { opacity:.6; cursor:progress; }
.wz-btn--ghost { background:transparent; color:var(--deep-green); border-color:rgba(44,62,55,.4); }
.wz-btn--ghost:hover { border-color:var(--deep-green); }

/* ---- done ---- */
.wz-done { text-align:center; padding:clamp(28px, 6vh, 54px) clamp(20px, 4vw, 34px) clamp(24px, 4vh, 40px); }
.wz-done .wz-seal { width:54px; height:54px; margin:0 auto 14px; display:grid; place-items:center;
  border-radius:50%; background:#fdf9ef; border:1px solid var(--gold); color:#7E6836;
  font-size:1.3rem; font-weight:700; }
.wz-done h2 { font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(2rem, 5vw, 2.8rem); color:var(--deep-green); margin:0; }
.wz-done p { margin:12px auto 0; color:var(--secondary); max-width:46ch; font-size:.95rem; }
.wz-done .wz-next { margin-top:20px; text-align:left; display:inline-block;
  background:var(--mint); border:1px solid var(--rule); border-radius:6px; padding:16px 20px; }
.wz-done .wz-next b { display:block; font-family:var(--font-label); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:#7E6836; margin-bottom:8px; }
.wz-done .wz-next ol { margin:0; padding-left:18px; font-size:.88rem; color:var(--deep-green); }
.wz-done .wz-next li + li { margin-top:5px; }
.wz-done .wz-btn { margin-top:22px; }

body.wz-open { overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .wz-overlay, .wz-plate { transition:none; }
  .wz-plate { transform:none; }
}