/* Page styles for how-we-measure (owner: see CONTRIBUTING.md). Shared tokens live in /assets/site.css. */

/* ================= Head: title left, the one-sentence answer and the book button right ================= */
.measure-head { display: grid; gap: 1rem 4rem; padding-bottom: clamp(3rem, 1.5rem + 4vw, 5.5rem); }
.measure-head h1 { margin: 0; max-width: 11ch; }
.measure-intro .lead { margin: 0; color: var(--navy); }
.measure-intro .button-row { margin-top: 1.75rem; }
@media (min-width: 60rem) {
  .measure-head { grid-template-columns: 7fr 5fr; align-items: end; }
}

/* ================= Stage ladder: a route broken at every stage, because each stage has its own count ================= */
.ladder-head { display: grid; gap: 1rem 4rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.ladder-head h2 { margin: 0; max-width: 13ch; font-size: var(--step-5); }
.ladder-head .lead { margin: 0; align-self: end; }
@media (min-width: 60rem) { .ladder-head { grid-template-columns: 7fr 5fr; } }

/* Phones: vertical. Each li owns a waypoint (::before) and a short line segment toward the next gap (::after).
   The segments never touch: a not-equal mark sits in every gap. */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.75rem; }
.ladder li { position: relative; max-width: 34ch; padding-left: 3rem; }
.ladder li::before { content: ""; position: absolute; left: 0; top: 0.25rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--navy); border: 2.5px solid var(--teal); box-sizing: border-box;
  transition: transform 500ms var(--ease-out); }
.ladder li::after { content: ""; position: absolute; left: calc(0.625rem - 1px); top: 2rem; bottom: -0.5rem; width: 2px;
  background: var(--teal); transform-origin: top; transition: transform 700ms var(--ease-out); }
.ladder li:last-child::after { content: none; }
.ladder li:last-child::before { border-radius: 5px; background: var(--warm-white); border-color: var(--warm-white); }
.ladder .neq { position: absolute; left: -0.375rem; top: -2.35rem; width: 2rem; height: 2rem; display: grid; place-items: center;
  color: var(--mist); font-size: var(--step-3); font-weight: 800; line-height: 1; }
.ladder li:first-child .neq { display: none; }
.ladder h3 { font-size: var(--step-3); margin: 0 0 0.35rem; }
.ladder p { margin: 0; color: var(--mist); font-size: var(--step-0); }

.js .ladder:not(.is-in) li::before { transform: scale(0.3); }
.js .ladder:not(.is-in) li::after { transform: scaleY(0); }
.ladder li:nth-child(2)::before, .ladder li:nth-child(1)::after { transition-delay: 220ms; }
.ladder li:nth-child(3)::before, .ladder li:nth-child(2)::after { transition-delay: 440ms; }
.ladder li:nth-child(4)::before, .ladder li:nth-child(3)::after { transition-delay: 660ms; }
.ladder li:nth-child(5)::before, .ladder li:nth-child(4)::after { transition-delay: 880ms; }
.ladder li:nth-child(6)::before, .ladder li:nth-child(5)::after { transition-delay: 1100ms; }

/* Wide: six columns in one line; the segment runs right from each waypoint and stops short of the next gap. */
@media (min-width: 64rem) {
  .ladder { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 2.5rem; padding-top: 2.75rem; }
  .ladder li { padding-left: 0; max-width: none; }
  .ladder li::before { top: -2.75rem; }
  .ladder li::after { left: 1.75rem; right: -0.25rem; top: calc(-2.75rem + 0.625rem - 1px); bottom: auto; width: auto; height: 2px;
    transform-origin: left; }
  .js .ladder:not(.is-in) li::after { transform: scaleX(0); }
  .ladder .neq { left: -2.5rem; top: calc(-2.75rem + 0.625rem - 1rem); width: 2.5rem; }
  .ladder p { max-width: 20ch; }
}

.credit-note { margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0; padding-left: 1rem; max-width: 60ch; border-left: 2px solid var(--teal);
  font-size: var(--step-1); }

