@font-face{font-family:Quicksand;src:url(/fonts/quicksand.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/jost.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Caveat;src:url(/fonts/caveat.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --green-50:#f0f9ec;--green-100:#e1f3d9;--green-200:#c8eab8;--green-300:#a8dc96;--green-400:#8bd073;--green-500:#67c04d;--green-700:#007740;--green-800:#00542e;
  --forest:#0a3b24;--night:#0c1911;--night-card:#122b1d;--ink:#17201a;--muted:#5f6b64;--line:#dde2df;--paper:#f1f3f4;--white:#fff;--on-dark:#e9f3eb;--on-dark-muted:#a9bfaf;
  --gutter:clamp(16px,5vw,72px);--section:clamp(4.5rem,3rem + 7vw,10rem);
  --ease:cubic-bezier(.16,1,.3,1);--display:Quicksand,ui-rounded,system-ui,sans-serif;--body:Jost,system-ui,sans-serif;--script:Caveat,cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--night);color:var(--ink);font:400 clamp(1.05rem,1rem + .25vw,1.2rem)/1.55 var(--body);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
picture{display:block}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--green-400);outline-offset:3px;border-radius:8px}
.skip{position:fixed;left:16px;top:-64px;z-index:20;background:var(--white);color:var(--ink);padding:10px 16px;border-radius:12px}
.skip:focus{top:12px}
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--green-700)}
.script{font-family:var(--script);font-weight:600}

.top{position:absolute;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--gutter)}
.top.solid{position:static;background:var(--forest)}
.top nav{display:flex;align-items:center;gap:clamp(12px,2vw,30px);font-size:1rem;color:var(--on-dark)}
.top nav a{text-decoration:none;transition:color .15s}
.top nav a:hover{color:var(--green-300)}
.top .brand img{width:110px}
.top .get{padding:9px 18px;border-radius:999px;background:var(--green-100);color:var(--green-800);font-weight:600;transition:transform .2s var(--ease),background .15s}
.top nav a.get:hover{color:var(--green-800);background:var(--white);transform:translateY(-1px)}
@media (max-width:760px){.top nav a:not(.get){display:none}}

.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1rem,4vw,4rem);align-items:center;min-height:min(100svh,940px);padding:clamp(5.5rem,8vw,7rem) var(--gutter) clamp(2rem,4vw,3.5rem);background:radial-gradient(90% 80% at 78% 62%,#0d6b3f 0%,#0a4a2c 34%,var(--forest) 58%,var(--night) 100%);color:var(--on-dark);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.1;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-copy{align-self:center}
.hero .eyebrow,.cta .eyebrow{color:var(--green-300)}
.hero h1,.cta h2{font-size:clamp(3.1rem,1rem + 6.1vw,6.7rem);margin:.28em 0 .34em;line-height:1}
.hero h1 span,.cta h2 span{display:block}
.tint{color:var(--green-300)}
.hero-body{max-width:33rem;color:var(--on-dark-muted);font-size:clamp(1.1rem,1rem + .45vw,1.35rem)}
.hero-rings{position:absolute;z-index:-1;right:calc(var(--gutter) + clamp(60px,10vw,150px));bottom:-10%;width:0;height:0}
.hero-rings i{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s)/-2);border:1px solid rgb(168 220 150/.16);border-radius:50%;transition:transform .9s var(--ease),border-color .9s}
.hero-rings i:nth-child(1){--s:520px}.hero-rings i:nth-child(2){--s:800px}.hero-rings i:nth-child(3){--s:1100px}.hero-rings i:nth-child(4){--s:1420px}
.hero-rings.pulse i{transform:scale(1.07);border-color:rgb(168 220 150/.34)}

