/* ==========================================================================
   /where-is-my-divorce/ — the stage-checker (#54).

   Reuses the v2 tokens and the .plancard/.stage/.meter/.disclaimer/.eyebrow
   components from site.css (the same markup the home page tracker teaser
   uses) so this tool looks like part of the same product rather than a
   bolted-on page. Everything here is page-specific: the intro copy width,
   the privacy badge, the checkbox wired onto each stage row, and the case
   number / exit sections below the card.
   ========================================================================== */

.wid { padding-block: clamp(2rem, 6vw, 3rem) 4rem; }

.wid h1 { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.03em; margin: .6rem 0 .75rem; }
.wid__lede { color: var(--ink-soft); font-size: var(--text-md); line-height: 1.65; max-width: 46rem; }

.wid__privacy {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--mint); color: #24402F;
  border-radius: 10px; padding: .7rem 1rem;
  font-size: var(--text-sm); font-weight: 700;
  margin: 1.5rem 0 0;
}

/* ── The card ── */
.wid-card { margin: 2.25rem 0; max-width: 46rem; }
.plancard__top span#wid-meter-label { white-space: nowrap; }
.wid-card__empty {
  margin: 1rem 0 0; font-size: var(--text-sm); color: var(--sage);
}
.wid-card__empty[hidden] { display: none; }

/* ── Stage rows, now checkboxes ── */
.wid-stage {
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.wid-stage:hover { background: var(--cream); }

.wid-stage__check {
  width: 1.15rem; height: 1.15rem; margin-top: .15rem;
  accent-color: var(--accent); flex: 0 0 auto;
}

.wid-stage__wait {
  display: block; font-size: var(--text-xs); color: var(--sage);
  line-height: 1.55; margin-top: .3rem;
}
.stage--now .wid-stage__wait { color: #8A6A15; font-weight: 600; }

.wid-stage__meanwhile { display: block; margin-top: .3rem; }
.wid-stage__meanwhile a { font-size: var(--text-xs); font-weight: 800; color: var(--accent); text-decoration: none; }
.wid-stage__meanwhile a:hover { text-decoration: underline; }

/* ── Case number explainer ── */
.wid-case { margin: 3rem 0; max-width: 46rem; }
.wid-case h2 { font-size: var(--text-xl); font-weight: 800; margin-bottom: .75rem; }
.wid-case p { margin: 0 0 1rem; color: var(--ink-soft); line-height: 1.7; }
.wid-case code {
  background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: .1rem .4rem;
  font-size: .92em;
}
.wid-case__credibility {
  background: var(--mint); border-radius: var(--radius-sm);
  padding: 1rem 1.15rem; color: #24402F !important;
  font-size: var(--text-sm);
}

/* ── Funnel exit ── */
.wid-exit {
  margin: 3rem 0; max-width: 46rem;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem;
}
.wid-exit h2 { font-size: var(--text-lg); font-weight: 800; margin-bottom: .5rem; }
.wid-exit p { color: var(--ink-soft); margin: 0 0 1.1rem; }