.band {
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
  padding-block: var(--s6) var(--s5);
  position: relative;
}
.band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px;
  background: var(--line); opacity: 0.85;
}
.band > .wrap { position: relative; }

/* The long horizontal rule — a datum line the content sits on, not a divider between two things. */
.datum { border: 0; height: 1px; background: var(--line-strong); opacity: 0.5; margin: var(--s4) 0; }
.band .eyebrow { color: var(--muted); }

/* ── the four steps, cantilevered ─────────────────────────────────────────────────────────────────
   One row, four piers, each stepping down from the last. The offsets are MARGIN, not transform, so
   the row grows to contain them and nothing is clipped or overlapped at any width; they apply only
   from 62rem up, below which the list is a plain vertical stack. */
.steps { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s4); }
.steps > li {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: var(--s3) var(--s4); border-radius: 0;
}
.steps > li > h3 { margin-block: var(--s1) var(--s2); }
.steps > li > p { margin-bottom: 0; color: var(--ink-soft); }
.steps .kicker {
  display: block; font-family: var(--mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.steps .kicker::before { content: "\2713\00a0"; color: var(--accent); }

@media (min-width: 62rem) {
  .steps { grid-template-columns: repeat(4, 1fr); align-items: start; }
  .steps > li:nth-child(2) { margin-top: 1.25rem; }
  .steps > li:nth-child(3) { margin-top: 2.5rem; }
  .steps > li:nth-child(4) { margin-top: 3.75rem; }
}

/* ── the honesty pair: two flat panels, no elevation at rest — what the answer carries, and what
   happens when there is no answer, are one statement in two halves. */
.pair { display: grid; gap: var(--s4); margin-top: var(--s5); }
.pair > div { border-top: 3px solid var(--line-strong); padding-top: var(--s3); }
.pair h3 { margin-bottom: var(--s2); }
.pair p:last-child { margin-bottom: 0; }
@media (min-width: 48rem) { .pair { grid-template-columns: 1fr 1fr; } }

.settle-figure { margin: var(--s5) 0 0; }
.settle-figure svg { display: block; width: 100%; height: auto; max-width: 34rem; }
.settle-figure figcaption {
  font-size: var(--t-small); color: var(--muted); max-width: 46ch; margin-top: var(--s2);
}
.settle-grid { stroke: var(--line-strong); stroke-width: 0.6; opacity: 0.45; fill: none; }
.settle-frame { stroke: var(--line-strong); stroke-width: 1.2; fill: none; opacity: 0.8; }
.ndl { stroke: var(--ink-soft); stroke-width: 2.4; stroke-linecap: round; }
.ndl-tip { fill: var(--accent); }
.n {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: settle-align 5.5s cubic-bezier(0.32, 0.9, 0.18, 1) 0.6s 1 both;
  /* paused until seen: settle.js flips .is-seen (r41) */
  animation-play-state: paused;
}
.settle-figure.is-seen .n { animation-play-state: running; }
@keyframes settle-align {
  from { transform: rotate(var(--a, 0deg)); }
  60%  { transform: rotate(calc(var(--a, 0deg) * 0.18)); }
  to   { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .n { animation: none; } }

/* Arrival angles — class rules, not element attributes, for the pinned reason above; each matches
   its needle's own transform="rotate(...)" so frames (1) and (2) agree. */
.a1  { --a: -64deg; } .a2  { --a:  38deg; } .a3  { --a: 112deg; } .a4  { --a: -27deg; }
.a5  { --a:  75deg; } .a6  { --a: -98deg; } .a7  { --a:  21deg; } .a8  { --a: 143deg; }
.a9  { --a: -49deg; } .a10 { --a:  88deg; } .a11 { --a: -13deg; } .a12 { --a: 126deg; }