.how { position: relative; z-index: 1; height: 500svh; color: var(--ink); scroll-snap-align: none; background: var(--bone); }
.how-snap { position: absolute; left: 0; width: 1px; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }


.how-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate;
  --rw: 14px;                          
  --ox: 71vw; --oy: 52svh;             
  --oh: min(63svh, 40vw);              
  --top: max(13svh, 96px);             
  background:
    radial-gradient(60% 70% at 16% -8%, rgba(255,255,255,.7), transparent 70%),
    linear-gradient(180deg, #f3f0ea 0%, var(--bone) 48%, #e7e2d9 78%, #e2ddd3 100%); }
.how-stage::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .06 0 0 0 0 .05 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) { .how-give { position: absolute; inset: 0; z-index: 1; } }   


.how-world { position: absolute; left: 0; top: 0; height: 100%; z-index: 1; pointer-events: none; }
.how-road { position: absolute; left: 0; top: 0; overflow: visible; }
.how-road path { fill: none; stroke-width: var(--rw); stroke-linecap: round; stroke-linejoin: round; }
.how-road.ahead path { stroke: rgba(17, 17, 17, .07); }
.how-road.done path { stroke: var(--blue); }

.how-reach { position: absolute; top: 0; height: 100%; overflow: hidden; }
.how-reach > .how-road { left: 0; }
.how-world, .how-reach, .how-reach > .how-road { will-change: transform; }
.how-stage.ready .how-world { transition: transform 1.15s var(--heavy); }
.how-stage.ready .how-reach, .how-stage.ready .how-reach > .how-road { transition: transform 1.25s cubic-bezier(.62, 0, .18, 1) .08s; }


.how-nav { position: absolute; z-index: 4; left: calc(var(--m) - 14px); top: var(--top); display: flex; gap: 4px; }
.how-nav button { min-width: 62px; height: 50px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
  color: rgba(17, 17, 17, .66); font: 400 24px/1 var(--display);    cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .45s var(--heavy), color .45s var(--heavy); }
.how-nav button.been { color: var(--blue); }
.how-nav button[aria-current="step"] { background: var(--blue); color: var(--bone);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 -3px 0 rgba(10,16,120,.45) inset, 0 12px 22px -12px rgba(22,32,168,.7); }
.how-nav button:hover { color: var(--ink); }
.how-nav button.been:hover { color: var(--deep); }
.how-nav button[aria-current="step"]:hover { color: var(--bone); }
.how-nav button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.how-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   


