/* Hero illustration system.
   Shared Reciclao sage/graphite palette; no page-level selectors.
   Static decorative details are hidden from assistive technology.
   The dashboard is a CSS crop of the original screenshot, not invented data. */
.product-mockup,.pickup-mockup{
 --mock-sage:#a8c5b0;--mock-ink:#203d2b;--mock-paper:#f1f6f2;
 --mock-muted:#a1b5a8;--mock-border:rgba(168,197,176,.2);
 position:relative;min-width:0;isolation:isolate;
}
.product-mockup{padding:20px 12px 24px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.product-mockup::before{
 content:"";position:absolute;inset:8% -5% 6%;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at 55% 55%,#84bc9824,transparent 66%);
}
.product-device{grid-column:1/-1;width:96%;margin:auto;transform:perspective(1400px) rotateY(-5deg) rotateX(2deg);filter:drop-shadow(0 30px 28px #0006)}
.product-lid{position:relative;padding:16px 7px 9px;border:1px solid #85948a;border-radius:17px 17px 5px 5px;background:linear-gradient(140deg,#4a544d,#1b211d 50%,#354138);box-shadow:inset 0 1px 0 #d9e6dd66}
.product-camera{position:absolute;width:4px;height:4px;top:6px;left:calc(50% - 2px);background:#556a5e;border-radius:50%;box-shadow:0 0 0 2px #101a14}
.product-screen{border-radius:7px;overflow:hidden;background:#f7f9fa}
.product-toolbar{height:33px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #e1e8e3;background:#fff}
.product-toolbar>img{width:70px;height:23px;object-fit:contain}
.product-toolbar__dots{display:flex;gap:4px}
.product-toolbar__dots i{height:4px;width:4px;border-radius:50%;background:#c3d0c7}
.product-workspace{display:flex;align-items:stretch;padding-right:9px;background:#f7f9fa}
.product-sidebar{display:flex;flex-direction:column;align-items:center;width:38px;flex-shrink:0;gap:9px;padding:14px 5px 10px;border-right:1px solid #e8ede9;margin-right:9px;color:#81948a;font-size:10px}
.product-sidebar>span{display:grid;place-items:center;width:25px;height:25px;border-radius:6px}
.product-sidebar__active{background:#dceade;color:#31583e}
.product-sidebar .product-sidebar__bottom{margin-top:auto;color:#538766}
.product-dashboard{position:relative;align-self:center;flex:1;aspect-ratio:820/415;overflow:hidden;background:#f7f9fa}
/* Original capture: x=485..1305, y=70..485 at 1600x830. */
.product-dashboard>img{position:absolute;width:195.122%;max-width:none;height:auto;left:-59.146%;top:-16.867%;display:block}
.product-base{position:relative;width:109%;margin-left:-4.5%;height:12px;background:linear-gradient(#c4cec7 0%,#8c9990 32%,#d3dad5 38%,#7e8b81 80%,#46584b);border-radius:1px 1px 50% 50% / 1px 1px 10px 10px}
.product-base::before{content:"";position:absolute;top:0;left:42%;width:16%;height:4px;background:linear-gradient(#65736a,#a5b1a8);border-radius:0 0 8px 8px}
.product-feature{z-index:1;display:flex;align-items:center;gap:10px;min-width:0;padding:13px 15px;border-radius:13px;box-shadow:0 14px 30px -15px #000b}
.product-feature--cdf{grid-column:1/-1;justify-self:end;grid-row:1;transform:translateY(15px);margin-right:8px;background:var(--mock-paper);color:var(--mock-ink);border:1px solid #e5eee7}
.product-device{grid-row:2}
.product-feature--trace{grid-column:1/-1;justify-self:start;margin-left:14px;margin-top:15px;background:linear-gradient(135deg,#243c2d,#17281e);border:1px solid #a8c5b049;color:#ecf5ef}
.product-feature__icon{display:grid;place-items:center;width:33px;height:36px;flex-shrink:0;border-radius:9px;background:#a8c5b02b;color:#477857;font-size:14px}
.product-feature--trace .product-feature__icon{color:#b6d4c0}
.product-feature strong{display:block;font-size:12px;line-height:1.5;font-weight:700}
.product-feature small{display:block;color:#657e6d;font-size:10px;line-height:1.5}
.product-feature--trace small{color:#b3c7ba}
.product-feature__check{width:23px;height:23px;color:#4d8962;margin-left:15px}
.product-feature__steps{display:flex;align-items:center;margin-left:15px}
.product-feature__steps i{width:7px;height:7px;border:1px solid #b6d4c0;border-radius:50%;position:relative;background:#b6d4c0}
.product-feature__steps i+i{margin-left:13px}
.product-feature__steps i+i::before{content:"";position:absolute;right:7px;top:2px;width:12px;height:1px;background:#93b89f}
.product-feature__steps i:last-child{background:none}
.pickup-mockup{padding:12px 0}
.pickup-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 4px 17px}
.pickup-title{display:flex;align-items:center;gap:8px;color:#dce9e0;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pickup-title>span{height:6px;width:6px;border-radius:50%;background:var(--mock-sage)}
.pickup-caption{font-size:10px;color:var(--mock-muted)}
.pickup-scene{position:relative;padding-top:0}
.pickup-map{display:block;width:100%;height:auto;border:1px solid var(--mock-border);border-radius:20px}
.pickup-main{position:relative;margin:-36px 20px 0;padding:22px 24px;background:linear-gradient(135deg,#fff,var(--mock-paper));border:1px solid #e2ece5;border-radius:16px;box-shadow:0 16px 40px -20px #000b}
.pickup-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pickup-heading>span:first-child{font-weight:750;font-size:17px;letter-spacing:-.025em;color:var(--mock-ink)}
.pickup-status{padding:5px 8px;border-radius:6px;background:#a8c5b014;color:#b8d6c2;font-size:9px;font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}
.pickup-status--amber{color:#815b25;background:#f1e8d6}
.pickup-materials{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0 18px}
.pickup-materials>span{font-size:10px;color:#587160;padding:4px 9px;border-radius:5px;background:#e8f0ea}
.pickup-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid #dce6df;padding-top:14px}
.pickup-footer>span:first-child{font-size:11px;color:#657e6d}
.pickup-footer strong{font-size:23px;letter-spacing:-.04em;font-weight:700;color:#244c34}
.pickup-footer>span:last-child{display:flex;gap:6px;align-items:center;font-size:10px;font-weight:600;color:#416c50}
.pickup-secondary{margin:19px 20px 0}
.pickup-row{display:flex;align-items:center;gap:11px;padding:13px 0}
.pickup-row+.pickup-row{border-top:1px solid #a8c5b021}
.pickup-row__icon{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:9px;color:#b4d1bf;background:#a8c5b00d;font-size:12px}
.pickup-row>div{flex:1;min-width:0}
.pickup-row strong{display:block;font-size:12px;font-weight:600;color:#e0ebe4;line-height:1.4}
.pickup-row small{display:block;font-size:10px;color:var(--mock-muted);margin-top:3px}
.pickup-row__result{font-size:10px;color:#b4d1bf;text-align:right}
@media(max-width:600px){
 .product-mockup{padding:12px 0 24px}
 .product-device{transform:none}
 .product-feature--cdf{margin-right:5px}
 .product-feature--trace{margin-left:5px}
 .product-feature{padding:10px 12px}
 .product-toolbar{height:27px}
 .product-sidebar{gap:3px;padding-top:7px;width:30px;margin-right:5px}
 .product-sidebar>span{height:21px;width:21px}
 .product-sidebar__bottom{display:none!important}
 .pickup-main{padding:18px;margin:-22px 10px 0}
 .pickup-secondary{margin:12px 10px 0}
 .pickup-heading>span:first-child{font-size:15px}
 .pickup-row{gap:8px}
 .pickup-row strong{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.product-device{transform:none}}