/* ==========================================================================
   S-11 THE STEPS, Financial X-Ray rebuild (2026-09-13, second pass)
   PROC-02 (AG SECTION-TEMPLATES) lifted, then adapted to Quinten's wire:
   centred, each step a card under its ring, and ONE wire runs ring -> card
   top -> around the card's outline both ways -> bottom centre -> next ring.
   steps.js measures the boxes and writes two mirrored paths: a faint rail,
   and a gold ink whose dash is driven by scroll, so the card outlines are
   filled by the line itself. A ring lights as the line crosses it, a card
   when its outline closes, and when the third closes it all glows gold.
   Paper ground after the navy band. Tokens only.
   ========================================================================== */
.lp-steps {
  position: relative; z-index: 0;
  background: var(--paper); color: var(--arbor-text);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  padding-inline: clamp(21px, 2vw + 7px, 42px);
  margin-block: 0; border-top: 0;
  font-family: var(--font-body);
  text-align: center;
}
.lp-steps div { border-top: 0; margin-block: 0; padding-top: 0; }
.lp-steps p, .lp-steps ol { margin-block: 0; }
.lp-steps__inner { max-width: 900px; margin-inline: auto; }

.lp-steps .lp-steps__list {
  position: relative; list-style: none; padding: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(63px, 12vh, 126px);          /* the scroll distance between steps */
}
/* the wire sits under everything, sized by steps.js to the list */
/* the wire paints ABOVE the cards (so the whole stroke sits centred on the
   card's edge, not half hidden under the white) and below the rings */
/* ROOT CAUSE of the drift (measured 2026-09-13): the checkpoint's reset gives
   every li a 14px bottom margin, so this absolutely-positioned li was 14px
   shorter than the list, the SVG inside it 14px shorter than its viewBox,
   and the browser scaled the whole drawing down by 1.2% and centred it: the
   outlines drifted up the further down the page they sat. margin: 0. */
.lp-steps .lp-steps__wirebox { position: absolute; inset: 0; z-index: 2; pointer-events: none; margin: 0; padding: 0; }
.lp-steps__wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-steps__rail { fill: none; stroke: var(--arbor-border); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-steps__ink {
  fill: none; stroke: var(--lp-gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  transition: filter 0.6s ease-out;
}

/* NO z-index on the step: a z-index here made it a stacking context that
   trapped the ring's own z-index inside it, so the wire (z 2, on the list)
   painted OVER the rings (Quinten 2026-09-13, "going over the numbers").
   Card z 1, wire z 2, ring z 3, all in the list's context: the wire runs
   into the ring and out of its foot. */
.lp-steps .lp-steps__step {
  position: relative; width: min(100%, 640px);
  display: flex; flex-direction: column; align-items: center; gap: 42px;   /* ring -> card: the wire's drop */
  padding: 0; text-align: center;
}
.lp-steps__node {
  position: relative; z-index: 3;
  width: 49px; height: 49px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1;
  color: var(--lp-gold-dark);
  background: var(--paper);
  border: 2px solid color-mix(in srgb, var(--lp-gold) 50%, transparent);
  transition: background-color 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
}
/* the card: no border of its own, the wire IS its outline */
.lp-steps .lp-steps__card {
  position: relative; z-index: 1;
  width: 100%; border-radius: 14px;
  background: var(--c-white);
  padding: clamp(21px, 2vw + 10px, 35px) clamp(21px, 3vw + 10px, 49px);
  transition: box-shadow 0.6s ease-out, background-color 0.6s ease-out;
}
.lp-steps__text {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--arbor-text-light); text-wrap: balance; max-width: 30ch; margin-inline: auto;
  transition: color 0.3s ease-out;
}
/* "X-ray" broke at its hyphen at 1440 (measured 2026-09-13); the span holds it */
.lp-steps__text span { white-space: nowrap; }

/* the ring lights as the line crosses it */
.lp-steps .lp-steps__step.is-lit .lp-steps__node {
  background: var(--lp-gold); color: var(--lp-navy); border-color: var(--lp-gold);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--lp-gold) 22%, transparent);
}
/* the card lights when its outline has closed: navy words, the marker sweeps */
.lp-steps .lp-steps__step.is-on .lp-steps__text { color: var(--lp-navy); }
.lp-steps mark {
  color: inherit; font-weight: 600;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--lp-gold) 42%, transparent),
    color-mix(in srgb, var(--lp-gold) 42%, transparent)) no-repeat 0 50% / 0% 100%;
  padding-block: 0.04em; padding-inline: 0.1em; margin-inline: -0.1em; border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size 0.6s ease-out;
}
.lp-steps .lp-steps__step.is-on mark { background-size: 100% 100%; }
/* all three closed: everything glows gold, and KEEPS glowing: the glow
   breathes on a 4.2s cycle rather than settling (Quinten 2026-09-13, "it
   stops after 1 second, we want it to continuously glow") */
