/* reseller band (2026-11-15): HTML5 explainer. Source of truth: /home/ej52gsed/modules-src/reseller/ ; ws-module-sync copies this file to /assets/modules/reseller-band.css and re-stamps every page. */
html body .wsm-reseller{background:#f1e7d3;padding:clamp(18px,2.2vw,30px) 0;line-height:1.4}
html body .wsm-reseller .rsb-wrap{max-width:1370px;margin:0 auto;box-sizing:border-box}
@media(max-width:1410px){html body .wsm-reseller .rsb-wrap{padding:0 20px}}
html body .wsm-reseller .rsb-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(20px,3vw,44px);align-items:center;background:#fbf3e4;border:2px solid #680000;border-radius:16px;padding:clamp(18px,2.6vw,34px)}
html body .wsm-reseller .rsb-kicker{margin:0 0 6px;font:800 .85rem/1 'Source Sans 3',Arial,sans-serif;color:#680000;letter-spacing:.04em;text-transform:none}
html body .wsm-reseller .rsb-copy h2,html body.ws-mod .wsm-reseller .rsb-copy h2{margin:0 0 .45em!important;font-family:var(--f-display,'Bricolage Grotesque',sans-serif)!important;font-weight:800!important;font-size:clamp(1.7rem,2.6vw,2.4rem)!important;line-height:1.12!important;color:#680000!important}
html body .wsm-reseller .rsb-text{margin:0 0 18px;font-size:1.15rem;line-height:1.6;color:#1b1b1b;max-width:34em}
html body .wsm-reseller .rsb-actions{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
html body .wsm-reseller a.rsb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:10px 28px;border-radius:999px;font-weight:800;font-size:1.08rem;text-decoration:none;color:#0B1F3A}
html body .wsm-reseller a.rsb-call{font-weight:700;color:#680000;text-decoration:underline;text-underline-offset:3px}
html body .wsm-reseller .rsb-fig{margin:0;background:#0B1F3A;border:3px solid #F5B800;border-radius:18px;padding:clamp(12px,1.6vw,20px);box-shadow:0 16px 36px rgba(11,31,58,.28);background-image:linear-gradient(#16335c 1px,transparent 1px),linear-gradient(90deg,#16335c 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px}
html body .wsm-reseller .rsb-svg{display:block;width:100%;height:auto}
html body .wsm-reseller .rsb-svg *{transform-box:fill-box;transform-origin:center}
html body .wsm-reseller .rsb-steps{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
html body .wsm-reseller .rsb-steps li{list-style:none!important;display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border:2px solid #2d4d7c;border-radius:12px;color:#fff;background:rgba(11,31,58,.55)}
html body .wsm-reseller .rsb-steps b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#F5B800;color:#0B1F3A;font:800 .9rem/1 'Source Sans 3',Arial,sans-serif}
html body .wsm-reseller .rsb-steps strong{display:block;font:800 1rem/1.2 'Source Sans 3',Arial,sans-serif;color:#fff}
html body .wsm-reseller .rsb-steps small{display:block;margin-top:2px;font:600 .9rem/1.25 'Source Sans 3',Arial,sans-serif;color:#c9d6ea}
@media(max-width:900px){html body .wsm-reseller .rsb-box{grid-template-columns:1fr}html body .wsm-reseller .rsb-steps{grid-template-columns:1fr}}
/* ---- 12 s loop: customer -> we build -> you get paid ---- */
html body .wsm-reseller .rsb-js:not(.rsb-on) *{animation-play-state:paused!important}
@keyframes rsbBub{0%,2%{opacity:0;transform:scale(.4)}6%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.4)}}
@keyframes rsbN1{0%,22%{opacity:1}26%,96%{opacity:0}100%{opacity:1}}
@keyframes rsbN2{0%,20%{opacity:0}24%,44%{opacity:1}48%,100%{opacity:0}}
@keyframes rsbN3{0%,56%{opacity:0}60%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes rsbPkt{0%,8%{opacity:0;transform:translateX(0)}9%{opacity:1;transform:translateX(0)}22%{opacity:1;transform:translateX(89px)}24%{opacity:0;transform:translateX(89px)}44%{opacity:0;transform:translateX(213px)}45%{opacity:1;transform:translateX(213px)}58%{opacity:1;transform:translateX(302px)}60%,100%{opacity:0;transform:translateX(302px)}}
@keyframes rsbFlow{to{stroke-dashoffset:-44}}
@keyframes rsbSpin{to{transform:rotate(360deg)}}
@keyframes rsbL1{0%,26%{transform:scaleX(0)}30%,92%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes rsbL2{0%,30%{transform:scaleX(0)}34%,92%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes rsbL3{0%,34%{transform:scaleX(0)}38%,92%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes rsbLive{0%,44%{opacity:0;transform:scale(.3)}48%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.3)}}
@keyframes rsbC1{0%,62%{opacity:0;transform:translateY(-40px)}66%{opacity:1;transform:translateY(0)}68%{transform:translateY(-3px)}70%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}
@keyframes rsbC2{0%,68%{opacity:0;transform:translateY(-40px)}72%{opacity:1;transform:translateY(0)}74%{transform:translateY(-3px)}76%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}
@keyframes rsbC3{0%,74%{opacity:0;transform:translateY(-40px)}78%{opacity:1;transform:translateY(0)}80%{transform:translateY(-3px)}82%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}
@keyframes rsbPill{0%,64%{opacity:0;transform:translateY(8px)}68%,92%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes rsbS1{0%,22%{background:rgba(245,184,0,.2);border-color:#F5B800}26%,96%{background:rgba(11,31,58,.55);border-color:#2d4d7c}100%{background:rgba(245,184,0,.2);border-color:#F5B800}}
@keyframes rsbS2{0%,20%{background:rgba(11,31,58,.55);border-color:#2d4d7c}24%,44%{background:rgba(245,184,0,.2);border-color:#F5B800}48%,100%{background:rgba(11,31,58,.55);border-color:#2d4d7c}}
@keyframes rsbS3{0%,56%{background:rgba(11,31,58,.55);border-color:#2d4d7c}60%,92%{background:rgba(245,184,0,.2);border-color:#F5B800}96%,100%{background:rgba(11,31,58,.55);border-color:#2d4d7c}}
html body .wsm-reseller .rsb-bub{animation:rsbBub 12s infinite}
html body .wsm-reseller .rsb-n1{animation:rsbN1 12s infinite}
html body .wsm-reseller .rsb-n2{animation:rsbN2 12s infinite}
html body .wsm-reseller .rsb-n3{animation:rsbN3 12s infinite}
html body .wsm-reseller .rsb-pkt{animation:rsbPkt 12s infinite}
html body .wsm-reseller .rsb-flow{animation:rsbFlow 1s linear infinite}
html body .wsm-reseller .rsb-gear{animation:rsbSpin 4s linear infinite}
html body .wsm-reseller .rsb-l1,html body .wsm-reseller .rsb-l2,html body .wsm-reseller .rsb-l3{transform-origin:left center!important}
html body .wsm-reseller .rsb-l1{animation:rsbL1 12s infinite}
html body .wsm-reseller .rsb-l2{animation:rsbL2 12s infinite}
html body .wsm-reseller .rsb-l3{animation:rsbL3 12s infinite}
html body .wsm-reseller .rsb-live{animation:rsbLive 12s infinite}
html body .wsm-reseller .rsb-c1{animation:rsbC1 12s infinite}
html body .wsm-reseller .rsb-c2{animation:rsbC2 12s infinite}
html body .wsm-reseller .rsb-c3{animation:rsbC3 12s infinite}
html body .wsm-reseller .rsb-pill{animation:rsbPill 12s infinite}
html body .wsm-reseller .rsb-s1{animation:rsbS1 12s infinite}
html body .wsm-reseller .rsb-s2{animation:rsbS2 12s infinite}
html body .wsm-reseller .rsb-s3{animation:rsbS3 12s infinite}
@media(prefers-reduced-motion:reduce){html body .wsm-reseller .rsb-fig *{animation:none!important}html body .wsm-reseller .rsb-pkt{display:none}}
html body .wsm-reseller .rsb-steps li::marker{content:none}
html body .wsm-reseller .rsb-steps li::before{content:none!important}