/* Hero: Porchbird dashboard card (replaces the Fieldwork browser card) */
.hero-dash{container-type:inline-size;border:0;border-radius:14px;padding:0 1.6cqw 1.6cqw;background:#fff;transform:rotate(-3deg);box-shadow:0 26px 60px #0a1a6a66}
.dash-top{display:flex;gap:1.2cqw;align-items:center;height:5.4cqw}
.dash-top i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#ff5f57}.dash-top i:nth-child(2){background:#febc2e}.dash-top i:nth-child(3){background:#28c840}
.dash-body{display:grid;grid-template-columns:30% 1fr;gap:2.4cqw;background:#214BDB;border-radius:1.6cqw;padding:2.6cqw 2.4cqw 2.4cqw}
.dash-brand{display:flex;align-items:center;gap:1.4cqw;color:#fff;margin:0 0 3cqw}
.dash-brand img{width:5.6cqw;height:5.6cqw;border-radius:50%}
.dash-brand b{font-size:4.3cqw;letter-spacing:-.06em;line-height:1}.dash-brand b span{color:#FFD600}
.dash-side ul{list-style:none;margin:0;padding:0;display:grid;gap:1.2cqw}
.dash-side li{display:flex;align-items:center;gap:2cqw;color:#fff;font-size:2.7cqw;padding:1.5cqw 1.8cqw;border-radius:1.2cqw}
.dash-side li.on{background:#FFD600;color:#0f1a44;font-weight:700}
.dash-side svg{width:3.6cqw;height:3.6cqw;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dash-main{background:#fff;border-radius:1.4cqw;padding:3cqw 3cqw 1.6cqw;min-width:0;position:relative}
.dash-head{display:flex;justify-content:space-between;align-items:center;font-size:2.9cqw;font-weight:700;color:#0f1a44}
.dash-head em{font-style:normal;font-weight:400;font-size:2.2cqw;border:1px solid #dfe3ec;border-radius:1cqw;padding:.9cqw 1.6cqw;display:flex;align-items:center;gap:.8cqw}
.dash-head em svg{width:2cqw;height:2cqw;fill:none;stroke:#0f1a44;stroke-width:1.6}
.dash-num{display:flex;align-items:baseline;gap:2cqw;margin:1cqw 0 .6cqw}
.dash-num strong{font-size:7.6cqw;letter-spacing:-.05em;line-height:1;color:#0f1a44}
.dash-num span{font-size:3.6cqw;font-weight:700;color:#16a34a}
.dash-chart{position:relative}
.dash-chart>svg{display:block;width:100%;height:auto;aspect-ratio:280/150;overflow:visible}
.dash-grid path{stroke:#eceef4;stroke-width:1}
.dash-chart text{font-size:8px;fill:#7b8299;font-family:inherit}
.dash-grid text{text-anchor:end}.dash-x text{text-anchor:middle}
.dash-area{fill:url(#dashfill)}
.dash-line{fill:none;stroke:#FFD600;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.dash-dots circle{fill:#FFD600}
.dash-end{fill:#0f1a44;stroke:#FFD600;stroke-width:3.5}
.dash-pop{position:absolute;right:2%;top:-9%;background:#FFD600;color:#0f1a44;font-weight:800;font-size:3.6cqw;padding:.9cqw 2cqw;border-radius:1.4cqw;box-shadow:0 4px 12px #0f1a4426}
.dash-pop::after{content:"";position:absolute;right:16%;bottom:-1cqw;border:1.1cqw solid transparent;border-top-color:#FFD600;border-bottom:0}
/* sticker copy is longer than the old one */
.hero-sticker{width:136px;height:136px;font-size:15px;line-height:1.12}
@media (max-width:1100px){.hero-sticker{width:118px;height:118px;font-size:13.5px}}
@media (max-width:700px){.hero-sticker{width:104px;height:104px;font-size:12px}}
/* load-in: line draws, area and pop follow */
.pb-anim .dash-line{stroke-dasharray:1;stroke-dashoffset:1;animation:dash-draw 1.6s 1.1s cubic-bezier(.45,.1,.2,1) forwards}
.pb-anim .dash-area,.pb-anim .dash-dots,.pb-anim .dash-end{opacity:0;animation:dash-fade .6s 2.2s ease forwards}
.pb-anim .dash-pop{opacity:0;transform:scale(.4) rotate(-8deg);animation:dash-pop .5s 2.6s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes dash-draw{to{stroke-dashoffset:0}}
@keyframes dash-fade{to{opacity:1}}
@keyframes dash-pop{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pb-anim .dash-line,.pb-anim .dash-area,.pb-anim .dash-dots,.pb-anim .dash-end,.pb-anim .dash-pop{animation:none;opacity:1;stroke-dashoffset:0;transform:none}}
.hero-visual .photo-tag{display:none}
@media (max-width:1100px){.hero-visual .hero-sticker{top:auto;bottom:6px;right:-12px}}@media (max-width:700px){.hero-visual .hero-sticker{bottom:4px;right:-6px}}
@media (max-width:700px){.hero-visual .hero-sticker{bottom:-22px;width:96px;height:96px;font-size:11.5px}}
@media (max-width:700px){.hero-visual .visual-disclosure{max-width:68%}}
