/* Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.center { text-align: center; }
@media (max-width: 620px) { .hide-sm { display: none !important; } }
@media (max-width: 960px) { .hide-md { display: none !important; } }

/* reveal on scroll (only when JS runs: html.js is set before first paint) */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
@media (min-width: 961px) {
  .js .feat__mid.reveal.in { transform: translateY(26px); }
  .js .why__c:nth-child(3n+2).reveal.in { transform: translateY(20px); }
  .js .fmt__c.reveal.in { transition: opacity .7s var(--ease-out), transform .3s var(--ease-out), border-color .2s; }
}
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* magnetic buttons get a pointer transform from JS */
.btn-magnetic { transition: transform .25s var(--ease-out), box-shadow .2s, background .2s; }

/* Touch targets: at least 44px tall on phones / tablets (WCAG 2.5.5 / Apple HIG) */
@media (max-width: 960px), (pointer: coarse) {
  .link-more { min-height: 44px; }
  .swatches { gap: 6px; }
  .swatches button, .swatch-custom { width: 44px; height: 44px; border-width: 6px; background-clip: padding-box; }
  .seg button { min-height: 44px; min-width: 44px; height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .btn--sm { --h: 44px; }
  .footer li a, .cta__alt a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer li + li { margin-block-start: 0; }
  .brand { min-height: 44px; }
  .nav__panel .row { flex-wrap: wrap; }
}