/* A single, scoped motion language for the homepage's how-it-works section. */
body.main_page .section2.wmw-how-motion {
    --how-ink: #881944;
    --how-ease: cubic-bezier(.2, .8, .2, 1);
}
.wmw-how-motion .wmw-how-title { position: relative; }
.wmw-how-motion .wmw-how-title::after {
    content: ''; position: absolute; bottom: -5px; left: 15%; width: 70%; height: 2px;
    background: linear-gradient(90deg, transparent, #bd527b, #881944, transparent);
    transform: scaleX(0); transform-origin: center;
}
.wmw-how-motion .wmw-how-title.is-revealed::after { animation: wmw-how-line 850ms var(--how-ease) both; }
body.main_page .wmw-how-motion .wmw-how-row {
    position: relative; isolation: isolate; overflow: hidden;
    transition: transform 320ms var(--how-ease), box-shadow 320ms ease, border-color 320ms ease;
}
.wmw-how-motion .wmw-how-row::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
    background: linear-gradient(105deg, transparent 20%, #e9b3c633 48%, transparent 75%);
    transform: translateX(-110%); opacity: 0;
}
.wmw-how-motion .wmw-how-row.is-revealed::after {
    animation: wmw-how-sweep 950ms var(--how-ease) var(--how-delay, 0ms) both;
}
.wmw-how-motion .whatDo__icon { position: relative; transform-origin: center; }
.wmw-how-motion .whatDo__icon i { display: inline-block; transform-origin: center; }
.wmw-how-motion .whatDo__icon::after {
    content: ''; position: absolute; width: 24px; height: 24px; left: 50%; top: 50%;
    border: 1px solid #b14870; border-radius: 50%; pointer-events: none; opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
}
.wmw-how-motion .is-revealed .whatDo__icon::after {
    animation: wmw-how-ring 950ms ease-out var(--how-delay, 0ms) both;
}
body.main_page .wmw-how-motion .wmw-how-card {
    position: relative; isolation: isolate;
    transition: transform 450ms var(--how-ease), box-shadow 450ms ease, border-color 300ms ease;
}
.wmw-how-motion .wmw-how-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(230px circle at var(--how-light-x, 50%) var(--how-light-y, 25%), #e9afc43d, transparent 75%);
    opacity: 0; transition: opacity 320ms ease; z-index: -1;
}
.wmw-how-motion .wmw-how-card .how_it_works__step-badge {
    display: inline-block; transition: color 250ms ease, translate 300ms var(--how-ease);
}
@media (hover: hover) and (pointer: fine) {
    body.main_page .wmw-how-motion .wmw-how-row:hover {
        transform: translateX(6px); border-color: #ba7692; box-shadow: 0 7px 22px #68093114;
    }
    body.main_page .wmw-how-motion .wmw-how-card.is-pointer {
        transform: perspective(1000px) rotateX(var(--how-tilt-x, 0deg)) rotateY(var(--how-tilt-y, 0deg)) translateY(-6px);
        border-color: #bd7c97; box-shadow: 0 18px 38px -14px #68093140;
    }
    .wmw-how-motion .wmw-how-card.is-pointer::before { opacity: 1; }
    .wmw-how-motion .wmw-how-card.is-pointer .how_it_works__step-badge { translate: 3px 0; }
}
.wmw-how-motion .wmw-how-card:focus-within { border-color: #881944; box-shadow: 0 0 0 2px #88194416; }
.wmw-how-motion .how_it_works__intro-block[hidden],
.wmw-how-motion .how_it_works__outro[hidden] { display: none !important; }
.wmw-how-motion .wmw-how-disclosure { display: flex; justify-content: center; margin: 10px 0; }
body.main_page .wmw-how-motion .wmw-how-toggle { min-height: 36px; padding: 6px 14px !important; font-size: 13px; line-height: 1.3; gap: 10px; }
.wmw-how-motion .wmw-how-toggle-icon { width: 16px; font-size: 20px; font-weight: 400; line-height: 1; }
body.main_page .section2.wmw-how-compact { padding: 12px 0; }
body.main_page .wmw-how-compact .textCont-howItWorks { margin: 8px auto 0 !important; }
body.main_page .wmw-how-compact .how_it_works__step-desc {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; min-height: 0 !important; margin-bottom: 0 !important;
}
body.main_page .wmw-how-compact .how_it_works__step-note { display: none; }
body.main_page .wmw-how-compact .how_it_works__step:focus-within .how_it_works__step-desc {
    display: block; overflow: visible; -webkit-line-clamp: unset;
}
body.main_page .wmw-how-compact .how_it_works__step:focus-within .how_it_works__step-note { display: block; }
@media (hover: hover) and (pointer: fine) {
    body.main_page .wmw-how-compact .how_it_works__step:hover .how_it_works__step-desc {
        display: block; overflow: visible; -webkit-line-clamp: unset;
    }
    body.main_page .wmw-how-compact .how_it_works__step:hover .how_it_works__step-note { display: block; }
}
/* Laptop overview: five concise rows, three actionable cards, no internal scrollbox. */
@media (min-width: 901px) {
    body.main_page .wmw-how-compact .whatDo__header h4 { margin: 0 0 8px !important; font-size: 20px; line-height: 1.2; }
    body.main_page .wmw-how-compact .whatDo__listHeader { margin-bottom: 6px; }
    body.main_page .wmw-how-compact .whatDo__listHeader h5 { margin: 0; font-size: 14px; line-height: 1.4; }
    body.main_page .wmw-how-compact .whatDo__listBody { gap: 5px; }
    body.main_page .wmw-how-compact .whatDo__listBody > div { padding: 4px 10px; min-height: 26px; box-sizing: border-box; font-size: 13px; line-height: 1.3; }
    body.main_page .wmw-how-compact .whatDo__icon { font-size: 16px; }
    body.main_page .wmw-how-compact .how_it_works__steps-title-static { margin: 0 0 8px !important; font-size: 13px; }
    body.main_page .wmw-how-compact .how_it_works__step { padding: 12px; }
    body.main_page .wmw-how-compact .how_it_works__step-title { font-size: 16px !important; line-height: 1.25; }
    body.main_page .wmw-how-compact .how_it_works__step-desc { font-size: 13px !important; line-height: 1.35; }
    body.main_page .wmw-how-compact .how_it_works__step-action { padding-top: 8px; }
    body.main_page .wmw-how-compact .main_page2__footer { margin-top: 10px; padding: 0; }
    body.main_page .wmw-how-compact .main_page2__footer .suggest { margin: 0; padding: 0; font-size: 18px; line-height: 1.35; }
}
@media (min-width: 901px) {
    body.main_page .wmw-how-motion .wmw-how-card:not(:last-child)::after {
        width: 18px; background: linear-gradient(90deg, #dcb3c3, #881944, #dcb3c3);
        transform: scaleX(0); transform-origin: left;
        transition: transform 650ms var(--how-ease) var(--how-delay, 0ms);
    }
    body.main_page .wmw-how-motion .wmw-how-card.is-revealed::after { transform: scaleX(1); }
}
@media (max-width: 900px) {
    body.main_page .wmw-how-motion .wmw-how-card::after { display: none; }
    body.main_page .wmw-how-motion .wmw-how-card:hover,
    body.main_page .wmw-how-motion .wmw-how-row:hover { transform: none; }
}
.wmw-how-motion.wmw-how-paused *, .wmw-how-motion.wmw-how-paused *::before,
.wmw-how-motion.wmw-how-paused *::after { animation-play-state: paused !important; }
@keyframes wmw-how-line { to { transform: scaleX(1); } }
@keyframes wmw-how-sweep {
    0% { opacity: 0; transform: translateX(-110%); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateX(110%); }
}
@keyframes wmw-how-ring {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
    25% { opacity: .5; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
    body.main_page .wmw-how-motion *, body.main_page .wmw-how-motion *::before,
    body.main_page .wmw-how-motion *::after { animation: none !important; transition: none !important; }
    body.main_page .wmw-how-motion .wmw-how-card,
    body.main_page .wmw-how-motion .wmw-how-row { transform: none !important; }
    .wmw-how-motion .wmw-how-title::after { transform: scaleX(1); }
    .wmw-how-motion .wmw-how-card::before { display: none; }
}

/* Scroll-open steps: surrounding copy moves naturally, without scroll capture. */
body.main_page .wmw-how-curtain {
    height: 1px;
    overflow: hidden;
    overflow: clip;
    overflow-anchor: none;
}
body.main_page .wmw-how-curtain > .how_it_works__steps-grid {
    margin-block: 0;
    visibility: hidden;
}
body.main_page .wmw-how-curtain.is-opening > .how_it_works__steps-grid,
body.main_page .wmw-how-curtain.is-open > .how_it_works__steps-grid {
    visibility: visible;
}
body.main_page .wmw-how-curtain.is-opening,
body.main_page .wmw-how-curtain.is-open { height: auto; }
body.main_page .wmw-how-curtain.is-open { overflow: visible; }
@media (prefers-reduced-motion: reduce) {
    body.main_page .wmw-how-curtain { height: auto; overflow: visible; }
    body.main_page .wmw-how-curtain > .how_it_works__steps-grid { visibility: visible; }
}