/* Onboarding wizard — designed 360px-first for low-end Android on 3G (§2).
   No framework, no webfonts, system stack only. */
.csgw { --ink:#1b1b1f; --mut:#6b6b76; --line:#e3e3ea; --brand:#0e7a5f; --brand-ink:#fff;
  --bg:#fafafa; --card:#fff; --danger:#b3261e;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--bg); min-height: 100dvh;
  display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; }
.csgw *, .csgw *::before, .csgw *::after { box-sizing: border-box; }
.csgw-progress { display:flex; gap:6px; padding:14px 16px 0; }
.csgw-progress i { flex:1; height:4px; border-radius:2px; background:var(--line); }
.csgw-progress i.on { background: var(--brand); }
.csgw-step { display:none; flex:1; flex-direction:column; padding:16px; }
.csgw-step.on { display:flex; }
.csgw h1 { font-size:1.35rem; line-height:1.25; margin:10px 0 4px; }
.csgw .csgw-sub { color:var(--mut); font-size:.95rem; margin:0 0 16px; }

/* Step 1: type cards */
.csgw-types { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.csgw-type { border:1.5px solid var(--line); border-radius:14px; background:var(--card);
  padding:22px 12px; font-size:1.05rem; font-weight:600; text-align:center; cursor:pointer;
  min-height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.csgw-type span { font-size:1.6rem; }
.csgw-type:active { border-color: var(--brand); }

/* Step 2: service picker */
.csgw-cat { margin-bottom:8px; border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden; }
.csgw-cat > summary { list-style:none; display:flex; justify-content:space-between; align-items:center;
  padding:14px; font-weight:600; cursor:pointer; }
.csgw-cat > summary::-webkit-details-marker { display:none; }
.csgw-cat .csgw-count { color:var(--mut); font-weight:400; font-size:.85rem; }
.csgw-svc { display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid var(--line); }
.csgw-svc input[type=checkbox] { width:22px; height:22px; accent-color:var(--brand); flex:none; }
.csgw-svc label { flex:1; font-size:.98rem; }
.csgw-svc .csgw-min { color:var(--mut); font-size:.85rem; flex:none; }

/* Step 3: prices */
.csgw-price { display:flex; align-items:center; gap:10px; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px; background:var(--card); margin-bottom:8px; }
.csgw-price label { flex:1; font-size:.95rem; }
.csgw-price .csgw-rs { color:var(--mut); }
.csgw-price input { width:110px; padding:10px; font-size:1.05rem; text-align:right;
  border:1.5px solid var(--line); border-radius:10px; }
.csgw-price input:focus { outline:none; border-color:var(--brand); }
.csgw-price input.csgw-bad { border-color:var(--danger); }

/* Step 4: done */
.csgw-live { text-align:center; padding-top:24px; }
.csgw-live .csgw-tick { font-size:3rem; }
.csgw-link { display:block; margin:16px 0; padding:14px; background:var(--card);
  border:1.5px dashed var(--brand); border-radius:12px; word-break:break-all;
  font-weight:600; color:var(--brand); text-decoration:none; }

/* Footer nav */
.csgw-nav { position:sticky; bottom:0; display:flex; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, var(--bg) 30%); margin-top:auto; }
.csgw-btn { flex:1; padding:15px; border-radius:12px; border:none; font-size:1.05rem; font-weight:700; cursor:pointer; }
.csgw-btn-primary { background:var(--brand); color:var(--brand-ink); }
.csgw-btn-primary:disabled { opacity:.45; }
.csgw-btn-ghost { background:none; border:1.5px solid var(--line); color:var(--ink); flex:0 0 30%; }
.csgw-err { color:var(--danger); font-size:.9rem; margin:8px 0 0; min-height:1.2em; }

/* Shown when someone reaches the wizard with no tenant in session — from an
   ad click straight to /signup, or a session that ended while the page sat
   open. It is a one-screen detour, not an error state, so it is styled like a
   step rather than like a failure. */
.csgw-account { text-align: center; }
.csgw-account p { max-width: 46ch; margin: 12px auto 0; }
.csgw-account .csgw-btn { display: inline-block; margin-top: 20px; }
.csgw-account-note { font-size: .9rem; opacity: .8; }
.csgw-err-link { font-weight: 700; text-decoration: underline; }