/* ==========================================================================
   Digital Naka — field registration wizard v3.0

   Mobile-first: every rule below is written for 360px, then widened at the
   breakpoints at the bottom. On a phone the wizard is the whole screen — a
   fixed header, a scrolling question area, and a sticky thumb-zone footer —
   because a field executive holds the phone in one hand with a contractor
   waiting.

   Depends on tokens.css for every colour, size, radius and duration.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Never 100vh alone: mobile browser chrome makes it lie. */
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-17);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

:where(button, input, select, textarea) { font: inherit; color: inherit; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Focus is never removed — only restyled. Field staff use keyboards on the
   desktop console, and this is an accessibility gate (§6.1). */
:focus-visible {
  outline: 3px solid var(--deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Shell
   ========================================================================== */

.wz {
  display: flex;
  flex-direction: column;
  /* svh, not vh: the small viewport excludes the collapsible browser bars, so
     the sticky footer never sits under them (§1.7). */
  min-height: 100svh;
  background: var(--paper);
  position: relative;
}

/* Soft gradient mesh + grid texture (§5.2). Fixed so it does not repaint on
   scroll, and pointer-events:none so it can never eat a tap. */
.wz::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60rem 40rem at 12% -8%, rgba(14, 107, 92, 0.07), transparent 60%),
    radial-gradient(44rem 34rem at 108% 8%, rgba(255, 158, 27, 0.08), transparent 62%);
}

.wz > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- header */

.wz__head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--ink-08);
  padding-top: env(safe-area-inset-top);
}

.wz__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: var(--h-header);
  padding: 0 var(--gutter);
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}

.wz__brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.wz__logo { width: 26px; height: 26px; object-fit: contain; flex: none; }
.wz__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-17);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.wz__spacer { flex: 1 1 auto; }

/* Icon button: 48px hit area with a smaller visual box (§1.5). */
.iconbtn {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  background: none;
  color: var(--muted);
  border-radius: var(--r-pill);
  cursor: pointer;
  flex: none;
  transition: background var(--d-fast), color var(--d-fast);
}
.iconbtn:hover { background: var(--mist); color: var(--ink); }
.iconbtn svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------- progress */

.wz__prog { padding: 0 var(--gutter) var(--s2); max-width: 1180px; margin: 0 auto; width: 100%; }

.wz__meta {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: 6px;
  font-size: var(--fs-13);
}
.wz__step {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--deep);
  font-variant-numeric: tabular-nums;
}
.wz__stepname { color: var(--muted); }
.wz__pct {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.wz__track {
  height: 6px;
  background: var(--mist);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.wz__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--deep), var(--deep-press));
  border-radius: var(--r-pill);
  transition: width var(--d-slide) var(--ease-out);
}

/* Tappable dots to jump back to a completed step (§2.3). */
.wz__dots {
  display: flex;
  gap: 5px;
  margin-top: var(--s2);
  flex-wrap: wrap;
}
.wz__dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
}
.wz__dot i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--ink-12);
  transition: background var(--d-fast), transform var(--d-fast);
}
.wz__dot[data-done="1"] { cursor: pointer; }
.wz__dot[data-done="1"] i { background: var(--deep); }
.wz__dot[data-current="1"] i { background: var(--deep); transform: scale(1.7); }
.wz__dot[data-done="1"]:hover i { transform: scale(1.4); }

/* ==========================================================================
   Steps
   ========================================================================== */

.wz__main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s6) var(--gutter) var(--s4);
}

.step { display: none; }
.step[data-active="1"] { display: block; }

/* Directional slide (§5.4). The class is applied for one frame by the JS. */
@keyframes wz-in-fwd  { from { opacity: 0; transform: translateX(22px); } }
@keyframes wz-in-back { from { opacity: 0; transform: translateX(-22px); } }
.step[data-active="1"][data-dir="fwd"]  { animation: wz-in-fwd  var(--d-slide) var(--ease-slide); }
.step[data-active="1"][data-dir="back"] { animation: wz-in-back var(--d-slide) var(--ease-slide); }

.step__head { margin-bottom: var(--s6); }

.step__q {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  /* Gujarati ascenders/descenders need the extra room (§4.3). */
  padding-bottom: 2px;
}
.step__hint { margin: 0; color: var(--muted); font-size: var(--fs-15); }

.step__body > * + * { margin-top: var(--s3); }

