/* Wizard + waitlist. One decision on screen at a time — a parent working
   through this is usually distracted, and a wall of options is how people
   abandon halfway. */

.standfirst { font-size: 20px; line-height: 1.55; color: var(--text-dark); margin-bottom: var(--sp-6); }

/* The regulated-advice line. Deliberately conspicuous: it is a legal boundary,
   not a footnote, and it must never be styled down into small print. */
.advice {
  border-left: 4px solid var(--gold);
  background: var(--gold-light);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
}
.advice p { margin: 0; color: #6b4700; }
.advice--top { margin-bottom: var(--sp-6); }

.step, .outcome {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-6);
}
.step__count {
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin: 0 0 var(--sp-2);
}
.step h3, .outcome h3 { margin: 0 0 var(--sp-3); border: 0; padding: 0; }
.step__help { color: var(--text-muted); font-size: 16px; }

.opts { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.opt {
  font: inherit; text-align: left; cursor: pointer;
  background: var(--cream-warm);
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  color: var(--text-dark);
  transition: border-color var(--transition), background var(--transition);
}
.opt:hover, .opt:focus-visible { border-color: var(--green-mid); background: var(--green-ghost); }

.linkish {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--green-primary); text-decoration: underline; text-underline-offset: 3px;
}

.summary {
  background: var(--green-ghost);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.summary ul { margin: 0; }
.summary li { margin-bottom: var(--sp-2); }
.summary li:last-child { margin-bottom: 0; }

/* The honest gap. Given real weight on purpose — saying what we have not
   verified is the most trustworthy thing on the page, not an apology. */
.gap {
  border: 2px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  background: var(--cream-warm);
}
.gap h4 { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: 19px; color: var(--text-dark); }
.gap p:last-child { margin-bottom: 0; }

.cta {
  background: var(--green-ghost);
  border: 1px solid var(--green-pale);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin: var(--sp-5) 0;
}
.cta h4 { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: 20px; color: var(--text-dark); }

.wl {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-4);
}
.field { margin: 0 0 var(--sp-5); }
.field label { display: block; font-weight: 600; color: var(--text-dark); margin-bottom: var(--sp-2); }
.wl input, .wl select {
  font: inherit; width: 100%; max-width: 420px;
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--text-body);
}
.wl input:focus, .wl select:focus { border-color: var(--green-mid); }

/* Honeypot. Positioned off-screen rather than display:none — bots skip fields
   that are display:none, which defeats the point. Never visible, never
   focusable (tabindex="-1"), never submitted: wizard.js checks it and throws it
   away, so the "we ask for four things and store nothing else" promise printed
   under this form is still literally true. */
.wl .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.note.warn {
  color: #6b4700; background: var(--gold-light);
  padding: var(--sp-4); border-radius: var(--radius-sm); display: block;
}
.note.warn .btn { margin-top: var(--sp-3); }

code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--green-ghost); padding: 1px 5px; border-radius: var(--radius-xs);
}