/* Gap-size comparison ("Why mesh, not foam" section).
   A dime, a pencil end and a 1/4-inch gap drawn at the SAME scale (SVG units = millimetres),
   so visitors see how small an entry point can be. Works at any screen size. */
.gap-scale{margin:clamp(18px,2.4vw,28px) 0 clamp(14px,2vw,22px);padding:clamp(14px,1.8vw,22px);background:var(--mint);border-radius:18px;max-width:520px}
.gap-scale svg{display:block;width:100%;height:auto}
.gap-scale figcaption{margin-top:10px;font-size:.95rem;line-height:1.45;color:var(--navy)}
.gap-scale figcaption b{color:var(--green)}
.gs-label{font:700 3.6px/1 var(--display,system-ui),sans-serif;fill:var(--navy);text-anchor:middle;letter-spacing:.02em}
.gs-sub{font:600 2.8px/1 system-ui,sans-serif;fill:#4d6178;text-anchor:middle}
/* the gap gently pulses once it scrolls into view; still for reduced motion */
.gs-gap-ring{transform-box:fill-box;transform-origin:center;animation:gsPulse 2.4s ease-in-out infinite}
@keyframes gsPulse{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.7;transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.gs-gap-ring{animation:none;opacity:.4}}