.xoe-how{--how-pink:#ffb6c1;--how-orange:#ed4812;--how-yellow:#f9e547;color:rgb(var(--color-foreground));padding:48px 0 56px}
.xoe-how__intro{position:relative;max-width:760px;margin:0 auto 32px;text-align:center}
.xoe-how__eyebrow{display:inline-block;font-size:1.3rem;font-weight:700;letter-spacing:.05em;margin-bottom:12px;color:rgb(var(--color-button))}
.xoe-how__intro h2{margin:0 0 14px;font-size:clamp(2.6rem,3vw,3.8rem);line-height:1.2}
.xoe-how__intro p{max-width:610px;margin:0 auto;font-size:1.6rem;line-height:1.6}
.xoe-how__ghost{position:absolute;right:-45px;top:6px;width:46px;height:58px;transform:rotate(8deg)}
.xoe-how__paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.xoe-how__path{display:flex;flex-direction:column;min-width:0;background:color-mix(in srgb,rgb(var(--color-background)) 18%,white);border:2px solid rgb(var(--color-foreground));border-radius:20px;padding:28px;box-shadow:0 5px 0 rgb(var(--color-shadow))}
.xoe-how__tag{font-size:1.2rem;font-weight:700;letter-spacing:.04em;color:rgb(var(--color-button))}
.xoe-how__path h3{font-size:2.5rem;line-height:1.25;margin:8px 0 10px}
.xoe-how__path-header>p{margin:0;line-height:1.6;font-size:1.5rem;min-height:4.8rem}
.xoe-how__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin:20px 0 28px;flex:1}
.xoe-how__steps li{min-width:0}
.xoe-how__illustration{height:100px;display:flex;justify-content:center;align-items:center;margin-bottom:12px}
.xoe-how__illustration svg{height:100%;width:120px;max-width:100%;overflow:visible}
.xoe-how__step-copy{display:flex;align-items:flex-start;gap:8px}
.xoe-how__number{display:flex;align-items:center;justify-content:center;flex:0 0 24px;height:24px;border:1px solid currentColor;border-radius:50%;background:var(--how-yellow);color:#4a2c2a;font-size:1.2rem;font-weight:700}
.xoe-how h4{font-family:var(--font-body-family);font-size:1.5rem;font-weight:700;line-height:1.4;margin:1px 0 8px}
.xoe-how__step-copy p{font-size:1.3rem;line-height:1.6;margin:0}
.xoe-how__button{width:100%;padding:14px 18px;text-align:center;gap:8px;min-height:48px;font-weight:700;white-space:normal}
.xoe-how__button:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.xoe-how--animate.is-visible .xoe-how__ghost{animation:xoe-how-float 3s ease-in-out 1}
.xoe-how--animate.is-visible .xoe-how__fall{animation:xoe-how-drop 1.5s ease-in-out 1;transform-box:fill-box;transform-origin:center}
.xoe-how--animate.is-visible .xoe-how__fall--late{animation-delay:.35s}
@keyframes xoe-how-float{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-12px) rotate(-5deg)}}
@keyframes xoe-how-drop{0%,100%{transform:translateY(0) rotate(0)}55%{transform:translateY(20px) rotate(12deg)}}
@media(max-width:989px){.xoe-how__path{padding:22px}.xoe-how__steps{gap:12px}.xoe-how__step-copy{display:block}.xoe-how__number{width:24px;margin-bottom:8px}.xoe-how__ghost{right:4px;top:-24px;width:32px}}
@media(max-width:749px){.xoe-how{padding:36px 0 44px}.xoe-how__intro{padding:0 12px;margin-bottom:24px}.xoe-how__intro h2{font-size:2.8rem}.xoe-how__intro p{font-size:1.5rem}.xoe-how__paths{grid-template-columns:1fr;gap:24px}.xoe-how__path{padding:22px}.xoe-how__path-header>p{min-height:0}.xoe-how__steps{grid-template-columns:1fr;gap:18px;margin:24px 0}.xoe-how__steps li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;align-items:center}.xoe-how__illustration{height:70px;margin:0}.xoe-how__step-copy{display:flex;gap:10px}.xoe-how__number{margin:0}.xoe-how h4{font-size:1.6rem}.xoe-how__step-copy p{font-size:1.4rem}.xoe-how__ghost{top:-20px;right:0}.xoe-how__path h3{font-size:2.4rem}}
@media(prefers-reduced-motion:reduce){.xoe-how--animate.is-visible .xoe-how__ghost,.xoe-how--animate.is-visible .xoe-how__fall{animation:none}}