/* ================= Report: copy beside the instrument-style sample report (Home's styling) ================= */
.report-grid { display: grid; gap: 3rem; align-items: start; }
.report-copy h2 { margin-top: 0; }
.covers-list { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.covers-list li { position: relative; padding: 0.7rem 0 0.7rem 1.75rem; border-top: 1px solid var(--rule); color: var(--navy); font-weight: 600; }
.covers-list li::before { content: ""; position: absolute; left: 0.2rem; top: 1.3rem; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--teal); }
.covers-list li:last-child { border-bottom: 1px solid var(--rule); }
.mockup-note { margin: 0; max-width: 48ch; }

.sample-report { margin: 0; align-self: start; border-radius: var(--radius); background: var(--navy); color: var(--warm-white); box-shadow: var(--edge-dark);
  overflow: hidden; }
.sample-report figcaption { display: grid; gap: 0.35rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--rule-navy);
  background-color: var(--navy); background-image: linear-gradient(90deg, rgba(15, 157, 138, 0.22), rgba(15, 157, 138, 0) 70%); }
.sample-label { font-size: var(--step--1); font-weight: 700; color: var(--warm-white); }
.sample-title { font-size: var(--step-2); font-weight: 800; font-stretch: 112%; color: var(--warm-white); letter-spacing: -0.01em; }
.sample-report table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sample-report th, .sample-report td { padding: 1rem 1.5rem; border-bottom: 1px solid var(--rule-navy); text-align: left; font-size: var(--step-0); color: var(--warm-white); }
.sample-report thead th { color: var(--mist); font-weight: 600; font-size: var(--step--1); padding-block: 0.75rem; }
.sample-report thead th:last-child, .sample-report td { text-align: right; }
.sample-report tbody th { font-weight: 600; }
.sample-report td { font-weight: 800; font-stretch: 112%; font-size: var(--step-3); }
.sample-report td.not-supplied { white-space: nowrap; font-size: var(--step-0); font-weight: 600; color: var(--mist); }
.sample-report tbody tr:last-child th, .sample-report tbody tr:last-child td { border-bottom: 0; }
@media (min-width: 60rem) {
  .report-grid { grid-template-columns: 6fr 5fr; column-gap: 5rem; }
  .sample-report { margin-top: 0.5rem; }
}

/* ================= Evidence: the case-study commitment as a ruled list ================= */
.evidence-grid { display: grid; gap: 2rem 5rem; align-items: start; }
.evidence-copy h2 { margin-top: 0; max-width: 14ch; }
.on-mint .evidence-copy .lead { color: var(--navy); }
.evidence-grid h3 { margin: 0 0 0.75rem; }
.evidence-list { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.evidence-list li { position: relative; padding: 0.7rem 0 0.7rem 1.75rem; border-top: 1px solid rgba(16, 42, 67, 0.12); max-width: 60ch; }
.evidence-list li::before { content: ""; position: absolute; left: 0.2rem; top: 1.3rem; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--teal); }
.evidence-list li:last-child { border-bottom: 1px solid rgba(16, 42, 67, 0.12); }
.participate { margin: 0; padding: 1rem 1.25rem; border-radius: var(--radius-small); background: var(--white); border: 1px solid var(--rule); font-size: var(--step-0); }
@media (min-width: 60rem) { .evidence-grid { grid-template-columns: 5fr 7fr; } }

/* ================= Final CTA: the route lands (Home pattern) ================= */
.final-grid { display: grid; gap: 2rem; align-items: center; }
.final-cta h2 { margin-top: 0; max-width: 16ch; }
.final-cta .lead { max-width: 56ch; }
.landing { display: none; }
.landing .ring { fill: none; stroke: rgba(169, 187, 203, 0.16); stroke-width: 1; }
.landing .ring.far { stroke-dasharray: 2 7; }
.landing .dot { fill: var(--warm-white); }
.landing .path { fill: none; stroke: var(--teal); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms var(--ease-out); }
.landing .box { fill: var(--warm-white); }
.landing .tick { fill: none; stroke: var(--navy); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--ease-out) 800ms; }
.js .landing:not(.is-in) .path, .js .landing:not(.is-in) .tick { stroke-dashoffset: 100; }
@media (min-width: 60rem) {
  .final-grid { grid-template-columns: 8fr 4fr; }
  .landing { display: block; width: 100%; max-width: 20rem; justify-self: end; overflow: visible; }
}

/* Reduced motion: site.css drops transitions and the drawn state above is the default, so nothing waits. */