@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#202923;--muted:#657068;--paper:#f6f7f3;--surface:#fff;--line:#e1e6df;--green:#315b43;--green-light:#e5eee5;--lime:#d8e99c;--radius:22px;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;flex-direction:column}button{font:inherit;color:inherit;cursor:pointer}.topbar{height:68px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9ece6}.wordmark{text-decoration:none;color:var(--ink);font:700 16px Manrope,sans-serif;letter-spacing:-.5px}.mark{display:inline-grid;place-items:center;color:var(--green);background:var(--green-light);width:29px;height:29px;border-radius:50%;margin-right:7px}.prototype-tag,.fineprint,footer,.globe-hint{font-size:12px;color:var(--muted)}.prototype-tag{border:1px solid var(--line);padding:7px 11px;border-radius:999px}main{width:100%;max-width:1120px;padding:36px 24px 48px;margin:auto;flex:1}.screen{display:none;animation:enter .28s ease}.screen.active{display:block}@keyframes enter{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}h1{font:700 clamp(34px,6vw,58px)/1.06 Manrope,sans-serif;letter-spacing:-2px;margin:12px 0 18px}.eyebrow{text-transform:uppercase;letter-spacing:1.5px;font-size:11px;font-weight:700;color:var(--green);margin:0 0 10px}.intro{color:var(--muted);font-size:17px;line-height:1.65;max-width:430px}.button{border:0;border-radius:999px;padding:14px 21px;min-height:50px;font-weight:700;transition:transform .15s,background .15s}.button:active{transform:scale(.98)}.button:disabled{opacity:.42;cursor:not-allowed}.primary{background:var(--green);color:white}.primary:hover:not(:disabled){background:#244832}.quiet{background:transparent;border:1px solid var(--line)}#home{min-height:590px;display:none;align-items:center;gap:30px;position:relative;overflow:hidden}#home.active{display:flex}.hero-copy{z-index:2;flex:1;padding:30px 0}.hero-art{width:48%;height:440px;position:relative;display:grid;place-items:center}.hero-globe{width:min(34vw,355px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fafff3 0 3%,#d8e4c7 4% 13%,#98b795 14% 20%,#668873 21% 23%,#b6c2a3 24% 32%,#6f927d 33% 39%,#47735d 40% 48%,#315b43 68%,#233b2c);box-shadow:inset -18px -13px 38px #192c2880,0 28px 65px #25452a26;display:grid;place-items:center;color:#ffffffa8;font-size:11px;letter-spacing:1px}.orbit{position:absolute;border:1px solid #cbd8c5;border-radius:50%;width:430px;height:140px;transform:rotate(-23deg)}.orbit-two{width:470px;height:230px;transform:rotate(45deg);border-color:#d9e2d5}.sparkle{position:absolute;color:#7d9a73}.s1{top:66px;right:45px;font-size:25px}.s2{bottom:72px;left:58px;font-size:34px}.fineprint{margin-top:18px}.step-head{max-width:680px;margin:7px auto 25px;text-align:center}.step-head h1{font-size:clamp(32px,5vw,47px);margin:8px 0 10px}.step-head>p:last-child{color:var(--muted);line-height:1.5;margin:0}.globe-panel{position:relative;max-width:680px;height:min(48vh,390px);min-height:270px;margin:auto;background:#edf0ea;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.globe{height:100%;width:100%;touch-action:none}.globe canvas{display:block;width:100%;height:100%}.globe-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:14px;z-index:1;pointer-events:none}.globe-hint{position:absolute;bottom:13px;left:0;right:0;text-align:center;pointer-events:none}.globe-error{position:absolute;inset:auto 14px 40px;text-align:center;color:#8c4f35;font-size:12px}.location-picker{max-width:680px;margin:14px auto;display:flex;align-items:center;justify-content:space-between;gap:10px}.chosen-location{display:flex;gap:10px;align-items:center}.pin{color:var(--green);font-size:23px}.chosen-location small,.review-detail small{display:block;color:var(--muted);font-size:10px;letter-spacing:1px;text-transform:uppercase}.chosen-location strong{font-size:14px}.sample-locations{display:flex;gap:7px}.chip{background:white;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:12px}.chip:hover,.chip.selected{background:var(--green-light);border-color:#b6c9b2}.nav-row{display:flex;justify-content:space-between;max-width:680px;margin:25px auto 0}.tree-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;max-width:820px;margin:25px auto}.tree-card{border:1px solid var(--line);background:white;border-radius:18px;padding:14px;text-align:left;transition:.15s}.tree-card.selected{border:2px solid var(--green);padding:13px;background:#fbfdf9}.tree-art{height:118px;border-radius:12px;background:#eef1e9;display:grid;place-items:center;font-size:48px;margin-bottom:13px}.tree-card strong{display:block;font:700 16px Manrope,sans-serif}.tree-card p{color:var(--muted);font-size:12px;line-height:1.45;margin:6px 0}.tree-card small{font-size:10px;color:var(--green);font-weight:600}.quantity-row{max-width:820px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:12px 2px}.quantity-control{display:flex;align-items:center;gap:18px}.quantity-control button{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:50%;font-size:19px}.quantity-control output{min-width:20px;text-align:center;font-weight:700}.review-card{max-width:540px;margin:28px auto;background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.review-map{height:125px;background:radial-gradient(ellipse at center,#a4b89d,#5e7d67 45%,#315b43);display:grid;place-items:center;color:#e5efdb;font-size:38px}.review-detail{padding:13px 20px;border-bottom:1px solid #edf0eb}.review-detail strong{display:block;margin-top:5px;font-size:15px}.estimate{padding:17px 20px;background:#f6f8f3;display:grid;gap:5px}.estimate span,.estimate small{font-size:12px;color:var(--muted)}.estimate strong{font:700 27px Manrope,sans-serif}.complete-screen{text-align:center;padding:45px 0 65px}.success-icon{height:70px;width:70px;border-radius:50%;background:var(--green-light);color:var(--green);display:grid;place-items:center;margin:10px auto 23px;font-size:31px}.complete-screen .intro{margin:0 auto 22px}.disclosure{max-width:440px;margin:0 auto 25px;padding:16px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.6}.disclosure strong{color:var(--ink)}footer{padding:17px 24px;display:flex;justify-content:space-between;border-top:1px solid #e9ece6;font-size:11px}
@media(max-width:680px){.topbar{height:60px;padding:0 17px}main{padding:22px 17px 35px}#home{min-height:calc(100svh - 120px);display:none;flex-direction:column;align-items:stretch;justify-content:center;gap:0}#home.active{display:flex}.hero-copy{padding:22px 0 5px}.hero-copy h1{font-size:42px}.intro{font-size:15px}.hero-art{width:100%;height:260px;order:-1}.hero-globe{width:210px}.orbit{width:280px;height:100px}.orbit-two{width:300px;height:150px}.s1{top:30px;right:22px}.s2{bottom:36px;left:20px}.step-head{margin:4px auto 19px}.step-head h1{font-size:34px;letter-spacing:-1.3px}.step-head>p:last-child{font-size:14px}.globe-panel{height:43svh;min-height:250px}.location-picker{align-items:flex-start;flex-direction:column}.sample-locations{width:100%;overflow-x:auto;padding:2px 0}.chip{white-space:nowrap}.tree-grid{grid-template-columns:1fr;gap:9px;margin:18px auto}.tree-card{display:grid;grid-template-columns:78px 1fr;column-gap:12px;padding:10px;align-items:center}.tree-card.selected{padding:9px}.tree-art{grid-row:span 3;height:78px;margin:0;font-size:36px}.tree-card strong{align-self:end}.tree-card p{margin:2px 0}.tree-card small{align-self:start}.quantity-row{margin-top:8px}.nav-row{margin-top:18px}.nav-row .button{padding:12px 17px;min-height:48px}.review-card{margin:18px auto}.complete-screen{padding-top:30px}footer{padding:14px 17px;font-size:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
:root{--green-strong:#315b43}.hero-note{max-width:390px;margin:12px 0 20px;padding-left:13px;border-left:2px solid #aec39f;color:#59675d;font-size:13px;line-height:1.5}.miles-wallet{max-width:820px;margin:17px auto 0;padding:13px 17px;background:#edf2e9;border:1px solid #dfe8db;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.miles-wallet small{display:block;font-size:9px;letter-spacing:1px;color:var(--muted);font-weight:700}.miles-wallet strong{display:block;font:700 22px Manrope,sans-serif;color:var(--green);margin-top:3px}.miles-wallet .km-label{font-size:13px}.miles-wallet p{margin:0;text-align:right;font-size:12px;line-height:1.5;color:var(--ink)}.miles-wallet p span{font-size:10px;color:var(--muted)}@media(max-width:680px){.hero-note{font-size:12px;margin:8px 0 16px}.miles-wallet{padding:11px 13px}.miles-wallet p{font-size:10px}.miles-wallet p span{font-size:9px}}
:root{--paper:#fffdf9;--ink:#202923;--muted:#657068;--green:#315b43;--green-light:#e5eee5}body{background:#fffdf9;position:relative;isolation:isolate}body:before{content:"";position:fixed;inset:-8%;z-index:-1;pointer-events:none;opacity:.21;filter:blur(45px);background:radial-gradient(ellipse at 10% 22%,#dce7d4 0,transparent 23%),radial-gradient(ellipse at 87% 14%,#f3e6d9 0,transparent 25%),radial-gradient(ellipse at 74% 84%,#e4ecd9 0,transparent 24%),radial-gradient(ellipse at 23% 93%,#f3e9dd 0,transparent 25%)}.hero-globe{background:#8fc7c0;overflow:hidden;border:1px solid #cad8c8;box-shadow:inset -12px -10px 28px #183f3420,0 24px 52px #25452a20}.hero-globe canvas{width:100%;height:100%;display:block}.orbit{border-color:#cbd8c5}.orbit-two{border-color:#d9e2d5}.sparkle{color:#7d9a73}
:root{--paper:#fffdf9}body{background:#fffdf9;position:relative;isolation:isolate}body:before{content:"";position:fixed;inset:-8%;z-index:-1;pointer-events:none;opacity:.18;filter:blur(46px);background:radial-gradient(ellipse at 10% 22%,#dce7d4 0,transparent 23%),radial-gradient(ellipse at 87% 14%,#f3e6d9 0,transparent 25%),radial-gradient(ellipse at 74% 84%,#e4ecd9 0,transparent 24%),radial-gradient(ellipse at 23% 93%,#f3e9dd 0,transparent 25%)}.hero-globe{height:min(34vw,355px);background:#57b9df;overflow:hidden;border:1px solid #cad8c8;box-shadow:inset -12px -10px 28px #183f3420,0 24px 52px #25452a20}.hero-globe #hero-earth{width:100%;height:100%;line-height:0}.hero-globe canvas{width:100%;height:100%;display:block;border-radius:50%;pointer-events:none}.globe canvas{width:100%;height:100%;display:block;touch-action:none}.name-card{max-width:540px;margin:36px auto 0;padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 34px #253b2b0d}.name-card label{display:block;font-weight:700;font-size:14px;margin-bottom:10px}.name-card input{width:100%;height:56px;border:1px solid #bdc8bd;border-radius:13px;background:#fffdf9;padding:0 15px;font:500 20px Manrope,sans-serif;color:var(--ink);outline:none}.name-card input:focus{border-color:var(--green);box-shadow:0 0 0 3px #315b431c}.name-card input::placeholder{color:#9ca79d}.field-foot{display:flex;justify-content:space-between;margin-top:9px;color:var(--muted);font-size:11px}.tree-grid{max-width:860px;margin:27px auto}.tree-card{min-width:0}.tree-card.selected{border:2px solid var(--green);padding:13px;background:#fbfdf9;box-shadow:0 0 0 3px #e5eee5}.plant-action{min-width:230px;min-height:64px;font-size:20px;letter-spacing:2px}.globe-panel{background:#edf3ee}.globe-panel #globe{height:100%}.globe-panel .globe-hint{z-index:2}.complete-screen .intro strong{color:var(--green)}@media(max-width:680px){.hero-globe{height:210px}.name-card{margin-top:25px;padding:19px}.tree-grid{margin:17px auto}.plant-action{min-width:190px;min-height:59px;font-size:18px}}
:root{--paper:#fffdf9}body{background:#fffdf9;position:relative;isolation:isolate}body:before{content:"";position:fixed;inset:-8%;z-index:-1;pointer-events:none;opacity:.18;filter:blur(46px);background:radial-gradient(ellipse at 10% 22%,#dce7d4 0,transparent 23%),radial-gradient(ellipse at 87% 14%,#f3e6d9 0,transparent 25%),radial-gradient(ellipse at 74% 84%,#e4ecd9 0,transparent 24%),radial-gradient(ellipse at 23% 93%,#f3e9dd 0,transparent 25%)}.topbar{height:68px}.account-placeholder{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:14px;font-weight:600;padding:6px 11px 6px 7px;border:1px solid var(--line);border-radius:999px;background:#fffdf9}.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--green-light);color:var(--green)}.avatar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.main{padding-top:14px}main{padding-top:14px}#home{min-height:500px}.hero-globe{position:relative;height:min(34vw,355px);background:#259fe4;overflow:hidden;border:1px solid #cad8c8;box-shadow:inset -12px -10px 28px #183f3420,0 24px 52px #25452a20}.hero-globe #hero-earth{position:absolute;inset:0;width:100%;height:100%;line-height:0;z-index:1}.hero-globe canvas{width:100%;height:100%;display:block;border-radius:50%;pointer-events:none}.earth-fallback{display:block;position:absolute;left:50%;top:50%;width:min(100%,430px);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:0}.globe .earth-fallback{width:min(78vw,430px)}.globe canvas{width:100%;height:100%;display:block;touch-action:none}.name-card{max-width:540px;margin:36px auto 0;padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 34px #253b2b0d}.name-card label{display:block;font-weight:700;font-size:14px;margin-bottom:10px}.name-card input{width:100%;height:56px;border:1px solid #bdc8bd;border-radius:13px;background:#fffdf9;padding:0 15px;font:500 20px Manrope,sans-serif;color:var(--ink);outline:none}.name-card input:focus{border-color:var(--green);box-shadow:0 0 0 3px #315b431c}.name-card input::placeholder{color:#9ca79d}.field-foot{display:flex;justify-content:space-between;margin-top:9px;color:var(--muted);font-size:11px}.tree-grid{max-width:860px;margin:27px auto}.tree-card{min-width:0}.tree-card.selected{border:2px solid var(--green);padding:13px;background:#fbfdf9;box-shadow:0 0 0 3px #e5eee5}.plant-action{min-width:230px;min-height:64px;font-size:20px;letter-spacing:2px}.globe-panel{background:#edf3ee}.globe-panel #globe{height:100%}.globe-panel .globe-hint{z-index:2}.complete-screen .intro strong{color:var(--green)}@media(max-width:680px){.topbar{height:60px}.account-placeholder{font-size:12px;padding:4px 9px 4px 5px}.avatar{width:28px;height:28px}main{padding-top:8px}#home{min-height:calc(100svh - 120px)}.hero-globe{height:210px}.name-card{margin-top:25px;padding:19px}.tree-grid{margin:17px auto}.plant-action{min-width:190px;min-height:59px;font-size:18px}}
:root{--paper:#fffdf9}body:before{opacity:.34;filter:blur(34px);background:radial-gradient(ellipse at 10% 22%,#dce7d4 0,transparent 28%),radial-gradient(ellipse at 87% 14%,#f1dfd0 0,transparent 30%),radial-gradient(ellipse at 74% 84%,#dce8d2 0,transparent 29%),radial-gradient(ellipse at 23% 93%,#efdfd0 0,transparent 29%)}body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.13;filter:blur(22px);background:radial-gradient(ellipse at 47% 23%,#d9e5dd 0,transparent 22%),radial-gradient(ellipse at 64% 72%,#e8dfd3 0,transparent 26%),radial-gradient(ellipse at 17% 68%,#e2e9df 0,transparent 22%)}.hero-globe{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important}.hero-globe #hero-earth{background:transparent}.earth-fallback{filter:none}.tree-art{padding:8px}.tree-art svg{width:100%;height:100%;display:block}.tree-card{overflow:hidden}.tree-card .tree-art{background:#edf2e9}.globe-panel{border-color:transparent;box-shadow:none}.globe canvas{background:transparent}@media(max-width:680px){.tree-art{padding:3px}}

:root{--paper:#fffdf9}.topbar{height:auto;min-height:82px}.account-stack{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.currency-counter{display:flex;align-items:center;gap:6px;min-height:28px;padding:3px 11px 3px 6px;border:1px solid #b9c9a9;border-radius:999px;background:#edf4e5;color:#315b43;font-size:12px;line-height:1}.currency-counter strong{font:700 13px Manrope,sans-serif}.currency-counter small{font-size:10px;color:#657068}.currency-mark{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#d9e99c;color:#315b43;font-size:12px}.fineprint{display:none}.field-foot{justify-content:flex-end}.globe-error{z-index:3}@media(max-width:680px){.topbar{min-height:75px}.currency-counter{min-height:25px;padding:2px 9px 2px 5px}}
/* Header identity and miles balance */
.mark svg{width:20px;height:20px;fill:currentColor}
.currency-counter{position:fixed;top:calc(68px + 14px);right:clamp(18px,5vw,72px);z-index:12;display:flex;align-items:center;gap:9px;padding:5px 13px 5px 6px;border:1px solid #b9c9a9;border-radius:999px;background:#edf4e5;color:#315b43;font-size:13px;line-height:1;box-shadow:0 5px 16px #263e2510}
.currency-counter strong{font:700 15px Manrope,sans-serif}
.currency-counter small{font-size:11px;color:#657068}
.currency-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;overflow:hidden;background:#101410;color:#fff}
.currency-mark svg{display:block;width:100%;height:100%}
@media(max-width:680px){.currency-counter{top:calc(60px + 10px);right:14px;padding:4px 10px 4px 5px;gap:7px}.currency-mark{width:31px;height:31px}}
/* Final refinements from the logo and balance references */
.currency-counter{top:calc(82px + 16px)}
.disclosure{padding:0;margin:0 auto 25px;background:transparent;border:0;border-radius:0;color:var(--muted);font-size:13px;line-height:1.6}
@media(max-width:680px){.currency-counter{top:calc(75px + 14px)}}
/* Brand mark matches the supplied tree artwork */
.mark{width:36px;height:36px;border-radius:10px;margin-right:9px;background:#76f13f;color:#fff}
.mark svg{width:100%;height:100%;display:block}
.mark .tree-silhouette{fill:#fff}
.mark .logo-cut{fill:#76f13f}
.currency-mark svg{width:100%;height:100%;display:block}
/* Reference-accurate logo colors and silhouette frame */
.mark{width:54px;height:54px;border-radius:13px;margin-right:10px;background:#78f23f;color:#fff;overflow:hidden}
.mark svg{width:100%;height:100%;display:block}
.wordmark{display:inline-flex;align-items:center;font-size:19px}
@media(max-width:680px){.mark{width:44px;height:44px;border-radius:11px}.wordmark{font-size:17px}}
.mark{width:54px;height:54px;border-radius:12px;margin-right:10px;overflow:hidden;background:transparent}
.mark img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:680px){.mark{width:44px;height:44px;border-radius:10px}}
.currency-counter strong,.currency-counter small{line-height:1;align-self:center}
.currency-counter small{position:relative;top:-1px}
/* Green Miles brand color, scroll-following balance, and glass edge treatment */
:root{--green:#78f23f;--green-light:#eaffdf;--lime:#78f23f}
.currency-counter{position:absolute;top:98px;right:clamp(18px,5vw,72px);color:var(--ink)}
.currency-counter strong,.currency-counter small{line-height:1;align-self:center}
.currency-counter small{position:relative;top:-1px}
.eyebrow,.pin,.tree-card small{color:var(--ink)}
.primary{background:#78f23f;color:#202923;border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(27,72,13,.18),0 5px 14px rgba(29,58,25,.12)}
.primary:hover:not(:disabled){background:#6fe938}
.button{position:relative;overflow:hidden;border-color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.86),inset 0 -1px 0 rgba(35,52,36,.12),0 4px 12px rgba(32,52,35,.1)}
.button::after{content:"";position:absolute;pointer-events:none;top:1px;left:19%;width:46%;height:1px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),transparent)}
.button.quiet{background:rgba(255,255,255,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(255,255,255,.95);box-shadow:inset 0 1px 1px rgba(255,255,255,.95),0 0 0 1px rgba(71,95,68,.12),0 4px 14px rgba(32,52,35,.06)}
@media(max-width:680px){.currency-counter{top:89px;right:14px}}
/* Give the rotating landing planet room for raised land and forest crowns */
#home{overflow:visible;min-height:600px}
.hero-art{width:52%;height:500px;overflow:visible}
.hero-globe{width:min(39vw,420px);height:min(39vw,420px);aspect-ratio:1;overflow:visible}
.hero-globe #hero-earth{position:absolute;inset:-7%;width:114%;height:114%;overflow:visible}
.hero-globe canvas{display:block;width:100%;height:100%;border-radius:0;overflow:visible;pointer-events:none}
@media(max-width:680px){#home{overflow:visible;min-height:calc(100svh - 120px)}.hero-art{width:100%;height:320px;overflow:visible}.hero-globe{width:min(72vw,300px);height:min(72vw,300px)}.hero-globe #hero-earth{inset:-7%;width:114%;height:114%}}
/* Make the smoke layer visible above the paper background, below the interface */
html{background:#fffdf9}
body{background:transparent!important}
body:before{z-index:-1;inset:-5%;opacity:.38;filter:blur(32px);background:radial-gradient(ellipse at 8% 25%,#d5dfd1 0,transparent 34%),radial-gradient(ellipse at 88% 18%,#eadbd0 0,transparent 36%),radial-gradient(ellipse at 72% 82%,#d9e5d2 0,transparent 34%),radial-gradient(ellipse at 25% 92%,#eadfd5 0,transparent 36%)}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.78;filter:none;background:url('./assets/smoke-texture.svg') center center / cover no-repeat}
/* Keep the full rotating canopy visible around the enlarged hero globe */
#home{overflow:visible;min-height:600px}
.hero-art{width:52%;height:500px;overflow:visible}
.hero-globe{width:min(39vw,420px);height:min(39vw,420px);aspect-ratio:1;overflow:visible}
.hero-globe #hero-earth{position:absolute;inset:-7%;width:114%;height:114%;overflow:visible}
.hero-globe canvas{display:block;width:100%;height:100%;border-radius:0;overflow:visible;pointer-events:none}
@media(max-width:680px){#home{overflow:visible;min-height:calc(100svh - 120px)}.hero-art{width:100%;height:320px;overflow:visible}.hero-globe{width:min(72vw,300px);height:min(72vw,300px)}.hero-globe #hero-earth{inset:-7%;width:114%;height:114%}}
/* A real smoke layer in the page background, rather than behind the body */
html{background:#fffdf9}
body{background-color:#fffdf9!important;background-image:url('./assets/smoke-texture.svg'),radial-gradient(ellipse at 10% 22%,#e1e8dc 0,transparent 30%),radial-gradient(ellipse at 88% 16%,#efe3d9 0,transparent 32%),radial-gradient(ellipse at 75% 84%,#e1e9dd 0,transparent 30%)!important;background-position:center,center,center,center!important;background-size:cover,cover,cover,cover!important;background-repeat:no-repeat!important;background-attachment:fixed,fixed,fixed,fixed!important}
body:after{display:none!important}
/* Remove the low-contrast button glint */
.button::after{display:none!important}
.button,.primary,.button.quiet{box-shadow:none!important}
/* Hover on desktop, tap on touch, and keyboard support for the miles explainer */
.currency-counter-wrap{position:absolute;top:98px;right:clamp(18px,5vw,72px);z-index:20}
.currency-counter{position:relative;top:auto;right:auto;display:flex;align-items:center;gap:9px;min-height:54px;padding:5px 14px 5px 7px;border:1px solid #b9c9a9;border-radius:999px;background:#edf4e5;color:var(--ink);font-size:14px;line-height:1;box-shadow:0 5px 16px #263e2510;cursor:pointer}
.currency-counter strong{font:700 16px Manrope,sans-serif;line-height:1}
.currency-counter small{font-size:12px;color:#657068;line-height:1;position:relative;top:-1px}
.currency-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;overflow:hidden;background:#101410;color:#fff;flex:0 0 auto}
.currency-mark svg{display:block;width:100%;height:100%}
.currency-tooltip{position:absolute;top:calc(100% + 10px);right:0;width:min(285px,calc(100vw - 32px));padding:14px 16px;border:1px solid #dfe5db;border-radius:16px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 34px rgba(30,47,34,.14);color:var(--ink);opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .18s ease,transform .18s ease,visibility .18s;pointer-events:none;font-size:13px;line-height:1.5}
.currency-tooltip strong,.currency-tooltip span{display:block}
.currency-tooltip strong{margin-bottom:4px;font:700 14px Manrope,sans-serif}
.currency-counter-wrap:hover .currency-tooltip,.currency-counter-wrap:focus-within .currency-tooltip,.currency-counter-wrap.open .currency-tooltip{opacity:1;visibility:visible;transform:translateY(0)}
@media(max-width:680px){.currency-counter-wrap{top:89px;right:14px}.currency-counter{min-height:48px;padding:4px 11px 4px 6px;gap:7px}.currency-mark{width:38px;height:38px}.currency-tooltip{font-size:12px}}
@media (hover:none),(pointer:coarse){.currency-counter-wrap:not(.open):hover .currency-tooltip,.currency-counter-wrap:not(.open):focus-within .currency-tooltip{opacity:0;visibility:hidden;transform:translateY(-5px)}}

/* Session tree collection and its reusable interactive globe */
.my-trees-entry{margin-left:10px;min-height:54px;padding:0 20px}
.my-trees-entry span{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:7px;padding:0 6px;border-radius:999px;background:#eaffdf;color:#315b43;font-size:12px;font-weight:700}
.globe-quality-note{max-width:980px;margin:8px auto 0;color:var(--muted);font-size:12px;text-align:center}
.my-trees-screen .globe-panel{position:relative;height:min(58vw,470px);min-height:310px;margin:0 auto;border-radius:26px;overflow:hidden}
.my-trees-screen .globe{width:100%;height:100%;touch-action:none}
.my-trees-details{max-width:980px;margin:20px auto 0;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.72)}
.my-trees-details>div:first-child small{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.my-trees-details h2{margin:5px 0 8px;font:700 19px Manrope,sans-serif;color:var(--ink)}
.my-trees-details p{margin:0;color:var(--muted);font-size:14px}
.my-trees-details p strong{margin-left:5px;color:var(--ink);font-weight:700}
.empty-trees{padding:7px 0}
.my-trees-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.my-tree-item{padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:600 12px Manrope,sans-serif;cursor:pointer}
.my-tree-item.selected{border-color:#78f23f;background:#eaffdf}
.my-trees-screen .nav-row{max-width:980px;margin:18px auto}
@media(max-width:680px){.my-trees-entry{margin:10px 0 0;min-height:48px}.globe-quality-note{font-size:11px}.my-trees-screen .globe-panel{height:48svh;min-height:260px;border-radius:18px}.my-trees-details{margin-top:13px;padding:15px}.my-trees-details h2{font-size:17px}.my-tree-item{font-size:11px;padding:8px 11px}}

/* Road point mark and planting cost feedback */
.currency-mark{position:relative}
.currency-letter{color:#fff;font:300 34px/1 Arial,Helvetica,sans-serif;letter-spacing:-2px;transform:translate(-1px,-1px)}
.points-floater{position:absolute;top:46px;right:23px;z-index:2;color:#315b43;font:700 17px/1 Manrope,sans-serif;opacity:0;pointer-events:none;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.points-floater.animate{animation:points-spend 1.65s .28s cubic-bezier(.2,.65,.3,1) forwards}
@keyframes points-spend{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(48px)}}
.plant-action{display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:300px;padding:9px 17px 9px 25px;letter-spacing:0}
.plant-label{font-size:20px;letter-spacing:2px}
.plant-price{display:inline-flex;align-items:center;gap:9px;font:700 18px/1 Manrope,sans-serif;letter-spacing:0}
.road-point-mini{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#101410;color:#fff;font:300 23px/1 Arial,Helvetica,sans-serif;letter-spacing:-1px}
@media(max-width:680px){.points-floater{top:42px;right:18px;font-size:15px}.plant-action{min-width:220px;padding:8px 13px 8px 20px}.plant-label{font-size:17px}.plant-price{font-size:16px}.road-point-mini{width:28px;height:28px;font-size:21px}}
.success-icon svg{display:block;width:34px;height:34px}
@media(max-width:680px){.currency-counter-wrap{position:relative;top:auto;right:auto;display:flex;justify-content:flex-end;margin:6px 0 22px}.success-icon svg{width:30px;height:30px}}