/* ==========================================================================
   Option cards — the whole row is the target (§1.5, §3.1)
   ========================================================================== */

.opts { display: grid; gap: var(--s2); }
.opts--2 { grid-template-columns: 1fr 1fr; }

.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--h-option);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--ink-08);
  border-radius: var(--r-input);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color var(--d-fast), background var(--d-fast),
              transform var(--d-fast) var(--ease-spring), box-shadow var(--d-fast);
}
.opt:hover { border-color: var(--deep-line); }
.opt:active { transform: scale(0.985); }

/* The real radio stays in the DOM for semantics and keyboard support, but is
   visually replaced by the card (§6.2). */
.opt input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}
.opt:has(input:checked) {
  border-color: var(--deep);
  background: var(--deep-tint);
  box-shadow: 0 0 0 3px var(--deep-tint);
}
.opt:has(input:focus-visible) {
  outline: 3px solid var(--deep);
  outline-offset: 2px;
}

.opt__av {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--mist);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-15);
  letter-spacing: -0.01em;
  transition: background var(--d-fast), color var(--d-fast);
}
.opt:has(input:checked) .opt__av { background: var(--deep); color: #fff; }

.opt__txt { flex: 1 1 auto; min-width: 0; }
.opt__t { display: block; font-weight: 600; }
.opt__d { display: block; font-size: var(--fs-13); color: var(--muted); }

/* Check badge — a real state marker, not a tiny dot (§3.1). */
.opt__tick {
  flex: none;
  width: 24px; height: 24px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--ink-12);
  background: var(--surface);
  display: grid;
  place-items: center;
  transition: all var(--d-fast) var(--ease-spring);
}
.opt__tick svg { width: 13px; height: 13px; stroke: #fff; opacity: 0; transition: opacity var(--d-fast); }
.opt:has(input:checked) .opt__tick { background: var(--deep); border-color: var(--deep); }
.opt:has(input:checked) .opt__tick svg { opacity: 1; }

/* ==========================================================================
   Category grid (§3.2)
   ========================================================================== */

.searchbox { position: relative; margin-bottom: var(--s3); }
.searchbox input {
  width: 100%;
  height: var(--h-input);
  padding: 0 var(--s4) 0 46px;
  background: var(--surface);
  border: 1.5px solid var(--ink-08);
  border-radius: var(--r-input);
  /* 16px minimum or iOS zooms the page on focus (§1.6). */
  font-size: var(--fs-17);
}
.searchbox input:focus { border-color: var(--deep); outline: none; box-shadow: 0 0 0 3px var(--deep-tint); }
.searchbox::before {
  content: "";
  position: absolute;
  left: var(--s4);
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background: var(--search-url) no-repeat center / contain;
  pointer-events: none;
}

.catgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}
.cat {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 56px;
  padding: var(--s2) var(--s3);
  background: var(--surface);
  border: 1.5px solid var(--ink-08);
  border-radius: var(--r-input);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--d-fast), background var(--d-fast), transform var(--d-fast);
}
.cat:active { transform: scale(0.97); }
.cat input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cat:has(input:checked) {
  border-color: var(--deep);
  background: var(--deep-tint);
}
.cat:has(input:focus-visible) { outline: 3px solid var(--deep); outline-offset: 2px; }
.cat__ico {
  flex: none;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  color: var(--deep);
}
.cat__ico svg { width: 20px; height: 20px; }
.cat__t {
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 1.25;
  /* Long Gujarati names must wrap, never truncate to nonsense (§4.4). */
  overflow-wrap: anywhere;
}
.cat[hidden] { display: none; }

.cat--recent::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--marigold);
}

.grouplabel {
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--s4) 0 var(--s2);
}
.grouplabel:first-child { margin-top: 0; }

.emptyhint {
  padding: var(--s6) var(--s4);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-15);
}

/* ==========================================================================
   Text fields (§3.3)
   ========================================================================== */

.f { display: block; }
.f + .f { margin-top: var(--s4); }

.f__label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  font-size: var(--fs-15);
  font-weight: 600;
}
.f__req { color: var(--alert); font-weight: 700; }
.f__opt { color: var(--muted); font-weight: 500; font-size: var(--fs-13); }

.f__wrap { position: relative; display: flex; align-items: stretch; }