.how-head, .how-say { position: absolute; z-index: 3; left: var(--m); top: calc(var(--top) + 78px); }
.how-head { width: min(50vw, 820px); }   
.how-head h2 { font: 400 var(--h2)/.96 var(--display); letter-spacing: -.015em; text-wrap: balance; }   
.how-lead { margin-top: 28px; max-width: 24em; font: 400 clamp(22px, 1.8vw, 30px)/1.36 var(--body); color: rgba(17, 17, 17, .82); text-wrap: pretty; }
.how-stops { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.how-say { width: 43vw; }
.how-name { margin: 0; font: 400 clamp(48px, min(6vw, 11svh), 128px)/1.1 var(--display);    letter-spacing: -.012em; text-wrap: balance; }

@media (prefers-reduced-motion: no-preference) {
  .how-stop[data-n="1"] .how-say { top: var(--s1y, 56svh); }
  .how-stop[data-n="1"] .how-name { font-size: clamp(30px, min(3.1vw, 5.8svh), 58px); }
  .how-stop[data-n="1"] .how-line { margin-top: 14px; }
}
.how-line { margin-top: 26px; max-width: 23em; font: 400 clamp(22px, 1.75vw, 30px)/1.38 var(--body); color: rgba(17, 17, 17, .82); text-wrap: pretty; }

.how .w { display: inline-block; opacity: 0; transform: translateY(.55em) scale(.96); transform-origin: 0 100%;
  transition: opacity .25s ease, transform .25s ease; }
.how-stage.seen[data-stop="1"] .how-head .w, .how-stop.on .w { opacity: 1; transform: none;
  transition: opacity .35s ease, transform .7s var(--pop); transition-delay: calc(var(--i) * 45ms + 160ms); }
.how-lead, .how-line { opacity: 0; transform: translateY(18px); transition: opacity .25s ease, transform .25s ease; }
.how-stage.seen[data-stop="1"] .how-lead, .how-stop.on .how-line { opacity: 1; transform: none;
  transition: opacity .45s ease .42s, transform .8s var(--pop) .42s; }
.how-stop[data-n="1"].on .w { transition-delay: calc(var(--i) * 45ms + 520ms); }   
.how-stop[data-n="1"].on .how-line { transition-delay: .7s; }


.how-cta { position: absolute; z-index: 5; left: var(--m); top: var(--cta-y, 70svh); display: inline-flex; align-items: center; gap: 16px;
  height: 76px; padding: 0 34px 0 36px; box-sizing: border-box; border-radius: 999px; background: var(--blue); color: var(--bone);
  font: 400 26px/1 var(--display); white-space: nowrap; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 -5px 0 rgba(10,16,120,.6) inset, 0 26px 50px -20px rgba(22,32,168,.65), 0 6px 14px -6px rgba(17,17,17,.3);
  opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity .3s ease, transform .4s ease, padding .45s var(--heavy), background-color .2s; }
.how-stage[data-stop="5"] .how-cta { opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .45s ease .7s, transform .8s var(--pop) .7s, padding .45s var(--heavy), background-color .2s; }
.how-cta i { font-style: normal; display: inline-block; transition: transform .45s var(--heavy); }
.how-cta:hover { padding-right: 58px; background: #2f3cf2; }
.how-cta:hover i { transform: translateX(10px); }
.how-cta:active { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 -2px 0 rgba(10,16,120,.6) inset, 0 10px 18px -10px rgba(22,32,168,.6); }
.how-cta:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; opacity: 1; transform: none; }   


.how-obj { position: absolute; z-index: 2; left: var(--ox); top: var(--oy); width: var(--ow, var(--oh)); height: var(--oh);
  margin-left: calc(var(--ow, var(--oh)) / -2); margin-top: calc(var(--oh) / -2); pointer-events: none; }
.how-stage.ready .how-obj { transition: transform 1.15s var(--heavy); }
.how-obj.near { will-change: transform; }   
.ob-in { position: relative; width: 100%; height: 100%; }

.how-stage.live .how-stop.on .ph > .ph-scr, .how-stage.live .how-stop.on .ph > .ph-frame { animation: how-float 7s ease-in-out infinite; will-change: transform; }
@keyframes how-float { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(7px); } }


.ph { position: absolute; left: 50%; top: 50%; height: 96%; aspect-ratio: 810 / 1613; translate: -50% -50%; }
.ph::before { content: ""; position: absolute; inset: 3% 6%; z-index: -1; border-radius: 16% / 8%;
  box-shadow: 0 70px 100px -40px rgba(40, 32, 18, .42), 0 24px 40px -22px rgba(40, 32, 18, .38); }

.ph-scr { position: absolute; left: 4.5%; top: 1.3%; width: 91%; height: 97.4%; overflow: hidden; border-radius: 15.4% / 7.3%;
  container-type: size; transform: translateZ(0); }
.ph-scr::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 26%, transparent 42%); }
.ph-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }


.ob-call { --ow: calc(var(--oh) * .62); }
.ob-call .ph { rotate: -6deg; }
.call-scr { background: linear-gradient(180deg, #2a37e8 0%, var(--blue) 38%, var(--deep) 100%); color: var(--bone); text-align: center; }
.call-who { position: absolute; left: 0; right: 0; top: 15cqh; font: 500 9.4cqw/1.1 var(--body); letter-spacing: -.01em; }
.call-time, .call-ring { position: absolute; left: 0; right: 0; top: 21.5cqh; font: 400 6.8cqw/1 var(--body); opacity: .8; font-variant-numeric: tabular-nums;
  transition: opacity .3s ease; }
.call-time, .how-stage[data-call="on"] .call-ring { opacity: 0; }
.how-stage[data-call="on"] .call-time { opacity: .8; }
.call-face { position: absolute; left: 50%; top: 35cqh; width: 50cqw; height: 50cqw; translate: -50% 0; border-radius: 50%;
  box-shadow: 0 0 0 2.2cqw rgba(239, 235, 227, .16), 0 24px 40px -18px rgba(5, 8, 60, .7); }

.call-end { position: absolute; left: 50%; bottom: 9cqh; width: 21cqw; height: 21cqw; translate: -50% 0; border-radius: 50%;
  background: #ff3b30; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5);
  transition: background-color .5s ease .35s; }
.call-end svg { width: 60%; height: 60%; transition: transform .7s var(--pop) .35s; }
.how-stage[data-call="on"] .call-end { background: #34c759; }
.how-stage[data-call="on"] .call-end svg { transform: rotate(-135deg); }

.how-stage.live:not([data-call="on"]) .how-stop.on .ob-call .ph > .ph-scr,
.how-stage.live:not([data-call="on"]) .how-stop.on .ob-call .ph > .ph-frame { animation: how-ring 1.3s ease-in-out infinite; will-change: transform; }
@keyframes how-ring { 0%, 60%, 100% { transform: none; } 6%, 18%, 30%, 42% { transform: translateX(-3px) rotate(-1.2deg); } 12%, 24%, 36%, 48% { transform: translateX(3px) rotate(1.2deg); } }


.sheet { position: absolute; box-sizing: border-box; background: #fbf9f4; border-radius: 5px; container-type: inline-size;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 50px 80px -36px rgba(40, 32, 18, .4), 0 14px 26px -14px rgba(40, 32, 18, .28); }


.ob-form { --ow: calc(var(--oh) * .82); }
.form-sheet { left: 50%; top: 50%; width: calc(var(--oh) * .74); aspect-ratio: 1 / 1.3; translate: -50% -50%; rotate: 4deg; }
.form-sheet > * { margin-left: 9cqw; margin-right: 9cqw; }
.fs-mark { display: block; width: 13cqw; height: 13cqw; margin-top: 9cqw; border-radius: 50%; }
.fs-title { margin-top: 5cqw; font: 400 8.2cqw/1.02 var(--display); letter-spacing: -.01em; }
.fs-q { margin-top: 6.2cqw; font: 400 4.7cqw/1.2 var(--body); color: rgba(17, 17, 17, .6); }
.fs-a { margin-top: 1.4cqw; padding-bottom: 1.6cqw; border-bottom: 2px solid rgba(17, 17, 17, .14); font: 500 6.2cqw/1.2 var(--body); color: var(--ink); }
.fs-a span { display: inline-block; clip-path: inset(0 100% 0 0); }
.how-stop.on .fs-a span { animation: fs-write .7s steps(11, end) calc(.65s + var(--d) * .75s) forwards; }
@keyframes fs-write { to { clip-path: inset(0 0 0 0); } }
.fs-send { position: absolute; right: 9cqw; bottom: 8cqw; margin: 0; display: inline-flex; align-items: center; height: 10.5cqw; padding: 0 6cqw;
  border-radius: 999px; background: var(--blue); color: var(--bone); font: 400 4.8cqw/1 var(--display); }


.ob-pile { --ow: calc(var(--oh) * 1.02); }
.print, .card { position: absolute; display: block; opacity: 0; translate: 0 -9svh;
  transition: translate .3s ease 0s, opacity .2s ease 0s; }
.print { width: 45%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; box-sizing: border-box; padding: 2.2% 2.2% 7.5%; background: #fcfbf8;
  box-shadow: 0 34px 50px -26px rgba(40, 32, 18, .42), 0 8px 14px -8px rgba(40, 32, 18, .3); }
.p1 { left: 4%; top: 9%; rotate: -12deg; }
.p2 { left: 50%; top: 3%; rotate: 9deg; }
.p3 { left: 26%; top: 16%; rotate: -2deg; }
.card { left: 22%; top: 57%; width: 58%; height: auto; aspect-ratio: 91 / 61; rotate: -7deg; border-radius: 2.5%;
  box-shadow: 0 30px 44px -22px rgba(22, 32, 168, .5), 0 8px 14px -8px rgba(17, 17, 17, .35); }
.how-obj.near .print { opacity: 1; translate: 0 0; transition: none; }
.how-stop.on .card { opacity: 1; translate: 0 0; transition: translate .75s var(--pop) .55s, opacity .25s ease .55s; }


.ob-mac { --ow: calc(var(--oh) * 1.35); }
.ob-mac .mac { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; opacity: 0; translate: 0 -7svh;
  transition: translate .3s ease, opacity .2s ease; }

.ob-mac .ob-in::before { content: ""; position: absolute; left: 4%; right: 10%; top: 62%; height: 30%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(40, 32, 18, .34), rgba(40, 32, 18, .12) 60%, transparent);
  transform: rotate(-9deg) scale(.8); transition: opacity .2s ease, transform .3s ease; }
.how-obj.near.ob-mac .mac { opacity: 1; translate: 0 0; transition: none; }
.how-obj.near.ob-mac .ob-in::before { opacity: 1; transform: rotate(-9deg); transition: none; }

.mac-note { position: absolute; left: 44%; top: -3%; width: 60%; box-sizing: border-box; z-index: 2;
  font: 400 max(12px, calc(var(--oh) * .036))/1.3 var(--body);   
  display: flex; align-items: flex-start; gap: .8em; padding: .95em 1.1em 1em .95em; border-radius: 1.35em;
  background: rgba(247, 245, 240, .97); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 0 0 .5px rgba(17,17,17,.12), 0 34px 60px -24px rgba(40, 32, 18, .55), 0 10px 20px -10px rgba(40, 32, 18, .3);
  opacity: 0; transform: translateY(14%) scale(.9); transform-origin: 70% 100%; transition: transform .3s ease, opacity .2s ease; }
.mn-pic { flex: none; position: relative; width: 3em; height: 3em; }
.mn-pic img { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 4px 10px -4px rgba(22, 32, 168, .55); }

.mn-app { position: absolute; right: -.35em; bottom: -.3em; width: 1.35em; height: 1.35em; border-radius: 28%;
  background: linear-gradient(180deg, #4aa3ff, #1a6bff); box-shadow: 0 0 0 .12em #f8f6f1, 0 2px 4px rgba(0,0,0,.25); }
.mn-app::before { content: ""; position: absolute; left: 20%; right: 20%; top: 30%; bottom: 30%; border-radius: .08em; background: #fff; }
.mn-app::after { content: ""; position: absolute; left: 20%; right: 20%; top: 30%; height: 30%;
  background: linear-gradient(to bottom right, transparent 47%, #4a8fff 48%, #4a8fff 58%, transparent 59%) left / 50% 100% no-repeat,
              linear-gradient(to bottom left, transparent 47%, #4a8fff 48%, #4a8fff 58%, transparent 59%) right / 50% 100% no-repeat; }
.mn-txt { flex: 1; min-width: 0; }
.mac-note p { margin: 0; }
.mn-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.mn-top b { font-weight: 600; }
.mn-top span { font-size: .82em; color: rgba(17, 17, 17, .5); }
.mn-sub { font-weight: 500; }
.mn-body { margin-top: .1em; color: rgba(17, 17, 17, .66); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.how-stop.on .mac-note { opacity: 1; transform: translateY(-10%) rotate(-2deg); transition: transform .9s var(--pop) 1.35s, opacity .3s ease 1.35s; }


.ob-live { --ow: calc(var(--oh) * 1.02); }
.guide { left: -4%; top: 14%; width: 56%; aspect-ratio: 1 / 1.414; rotate: -7deg; }
.gd-title { margin: 10cqw 9cqw 0; font: 400 8.4cqw/1.02 var(--display); letter-spacing: -.01em; }
.gd-steps { margin: 6cqw 9cqw 0; padding: 0 0 0 1.1em; font: 400 5cqw/1.3 var(--body); color: rgba(17, 17, 17, .78); max-width: 22ch; }
.gd-steps li { margin-top: 2.6cqw; padding-left: .2em; }
.gd-steps li::marker { font-family: var(--display); color: var(--blue); }
.ob-live .ph { left: 72%; height: 92%; rotate: 5deg; }

.live-scr { background: #0e0d0c; color: #f4efe6; }
.live-status { position: absolute; left: 0; right: 0; top: 0; height: 13.7cqw; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 1.5cqw 8.6cqw 0 10.7cqw; box-sizing: border-box; font: 600 4.3cqw/1 Manrope, system-ui, sans-serif; }
.yb-batt { width: 6.6cqw; height: 3cqw; box-sizing: border-box; border: .4cqw solid currentColor; border-radius: 1cqw; opacity: .9; }
.live-site { position: absolute; left: 0; top: 13.7cqw; width: 100%; height: auto; display: block; }
.live-note { position: absolute; left: 4cqw; right: 4cqw; top: 6.5cqh; z-index: 2; display: flex; align-items: center; gap: 3.4cqw; padding: 3.4cqw 4cqw;
  border-radius: 6cqw; background: rgba(250, 248, 244, .96); color: var(--ink); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(-120%); transition: transform .3s ease, opacity .2s ease; }
.live-note img { flex: none; width: 11.5cqw; height: 11.5cqw; border-radius: 26%; }
.live-note p { font: 400 4.5cqw/1.25 var(--body); }
.live-note b { display: block; font-weight: 500; }
.how-stop.on .live-note { opacity: 1; transform: none; transition: transform .8s var(--pop) 1.25s, opacity .3s ease 1.25s; }

.live-url { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 16cqw; padding-bottom: 5cqw; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 2cqw;
  background: #1a1917; color: #f4efe6; font: 500 4.6cqw/1 var(--body); box-shadow: 0 -1px 0 rgba(255, 255, 255, .08); }
.live-url .lock { width: 2.6cqw; height: 2.2cqw; border-radius: .5cqw; background: currentColor; position: relative; top: .4cqw; opacity: .75; }
.live-url .lock::before { content: ""; position: absolute; left: 50%; bottom: 80%; width: 1.7cqw; height: 1.9cqw; translate: -50% 0;
  border: .5cqw solid currentColor; border-bottom: 0; border-radius: 1cqw 1cqw 0 0; box-sizing: border-box; }


@media (max-width: 1023px) {
  .how-stage { --rw: 11px; --ox: 50vw; --top: max(15svh, 124px); }
  .how-nav { left: calc(var(--m) - 10px); gap: 2px; }
  .how-nav button { min-width: 56px; height: 48px; padding: 0 10px; font-size: 21px; }
  .how-head, .how-say { top: calc(var(--top) + 64px); left: var(--m); right: var(--m); width: auto; }
  .how-head h2 { font-size: clamp(44px, min(12.4vw, 8.4svh), 92px); }
  .how-lead { margin-top: 20px; font-size: clamp(19px, 5vw, 26px); }
  .how-name { font-size: clamp(36px, min(10.4vw, 7svh), 76px); }
  .how-line { margin-top: 16px; font-size: clamp(19px, 5vw, 26px); line-height: 1.36; }
  .how-cta { height: 64px; padding: 0 26px 0 28px; font-size: 22px; }
  .how-cta:hover { padding-right: 40px; }
}

@media (max-width: 767px) {
  .mac-note { left: 38%; width: 58%; }
  .guide { left: 2%; }
  .ob-live .ph { left: 68%; }
}

@media (max-width: 767px) and (max-height: 740px) {
  .how-stage { --top: 88px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .how-stage { --ox: 74vw; --oy: 58svh; --oh: 66svh; --top: 58px; }
  .how-nav button { height: 44px; font-size: 19px; }
  .how-head, .how-say { top: calc(var(--top) + 50px); left: var(--m); right: auto; width: calc(74vw - 34svh - var(--m) - 16px); }   
  .how-head h2 { font-size: clamp(28px, 8.4svh, 44px); }
  .how-name { font-size: clamp(28px, 8svh, 44px); }
  .how-line, .how-lead { font-size: 19px; margin-top: 10px; }
  .how-cta { height: 56px; font-size: 20px; }
}


@media (prefers-reduced-motion: reduce), (max-width: 1023px) {
  
  .how { height: auto; overflow: clip; scroll-snap-align: start; }
  .how-snap, .how-world, .how-nav { display: none; }
  
  .how-snap:nth-child(5) { display: block; top: auto !important; bottom: 0; height: 1px; scroll-snap-align: end; scroll-snap-stop: normal; }
  .how-stage { position: relative; height: auto; overflow: clip; padding: calc(var(--top) + 8px) var(--m) 12svh; }
  .how-head, .how-say, .how-obj, .how-cta { position: static; margin: 0; transform: none !important; transition: none !important; }
  .how-head { width: auto; max-width: 1000px; }
  .how-stops { position: static; counter-reset: stop; }
  .how-stop { counter-increment: stop; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4vw;
    padding: 8svh 0; border-top: 2px solid rgba(17, 17, 17, .08); }
  .how-stop:first-child { margin-top: 8svh; }
  .how-say { width: auto; }
  .how-say::before { content: "0" counter(stop); display: block; margin-bottom: 14px; font: 400 26px/1 var(--display); color: var(--blue); }
  .how-obj { --oh: min(52svh, 34vw); justify-self: center; }
  .how-cta { opacity: 1; pointer-events: auto; margin-top: 4svh; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .how .w, .how-lead, .how-line { opacity: 1 !important; transform: none !important; transition: none !important; }
  .print, .card, .live-note, .ob-mac .mac, .mac-note, .ob-mac .ob-in::before { opacity: 1 !important; translate: 0 0 !important; transition: none !important; }
  .live-note, .mac-note { transform: none !important; }
  .fs-a span { clip-path: none; animation: none !important; }
  .ph > .ph-scr, .ph > .ph-frame { animation: none !important; }
}
@media (max-width: 1023px) {
  .how-stop { grid-template-columns: 1fr; gap: 5svh; padding: 6svh 0; }
  .how-obj { --oh: min(46svh, 70vw); }
  .ob-mac { --oh: min(40svh, 60vw); }   
}