/* D-049 hero: shared pieces. The opportunity card (.opp) is the illustrative product object. */

.hero[hidden]{display:none}
.hv{background:radial-gradient(70% 60% at 74% 30%,#16271d 0%,rgba(11,18,14,0) 70%),#0b120e}
.hv .hero-copy{max-width:720px}
.hero h1>span{text-wrap:balance}
.hero-sub{text-wrap:pretty}

/* html.hv-motion (head script, unless reduced motion) pre-hides what the entrance reveals, so the first
   painted frame is the entrance's first frame. The values match the starting state in pipeline.js. */
.hv-motion .hero [data-hero-in]:not(h1>span,.hero-sub){opacity:0}
.hv-motion .hero :is(h1>span,.hero-sub)[data-hero-in]{transform:translateY(16px)}
.hv-motion .hvp-pipe{clip-path:inset(0 100% 0 0)}
.hv-motion .hvp-gate,.hv-motion .hvp-label,.hv-motion .hvp-deck,.hv-motion .hvp-tally,.hv-motion .hvp-intake{opacity:0}
.hv-motion .hvp-tether{transform:scaleY(0)}
/* Failsafe: if the hero script never runs, html.hv-wait stays and everything appears after 3.5s. */
.hv-wait :is(.hero [data-hero-in],.hvp-pipe,.hvp-gate,.hvp-label,.hvp-deck,.hvp-tally,.hvp-tether,.hvp-intake){animation:hv-failsafe .4s 3.5s both}
@keyframes hv-failsafe{to{opacity:1;transform:none;clip-path:none}}

/* Illustrative opportunity card */
.opp{width:360px;padding:20px 22px;border-radius:16px;background:#fbfcf9;color:#17201d;box-shadow:0 40px 80px -30px #000,0 0 0 1px rgba(255,255,255,.06)}
.opp-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.opp-status{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:999px;background:#e8f3db;color:#2f5a22;font-size:12px;font-weight:700;white-space:nowrap}
.opp-status::before{content:'';width:7px;height:7px;border-radius:50%;background:#4f9a2f}
.opp-slots{font-size:12px;color:#5f6c63;white-space:nowrap}
.opp-slots b{color:#17201d}
.opp-title{margin-top:16px;font-size:27px;line-height:1.1;letter-spacing:-.045em;font-weight:600}
.opp-area{margin-top:6px;font-size:13px;color:#5f6c63}
.opp-scope{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:14px;padding-top:12px;border-top:1px solid #e3e8df;font-size:13px;line-height:1.5;color:#5f6c63}
.opp-scope b{color:#17201d;font-size:17px;font-weight:650;letter-spacing:-.02em}
.opp-proof{list-style:none;margin:12px 0 0;padding:0}
.opp-proof li{display:flex;align-items:center;gap:9px;padding:3px 0;font-size:13px;line-height:1.4;font-weight:600;color:#2e3a33}
.opp-proof i{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:#c0ee83}
.opp-tick{width:10px;height:10px;fill:none;stroke:#17201d;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.opp-sealed{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:10px;background:#0d1511;color:#cbd8cd;font-size:12px;font-weight:600;line-height:1.4}
.opp-lock{width:16px;height:16px;flex:none;fill:none;stroke:#c0ee83;stroke-width:1.8}