/* Section 4 — round 3 (Claude Design). One line per step, photographic still per step, fade/settle on scroll. */
/* Power-design pass: 8pt rhythm, ≥16px body, room to breathe, 150–300ms UI motion. */
@media (min-width: 701px) {
.method-inner { padding: 120px var(--pad) 112px; }
.method-head { margin-bottom: 72px; }
.method-path::before { top: 40px; left: 32px; right: 32px; }
.method-step { min-height: 0; padding: 36px 32px 40px; }
.method-step:first-child { padding-left: 0; }
.method-step:last-child { padding-right: 0; }
.method-step::before { top: 34px; left: 32px; }
.method-step h3 { margin: 16px 0 16px; }
.plan-artifact { margin-top: 32px; padding: 16px; }
.scope-strip { margin-top: 32px; }
}
.method-step p { font-size: 16px; line-height: 1.6; }
.method-step { display: flex; flex-direction: column; }
/* Equal visual weight across all four steps */
@media (min-width: 701px) { .method-step h3 { min-height: 2.2em; } }
.step-label { white-space: nowrap; }
@media (min-width: 701px) and (max-width: 1100px) { .step-label { letter-spacing: .06em; font-size: 11px; } }
.method-step--lead { background: none; }
.method-step--lead::after { display: none; }
.step-diagram { position: relative; z-index: 1; margin: 0 0 32px; color: var(--ink); opacity: 1; display: flex; align-items: flex-end; } /* QC round-7: .82 read as faint at a glance */
.step-diagram svg { display: block; width: 100%; max-width: 190px; height: auto; }
@media (min-width: 701px) { .step-diagram { height: 118px; } .step-diagram svg { max-width: 176px; } }
.step-diagram .dia-amber { fill: var(--amber-deep); }
.step-diagram .dia-amber-stroke { stroke: var(--amber-deep); }
.method-step p { max-width: 21em; }
.method-step .plan-artifact { margin-top: auto; }
/* Diagram draw-in: strokes trace on arrival (pathLength=1 set by polish-motion.js). */
/* Draw-in (QC round-6, 2026-09-02): each pictogram is traced stroke by stroke (~1 s a stroke, .15 s apart), the four hand over ~1 s apart
   (0 / .5 / 1 / 1.5 s on desktop, each on its own arrival on a phone; strokes .6 s), and the amber fill lands only after that step's strokes have finished.
   Timing lives in polish-motion.js + the arrival observer in index.html. */
.step-diagram path, .step-diagram circle, .step-diagram rect { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.35,.05,.25,1); /* QC round-8: slower so the draw reads at page scale */ }
.step-diagram .dia-amber { fill-opacity: 0; transition: fill-opacity .5s ease; }
/* per-stroke and per-step delays are set inline by polish-motion.js (setDelays); --dia-delay carries the step offset for the fade below */
.method-step.is-in .step-diagram path,
.method-step.is-in .step-diagram circle,
.method-step.is-in .step-diagram rect { stroke-dashoffset: 0; }
.method-step.is-in .step-diagram .dia-amber { fill-opacity: 1; }
/* Hover replay: .dia-replay snaps strokes back, removal re-draws them. */
.method-step.dia-replay .step-diagram path,
.method-step.dia-replay .step-diagram circle,
.method-step.dia-replay .step-diagram rect { stroke-dashoffset: 1; transition: none; }
.method-step.dia-replay .step-diagram .dia-amber { fill-opacity: 0; transition: none; }
.step-diagram { transition: color .4s ease, opacity .4s ease; }
.method-step:hover .step-diagram { color: var(--amber-deep); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .step-diagram path, .step-diagram circle, .step-diagram rect { stroke-dashoffset: 0; transition: none; }
  .step-diagram .dia-amber { fill-opacity: 1; transition: none; }
}
/* fade/settle — transform/opacity only, ease-out, ≤300ms */
.method-step { opacity: 0; transform: translateY(12px); transition: opacity .4s ease-out, transform .4s ease-out; transition-delay: calc(var(--dia-delay, 0s) * .5); }
.method-step.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .method-step { opacity: 1; transform: none; transition: none; } }
@media (max-width: 700px) {
  .method-step { padding-left: 0; padding-right: 0; }
  .step-diagram { margin-bottom: 24px; }
  .step-diagram svg { max-width: 180px; }
}
/* QC round-7 (2026-09-02): the hairlines read as faint at a glance — every stroke weight up ~30%, hierarchy kept (grid 1 → 1.35, marks 1.5 → 1.9). */
.step-diagram svg [stroke-width="1"] { stroke-width: 1.6; }
.step-diagram svg [stroke-width="1.1"] { stroke-width: 1.7; }
.step-diagram svg [stroke-width="1.2"] { stroke-width: 1.8; }
.step-diagram svg [stroke-width="1.5"] { stroke-width: 2.2; }

.step-diagram svg { stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* QC round-8: root width so inherited strokes are heavier too */

/* QC round 10 (2026-09-02): the round-9b judge read half-drawn strokes as broken geometry at human pace. The pictograms now
   arrive WHOLE — each icon fades and settles in .5s, icons .35s apart from the moment they are in view, the amber accent lands
   .3s after its icon. No partial stroke is ever on screen. */
.step-diagram path, .step-diagram circle, .step-diagram rect { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
.step-diagram { opacity: 0; transform: translateY(8px); transition: opacity .8s ease-out, transform .8s ease-out, color .4s ease; transition-delay: var(--dia-delay, 0s); } /* QC round-10: .5s read as a pop — .8s, icons .45s apart */
.method-step.is-in .step-diagram { opacity: 1; transform: none; }
.step-diagram .dia-amber { fill-opacity: 0; transition: fill-opacity .4s ease; }
.method-step.is-in .step-diagram .dia-amber { fill-opacity: 1; }
.method-step.dia-replay .step-diagram { opacity: 0; transform: translateY(8px); transition: none; }
.method-step.dia-replay .step-diagram .dia-amber { fill-opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .step-diagram { opacity: 1; transform: none; transition: none; }
  .step-diagram .dia-amber { fill-opacity: 1; transition: none; }
}