/* how-we-work.html - page styles that followed the mobile layer in the original (generated). Loaded after responsive.css. */
/* additions to cities-css */
.wtg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px;margin-top:8px}
.wtg .card{padding:14px 14px 26px;display:flex;flex-direction:column}
.wtg .scrib{z-index:3}
.wtg .art{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/10;margin-bottom:22px}
.wtg .art svg{display:block;width:100%;height:100%}
.wtg .art.w1{background:#FCE6D4}
.wtg .art.w2{background:#F5E9D8}
.wtg .art.w3{background:#EAF1F4}
.wtg h3,.wtg p{padding:0 14px}
.wtg h3{margin-bottom:8px}
.wtg .dot{margin-left:14px}
@keyframes wtgbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes wtgpin{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}}
@keyframes wtgroll{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes wtgding{0%,70%,100%{opacity:0;transform:scale(.7)}76%,92%{opacity:1;transform:scale(1)}}
@keyframes wtgpop{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.12)}80%{transform:scale(.96)}}
.wtg .bob{animation:wtgbob 3.4s ease-in-out infinite}
.wtg .b2{animation-delay:-.9s}
.wtg .b3{animation-delay:-1.8s}
.wtg .b4{animation-delay:-2.6s}
.wtg .pin{animation:wtgpin 2.4s ease-in-out infinite}
.wtg .roll{animation:wtgroll 4s ease-in-out infinite}
.wtg .ding{transform-box:fill-box;transform-origin:50% 50%;animation:wtgding 3.2s ease-out infinite}
.wtg .pop{transform-box:fill-box;transform-origin:50% 50%;animation:wtgpop 3.6s ease-in-out infinite}
@media(max-width:980px){.wtg{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.wtg{grid-template-columns:1fr;gap:28px}}
@media(prefers-reduced-motion:reduce){.wtg .bob,.wtg .pin,.wtg .roll,.wtg .ding,.wtg .pop{animation:none}}

/* #ill-css */
  /* motion inside the illustrations (all CSS, stops for reduced motion) */
  @keyframes eebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .ill .bob{animation:eebob 3.4s ease-in-out infinite}
  .ill .b2{animation-delay:-.9s}.ill .b3{animation-delay:-1.8s}.ill .b4{animation-delay:-2.6s}
  @keyframes eepin{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}}
  .ill .pin{animation:eepin 2.4s ease-in-out infinite}
  .ill .pin.p2{animation-delay:-.6s}.ill .pin.p3{animation-delay:-1.2s}.ill .pin.p4{animation-delay:-1.8s}.ill .pin.p5{animation-delay:-.3s}.ill .pin.p6{animation-delay:-.9s}.ill .pin.p7{animation-delay:-1.5s}.ill .pin.p8{animation-delay:-2.1s}.ill .pin.p9{animation-delay:-.45s}
  @keyframes eehop{0%,62%,100%{transform:translateY(0) rotate(0)}72%{transform:translateY(-12px) rotate(-5deg)}84%{transform:translateY(0) rotate(2deg)}}
  .ill .hop{transform-box:fill-box;transform-origin:50% 100%;animation:eehop 3.6s ease-in-out infinite}
  .ill .hop.h2{animation-delay:-1.8s}
  @keyframes eeswing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
  .ill .swing{transform-box:fill-box;transform-origin:50% 0%;animation:eeswing 3s ease-in-out infinite}
  @keyframes eeding{0%,70%,100%{opacity:0;transform:scale(.7)}76%,92%{opacity:1;transform:scale(1)}}
  .ill .ding{transform-box:fill-box;transform-origin:0% 100%;animation:eeding 3.2s ease-out infinite}
  .ill .ding.d2{animation-delay:-1.1s}.ill .ding.d3{animation-delay:-2.2s}
  @keyframes eespin{to{transform:rotate(360deg)}}
  .ill .spin{transform-origin:160px 104px;animation:eespin 26s linear infinite}
  .ill .spin .tr{transform-box:fill-box;transform-origin:50% 50%;animation:eespin 26s linear infinite reverse}
  @keyframes eewave{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(-14deg)}75%{transform:rotate(6deg)}85%{transform:rotate(-10deg)}}
  .ill .wave{transform-box:fill-box;transform-origin:0% 92%;animation:eewave 2.8s ease-in-out infinite}
  @keyframes eesway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
  .ill .sway{transform-box:fill-box;transform-origin:50% 0%;animation:eesway 3.6s ease-in-out infinite}
  .ill .sway.s2{animation-delay:-1.2s}.ill .sway.s3{animation-delay:-2.4s}
  @keyframes eeflick{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.15,.9) rotate(4deg)}}
  .ill .flick{transform-box:fill-box;transform-origin:50% 100%;animation:eeflick 1.1s ease-in-out infinite}
  @keyframes eeroll{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
  .ill .roll{animation:eeroll 4s ease-in-out infinite}
  @keyframes eepop{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.12)}80%{transform:scale(.96)}}
  .ill .pop{transform-box:fill-box;transform-origin:50% 50%;animation:eepop 3.6s ease-in-out infinite}
  @keyframes eetwinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
  .ill .tw{transform-box:fill-box;transform-origin:50% 50%;animation:eetwinkle 2.2s ease-in-out infinite}
  .ill .tw.t2{animation-delay:-.7s}.ill .tw.t3{animation-delay:-1.4s}
  @keyframes eerise{0%{opacity:0;transform:translateY(10px)}30%,70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}
  .ill .rain{animation:eerise 4s ease-in-out infinite}
  @keyframes eedrive{0%{transform:translateX(-140px)}45%,60%{transform:translateX(0)}100%{transform:translateX(150px)}}
  .ill .drive{animation:eedrive 9s ease-in-out infinite}
  @keyframes eebusdrive{0%{transform:translateX(-200px)}100%{transform:translateX(200px)}}
  .ill .busdrive{animation:eebusdrive 12s linear infinite}
  @keyframes eegrow{to{stroke-dashoffset:0}}
  .ill .grow{stroke-dasharray:300;stroke-dashoffset:300;animation:eegrow 2.4s cubic-bezier(.22,.61,.36,1) forwards}
  @keyframes eenotif{0%,8%{opacity:0;transform:translateY(10px) scale(.92)}16%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-6px)}}
  .ill .notif{transform-box:fill-box;transform-origin:50% 50%;animation:eenotif 6s ease-in-out infinite}
  @keyframes eebell{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-14deg)}88%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}96%{transform:rotate(5deg)}}
  .ill .bell{transform-box:fill-box;transform-origin:50% 0%;animation:eebell 4s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){.ill *{animation:none !important}}

  /* 17 Sep 2026: pickup-day cards use the same illustrated-card layout as "where your things go" */
  .wtg .art.d1{background:#FCE6D4}.wtg .art.d2{background:#EAF1F4}.wtg .art.d3{background:#F5E9D8}