.input,
.f input[type="text"],
.f input[type="tel"] {
  width: 100%;
  min-width: 0;
  height: var(--h-input);
  padding: 0 var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--ink-08);
  border-radius: var(--r-input);
  font-size: var(--fs-17); /* iOS no-zoom floor */
  color: var(--ink);
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
/* A pasted Maps URL is long and unreadable on one line, so this field wraps
   instead of scrolling sideways. Fixed height, no manual resize — a drag
   handle is useless on a phone. */
.input--area {
  height: auto;
  min-height: 76px;
  padding: var(--s3) var(--s4);
  line-height: 1.45;
  font-family: inherit;
  resize: none;
  overflow-wrap: anywhere;
}

.input:focus,
.f input:focus {
  outline: none;
  border-color: var(--deep);
  box-shadow: 0 0 0 3px var(--deep-tint);
}
.input::placeholder { color: var(--muted); opacity: 0.75; }

/* Locked +91 prefix (§3.4). */
.f--tel .f__wrap { gap: 0; }
.f__prefix {
  display: grid;
  place-items: center;
  padding: 0 var(--s3);
  min-width: 58px;
  background: var(--mist);
  border: 1.5px solid var(--ink-08);
  border-right: 0;
  border-radius: var(--r-input) 0 0 var(--r-input);
  font-family: var(--font-mono);
  font-size: var(--fs-15);
  color: var(--muted);
  user-select: none;
}
.f--tel input {
  border-radius: 0 var(--r-input) var(--r-input) 0;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.f--tel:focus-within .f__prefix { border-color: var(--deep); }

.f__help { margin-top: 6px; font-size: var(--fs-13); color: var(--muted); }
.f__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Inline error (§3.9) — icon + plain language, never colour alone. */
.f__err {
  display: none;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--fs-13);
  color: var(--alert);
  font-weight: 500;
}
.f__err svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.f[data-invalid="1"] .f__err { display: flex; }
.f[data-invalid="1"] .input,
.f[data-invalid="1"] input {
  border-color: var(--alert);
  background: var(--alert-tint);
}
.f[data-invalid="1"] .f__prefix { border-color: var(--alert); }

/* Soft warning (duplicate mobile) — a caution, not a block (§3.4). */
.warnbox {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s2);
  padding: var(--s3);
  background: var(--marigold-tint);
  border: 1px solid var(--marigold-line);
  border-radius: var(--r-input);
  font-size: var(--fs-13);
  color: var(--ink);
}
.warnbox svg { flex: none; width: 18px; height: 18px; }

/* ==========================================================================
   Custom select — bottom sheet on mobile (§3.5)
   ========================================================================== */

.selbtn {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  height: var(--h-input);
  padding: 0 var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--ink-08);
  border-radius: var(--r-input);
  font-size: var(--fs-17);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.selbtn[data-empty="1"] { color: var(--muted); }
.selbtn:hover { border-color: var(--deep-line); }
.selbtn__v { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selbtn svg { flex: none; width: 18px; height: 18px; color: var(--muted); }

.sheetwrap { position: fixed; inset: 0; z-index: 90; display: none; }
.sheetwrap[data-open="1"] { display: block; }

.sheetwrap__bd {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--d-sheet) var(--ease-out);
}
.sheetwrap[data-open="1"] .sheetwrap__bd { opacity: 1; }

.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 82svh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform var(--d-sheet) var(--ease-slide);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheetwrap[data-open="1"] .sheet { transform: none; }

.sheet__grab {
  width: 40px; height: 4px;
  margin: 10px auto 2px;
  border-radius: var(--r-pill);
  background: var(--ink-12);
  flex: none;
}
.sheet__head { padding: var(--s2) var(--s4) var(--s3); flex: none; }
.sheet__title { margin: 0 0 var(--s3); font-size: var(--fs-20); font-weight: 700; font-family: var(--font-display); }
.sheet__list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--s4) var(--s4);
  overscroll-behavior: contain;
}
.sheet__opt {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3);
  background: none;
  border: 0;
  border-radius: var(--r-input);
  text-align: left;
  cursor: pointer;
  font-size: var(--fs-17);
}
.sheet__opt:hover { background: var(--mist); }
.sheet__opt[aria-selected="true"] { background: var(--deep-tint); color: var(--deep); font-weight: 600; }
.sheet__opt svg { margin-left: auto; width: 18px; height: 18px; opacity: 0; }
.sheet__opt[aria-selected="true"] svg { opacity: 1; }

/* ==========================================================================
   Rating (§3.6)
   ========================================================================== */

