.home-page .flow-legend { min-height: 30px; }
.home-page .flow-toggle {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 8px;
    border: 1px solid #b7cadf; border-radius: 5px; background: #f4f8fc; color: #345579;
    font: 600 .72rem/1.4 "DM Sans",sans-serif; cursor: pointer;
}
.home-page .flow-toggle[hidden] { display: none; }
.home-page .flow-toggle:hover { background: white; border-color: #7699c0; }
.home-page .flow-toggle i { width: 8px; height: 9px; border-inline: 2px solid currentColor; }
.home-page .flow[data-user-paused] .flow-toggle i { width: 0; height: 0; border: solid transparent; border-width: 5px 0 5px 8px; border-left-color: currentColor; }
.home-page .flow-signals { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.home-page .flow-signals i {
    position: absolute; left: 0; top: 0; width: 8px; height: 8px; opacity: 0; border-radius: 50%;
    background: var(--signal-color); box-shadow: 0 0 0 3px var(--signal-halo); offset-rotate: 0deg;
}
.home-page .flow-signals i,.home-page .branch { --slot: 0s; --signal-color: #3972c9; --signal-halo: #3972c92b; }
.home-page .flow-signals i:nth-child(2),.home-page .branch:nth-child(2) { --slot: 1.65s; --signal-color: #c47924; --signal-halo: #c479242c; }
.home-page .flow-signals i:nth-child(3),.home-page .branch:nth-child(3) { --slot: 3.3s; --signal-color: #4c8759; --signal-halo: #4c87592b; }

@media (max-width: 580px) {
    .home-page .sheet-stack::after { content: ""; position: absolute; top: 100%; left: 50%; height: 8px; border-left: 1.5px solid #6d93c1; }
    .home-page .branches::before { top: -8px; }
    .home-page .branches::after { display: block; left: 0; right: 50%; top: -8px; bottom: auto; }
}

@media (prefers-reduced-motion: no-preference) {
    .home-page .hero-copy > .eyebrow,.home-page .hero-copy > h1,.home-page .hero-copy > .lead,.home-page .hero-copy > .actions {
        animation: home-entrance .56s cubic-bezier(.2,.7,.25,1) backwards;
    }
    .home-page .hero-copy > h1 { animation-delay: .06s; }
    .home-page .hero-copy > .lead { animation-delay: .12s; }
    .home-page .hero-copy > .actions { animation-delay: .18s; }
    .home-page .flow.motion-arrived .sheet-blue { animation: home-fan-blue .75s cubic-bezier(.2,.75,.25,1) both; }
    .home-page .flow.motion-arrived .sheet-orange { animation: home-fan-orange .65s .08s cubic-bezier(.2,.75,.25,1) both; }
    .home-page .flow.motion-arrived .member-sheet { animation: home-entrance .6s backwards; }

    .home-page .flow[data-traced] .flow-signals i,.home-page .flow[data-traced] .branch {
        animation-duration: 6.3s; animation-delay: var(--slot); animation-iteration-count: infinite;
        animation-play-state: paused;
    }
    .home-page .flow[data-traced] .flow-signals i { animation-name: home-trace; animation-timing-function: linear; }
    .home-page .flow[data-traced] .branch { animation-name: home-receive; animation-timing-function: ease-out; }
    .home-page .flow[data-running] .flow-signals i,.home-page .flow[data-running] .branch { animation-play-state: running; }

    .home-page .motion-arrived:not(.flow) { animation: home-entrance .6s var(--reveal-delay,0s) cubic-bezier(.18,.65,.2,1) backwards; }
    .home-page :is(.routine-grid,.featured,.product-list) > :nth-child(2) { --reveal-delay: .07s; }
    .home-page :is(.routine-grid,.featured,.product-list) > :nth-child(3) { --reveal-delay: .14s; }
    .home-page .featured > :nth-child(4) { --reveal-delay: .21s; }
    .home-page .routine-grid > a { transition: transform .22s ease,border-color .22s,box-shadow .22s; }
    .home-page :is(.btn,.text-link,.product-list a) > .glyph,.home-page .routine-arrow .glyph { transition: transform .22s ease; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .home-page .routine-grid > a:is(:hover,:focus-visible) { transform: translateY(-4px); box-shadow: 0 8px 20px #163c6910; }
    .home-page :is(.btn,.text-link):is(:hover,:focus-visible) > .glyph { transform: translateX(3px); }
    .home-page .routine-grid > a:is(:hover,:focus-visible) .routine-arrow .glyph,
    .home-page .product-list a:is(:hover,:focus-visible) > .glyph { transform: translate(2px,-2px); }
}
@keyframes home-entrance {
    from { opacity: .68; translate: 0 12px; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes home-fan-blue {
    from { transform: translate(0,0) rotate(0); }
    to { transform: translate(-11px,-14px) rotate(-8deg); }
}
@keyframes home-fan-orange {
    from { transform: translate(0,0) rotate(0); }
    to { transform: translate(7px,-6px) rotate(5deg); }
}
@keyframes home-trace {
    0% { offset-distance: 0%; opacity: 0; }
    4% { opacity: 1; }
    23% { offset-distance: 100%; opacity: 1; }
    27%,100% { offset-distance: 100%; opacity: 0; }
}
@keyframes home-receive {
    0%,18%,40%,100% { border-color: #becfe2; box-shadow: none; }
    24%,30% { border-color: var(--signal-color); box-shadow: 0 0 0 3px var(--signal-halo); }
}