/* Scoped to the Small steps section; the hero and scroll showcase stay intact. */
.peachy-pace-stage { position:relative; display:grid; place-items:center; width:100%; min-height:540px; padding-bottom:48px; scroll-margin-top:0; isolation:isolate; }
.peachy-pace-stage .orbit-one { width:min(100%,510px); height:auto; aspect-ratio:1; }
.peachy-pace-stage .orbit-two { width:75%; height:auto; aspect-ratio:1; }
.peachy-pace-picture { position:relative; z-index:1; display:block; width:min(110%,520px); }
.peachy-pace-picture img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 22px 18px rgba(62,35,103,.12)); }
.peachy-pace-caption { position:absolute; z-index:2; bottom:10px; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:12px; color:var(--purple); font:500 .85rem var(--display); }
.peachy-pace-toggle[hidden] { display:none; }
.peachy-pace-toggle { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--ink); cursor:pointer; }
#app .peachy-pace-options { gap:12px; }
#app .peachy-pace-options li { display:block; }
.peachy-pace-option { display:flex; align-items:center; gap:16px; width:100%; padding:14px 12px; margin:0; border:1px solid transparent; border-radius:20px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:background .2s,border-color .2s,box-shadow .2s; }
.peachy-pace-option[aria-pressed="true"] { border-color:rgba(255,107,53,.27); background:rgba(255,107,53,.07); box-shadow:0 8px 28px rgba(81,45,125,.04); }
.peachy-pace-option[aria-pressed="true"] i { background:var(--orange); color:#fff; }
.peachy-pace-option:hover { background:rgba(255,107,53,.07); }
.peachy-pace-option:focus-visible,.peachy-pace-toggle:focus-visible { outline:3px solid var(--purple); outline-offset:4px; }
html[data-theme="dark"] .peachy-pace-caption { color:#d6c7ff; }
html[data-theme="dark"] .peachy-pace-stage .orbit-one { background:linear-gradient(145deg,rgba(255,107,53,.16),rgba(124,84,202,.22)); }
html[data-theme="dark"] .peachy-pace-option[aria-pressed="true"] { border-color:rgba(255,153,103,.5); background:rgba(255,107,53,.12); }
html[data-theme="dark"] .peachy-pace-option:focus-visible,html[data-theme="dark"] .peachy-pace-toggle:focus-visible { outline-color:#c4a5ff; }
@media(min-width:841px) and (max-width:1120px) {
  #app { grid-template-columns:1.15fr 1fr; }
  #app .progress-copy { grid-column:1/-1; text-align:center; }
  #app .progress-copy > p:not(.eyebrow) { margin-inline:auto; }
  #app .peachy-pace-options { grid-column:auto; grid-template-columns:1fr; }
}
@media(max-width:840px) {
  #app .progress-copy { order:1; }
  #app .peachy-pace-stage { order:2; min-height:380px; max-width:440px; margin-inline:auto; }
  #app .peachy-pace-options { order:3; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0; }
  .peachy-pace-picture { width:min(100%,390px); }
  .peachy-pace-option { height:100%; padding:14px 10px; gap:10px; }
}
@media(max-width:560px) {
  #app .peachy-pace-stage { min-height:320px; max-width:340px; }
  .peachy-pace-picture { width:320px; max-width:100%; }
  .peachy-pace-caption { bottom:0; }
  #app .peachy-pace-options { gap:8px; }
  .peachy-pace-option { flex-direction:column; align-items:flex-start; gap:9px; border-radius:18px; padding:14px 12px; }
  #app .peachy-pace-options i { flex:0 0 36px; width:36px; height:36px; font-size:1.05rem; }
  #app .peachy-pace-options strong { font-size:.95rem; }
  #app .peachy-pace-options span { font-size:.78rem; }
}
@media(prefers-reduced-motion:reduce) {
  .peachy-pace-stage .orbit-two { animation:none; }
  .peachy-pace-option { transition:none; }
}