/* ============================================================ utilities.css Small single-purpose helpers. Kept last so they can win when deliberately applied. Use sparingly. ============================================================ */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } .text-center { text-align: center; } .muted { color: var(--ink-soft); } .lede { font-size: var(--step-1); color: var(--ink-soft); } .stack > * + * { margin-top: var(--sp-4); } .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } .mt-0 { margin-top: 0; } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mb-0 { margin-bottom: 0; } /* Scroll-reveal: progressive enhancement. The hidden/animated state only applies once the inline script has added `.js` to , so if JavaScript fails or is disabled the content is simply visible. The IntersectionObserver in main.js then toggles .is-visible as elements enter the viewport. */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring); } .reveal.is-visible { opacity: 1; transform: none; } /* Stagger siblings within a revealing grid/row so items settle in sequence rather than all at once (hierarchy: draws the eye left-to-right / top-to- bottom in reading order). */ .divisions .reveal:nth-child(2), .steps .reveal:nth-child(2), .trust__item:nth-child(2) { transition-delay: 80ms; } .divisions .reveal:nth-child(3), .steps .reveal:nth-child(3), .trust__item:nth-child(3) { transition-delay: 160ms; } .trust__item:nth-child(4) { transition-delay: 240ms; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }