/* 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)}
/* 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}}
/* labels are real HTML text under each drawing (readable at every screen size, min 12px on phones); columns line up with the shapes at 17 / 50 / 83 of 100 */
.gs-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:6px 0 0;padding:0;list-style:none;text-align:center}
.gs-labels li{display:grid;gap:2px;line-height:1.2}
.gs-labels b{font:700 .875rem/1.15 var(--display,system-ui),sans-serif;color:var(--navy);letter-spacing:.02em}
.gs-labels span{font-size:.8125rem;font-weight:600;color:#4d6178}