/* Method page — Impact Cycle */
.phase-pills{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:30px 0 0;padding:0}
.phase-pills a{display:flex;align-items:center;gap:8px;height:42px;padding:0 18px 0 6px;border-radius:var(--r-pill);border:1px solid var(--line-2);font-size:.9rem;transition:border-color var(--d1)}
.phase-pills a:hover{border-color:var(--gold)}
.phase-pills b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(122,30,30,.5);font-size:.72rem;color:var(--gold-2)}

.cycle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:start}
.cycle-visual{position:sticky;top:calc(var(--nav-h) + 6vh);width:min(460px,100%);aspect-ratio:1;justify-self:center}
.ring{width:100%;height:100%;overflow:visible}
.ring-track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:18}
.ring-inner{fill:rgba(17,16,21,.9);stroke:rgba(214,181,111,.25);stroke-width:1}
.arcs path{fill:none;stroke:rgba(255,255,255,.12);stroke-width:18;stroke-linecap:butt;transition:stroke var(--d2),filter var(--d2)}
.arcs path.done{stroke:rgba(198,167,96,.45)}
.arcs path.on{stroke:var(--gold-2);filter:drop-shadow(0 0 10px rgba(238,215,159,.55))}
.ring-center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;pointer-events:none}
.rc-n{font:700 .74rem/1 var(--sans);letter-spacing:.2em;color:var(--gold)}
.rc-name{font:600 clamp(2rem,3.4vw,2.8rem)/1 var(--serif)}
.rc-del{max-width:20ch;font-size:.86rem;color:var(--muted);line-height:1.4}
.ring-center>*{transition:opacity .3s}
.ring-center.swap>*{opacity:0}
.ring-labels{list-style:none;margin:0;padding:0}
.ring-labels li{position:absolute;translate:-50% -50%;font:700 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap;transition:color var(--d2)}
.ring-labels li.on{color:var(--gold-2)}
.phases{list-style:none;margin:0;padding:4vh 0;display:grid}
.phase{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0 24px 28px;border-left:1px solid var(--line);position:relative;opacity:.4;transition:opacity var(--d2);scroll-margin-top:calc(var(--nav-h) + 20px)}
.phase::before{content:"";position:absolute;left:-1px;top:22%;bottom:22%;width:2px;background:var(--gold);transform:scaleY(0);transition:transform var(--d2) var(--ease-out)}
.phase.on{opacity:1}
.phase.on::before{transform:none}
.phase-n{font:700 .72rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.phase .h3{font-size:clamp(1.8rem,2.6vw,2.3rem);margin-top:10px}
.phase>p{margin:12px 0 0;color:var(--muted);line-height:1.7;max-width:52ch}
.phase-grid{display:grid;gap:8px;margin:20px 0 0}
.phase-grid div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:.9rem}
.phase-grid dt{font-weight:700;color:var(--gold-2)}
.phase-grid dd{margin:0;color:#d6cec1;line-height:1.5}
@media (max-width:960px){
  .cycle{grid-template-columns:1fr}
  .cycle-visual{display:none}
  .phase{min-height:0;opacity:1;padding:26px 0 26px 22px}
  .phase::before{transform:none}
  .phases{padding:0}
}
@media (max-width:640px){.phase-grid div{grid-template-columns:1fr;gap:2px}}

/* v6: the whole path at a glance, then each phase in three lines */
.method-hero{padding-bottom:clamp(48px,6vw,80px)}
.road{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;position:relative;text-align:left}
.road::before{content:"";position:absolute;left:0;right:0;top:38px;height:2px;background:linear-gradient(90deg,var(--gold) 0 58%,rgba(214,181,111,.35) 58%)}
.road-step{position:relative;display:grid;gap:8px;align-content:start}
.road-when{font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.road-dot{width:16px;height:16px;margin:8px 0 6px;border-radius:50%;background:var(--bg);border:2px solid var(--gold);box-shadow:0 0 0 6px rgba(198,167,96,.12);position:relative;z-index:1}
.road-step--loop .road-dot{border-style:dashed}
.road-step b{font:600 1.6rem/1 var(--serif)}
.road-del{font-size:.9rem;line-height:1.5;color:var(--muted);max-width:24ch}
.road-loop{margin:22px 0 0;text-align:right;font-size:.82rem;color:var(--faint)}
.road-loop span::before{content:"↻ ";color:var(--gold)}
html.reveal-ready .road-step{opacity:0;transform:translateY(10px);animation:roadIn .6s var(--ease-out) forwards;animation-delay:calc(.15s + var(--i)*.12s)}
@keyframes roadIn{to{opacity:1;transform:none}}
.phase-grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pcard{padding:22px;border-radius:var(--r-lg);background:var(--cream-card);border:1px solid var(--line-ink);box-shadow:var(--shadow-ink);scroll-margin-top:calc(var(--nav-h) + 20px)}
.pcard-n{font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--wine-2)}
.pcard h3{margin-top:8px;font:600 1.5rem/1.1 var(--serif)}
.pcard dl{margin:14px 0 0;display:grid;gap:10px}
.pcard dl div{padding-top:10px;border-top:1px solid var(--line-ink)}
.pcard dt{font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7d6230}
.pcard dd{margin:4px 0 0;font-size:.88rem;line-height:1.45;color:#3d373e}
.effort{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 28px;margin-top:28px;padding:22px 26px;border-radius:var(--r-lg);background:var(--ink);color:var(--text)}
.effort-k{margin:0;font:600 1.3rem/1.2 var(--serif);max-width:12ch}
.effort ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.effort li{display:grid;gap:4px;padding-left:16px;border-left:1px solid rgba(214,181,111,.4)}
.effort b{font-size:.98rem;color:var(--gold-2)}
.effort span{font-size:.86rem;color:var(--muted)}
.effort-note{grid-column:1/-1;margin:4px 0 0;font-size:.78rem;color:var(--faint)}
@media (max-width:1100px){.phase-grid5{grid-template-columns:repeat(2,minmax(0,1fr))}.phase-grid5 .pcard:last-child{grid-column:1/-1}}
@media (max-width:860px){
  .road{grid-template-columns:1fr;gap:18px;padding-left:28px}
  .road::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(var(--gold) 0 58%,rgba(214,181,111,.35) 58%)}
  .road-dot{position:absolute;left:-28px;top:-2px;margin:0}
  .road-step b{font-size:1.35rem}
  .road-loop{text-align:left}
  .effort{grid-template-columns:1fr}
  .effort ul{grid-template-columns:1fr}
}
@media (max-width:640px){.phase-grid5{grid-template-columns:1fr}}