.lp-steps .lp-steps__list.is-done .lp-steps__ink {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lp-gold) 80%, transparent));
  animation: lp-steps-ink-glow 4.2s ease-in-out infinite;
}
.lp-steps .lp-steps__list.is-done .lp-steps__card {
  box-shadow: 0 0 42px color-mix(in srgb, var(--lp-gold) 30%, transparent), 0 0 0 1px color-mix(in srgb, var(--lp-gold) 40%, transparent);
  background: color-mix(in srgb, var(--c-white) 96%, var(--lp-gold));
  animation: lp-steps-card-glow 4.2s ease-in-out infinite;
}
.lp-steps .lp-steps__list.is-done .lp-steps__node {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--lp-gold) 22%, transparent), 0 0 28px color-mix(in srgb, var(--lp-gold) 60%, transparent);
  animation: lp-steps-node-glow 4.2s ease-in-out infinite;
}
@keyframes lp-steps-card-glow {
  0%, 100% { box-shadow: 0 0 28px color-mix(in srgb, var(--lp-gold) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--lp-gold) 40%, transparent); }
  50%      { box-shadow: 0 0 63px color-mix(in srgb, var(--lp-gold) 52%, transparent), 0 0 0 1px color-mix(in srgb, var(--lp-gold) 70%, transparent); }
}
@keyframes lp-steps-node-glow {
  0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--lp-gold) 22%, transparent), 0 0 21px color-mix(in srgb, var(--lp-gold) 45%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--lp-gold) 30%, transparent), 0 0 42px color-mix(in srgb, var(--lp-gold) 85%, transparent); }
}
@keyframes lp-steps-ink-glow {
  0%, 100% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--lp-gold) 60%, transparent)); }
  50%      { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--lp-gold-light) 95%, transparent)); }
}

@media (max-width: 900px) {
  .lp-steps .lp-steps__list { gap: clamp(49px, 9vh, 84px); }
  .lp-steps .lp-steps__step { gap: 35px; }
  .lp-steps__text { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-steps__node, .lp-steps__text, .lp-steps mark, .lp-steps__ink, .lp-steps .lp-steps__card { transition: none; }
  .lp-steps .lp-steps__list.is-done .lp-steps__ink, .lp-steps .lp-steps__list.is-done .lp-steps__card, .lp-steps .lp-steps__list.is-done .lp-steps__node { animation: none; }
}

/* ---- life on the ground (2026-09-13): graph paper, faint navy hairlines
   fading toward the edges, and one soft gold light that drifts slowly
   behind the wire ----------------------------------------------------------- */
.lp-steps { overflow: clip; }
.lp-steps::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--lp-navy) 7%, transparent) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--lp-navy) 7%, transparent) 0 1px, transparent 1px 42px);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, var(--lp-navy) 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, var(--lp-navy) 40%, transparent 100%);
}
.lp-steps::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 30%; width: 900px; height: 900px; margin-left: -450px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lp-gold) 22%, transparent) 0%, transparent 60%);
  animation: lp-steps-light 21s ease-in-out infinite;
}
@keyframes lp-steps-light {
  0%, 100% { transform: translate(-18%, -10%); }
  50%      { transform: translate(18%, 24%); }
}
.lp-steps__inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .lp-steps::after { animation: none; } }