/* Proof-band benefit icons: two-tone line icons (orange primary, white secondary) with an ambient loop.
   Ported from notes/benefits-strip.html. Inline SVG + CSS keyframes only; js/benefit-icons.js adds .bi-live to the band
   while it is in view and the tab is visible. Without .bi-live (off screen, hidden tab, reduced motion, no JS) every
   icon sits on its finished, fully drawn frame. The row itself never moves; only transform, opacity and
   stroke-dashoffset change. Idle loop, not a hover effect: the icons are not interactive and have no hover state. */

/* Sizing and strokes */
.proof-band__list>li>svg.bi{width:44px;height:44px;flex:none;overflow:visible;color:var(--orange)}
.proof-band__list>li>svg.bi *{fill:none;stroke-linecap:round;stroke-linejoin:round}
.bi.b100{stroke-width:4.4}
.bi.b48{stroke-width:2.2;--u:.48}
.bi.b100{--u:1}
.bi .p{stroke:var(--orange,#f87000)}
.bi .s{stroke:#fff}
.bi .d,.bi .d2{stroke-dasharray:1;stroke-dashoffset:0}
.bi *{transform-box:fill-box;transform-origin:center}
.bi .m-hand{transform-box:view-box;transform-origin:58px 50px}
.bi .m-sweep{transform-box:view-box;transform-origin:62px 14px}
.bi .m-door{transform-origin:0 50%}
.bi .m-speed{transform-origin:100% 50%}
@media (max-width:640px){
  .proof-band__list>li>svg.bi{width:36px;height:36px}
}

/* Per-icon cycle length and starting phase (negative delay), so icons start on the resting frame and fire out of step. */
.proof-band__list>li>svg.bi{--d:5.4s;--ph:.7;--dl:calc(var(--d) * var(--ph) * -1)}
.proof-band__list>li:nth-child(2)>svg.bi{--d:5.2s;--ph:.8}
.proof-band__list>li:nth-child(3)>svg.bi{--d:5.8s;--ph:.56}
.proof-band__list>li:nth-child(4)>svg.bi{--d:5.4s;--ph:.7}
.proof-band__list>li:nth-child(5)>svg.bi{--d:6s;--ph:.62}
.proof-band__list>li:nth-child(6)>svg.bi{--d:5.6s;--ph:.76}

/* Loop. Timeline per cycle: 0-14% draw in, 20-50% the icon's own motion, rest to 92%, fade 92-96%. */
.bi-live svg.bi{animation:bi-fade var(--d) linear var(--dl) infinite}
.bi-live svg.bi .d{animation:bi-draw var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .d2{animation:bi-draw2 var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-pulse{animation:bi-pulse var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-sweep{animation:bi-sweep var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-spin{animation:bi-spin var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-hand{animation:bi-tick var(--d) cubic-bezier(.5,0,.2,1) var(--dl) infinite}
.bi-live svg.bi .m-rise{animation:bi-rise var(--d) ease-out var(--dl) infinite}
.bi-live svg.bi .m-lift{animation:bi-lift var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-wag{animation:bi-wag var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-tilt{animation:bi-tilt var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-pop{animation:bi-pop var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-shrink{animation:bi-shrink var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-door{animation:bi-door var(--d) ease-in-out var(--dl) infinite}
.bi-live svg.bi .m-sway{animation:bi-sway var(--d) ease-in-out calc(var(--dl) + var(--o,0s)) infinite}
.bi-live svg.bi .m-in{animation:bi-in var(--d) ease-out calc(var(--dl) + var(--o,0s)) infinite}
.bi-live svg.bi .m-speed{animation:bi-speed var(--d) ease-out calc(var(--dl) + var(--o,0s)) infinite}

@keyframes bi-fade{0%{opacity:0}3%{opacity:1}92%{opacity:1}96%,100%{opacity:0}}
@keyframes bi-draw{0%{stroke-dashoffset:1}14%,100%{stroke-dashoffset:0}}
@keyframes bi-draw2{0%,6%{stroke-dashoffset:1}22%,100%{stroke-dashoffset:0}}
@keyframes bi-pulse{0%,20%{transform:scale(1)}28%{transform:scale(1.07)}36%,100%{transform:scale(1)}}
@keyframes bi-sweep{0%,20%{transform:rotate(0)}28%{transform:rotate(-14deg)}38%{transform:rotate(10deg)}46%{transform:rotate(-6deg)}52%,100%{transform:rotate(0)}}
@keyframes bi-spin{0%,20%{transform:rotate(0)}36%{transform:rotate(18deg)}50%,100%{transform:rotate(0)}}
@keyframes bi-tick{0%,20%{transform:rotate(0)}46%,100%{transform:rotate(360deg)}}
@keyframes bi-rise{0%{transform:translateY(calc(var(--u) * 10px))}22%,100%{transform:translateY(0)}}
@keyframes bi-lift{0%,20%{transform:translateY(0)}34%{transform:translateY(calc(var(--u) * -6px))}48%,100%{transform:translateY(0)}}
@keyframes bi-wag{0%,20%{transform:rotate(0)}28%{transform:rotate(-10deg)}38%{transform:rotate(10deg)}48%,100%{transform:rotate(0)}}
@keyframes bi-tilt{0%,20%{transform:rotate(0)}34%{transform:rotate(-9deg)}48%,100%{transform:rotate(0)}}
@keyframes bi-pop{0%,20%{transform:scale(1)}32%{transform:scale(1.18)}44%,100%{transform:scale(1)}}
@keyframes bi-shrink{0%,20%{transform:scale(1)}34%{transform:scale(.86)}48%,100%{transform:scale(1)}}
@keyframes bi-door{0%,20%{transform:scaleX(1)}34%{transform:scaleX(.3)}50%,100%{transform:scaleX(1)}}
@keyframes bi-sway{0%,20%{transform:translateX(0)}30%{transform:translateX(calc(var(--u) * -4px))}42%{transform:translateX(calc(var(--u) * 4px))}52%,100%{transform:translateX(0)}}
@keyframes bi-in{0%,12%{transform:scale(0);opacity:0}30%,100%{transform:scale(1);opacity:1}}
@keyframes bi-speed{0%,12%{transform:translateX(calc(var(--u) * 14px));opacity:0}30%,100%{transform:translateX(0);opacity:1}}

/* Reduced motion (system setting or the site's own Reduce motion option): finished frame, no loop. */
@media (prefers-reduced-motion:reduce){
  .bi-live svg.bi,.bi-live svg.bi *{animation:none!important}
}
.a11y-motion .bi-live svg.bi,.a11y-motion .bi-live svg.bi *{animation:none!important}
.bi--uv .m-wag{transform-box:view-box;transform-origin:50px 54px}

/* Band layout around the larger icons. Desktop keeps one row; tablet reuses the phone grid so 44px icons never starve the text. */
@media(min-width:1200px){
  .proof-band{padding-block:18px}
  .proof-band .proof-band__list{grid-template-columns:1.2fr repeat(5,minmax(0,1fr));gap:16px}
  .proof-band .proof-band__list:has(.bi--quick){grid-template-columns:1.1fr repeat(4,minmax(0,1fr)) 1.7fr}
}
@media(min-width:768px) and (max-width:1199.98px){
  .proof-band .proof-band__list{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 10px;align-items:start}
  .proof-band .proof-band__list>li{flex-direction:column;text-align:center;gap:6px;overflow-wrap:anywhere}
  .proof-band .proof-band__list>.proof-band__rating{grid-column:span 3;align-self:center}
  .proof-band .proof-band__list>li:nth-child(2){align-self:center}
  .proof-band .proof-band__rating a{white-space:normal}
}