/* Labels: no text lives in this file or in the SVGs; all copy is in index.html (data-label hooks, see offers.json). */
/* ===== Boom-inspired additions: trust strip + animated process (CSS/SVG only) ===== */
/* theme vars (dark default; .how.light overrides) */
.how{--rl:rgba(245,241,232,.14);--nb:#0D1324;--nbd:rgba(245,241,232,.22);--ntx:rgba(245,241,232,.72);--nlit:#fff;--nglow:rgba(79,107,254,.5);
  --db:rgba(245,241,232,.05);--di:rgba(245,241,232,.16);--ds:rgba(245,241,232,.42)}
.how.light{--rl:#E3DED2;--nb:#fff;--nbd:#D0D5DD;--ntx:#475467;--nlit:#082658;--nglow:rgba(79,107,254,.28);
  --db:#F4F2EC;--di:#DCD7CB;--ds:#98A2B3}
.how .tier.paid{--db:rgba(245,241,232,.07);--di:rgba(245,241,232,.2);--ds:rgba(245,241,232,.5)}

/* trust strip */
.trust{position:relative;z-index:1;margin-top:96px}
.trust-in{list-style:none;margin:0 auto;padding:0 32px;max-width:var(--wrap);display:grid;grid-template-columns:1.25fr 1fr 1fr 1.15fr}
.trust li{display:flex;gap:14px;align-items:flex-start;padding:26px 28px 4px;border-top:1px solid rgba(245,241,232,.14)}
.trust li+li{border-left:1px solid rgba(245,241,232,.10)}
.trust li:first-child{padding-left:0}
.trust svg{flex:none;margin-top:3px}
.trust b{display:block;font:700 19px/1.3 var(--display);color:#F5F1E8;letter-spacing:-.01em}
.trust span{display:block;font-size:15px;line-height:1.45;color:rgba(245,241,232,.7);margin-top:4px}
.trust a{text-decoration:none;color:inherit}
.trust a:hover b{text-decoration:underline;text-underline-offset:3px}
.trust a:focus-visible{outline:2px solid #6F86FF;outline-offset:4px;border-radius:4px}
.hero{padding-bottom:64px}

/* process rail (desktop) */
.proc{position:relative;margin-top:64px}
.proc .tiers{margin-top:0}
.rail{position:relative;height:40px;margin:0 0 22px}
.run{position:absolute;left:60px;width:66.6667%;top:0;height:40px}
.run .ln,.run .fill{position:absolute;left:0;right:0;top:19px;height:2px;border-radius:2px;background:var(--rl)}
.run .fill{background:var(--slice);transform-origin:left;transform:scaleX(1)}
.nd{position:absolute;top:0;min-width:40px;height:40px;padding:0 11px;translate:-50% 0;white-space:nowrap;border-radius:20px;display:grid;place-items:center;
  font:600 14px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--nlit);
  background:linear-gradient(var(--nb),var(--nb)) padding-box,var(--slice) border-box;border:1.5px solid transparent;box-shadow:0 0 22px -4px var(--nglow)}
.nd:nth-child(3){left:0}.nd:nth-child(4){left:50%}.nd:nth-child(5){left:100%}
.mv{position:absolute;inset:0;pointer-events:none;transform:translateX(100%)}
.tok{position:absolute;left:-22px;top:6px;width:44px;height:28px;border-radius:8px;background:linear-gradient(#111A33,#111A33) padding-box,var(--slice) border-box;border:1.5px solid transparent;
  box-shadow:0 8px 20px -6px rgba(79,107,254,.6);opacity:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 9px}
.tok i{display:block;height:3px;border-radius:2px;background:rgba(245,241,232,.75)}
.tok i+i{width:60%;background:rgba(245,241,232,.4)}

/* mini diagrams */
.dg{width:100%;max-width:300px;height:auto;margin:4px 0 24px;overflow:visible}
.dg .b{fill:var(--db)}.dg .i{fill:var(--di)}.dg .s{stroke:var(--ds)}.dg .g{fill:url(#tgSlice)}.dg .m{fill:var(--ds);fill-opacity:.6}.dg .gs{stroke:url(#tgSlice)}
.dg *{transform-box:fill-box}
.d1 .hl,.d1 .ck{opacity:1}.d1 .sc{opacity:0}
.d2 .bar{transform-origin:left center}
.d3 .dot{opacity:1;transform:translateX(120px)}
.d3 .gear{transform-origin:center}
@media (min-width:1081px){.proc .tier .num{display:none}}
@media (max-width:1080px){.rail{display:none}}

/* armed (JS on, motion allowed) but not yet in view: start states */
.proc.armed:not(.play) .run .fill{transform:scaleX(0)}
.proc.armed:not(.play) .nd{background:linear-gradient(var(--nb),var(--nb)) padding-box,linear-gradient(var(--nbd),var(--nbd)) border-box;box-shadow:none;color:var(--ntx)}
.proc.armed:not(.play) .mv{transform:none}
.proc.armed:not(.play) .d1 .hl,.proc.armed:not(.play) .d1 .ck{opacity:0}
.proc.armed:not(.play) .d2 .bar{transform:scaleX(0)}
.proc.armed:not(.play) .d3 .dot{opacity:0}

/* play: one 2.6s pass through the steps, then step 3 keeps a slow loop while visible */
.proc.play .run .fill{animation:pFill 2.6s cubic-bezier(.4,0,.2,1) both}
.proc.play .mv{animation:pMove 2.6s cubic-bezier(.4,0,.2,1) both}
.proc.play .tok{animation:pTok 2.6s ease both}
.proc.play .nd{animation:pLit .45s ease both}
.proc.play .nd:nth-child(3){animation-delay:.05s}.proc.play .nd:nth-child(4){animation-delay:1.05s}.proc.play .nd:nth-child(5){animation-delay:2.35s}
.proc.play .d1 .sc{animation:pScan 1.3s cubic-bezier(.4,0,.2,1) .15s both}
.proc.play .d1 .hl{animation:pFade .4s ease 1.25s both}
.proc.play .d1 .ck{animation:pPop .35s cubic-bezier(.3,1.6,.6,1) 1.45s both}
.proc.play .d2 .bar{animation:pGrow .7s cubic-bezier(.2,.8,.2,1) both}
.proc.play .d2 .bar:nth-of-type(1){animation-delay:1.1s}.proc.play .d2 .bar:nth-of-type(2){animation-delay:1.18s}.proc.play .d2 .bar:nth-of-type(3){animation-delay:1.26s}.proc.play .d2 .bar:nth-of-type(4){animation-delay:1.34s}.proc.play .d2 .bar:nth-of-type(5){animation-delay:1.42s}
.proc.play .d3 .dot{animation:pRun 3.2s cubic-bezier(.45,0,.55,1) 2.4s infinite both}
.proc.play .d3 .gear{animation:pSpin 3.2s linear 2.4s infinite}
.proc.play .d3 .end{animation:pPing 3.2s ease 2.4s infinite}
.proc.play:not(.live) .d3 *{animation-play-state:paused}
@media (max-width:1080px){.proc.play .d3 .dot,.proc.play .d3 .gear,.proc.play .d3 .end{animation-iteration-count:2}}

@keyframes pFill{0%{transform:scaleX(0)}40%,55%{transform:scaleX(.5)}92%,100%{transform:scaleX(1)}}
@keyframes pMove{0%{transform:none}40%,55%{transform:translateX(50%)}92%,100%{transform:translateX(100%)}}
@keyframes pTok{0%{opacity:0;transform:scale(.7)}8%{opacity:1;transform:none}88%{opacity:1;transform:none}100%{opacity:0;transform:scale(.6)}}
@keyframes pLit{from{background:linear-gradient(var(--nb),var(--nb)) padding-box,linear-gradient(var(--nbd),var(--nbd)) border-box;box-shadow:none;color:var(--ntx);transform:scale(.92)}to{transform:none}}
@keyframes pScan{0%{opacity:0;transform:translateY(0)}12%{opacity:1}45%{transform:translateY(72px)}80%{opacity:1;transform:translateY(24px)}100%{opacity:0;transform:translateY(24px)}}
@keyframes pFade{from{opacity:0}to{opacity:1}}
@keyframes pPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes pGrow{from{transform:scaleX(0)}to{transform:none}}
@keyframes pRun{0%{opacity:0;transform:translateX(0)}8%{opacity:1}46%,54%{transform:translateX(120px)}92%{opacity:1;transform:translateX(240px)}100%{opacity:0;transform:translateX(240px)}}
@keyframes pSpin{to{transform:rotate(180deg)}}
@keyframes pPing{0%,86%{stroke-opacity:.0}92%{stroke-opacity:1}100%{stroke-opacity:0}}

/* paid callout label */
.incl .incl-h{display:block;padding:0 0 6px;border:0;font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:rgba(245,241,232,.7)}

@media (max-width:1080px){
  .trust-in{grid-template-columns:1fr 1fr}
  .trust li:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:640px){
  .trust{margin-top:56px}
  .trust-in{grid-template-columns:1fr;padding:0 20px}
  .trust li,.trust li:nth-child(3){padding:16px 0;border-left:0}
  .trust b{font-size:17px}
  .dg{max-width:260px;margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){.proc *,.proc *::before{animation:none!important;transition:none!important}}
.how{overflow-x:hidden;overflow-x:clip}
@media (min-width:1081px){
  .trust{margin-top:72px}
  .trust-in{grid-template-columns:repeat(4,1fr)}
  .trust li{flex-direction:column;gap:12px;padding:24px 24px 4px}
  .trust li:first-child{padding-left:0}
  .trust b{font-size:18px;text-wrap:balance}
  .trust svg{margin-top:0}
}