/* Coming soon: how a plate attaches (exploded) and custom photo plates. */
#s-attach { overflow-x: clip; }
.atx { display: grid; gap: 36px; align-items: center; }
.atx__steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.atx__steps li { position: relative; padding-left: 40px; color: var(--mute); font-size: 16px; line-height: 1.5; }
.atx__steps li::before { content: attr(data-step); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 216, 163, .4); color: var(--beam); font: 600 12px/26px var(--f-mono); text-align: center; }
.atx__steps b { display: block; color: var(--bone); font-weight: 600; }
.atx__note { margin: 22px 0 18px; max-width: 34em; }
.atx__stage { position: relative; }
.atx__svg { width: 100%; height: auto; overflow: visible; }
.atx__layer, .atx__pin, .atx__lab { transform-box: view-box; transition: transform 1.1s var(--ease-spring), opacity .6s var(--ease-out); }
.atx__pads { transform: translate3d(0, -4px, 0); }
.atx__plate { transform: translate3d(0, -8px, 0); }
.atx__pin { transform: translate3d(0, 46px, 0); opacity: 0; }
.atx__lab { opacity: 0; transition-delay: calc(var(--k) * 90ms + .5s); }
.atx__stage.is-open .atx__pin { transform: none; opacity: 1; transition-delay: 0s; }
.atx__stage.is-open .atx__pads { transform: translate3d(0, -100px, 0); transition-delay: .25s; }
.atx__stage.is-open .atx__plate { transform: translate3d(0, -200px, 0); transition-delay: .3s; }
.atx__stage.is-open .atx__lab { opacity: 1; }
@media (min-width: 900px) { .atx { grid-template-columns: 1fr 1.25fr; gap: 56px; } }
@media (prefers-reduced-motion: reduce) {
  .atx__pads { transform: translate3d(0, -100px, 0); } .atx__plate { transform: translate3d(0, -200px, 0); }
  .atx__pin { transform: none; opacity: 1; } .atx__lab { opacity: 1; }
}

.phx { display: grid; gap: 40px; align-items: center; }
.phx__steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; color: var(--bone); }
.phx__steps span { color: var(--beam); margin-right: 14px; }
.phx__price { margin: 26px 0 0; }
.phx__price b { font: 600 34px/1 var(--f-display); color: var(--beam-hot); margin-right: 8px; letter-spacing: -.035em; }
.phx__plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 520px; justify-self: center; width: 100%; }
.phx__plate { display: grid; gap: 10px; justify-items: center; color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.phx__plate svg { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.js .phx__plate { opacity: 0; transform: translate3d(0, 30px, 0) rotate(calc((var(--n) - 1) * 4deg)); transition: transform .9s var(--ease-spring), opacity .6s var(--ease-out); transition-delay: calc(var(--n) * 110ms); }
.js .phx__plates.is-in .phx__plate { opacity: 1; transform: rotate(calc((var(--n) - 1) * 4deg)); }
@media (min-width: 900px) { .phx { grid-template-columns: 1fr 1fr; gap: 64px; } }
@media (prefers-reduced-motion: reduce) { .js .phx__plate { opacity: 1; transform: none; } }