.hero-stage{position:relative;justify-self:center;width:min(100%,340px);width:min(100%,340px,calc((100svh - 10.5rem) * .462))}
.phone{position:relative;aspect-ratio:1170/2532;border-radius:13.5% / 6.3%;background:var(--night);padding:2.6%;box-shadow:0 0 0 1px rgb(255 255 255/.1),0 40px 90px -24px rgb(0 0 0/.7)}
.phone picture{position:absolute;inset:2.6%;opacity:0;transition:opacity .45s ease}
.phone picture.is-on{opacity:1}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:11.2% / 5.2%}
.hero-stage .phone{transform:rotate(3deg)}
.tap{position:absolute;left:-22%;bottom:21%;width:132px;height:132px;display:grid;place-content:center;justify-items:center;gap:4px;border:0;border-radius:50%;cursor:pointer;color:var(--white);font:600 .9rem/1.1 var(--display);background:linear-gradient(170deg,#2a8f5c 0%,var(--green-700) 42%,var(--green-800) 100%);box-shadow:0 7px 0 #9cc99a,0 26px 44px -10px rgb(0 0 0/.6);transition:transform .15s var(--ease),box-shadow .15s}
.tap img{width:46px}
.tap:hover{transform:translateY(-3px)}
.tap:active{transform:translateY(5px);box-shadow:0 2px 0 #9cc99a,0 12px 22px -8px rgb(0 0 0/.6)}

.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.store{display:flex;align-items:center;gap:11px;min-width:188px;padding:11px 20px 11px 16px;border-radius:16px;background:var(--white);color:var(--ink);text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s}
a.store:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgb(0 0 0/.6)}
.store svg{width:26px;height:26px;flex:none}
.store small{display:block;font-size:.72rem;line-height:1.2;color:var(--muted)}
.store b{display:block;font:700 1.08rem/1.15 var(--display);letter-spacing:-.01em}
.store.is-soon{background:rgb(255 255 255/.08);color:var(--on-dark);box-shadow:inset 0 0 0 1px rgb(255 255 255/.18)}
.store.is-soon small{color:var(--on-dark-muted)}
.stores-note{margin-top:.9rem;font-size:.95rem;color:var(--on-dark-muted)}

.manifesto{background:var(--white);padding:var(--section) var(--gutter)}
.manifesto-inner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:clamp(2rem,6vw,6rem);align-items:end}
.manifesto.is-scrub{height:250vh;padding:0}
.manifesto.is-scrub .manifesto-inner{position:sticky;top:0;min-height:100vh;min-height:100svh;align-content:center;padding:0 var(--gutter)}
.manifesto .w{display:inline-block;color:#c3ccc6;filter:blur(6px);transform:translateY(.14em);transition:color .6s var(--ease),filter .6s var(--ease),transform .6s var(--ease)}
.manifesto .w.is-lit{color:var(--ink);filter:none;transform:none}
.manifesto .w.is-lit.accent{color:var(--green-700)}
.manifesto.is-scrub p{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.manifesto.is-done p{opacity:1;transform:none}
.manifesto h2{font-size:clamp(2.4rem,1rem + 5vw,5.6rem)}
.manifesto p{color:var(--muted)}

.steps{background:var(--paper);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,7vw,7rem);padding:var(--section) var(--gutter)}
.steps-stage{position:sticky;top:6vh;align-self:start;display:flex;justify-content:center}
.steps-stage .phone{width:min(100%,330px);box-shadow:0 0 0 1px rgb(0 0 0/.06),0 40px 80px -30px rgb(0 84 46/.45)}
.steps-copy>h2{font-size:clamp(2.3rem,1rem + 4vw,4.6rem);margin-top:.5em}
.steps ol{list-style:none;margin:clamp(2rem,5vw,4rem) 0 0;padding:0}
.steps li{padding:clamp(3rem,10vh,7rem) 0;border-top:1px solid var(--line);opacity:.34;transition:opacity .4s ease}
.steps li.is-on{opacity:1}
.steps li:last-child{padding-bottom:clamp(2rem,22vh,12rem)}
.steps h3{font-size:clamp(1.8rem,1.1rem + 2.2vw,3rem)}
.steps li p{margin-top:.7em;max-width:32rem;color:var(--muted)}
.phone.inline{display:none}

.moments{background:var(--night);color:var(--on-dark);padding:var(--section) var(--gutter)}
.moments .eyebrow{color:var(--green-300)}
.moments-head h2{font-size:clamp(2.4rem,1rem + 5vw,5.6rem);margin-top:.4em;max-width:13em}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(300px,auto);gap:clamp(10px,1.4vw,18px);margin-top:clamp(2.5rem,6vw,5rem)}
.tile{position:relative;grid-column:span 5;display:flex;align-items:flex-end;min-height:340px;border-radius:clamp(22px,3vw,34px);overflow:hidden;background:var(--night-card);isolation:isolate}
.tile.tall{grid-column:span 7;grid-row:span 2}
.tile picture{position:absolute;inset:0;z-index:-2}
.tile picture img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.tile:hover picture img{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(12 25 17/.05) 25%,rgb(12 25 17/.92) 100%)}
.tile>div{padding:clamp(1.3rem,3vw,2.4rem)}
.tile h3{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.6rem);color:var(--white)}
.tile p{margin-top:.5em;max-width:34rem;color:#d7e4da}
.tile.stat{grid-column:span 12;grid-row:auto;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,4vw,3rem);align-items:center;padding:clamp(1.5rem,4vw,3rem);background:var(--green-800)}
.tile.stat::after{display:none}
.stat-value{margin:0;font:700 clamp(4rem,2rem + 9vw,10rem)/.9 var(--display);letter-spacing:-.05em;color:var(--green-300)}
.tile.stat p:last-child{margin:0;font-size:clamp(1.2rem,1rem + 1vw,1.9rem);line-height:1.25;color:var(--white);max-width:24em}

