/* Keep motion in illustrations; all information remains readable and static. */
.motion-art{position:relative;width:240px;aspect-ratio:4/3;flex-shrink:0}
.motion-fallback,.lottie-player{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lottie-player svg{width:100%;height:100%;stroke:none;fill:none;display:block}
.motion-art[data-ready="true"]>.motion-fallback{visibility:hidden}
.motion-mini{width:76px;margin:-15px -8px -15px -12px}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:16px;padding:8px 0;border:0;background:transparent;color:#615b54;font-size:14px;text-decoration:underline;text-underline-offset:4px}
.motion-toggle[hidden]{display:none}
.motion-toggle:focus-visible,.usage-intro a:focus-visible{outline:3px solid #b74735;outline-offset:5px;border-radius:4px}
.motion-toggle>span:first-child{width:16px;text-decoration:none}
.how-illustration{display:flex;align-items:center;gap:14px;margin-top:22px}
.how-illustration .motion-art{width:220px;margin-left:-24px}
.how-illustration>span{font-size:15px;color:#615b54;line-height:1.65}
.step-visual{width:76px;flex-shrink:0;display:flex;flex-direction:column;align-items:center}
.step-visual .motion-art{width:90px;margin-top:8px}
.steps article{align-items:flex-start}
.usage-intro{padding-top:64px}
.usage-card{border:1px solid #e6ddd3;border-radius:24px;background:#f3f1e9;padding:28px 48px;display:grid;grid-template-columns:280px 1fr;align-items:center;gap:42px}
.usage-card .motion-art{width:280px}
.usage-card h2{font-size:34px;letter-spacing:-1.2px;line-height:1.2;margin-bottom:16px}
.usage-card p{max-width:550px;color:#615b54;font-size:17px;line-height:1.7}
.usage-card .section-kicker{color:#796d5e;font-size:11px}
.usage-card .text-link{margin-top:18px;color:#a54131;font-size:16px;width:fit-content;min-height:44px}
.usage-card small{display:block;font-size:13px;line-height:1.7;color:#6a6259;margin-top:8px}
@media(max-width:1050px){.how-illustration{flex-direction:column;align-items:flex-start;gap:0}.how-illustration>span br{display:none}.usage-card{gap:24px;padding:28px;grid-template-columns:220px 1fr}.usage-card .motion-art{width:220px}}
@media(max-width:800px){.how-illustration .motion-art{width:180px}.usage-card{grid-template-columns:160px 1fr;gap:20px}.usage-card .motion-art{width:160px}.usage-card h2{font-size:29px}.usage-card p{font-size:16px}}
@media(max-width:560px){.motion-toggle{margin-top:12px}.motion-mini{width:64px;margin:-12px -6px -12px -10px}.how-illustration{flex-direction:row;align-items:center;gap:10px}.how-illustration .motion-art{width:160px;margin-left:-12px}.how-illustration>span{font-size:14px;max-width:145px}.how-illustration>span br{display:initial}.step-visual{width:46px}.step-visual .motion-art{width:68px;margin-top:8px}.steps article{gap:16px}.usage-intro{padding-top:38px}.usage-card{display:flex;flex-direction:column;align-items:flex-start;padding:24px;gap:10px}.usage-card .motion-art{width:200px;align-self:center}.usage-card h2{font-size:28px}.usage-card p{font-size:16px}.usage-card .section-kicker{line-height:1.8;font-size:10px}.usage-card small{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}.button:hover{transform:none}}
/* Allow the hero grid to shrink on narrow screens without squeezing the copy. */
@media(max-width:800px){.hero{grid-template-columns:minmax(0,1fr)}.hero-copy{width:100%;max-width:570px;min-width:0}.hero-visual{width:min(480px,100%);min-width:0}}
@media(max-width:560px){.hero{overflow:clip}.hero .eyebrow{text-wrap:balance}.label-top{max-width:min(280px,100%)}}