/* Page styles for how-it-works (owner: see CONTRIBUTING.md). Shared tokens live in /assets/site.css.
   Composition (site-v2): navy intro with a five-stop route index, a vertical route timeline on warm white
   (checklist boxes tick in order, the line draws), one mint band for who does what, navy closing band. */

/* ================= Intro: type left, the route index right ================= */
.intro-grid { display: grid; gap: 2.5rem; }
.hiw-intro h1 { max-width: 12ch; margin-bottom: 0.35em; }
.hiw-intro .lead { max-width: 36ch; }
.intro-line { max-width: 40ch; margin: 0 0 1.75rem; padding-left: 1rem; border-left: 2px solid var(--teal); }

.route-index ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.route-index ol::before { content: ""; position: absolute; left: 1.05rem; top: 1.4rem; bottom: 1.4rem; width: 2px; background: var(--teal); }
.route-index li { max-width: none; }
.route-index a { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 2.875rem; padding: 0.3rem 0.75rem 0.3rem 0;
  color: var(--warm-white); text-decoration: none; font-size: var(--step-2); font-weight: 720; font-stretch: var(--title-stretch);
  border-radius: var(--radius-small); transition: background-color var(--dur-state) var(--ease-out); }
.route-index a:hover { background: rgba(248, 250, 249, 0.06); }
.route-index .step-num { position: relative; display: inline-grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; border: 2.5px solid var(--teal); background: var(--navy); color: var(--warm-white);
  font-size: var(--step--1); font-weight: 700; font-stretch: 100%; font-variant-numeric: tabular-nums; }
.route-index li:last-child .step-num { border-radius: 7px; background: var(--navy-deep); }
@media (min-width: 60rem) {
  .intro-grid { grid-template-columns: 7fr 4fr; column-gap: clamp(3rem, 1rem + 5vw, 7rem); align-items: center; }
  .route-index { padding: 1.75rem 2rem; border-radius: var(--radius); background: var(--navy-raise); box-shadow: var(--edge-dark); }
}

/* ================= The route: vertical timeline, one box per step ================= */
.route-head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.route-head .lead { max-width: 40ch; }
.route { position: relative; list-style: none; margin: 0; padding: 0; }
.route::before { content: ""; position: absolute; left: calc(0.875rem - 1px); top: 1rem; bottom: 2.5rem; width: 2px;
  background: var(--teal); transform-origin: top; transition: transform 1.2s var(--ease-out); }
.js .route:not(.is-in)::before { transform: scaleY(0); }
.route-step { position: relative; display: grid; grid-template-columns: 1.75rem 1fr; column-gap: 1.25rem; row-gap: 1rem;
  max-width: none; padding: 0 0 clamp(2.25rem, 1.5rem + 2vw, 3.5rem); scroll-margin-top: 6rem; }
.route-step:last-child { padding-bottom: 0; }
.route-step .box { grid-row: 1 / span 2; position: relative; width: 1.75rem; height: 1.75rem; margin-top: 0.15rem; border-radius: 7px;
  border: 2px solid var(--teal); background: var(--teal);
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out); }
.route-step .box::after { content: ""; position: absolute; left: 0.47rem; top: 0.17rem; width: 0.4rem; height: 0.8rem;
  border: solid var(--navy); border-width: 0 3px 3px 0; transform: rotate(45deg) scale(1);
  transition: transform 300ms var(--ease-out), opacity 200ms var(--ease-out); }
.route-step:last-child .box { background: var(--navy); border-color: var(--navy); }
.route-step:last-child .box::after { border-color: var(--warm-white); }
.js .route:not(.is-in) .box { background: var(--warm-white); border-color: var(--slate); }
.js .route:not(.is-in) .box::after { opacity: 0; transform: rotate(45deg) scale(0.4); }
.route-step:nth-child(2) .box, .route-step:nth-child(2) .box::after { transition-delay: 250ms; }
.route-step:nth-child(3) .box, .route-step:nth-child(3) .box::after { transition-delay: 500ms; }
.route-step:nth-child(4) .box, .route-step:nth-child(4) .box::after { transition-delay: 750ms; }
.route-step:nth-child(5) .box, .route-step:nth-child(5) .box::after { transition-delay: 1000ms; }

.route-what, .route-yours { grid-column: 2; }
.route-what .step-num { margin: 0 0 0.15rem; color: var(--slate); font-size: var(--step--1); font-weight: 650; font-variant-numeric: tabular-nums; }
.route-what h3 { font-size: var(--step-3); margin: 0 0 0.5rem; }
.route-what p { margin: 0; max-width: 46ch; }
.route-what p + p, .route-what p + ul { margin-top: 0.6rem; }
.stage-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 46ch; }
.stage-list li { padding: 0.3rem 0.85rem; border-radius: var(--radius-pill); background: var(--mint); color: var(--navy);
  font-size: var(--step-0); font-weight: 600; }
.route-yours { padding: 1rem 1.25rem; border-radius: var(--radius-small); background: var(--white); border: 1px solid var(--rule);
  box-shadow: var(--shadow-raise); align-self: start; }
.yours-label { margin: 0 0 0.25rem; color: var(--navy); font-size: var(--step-0); font-weight: 700; }
.route-yours p:last-child { margin: 0; font-size: var(--step-1); }

@media (min-width: 60rem) {
  .route-step { grid-template-columns: 1.75rem minmax(0, 7fr) minmax(0, 4fr); column-gap: 2.5rem; }
  .route-step .box { grid-row: 1; }
  .route-what { grid-column: 2; }
  .route-yours { grid-column: 3; grid-row: 1; margin-top: 1.6rem; }
}

/* ================= Who does what (the one mint band) ================= */
.split-head { margin-bottom: 2.5rem; }
.split-head h2 { max-width: 18ch; }
.split-grid { display: grid; gap: 2.25rem; }
.split-col h3 { font-size: var(--step-2); margin-bottom: 0.75rem; }
.tick-list { list-style: none; padding: 0; margin: 0; }
.tick-list li { position: relative; padding: 0.6rem 0 0.6rem 1.9rem; border-top: 1px solid var(--rule); color: var(--navy); }
.tick-list li::before { content: ""; position: absolute; left: 0.15rem; top: 1rem; width: 0.85rem; height: 0.45rem;
  border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg); }
.tick-list.is-limit li::before { top: 1.25rem; height: 0; border-left: 0; transform: none; border-bottom-color: var(--slate); }
.split-note { margin: 2.5rem 0 0; max-width: 60ch; }
.scope-note { margin: 1rem 0 0; max-width: 60ch; font-size: var(--step-1); }
@media (min-width: 52rem) {
  .split-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 2vw, 3.5rem); }
}

/* ================= Closing band ================= */
.cta-band h2 { font-size: var(--step-5); max-width: 14ch; }
.cta-band .lead { max-width: 52ch; }
.consent-line { margin-top: 1.75rem; padding-left: 1rem; max-width: 52ch; border-left: 2px solid var(--teal); }

.section-link { margin: 1.5rem 0 0; font-weight: 700; }