.rate { display: grid; gap: var(--s2); }
.rate__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--h-option);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--ink-08);
  border-radius: var(--r-input);
  cursor: pointer;
  transition: all var(--d-fast);
}
.rate__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rate__opt:has(input:checked) { border-color: var(--deep); background: var(--deep-tint); }
.rate__opt:has(input:focus-visible) { outline: 3px solid var(--deep); outline-offset: 2px; }

/* The score is stored but never shown: a number invites a polite 10, a face
   gets an honest answer. Sized larger than body text so it reads at a glance
   in bright outdoor light. */
.rate__face {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--mist);
  font-size: 26px;
  line-height: 1;
  transition: background var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-spring);
}
.rate__opt:has(input:checked) .rate__face {
  background: var(--marigold-tint);
  transform: scale(1.08);
}
/* Block, not inline: otherwise the label and its description run together as
   one paragraph and wrap mid-phrase, which is unreadable at a glance. */
.rate__t { display: block; font-weight: 600; line-height: 1.3; }
.rate__d {
  display: block;
  font-size: var(--fs-13);
  color: var(--muted);
  line-height: 1.35;
  margin-top: 1px;
}

/* ==========================================================================
   Referrals (§3.8)
   ========================================================================== */

.refs { display: grid; gap: var(--s3); }

.refcard {
  padding: var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--ink-08);
  border-radius: var(--r-input);
}
.refcard[data-invalid="1"] { border-color: var(--alert); }
.refcard__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.refcard__n {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--deep);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  flex: none;
}
.refcard__t { font-weight: 600; font-size: var(--fs-15); }
.refcard__x {
  margin-left: auto;
  width: var(--tap); height: var(--tap);
  margin-right: calc(var(--s2) * -1);
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
}
.refcard__x:hover { background: var(--alert-tint); color: var(--alert); }
.refcard__x svg { width: 18px; height: 18px; }

.addref {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  min-height: var(--h-button);
  background: none;
  border: 1.5px dashed var(--deep-line);
  border-radius: var(--r-input);
  color: var(--deep);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--d-fast), border-color var(--d-fast);
}
.addref:hover { background: var(--deep-tint); border-color: var(--deep); }
.addref:disabled { opacity: 0.5; cursor: not-allowed; }
.addref svg { width: 18px; height: 18px; }

.refcount {
  font-size: var(--fs-13);
  color: var(--muted);
  text-align: center;
}

/* Undo bar after a removal (§3.8). */
.undo {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-input);
  font-size: var(--fs-15);
}
.undo button {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--marigold);
  font-weight: 700;
  cursor: pointer;
  padding: var(--s2);
}

/* ==========================================================================
   Review (§2.4)
   ========================================================================== */

.rev { display: grid; gap: var(--s3); }
.revcard {
  padding: var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--ink-08);
  border-radius: var(--r-input);
}
.revcard__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}
.revcard__t {
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.revcard__edit {
  margin-left: auto;
  min-height: 36px;
  padding: 0 var(--s3);
  background: var(--mist);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--deep);
  font-size: var(--fs-13);
  font-weight: 700;
  cursor: pointer;
}
.revcard__edit:hover { background: var(--deep-tint); }
.revrow { display: flex; gap: var(--s3); padding: 5px 0; font-size: var(--fs-15); }
.revrow dt { color: var(--muted); min-width: 104px; flex: none; }
.revrow dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.revcard dl { margin: 0; }

/* Consent (§3.10) */
.consent {
  display: flex;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--ink-08);
  border-radius: var(--r-input);
  cursor: pointer;
}
.consent[data-invalid="1"] { border-color: var(--alert); background: var(--alert-tint); }
.consent input {
  flex: none;
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--deep);
}
.consent span { font-size: var(--fs-15); }

/* ==========================================================================
   Success (§2.5)
   ========================================================================== */

.done { text-align: center; padding: var(--s6) 0; }
.done__mark {
  width: 84px; height: 84px;
  margin: 0 auto var(--s4);
  border-radius: var(--r-pill);
  background: var(--deep-tint);
  display: grid;
  place-items: center;
}
.done__mark svg { width: 44px; height: 44px; stroke: var(--deep); }
.done__mark svg path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: tick 520ms var(--ease-out) 120ms forwards;
}
@keyframes tick { to { stroke-dashoffset: 0; } }

