.cycling-signals-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cycling-signals-grid article{padding:28px;border:1px solid var(--line);border-radius:18px;background:#fff}
.cycling-signals-grid span{display:block;color:#8b6b32;font-size:32px;margin-bottom:20px}
.cycling-signals-grid h3{font-size:22px;margin-bottom:12px}
.cycling-signals-grid p{color:var(--muted);line-height:1.7}
.product-reference-card figure{background:white;aspect-ratio:1}
.product-reference-video video{object-fit:contain;min-height:0;max-height:650px}
@media(max-width:900px){.cycling-signals-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.cycling-signals-grid{grid-template-columns:1fr}}

/* The interactive hero is exclusive to the cycling backpack product. */
.cycling-demo{--demo-accent:#7ce8ae;width:100%;min-width:0;padding:28px;color:#f5f4ee;border:1px solid #43443e;border-radius:24px;background:linear-gradient(145deg,#222722,#171c20 55%,#161a1d);box-shadow:0 28px 70px #0005}
.cycling-demo[data-mode="left"],.cycling-demo[data-mode="right"]{--demo-accent:#edc477}
.cycling-demo[data-mode="brake"]{--demo-accent:#ff9c91}
.cycling-demo[data-mode="meteor"]{--demo-accent:#b8b4ff}
.cycling-demo-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:25px;font-size:9px;font-weight:650;letter-spacing:.12em;line-height:1.5}
.cycling-demo-eyebrow{color:#e0c48d}
.cycling-demo-power{color:#b3bab6;text-align:right;white-space:nowrap}
.cycling-demo-power span{color:#67736c;margin:0 4px}
.cycling-demo h2{margin:0 0 9px;font-size:clamp(1.45rem,2vw,1.85rem);font-weight:500;letter-spacing:-.04em;line-height:1.2}
.cycling-demo-intro{margin:0;color:#acb6b2;font-size:.82rem;line-height:1.65}
.cycling-demo-stage{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:220px;margin:25px -10px 0;padding:40px 0 30px;border:1px solid #ffffff0c;border-radius:14px;background:radial-gradient(ellipse at center,#354e452b,transparent 72%),#0d1317;overflow:hidden}
.cycling-demo-stage-label,.cycling-demo-stage-caption{position:absolute;left:15px;right:15px;color:#8f9e9a;font-size:9px;letter-spacing:.1em;line-height:1.5}
.cycling-demo-stage-label{top:16px}
.cycling-demo-stage-label span{margin:0 5px;color:#4e635a}
.cycling-demo-stage-caption{bottom:14px;letter-spacing:.02em;text-align:center;color:#81918b}
.cycling-demo-picture{position:relative;width:100%;aspect-ratio:1600/230;overflow:hidden;background:#fff}
.cycling-demo-picture img{position:absolute;display:block;width:100%;height:auto;max-width:none;top:-217.391304%;left:0}
.cycling-demo-picture canvas{position:absolute;display:block;inset:0;width:100%;height:100%;pointer-events:none}
.cycling-demo-state{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:19px 0;color:var(--demo-accent);font-size:.77rem;line-height:1.6}
.cycling-demo-state>div{display:flex;align-items:center;gap:8px}
.cycling-demo-dot{width:6px;height:6px;flex:none;background:var(--demo-accent);border-radius:50%}
.cycling-demo-pause{padding:6px 0 6px 8px;border:0;border-radius:4px;color:#d2d8d4;background:none;font:inherit;font-size:.68rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cycling-demo-pause:disabled{cursor:default;color:#8c9690;text-decoration:none}
.cycling-demo-controls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.cycling-demo-controls button{grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:10px 4px;border:1px solid #47524d;border-radius:9px;color:#dae0db;background:#252e2b;font:inherit;font-size:.74rem;line-height:1.5;cursor:pointer}
.cycling-demo-controls button:nth-last-child(-n+2){grid-column:span 3}
.cycling-demo-controls button:hover:not(:disabled){background:#35413a;border-color:#82958a}
.cycling-demo-controls button[aria-pressed="true"]{color:#0d2217;background:var(--demo-accent);border-color:var(--demo-accent)}
.cycling-demo-controls button[aria-pressed="true"]:hover:not(:disabled){color:#0d2217;background:var(--demo-accent);border-color:var(--demo-accent)}
.cycling-demo-controls button:disabled{cursor:default}
.cycling-demo button:focus-visible,.cycling-demo a:focus-visible{outline:3px solid #efd29b;outline-offset:4px}
.cycling-demo-icon{font-size:20px;line-height:1}
.cycling-demo-icon--brake{color:#fa8f80;font-size:12px}
.cycling-demo-controls button[aria-pressed="true"] .cycling-demo-icon--brake{color:currentColor}
.cycling-demo-swatch{display:block;width:12px;height:12px;flex:none;border-radius:50%;border:1px solid #ffffff59}
.cycling-demo-swatch--green{background:#36d780;border-color:#124a29}
.cycling-demo-swatch--meteor{background:conic-gradient(#ff6b8c,#c486f5,#66c8ff,#61df9e,#edd679,#ff6b8c)}
.cycling-demo-description{min-height:46px;margin:16px 0;color:#bdc8c2;font-size:.75rem;line-height:1.65}
.cycling-demo-motion-note{color:#e3c895;font-size:.7rem;line-height:1.6;margin:0 0 16px}
.cycling-demo-note{padding-top:17px;border-top:1px solid #ffffff14}
.cycling-demo-note p{margin:0 0 9px;color:#a1aea8;font-size:.67rem;line-height:1.65}
.cycling-demo-note a{display:inline-block;color:#dec58f;font-size:.7rem;line-height:1.6}
.cycling-demo-note a span{margin-left:6px}
.cycling-demo-noscript{color:#e3c895;font-size:.8rem;line-height:1.65}
.cycling-demo noscript img{max-width:100%;height:auto}
@media(min-width:981px){.product-hero-grid:has(.cycling-demo){grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);gap:clamp(35px,5vw,72px)}}
@media(max-width:980px){.cycling-demo{max-width:680px}.cycling-demo-stage{min-height:245px}}
@media(max-width:540px){.cycling-demo{padding:20px 16px;border-radius:18px}.cycling-demo-topline{font-size:8px;gap:8px;margin-bottom:22px}.cycling-demo-stage{min-height:185px;margin:20px 0 0}.cycling-demo h2{font-size:1.5rem}.cycling-demo-controls{gap:7px}.cycling-demo-controls button{font-size:.7rem;min-height:48px}.cycling-demo-stage-label,.cycling-demo-stage-caption{font-size:8px}.cycling-demo-description{min-height:60px}}