.reason{background:var(--green-50);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,7vw,7rem);align-items:center;padding:var(--section) var(--gutter)}
.reason h2{font-size:clamp(2.1rem,1rem + 3.4vw,4.2rem);margin:.5em 0 .6em}
.reason-copy>p:last-child{max-width:32rem;color:var(--muted)}
.reason-card{position:relative;padding-bottom:3.6rem}
.reason-card picture img{width:78%;aspect-ratio:4/5;object-fit:cover;border-radius:32px;margin-left:auto}
.note{position:absolute;left:0;top:14%;max-width:17rem;padding:1.15rem 1.4rem;border-radius:22px;background:var(--white);box-shadow:0 26px 50px -24px rgb(0 84 46/.5)}
.note-label{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green-700)}
.note-text{margin-top:.35em;font:700 1.25rem/1.2 var(--display);color:var(--ink)}
.filters{position:absolute;left:4%;right:0;bottom:0;padding:1.05rem 1.3rem;border-radius:22px;background:var(--green-800);color:var(--white)}
.filters p{font-size:.85rem;color:var(--green-200)}
.filters ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:.55rem 0 0;padding:0}
.filters li{padding:5px 13px;border-radius:999px;background:rgb(255 255 255/.14);font-size:.98rem}

.faq{background:var(--white);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(2rem,6vw,6rem);padding:var(--section) var(--gutter)}
.faq h2{font-size:clamp(2.3rem,1rem + 4vw,4.6rem);position:sticky;top:12vh;align-self:start}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;gap:16px;padding:1.25rem 0;cursor:pointer;list-style:none;font:700 clamp(1.1rem,1rem + .5vw,1.4rem)/1.25 var(--display)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;color:var(--green-700);font-size:1.5em;line-height:.8;transition:transform .25s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{padding:0 2rem 1.4rem 0;color:var(--muted)}

.cta{position:relative;isolation:isolate;overflow:hidden;padding:var(--section) var(--gutter);text-align:center;color:var(--on-dark);background:radial-gradient(70% 90% at 50% 110%,#0d6b3f 0%,var(--forest) 55%,var(--night) 100%)}
.cta .hero-rings{right:50%;bottom:-6%}
.cta .script{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.7rem);color:var(--green-200)}
.cta .stores{justify-content:center}

.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:2.2rem var(--gutter);background:var(--night);color:var(--on-dark-muted);font-size:.95rem}
.foot img{width:92px}
.foot nav{display:flex;flex-wrap:wrap;gap:20px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--white)}

.prose{background:var(--white);padding:clamp(3rem,8vw,6rem) var(--gutter) var(--section);min-height:62vh}
.prose>*{max-width:42rem;margin-inline:auto}
.prose h1{font-size:clamp(2.4rem,1rem + 4vw,4.4rem);margin-bottom:.5em}
.prose h2{font-size:1.45rem;margin-top:2.2em;margin-bottom:.4em}
.prose .lead{font-size:1.25em;color:var(--muted)}
.prose .stores .store{background:var(--forest);color:var(--white)}
.prose .stores .store small{color:var(--green-200)}
.prose .store.is-soon{background:var(--paper);color:var(--ink);box-shadow:none}
.prose .store.is-soon small{color:var(--muted)}
.prose a{color:var(--green-700)}
.prose .stores a{color:var(--white)}

.reveal-ready{opacity:0;transform:translateY(22px)}
.reveal-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

@media (min-width:981px) and (max-height:780px){
  .tap{width:108px;height:108px;font-size:.78rem}
  .tap img{width:38px}
}
@media (max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding:6rem var(--gutter) 2.5rem}
  .hero h1,.cta h2{font-size:clamp(3rem,15vw,6rem)}
  .hero-copy{padding-bottom:1rem}
  .hero-stage{width:min(66vw,300px);margin-top:2.2rem}
  .tap{left:-46px;width:108px;height:108px;font-size:.78rem}
  .tap img{width:38px}
  .hero-rings{right:50%}
  .manifesto-inner,.reason,.faq{grid-template-columns:minmax(0,1fr)}
  .manifesto.is-scrub{height:200vh}
  .manifesto-inner{align-items:start}
  .faq h2{position:static}
  .steps{display:block}
  .steps-stage{display:none}
  .steps li{opacity:1;padding:2.6rem 0}
  .steps li:last-child{padding-bottom:0}
  .phone.inline{display:block;width:min(72vw,300px);margin:2rem auto 0}
  .phone.inline picture{opacity:1}
  .tile,.tile.tall{grid-column:span 12;grid-row:auto}
  .tile{min-height:420px}
  .tile.stat{grid-template-columns:minmax(0,1fr);min-height:0}
  .reason-card{max-width:30rem}
}
@media (max-width:420px){
  .store{min-width:0;flex:1 1 100%}
  .note{max-width:14rem;padding:1rem 1.1rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .reveal-ready{opacity:1;transform:none}
}