.done__t {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.done__b { margin: 0 auto var(--s6); max-width: 34ch; color: var(--muted); font-size: var(--fs-15); }

.done__id {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1.5px dashed var(--deep-line);
  border-radius: var(--r-input);
  margin-bottom: var(--s6);
}
.done__idv {
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--deep);
}
.done__idl {
  font-size: var(--fs-13);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.done__acts { display: grid; gap: var(--s2); }

/* ==========================================================================
   Buttons & sticky footer (§1.4)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--h-button);
  padding: 0 var(--s6);
  border: 0;
  border-radius: var(--r-input);
  font-size: var(--fs-17);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--d-fast), transform var(--d-fast), opacity var(--d-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 19px; height: 19px; }

.btn--primary { background: var(--deep); color: #fff; box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--deep-press); }
/* Never truly disabled — still tappable so it can say why it is blocked
   (§3.10). Kept in brand colour at reduced strength rather than greyed out,
   which would read as dead and stop people trying. */
.btn--primary[data-blocked="1"] {
  background: var(--deep);
  opacity: 0.55;
  box-shadow: none;
}

.btn--ghost { background: var(--mist); color: var(--ink); }
.btn--ghost:hover { background: var(--ink-08); }

.btn--wide { width: 100%; }

.btn[data-busy="1"] { pointer-events: none; }
.btn__spin {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: var(--r-pill);
  animation: spin 620ms linear infinite;
  display: none;
}
.btn[data-busy="1"] .btn__spin { display: block; }
.btn[data-busy="1"] .btn__label { opacity: 0.75; }
@keyframes spin { to { transform: rotate(360deg); } }

.wz__foot {
  position: sticky;
  bottom: 0;
  z-index: 25;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--ink-08);
  padding: var(--s3) var(--gutter);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom));
}
.wz__footin {
  display: flex;
  gap: var(--s2);
  max-width: 1180px;
  margin: 0 auto;
}
/* Back is the small one; Next owns the thumb zone (§1.4). */
.wz__footin .btn--ghost { flex: 0 0 auto; padding: 0 var(--s4); }
.wz__footin .btn--primary { flex: 1 1 auto; }
/* [hidden] loses to the .btn display:inline-flex, so state it explicitly —
   otherwise Back still occupies the thumb zone on step 1. */
.wz__footin .btn[hidden] { display: none; }

/* ==========================================================================
   Toasts & banners (§5.6)
   ========================================================================== */

.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--h-button) + var(--s8) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: min(calc(100vw - 32px), 420px);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-input);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-15);
  animation: toastin var(--d-fast) var(--ease-out);
}
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } }
.toast--ok   { background: var(--deep); }
.toast--warn { background: var(--marigold); color: var(--ink); }
.toast--err  { background: var(--alert); color: #fff; }
.toast svg { flex: none; width: 18px; height: 18px; }

/* Offline / resume banner */
.banner {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-input);
  font-size: var(--fs-15);
  margin-bottom: var(--s4);
}
.banner--info { background: var(--deep-tint); color: var(--ink); border: 1px solid var(--deep-line); }
.banner--warn { background: var(--marigold-tint); color: var(--ink); border: 1px solid var(--marigold-line); }
.banner svg { flex: none; width: 18px; height: 18px; }
.banner button {
  margin-left: auto;
  background: none;
  border: 0;
  font-weight: 700;
  color: var(--deep);
  cursor: pointer;
  padding: var(--s2);
  min-height: var(--tap);
}

/* ==========================================================================
   Desktop — its own designed layout, not a stretched phone (§1.4, §5.8)
   ========================================================================== */

.aside { display: none; }

