/* Canopy is reserved for the hero. Product screens carry the lower sections. */
.hero{height:970px;background:#d9e9ed;color:#152f25;isolation:isolate;display:flow-root}
.hero .photo{background-image:url('assets/hero-canopy.png');background-position:center center;background-size:cover;transform-origin:50% 50%;animation:canopy-arrival 1.6s cubic-bezier(.2,.6,.25,1) both;z-index:-1}
.hero .photo:after{background:linear-gradient(0deg,#eff1e508,transparent 25%)}
.hero .nav{width:calc(100% - 128px);max-width:1408px;height:74px;margin:24px auto 0;padding:0 25px;border:1px solid #ffffff8a;border-radius:11px;background:#f4f3e9e8;box-shadow:0 6px 32px #244b3310;backdrop-filter:blur(12px);z-index:5}
.hero .brand{background:#173d32;width:137px;height:36px}
.hero .links{color:#34503e;margin-left:65px;font-size:12px;gap:36px}
.hero .links a:hover{color:#0b281b}
.hero .nav-cta{background:#173d32;color:#f4f3e9;border-color:#173d32;font-size:11px;padding:12px 16px;gap:20px}
.hero .nav-cta:hover{background:#244e3b}
.hero .content{width:calc(100% - 80px);max-width:1030px;margin:0 auto;text-align:center;padding-top:101px;animation:content-arrival .9s .12s cubic-bezier(.2,.6,.25,1) both}
.hero .eyebrow{justify-content:center;font-size:10px;letter-spacing:1.45px;color:#365a43}
.hero .eyebrow:before{background:#638052;box-shadow:none}
.hero h1{font-size:68px;font-weight:450;line-height:1.1;letter-spacing:-3.25px;margin:25px 0 26px;color:#142e23}
.hero h1 span{color:#173d32}
.hero .intro{color:#3c594a;font-size:15px;line-height:1.85;max-width:655px;margin:0 auto}
.hero .main-cta{background:#173d32;color:#f4f3e9;box-shadow:0 3px 8px #173d321a;margin-top:28px;gap:35px;padding:17px 21px}
.hero .main-cta:hover{background:#254f3c}
.hero .status{justify-content:center;color:#46654e;font-size:10px;margin-top:18px}
.hero .status:before{background:#6b845b}
.product-wrap{margin-top:-155px}
.under{background:#f4f3e9}
/* Actual Figma prototype exports, displayed as images rather than simulated controls. */
.product-shot{margin:0;min-width:0}
.shot-label{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;font-weight:550;color:#46643c;margin:0 0 13px}
.shot-label>span{font-size:9px;font-weight:400;color:#728465;letter-spacing:.5px;text-transform:uppercase}
.screen-expand{display:block;position:relative;width:100%;padding:0;border:1px solid #cfdac4;border-radius:10px;background:#f4f3e9;box-shadow:0 16px 40px #173d3210;overflow:hidden;text-align:left}
.screen-expand img{display:block;width:100%;height:auto}
.expand-hint{position:absolute;right:13px;bottom:13px;display:flex;align-items:center;gap:7px;background:#173d32ed;color:#f4f3e9;padding:8px 11px;border-radius:5px;font-size:9px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}
.expand-hint .icon{width:12px;height:12px}
.screen-expand:hover .expand-hint,.screen-expand:focus-visible .expand-hint{opacity:1;transform:translateY(0)}
.product-shot figcaption{font-size:10px;line-height:1.7;color:#6c7b5f;margin-top:12px}
.outcome-layout{grid-template-columns:1fr 1fr;gap:66px 82px;align-items:center}
.outcome-copy h2{font-size:49px;line-height:1.16}
.outcome-copy>p{font-size:14px}
.outcome .features{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;align-self:start}
.outcome .feature,.outcome .feature:first-child{padding:26px 0 0;border-top:1px solid #d6ddce;gap:17px}
.outcome .feature h3{font-size:18px;line-height:1.45}
.outcome .feature p{font-size:13px;line-height:1.85}
.outcome .feature>.icon{width:20px;height:20px}
/* Owner-approved permissions take the place of the second forest photograph. */
.near:after{display:none}
.near .near-layout{display:grid;grid-template-columns:1fr 1fr;gap:82px;align-items:center;padding-top:105px;padding-bottom:105px}
.near-copy{grid-column:2;grid-row:1;max-width:none}
.near h2{font-size:47px;letter-spacing:-1.7px;line-height:1.16;max-width:590px}
.near-copy>p{font-size:14px;line-height:1.9;margin-top:25px;max-width:580px}
.near-copy .support{font-size:11px;line-height:1.85;margin-top:25px;padding-top:22px}
.permissions-screen{grid-column:1;grid-row:1}
.permissions-screen .shot-label{color:#dbe8c9;font-size:12px;margin-bottom:15px}
.permissions-screen .shot-label>span{color:#aabe95}
.permissions-screen .screen-expand{border-color:#e0edcb3d;box-shadow:0 20px 50px #071e163d}
.permissions-screen figcaption{color:#bacda9}
.permissions-screen .expand-hint{background:#f1f5e9f2;color:#173d32}
/* A quiet closing surface, with no repeated canopy image. */
.closing{background:linear-gradient(115deg,#e0e8d3,#f4f3e9 68%);color:#173d32;border-top:1px solid #d6ddce}
.closing:before,.closing:after{display:none}
.closing h2{font-size:64px;letter-spacing:-2.6px}
.closing h2 span{color:#678254}
.closing p{color:#5b7150}
.closing .main-cta{background:#173d32;color:#f4f3e9}
.closing .main-cta:hover{background:#254f3c}
/* Native modal supports readable full-size screen viewing and Escape. */
.screen-dialog{width:min(1440px,calc(100vw - 48px));max-width:none;max-height:calc(100vh - 48px);padding:18px;border:1px solid #c8d6bc;border-radius:13px;background:#f4f3e9;color:#173d32;box-shadow:0 30px 90px #071d195c;overscroll-behavior:contain}
.screen-dialog::backdrop{background:#102b22bc;backdrop-filter:blur(5px)}
.dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:15px}
.dialog-bar p{font-size:12px;margin:0;font-weight:550}
.dialog-close{display:flex;gap:13px;align-items:center;background:#e2ead8;color:#173d32;font-size:11px;border-radius:5px;padding:9px 12px}
.dialog-close span{font-size:20px;line-height:1}
.dialog-image{display:block;width:100%;height:auto;max-height:calc(100vh - 180px);object-fit:contain}
.dialog-caption{font-size:11px;line-height:1.7;margin:12px 0 0;color:#647859}
@keyframes canopy-arrival{from{transform:scale(1.045)}to{transform:scale(1)}}
@keyframes content-arrival{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1800px){.hero{height:1020px}.hero .content{padding-top:122px}}
@media(max-width:1250px){.hero{height:920px}.hero .nav{width:calc(100% - var(--gutter)*2);padding:0 20px}.hero .links{gap:25px;margin-left:30px}.hero .content{padding-top:106px;max-width:940px}.hero h1{font-size:61px}.outcome-layout,.near .near-layout{gap:55px}.outcome-copy h2{font-size:43px}.outcome .features{gap:30px}.near h2{font-size:41px}.near .near-layout{padding:90px 0}}
@media(max-width:950px){.hero .nav{width:calc(100% - 64px)}.hero .links{gap:21px;margin-left:0}.hero .content{width:calc(100% - 64px);padding-top:110px}.hero h1{font-size:56px;letter-spacing:-2.5px}.hero .intro{max-width:585px;font-size:14px}.hero{height:900px}.outcome-layout{grid-template-columns:1fr;gap:38px}.outcome-copy h2{max-width:670px}.outcome-copy>p{max-width:620px}.outcome-screen{max-width:750px}.outcome .features{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.outcome .feature{display:block}.outcome .feature>.icon{margin:0 0 17px}.near .near-layout{grid-template-columns:1fr;gap:42px}.near-copy,.permissions-screen{grid-column:auto;grid-row:auto}.near-copy{max-width:660px}.near h2{max-width:650px;font-size:44px}.near-copy>p{max-width:630px}.permissions-screen{max-width:750px}.near .near-layout{padding-top:85px;padding-bottom:85px}}
@media(max-width:640px){.hero{height:auto;min-height:0;padding-bottom:170px;background:#dcebee}.hero .nav{height:65px;width:calc(100% - 32px);margin-top:16px;padding:0 16px;border-radius:9px}.hero .brand{width:115px;height:31px}.hero .menu-toggle{background:#173d3208;border-color:#173d322c;color:#173d32;width:35px;height:35px}.hero .links{top:74px;background:#f4f3e9f5;border:1px solid #d3deca;box-shadow:0 15px 30px #173d3226;padding:10px;color:#264831}.hero .links a{font-size:13px;padding:13px 12px}.hero .content{width:calc(100% - 44px);padding-top:78px}.hero .eyebrow{font-size:8px;letter-spacing:.8px;gap:8px;line-height:1.7}.hero h1{font-size:43px;letter-spacing:-2px;line-height:1.13;margin:24px 0 25px}.hero .intro{font-size:13px;line-height:1.9;max-width:390px}.hero .main-cta{margin-top:25px;padding:16px 20px;font-size:12px;gap:28px}.hero .status{font-size:9px;margin-top:18px}.hero .photo{background-position:center center}.hero .photo:after{background:#e5f1f217}.product-wrap{margin-top:-118px}.outcome-layout{gap:33px}.outcome-copy h2{font-size:36px}.outcome-copy>p{font-size:14px}.shot-label{font-size:11px;gap:14px}.shot-label>span{font-size:8px}.screen-expand{border-radius:7px}.product-shot figcaption{font-size:9px;margin-top:10px}.expand-hint{opacity:1;transform:none;font-size:8px;padding:6px 9px;right:8px;bottom:8px}.expand-hint .icon{width:10px;height:10px}.outcome .features{grid-template-columns:1fr;gap:25px}.outcome .feature,.outcome .feature:first-child{display:flex;gap:17px;padding-top:24px}.outcome .feature>.icon{margin:3px 0 0}.outcome .feature h3{font-size:20px}.outcome .feature p{font-size:13px}.near .near-layout{padding-top:74px;padding-bottom:74px;gap:33px}.near h2{font-size:36px}.near-copy>p{font-size:14px}.near-copy .support{font-size:12px}.permissions-screen .shot-label{font-size:11px}.closing h2{font-size:39px;letter-spacing:-1.6px}.screen-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 32px);padding:12px;border-radius:9px}.dialog-bar{gap:12px}.dialog-bar p{font-size:10px}.dialog-close{font-size:10px;padding:7px 9px}.dialog-image{max-height:calc(100dvh - 160px)}.dialog-caption{font-size:10px}.dialog-close span{font-size:18px}}
@media(max-width:360px){.hero .content{padding-top:66px}.hero h1{font-size:38px;letter-spacing:-1.8px}.hero .eyebrow{font-size:7px;letter-spacing:.65px}.hero .intro{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hero .photo,.hero .content{animation:none;transform:none;opacity:1}}