/* Small editorial icons; the text and final drawings remain visible without JS. */
.method { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr); gap:64px; }
.method-heading h2 { margin-top:32px; overflow-wrap:anywhere; }
.method-intro { margin-top:24px; color:var(--muted); font-size:14px; }
.steps { list-style:none; margin:0; padding:0; }
.method-step { display:grid; grid-template-columns:80px minmax(0,1fr); align-items:start; gap:24px; padding-block:32px; border-top:1px solid var(--line); }
.method-step:first-child { padding-top:0; border-top:0; }
.method-step:last-child { padding-bottom:0; }
.step-copy { padding-top:3px; }
.steps h3 { font-size:24px; text-wrap:balance; }
.steps p { color:var(--muted); font-size:16px; margin-top:12px; max-width:600px; }
.step-scene { display:grid; place-items:center; width:80px; height:80px; border:1px solid var(--line); border-radius:50%; pointer-events:none; }
.step-scene svg { display:block; width:44px; height:44px; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.icon-map { stroke:var(--muted); opacity:.6; }
.icon-map-halo { fill:var(--paper); stroke:var(--line); }
.icon-map-point,.icon-person-a { fill:var(--ink); stroke:none; }
.icon-person-b { fill:var(--paper); }
.icon-arrival-frame { stroke:var(--muted); opacity:.6; }

/* A brief gesture followed by a long rest; only visible steps run. */
@media (prefers-reduced-motion:no-preference) {
  .is-visible .icon-map-point { transform-origin:24px 24px; animation:method-point 7.2s ease-in-out infinite; }
  .is-visible .icon-map-halo { transform-origin:24px 24px; animation:method-halo 7.2s ease-in-out infinite; }
  .is-visible .icon-check { stroke-dasharray:1; animation:method-check 7.2s .4s ease-in-out infinite both; }
  .is-visible .icon-person-a { animation:method-person-a 7.2s .8s ease-in-out infinite both; }
  .is-visible .icon-person-b { animation:method-person-b 7.2s .8s ease-in-out infinite both; }
}
@keyframes method-point { 0%,100% { transform:scale(.9); } 10% { transform:scale(1.15); } 22%,88% { transform:scale(1); } }
@keyframes method-halo { 0%,100% { transform:scale(.9); opacity:.5; } 20%,88% { transform:scale(1); opacity:1; } }
@keyframes method-check { 0%,6% { stroke-dashoffset:1; opacity:0; } 10% { stroke-dashoffset:1; opacity:1; } 22%,88% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes method-person-a { 0%,100% { transform:translateX(-3px); } 22%,80% { transform:translateX(0); } }
@keyframes method-person-b { 0%,100% { transform:translateX(3px); } 22%,80% { transform:translateX(0); } }
@media(max-width:1000px) {
  .method { gap:40px; }
  .method-step { grid-template-columns:64px minmax(0,1fr); gap:20px; }
  .step-scene { width:64px; height:64px; }
  .step-scene svg { width:40px; height:40px; }
  .steps p { font-size:15px; }
}
@media(max-width:767px) {
  .method { grid-template-columns:1fr; gap:32px; }
  .method-heading h2 { margin-top:24px; }
  .method-intro { margin-top:20px; }
  .method-step { grid-template-columns:56px minmax(0,1fr); padding-block:28px; gap:16px; }
  .step-scene { width:56px; height:56px; }
  .steps p { font-size:14px; }
  .method-step:first-child { padding-top:28px; border-top:1px solid var(--line); }
  .steps h3 { font-size:22px; }
  .step-copy { padding-top:1px; }
}