:root{
  --night:#06150e; --night2:#0b2217; --glow:#9bf0c0; --leaf:#19b78a; --leaf-d:#0f8a68;
  --mint:#eefaf3; --mint2:#d9f5e6; --ink:#0d2a1e; --muted:#47635a; --card:#fff; --line:#cfe8da;
  --display:"Nunito","Quicksand",ui-rounded,system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--mint);color:var(--ink);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--leaf-d)}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0}

/* top bar */
.bar{position:sticky;top:0;z-index:20;background:rgba(6,21,14,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #ffffff14}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:800 1.2rem var(--display);letter-spacing:-.01em}
.brand img{width:32px;height:32px;border-radius:8px}
.stores{display:flex;align-items:center;gap:10px}
.stores a{display:block;line-height:0}
.stores .apple{height:36px;width:auto}
.stores .play{height:52px;width:auto;margin:-8px -6px}
.bar .stores .apple{height:30px}.bar .stores .play{height:44px;margin:-7px -5px}
@media(max-width:480px){.bar .stores .play{display:none}}

/* hero */
.hero{position:relative;background:var(--night);color:#fff;overflow:hidden;isolation:isolate}
.hero-art{position:relative;height:min(62vw,720px);min-height:420px}
.hero-art picture,.hero-art img{width:100%;height:100%}
.hero-art img{object-fit:cover;object-position:50% 40%}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,21,14,.0) 55%,var(--night) 100%)}
.hero-copy{position:relative;margin-top:-90px;padding-bottom:84px;text-align:center}
.hero-copy h2{font-size:clamp(2rem,5.2vw,3.6rem);font-weight:800;letter-spacing:-.02em;max-width:16em;margin:0 auto 16px;text-shadow:0 2px 30px #000a}
.hero-copy h2 em{font-style:normal;color:var(--glow)}
.hero-copy p{max-width:36em;margin:0 auto 28px;color:#c4e3d3;font-size:1.1rem}
.hero .stores{justify-content:center;flex-wrap:wrap;gap:14px}
.hero .stores .apple{height:48px}.hero .stores .play{height:70px;margin:-11px -8px}
.note{margin-top:14px!important;font-size:.9rem!important;color:#8fb5a2!important}

/* sections */
section{padding:84px 0}
.eyebrow{font:800 .8rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf-d);margin-bottom:12px}
h2.title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
.lede{color:var(--muted);max-width:38em;margin:0 0 8px}

/* phones */
.gallery{padding-top:72px;overflow:hidden}
.phones{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px 20px 56px;margin:0 -20px;scrollbar-width:none}
.phones::-webkit-scrollbar{display:none}
.phones figure{flex:0 0 min(64vw,250px);margin:0;scroll-snap-align:center}
.phones img{width:100%;border-radius:28px;box-shadow:0 30px 60px -20px rgba(13,60,40,.45),0 8px 20px -8px rgba(13,60,40,.25)}
.phones figure:nth-child(even){transform:translateY(28px)}
@media(min-width:1000px){.phones{overflow:visible;justify-content:center;padding-bottom:84px}.phones figure{flex:1 1 0}}

/* feature rows */
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center}
@media(min-width:860px){.row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}.row.flip>:first-child{order:2}}
.panel{background:var(--night);border-radius:32px;padding:34px;color:#fff;position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:80%;background:radial-gradient(closest-side,rgba(155,240,192,.28),transparent);pointer-events:none}
.plants{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative}
.plants img{width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 8px 10px #0006)}
.plants-cap{position:relative;margin:18px 0 0;font:800 1.05rem var(--display);color:var(--glow);text-align:center}
.alt{background:var(--card);border-block:1px solid var(--line)}

/* 66 days */
.days{display:grid;grid-template-columns:repeat(11,1fr);gap:7px;position:relative}
.days i{aspect-ratio:1;border-radius:50%;background:#12362a;display:block}
.days i.on{background:var(--leaf)}.days i.on.b{background:#5fd6ad}.days i.on.c{background:var(--glow);box-shadow:0 0 14px #9bf0c0aa}
.days-cap{position:relative;display:flex;align-items:center;gap:14px;margin-top:22px}
.days-cap img{width:72px;flex:none}
.days-cap span{font-weight:700;color:#d6efe2}
.facts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.facts li{padding-left:30px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--leaf)}
.facts strong{font-family:var(--display)}

/* three small */
.cards{display:grid;gap:18px}
@media(min-width:800px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--mint);border:1px solid var(--line);border-radius:22px;padding:26px}
.card h3{font-size:1.3rem;margin-bottom:8px;font-weight:800}
.card p{margin:0;color:var(--muted)}

/* closing */
.close{background:var(--night);color:#fff;text-align:center;position:relative;overflow:hidden}
.close::before{content:"";position:absolute;left:50%;top:-30%;width:900px;height:600px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(25,183,138,.28),transparent)}
.close .wrap{position:relative}
.close h2{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800;margin-bottom:12px}
.close p{color:#b9d9c9;margin:0 auto 26px;max-width:30em}
.close .stores{justify-content:center;flex-wrap:wrap;gap:14px}
.close .stores .apple{height:48px}.close .stores .play{height:70px;margin:-11px -8px}

/* footer */
footer{background:var(--night);color:#9ec2b0;padding:34px 0 44px;border-top:1px solid #ffffff14;font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:center}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer a{color:#d3eee0;text-decoration:none}footer a:hover{text-decoration:underline}
footer small{display:block;color:#7ea593}

/* legal pages */
.page-head{background:var(--night);color:#fff;padding:64px 0 48px}
.page-head h1{font-size:clamp(2rem,5vw,3rem);font-weight:800}
.page-head p{color:#9ec2b0;margin:8px 0 0}
.prose{max-width:720px;padding:48px 20px 84px;margin:0 auto}
.prose h2{font-size:1.4rem;font-weight:800;margin:2em 0 .4em}
.prose h3{font-size:1.1rem;font-weight:800;margin:1.6em 0 .3em}
.prose p,.prose li{color:#24443a}

/* scroll-in (CSS only, progressive) */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
    .phones figure.reveal:nth-child(even){animation-name:rise2}
    @keyframes rise2{from{opacity:0;transform:translateY(62px)}to{opacity:1;transform:translateY(28px)}}
    .days i{animation:dot linear both;animation-timeline:view();animation-range:entry 20% entry 100%}
    @keyframes dot{from{opacity:.15;transform:scale(.4)}to{opacity:1;transform:none}}
    .hero-copy{animation:rise .9s ease-out both;animation-timeline:auto}
  }
  .hero-art img{animation:slow 18s ease-out both}
  @keyframes slow{from{transform:scale(1.06)}to{transform:scale(1)}}
}