@media (min-width: 980px) {
  .wz { display: grid; grid-template-columns: minmax(0, 1fr) 560px; min-height: 100svh; }

  /* Left: the story rail. Sticky so it stays with the form on long steps. */
  .aside {
    display: flex;
    flex-direction: column;
    gap: var(--s6);
    padding: var(--s12) var(--s8);
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100svh;
    overflow-y: auto;
    max-width: 620px;
    margin-left: auto;
  }
  .aside__logo { width: 168px; height: auto; }
  .aside__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    align-self: flex-start;
    padding: 7px 14px;
    background: var(--surface);
    border: 1px solid var(--ink-08);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: var(--fs-13);
    color: var(--deep);
    box-shadow: var(--shadow-sm);
  }
  .aside__eyebrow::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: var(--r-pill);
    background: var(--deep);
  }
  .aside__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 4.4vw, 3.9rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 700;
  }
  .aside__sub { margin: 0; max-width: 42ch; color: var(--muted); font-size: var(--fs-20); }

  .aside__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
  .statcard {
    padding: var(--s4);
    background: var(--surface);
    border: 1px solid var(--ink-08);
    border-radius: var(--r-input);
    box-shadow: var(--shadow-sm);
  }
  .statcard b {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-24);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
  .statcard span { font-size: var(--fs-13); color: var(--muted); }

  .aside__why { display: grid; gap: var(--s3); }
  .aside__why div { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-15); }
  .aside__why svg {
    flex: none;
    width: 22px; height: 22px;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--deep-tint);
    stroke: var(--deep);
    stroke-width: 2.5;
    fill: none;
  }

  .aside__trades { display: flex; flex-wrap: wrap; gap: 6px; }
  .aside__trades span {
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--ink-08);
    border-radius: var(--r-pill);
    font-size: var(--fs-13);
    color: var(--muted);
  }

  .aside__foot {
    margin-top: auto;
    display: flex;
    gap: var(--s4);
    align-items: baseline;
    font-size: var(--fs-13);
    color: var(--muted);
    flex-wrap: wrap;
  }
  .aside__foot a { color: var(--deep); font-weight: 700; text-decoration: none; }

  /* Right: the form card as a distinct panel. */
  .wz__panel {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    background: var(--surface);
    border-left: 1px solid var(--ink-08);
    box-shadow: var(--shadow-lg);
  }
  .wz__head { background: transparent; border-bottom-color: var(--ink-08); backdrop-filter: none; }
  .wz__foot { background: transparent; backdrop-filter: none; }
  .wz__bar, .wz__prog, .wz__main, .wz__footin { max-width: none; }
  .wz__main { padding: var(--s8) var(--s8) var(--s6); }
  .step__q { font-size: var(--fs-32); }
  .catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The sheet becomes a centred popover on a pointer device (§3.5). */
  .sheetwrap { display: none; }
  .sheetwrap[data-open="1"] { display: grid; place-items: center; padding: var(--s6); }
  .sheet {
    position: relative;
    inset: auto;
    width: min(520px, 100%);
    max-height: 74svh;
    border-radius: var(--r-card);
    transform: translateY(14px) scale(0.98);
    opacity: 0;
    transition: transform var(--d-fast) var(--ease-out), opacity var(--d-fast);
  }
  .sheetwrap[data-open="1"] .sheet { transform: none; opacity: 1; }
  .sheet__grab { display: none; }
}

@media (min-width: 1500px) {
  .wz { grid-template-columns: minmax(0, 1fr) 640px; }
  .wz__main { padding: var(--s12) var(--s12) var(--s8); }
  .aside { padding: var(--s12); }
}

/* Two-up option cards once there is room. */
@media (min-width: 560px) {
  .opts--grid { grid-template-columns: 1fr 1fr; }
  .catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Very small phones: keep everything single-column and tight. */
@media (max-width: 359px) {
  :root { --gutter: 14px; }
  .step__q { font-size: var(--fs-24); }
  .catgrid { grid-template-columns: 1fr; }
  .opts--2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Honeypot: off-screen but not display:none, so a bot still fills it (§7.5). */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   WhatsApp handoff preview

   Shown only when the clipboard is blocked — the executive can then select
   the text by hand rather than being stuck with a button that does nothing.
   ========================================================================== */

.wapreview {
  margin-top: var(--s3);
  background: var(--surface);
  border: 1.5px solid var(--ink-08);
  border-radius: var(--r-input);
  overflow: hidden;
  text-align: left;
}
.wapreview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--mist);
  font-size: var(--fs-13);
  font-weight: 600;
}
.wapreview__x {
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 var(--s2);
  min-height: var(--tap);
  min-width: var(--tap);
}
.wapreview__body {
  margin: 0;
  padding: var(--s3);
  max-height: 40svh;
  overflow: auto;
  /* pre-wrap: keep the line breaks that make the message readable, but still
     wrap a long pasted Maps URL instead of scrolling sideways. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-body);
  font-size: var(--fs-13);
  line-height: 1.5;
  /* Selectable by hand — that is the entire point of this fallback. */
  user-select: text;
  -webkit-user-select: text;
}

/* A field that follows a picker grid needs a visible break, or it reads as
   part of the grid's caption rather than a separate question. */
.f--sep {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--ink-08);
}