/* ── Phone frame ───────────────────────────────────────────────────────── */
.phone{
  position:relative; width:var(--pw, 17rem); aspect-ratio:660 / 1434;
  background:#1b1d1a; border-radius:calc(var(--pw, 17rem) * .16); padding:calc(var(--pw, 17rem) * .03);
  box-shadow:0 0 0 1.5px #3a3c38 inset, var(--shadow-lg);
}
.phone img,.phone .screens{width:100%; height:100%; border-radius:calc(var(--pw, 17rem) * .135); object-fit:cover}
.phone::after{
  content:""; position:absolute; inset:calc(var(--pw, 17rem) * .03); border-radius:calc(var(--pw, 17rem) * .135); pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 32%);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative; padding:2rem 0 4rem; overflow:hidden}
.hero .wrap{display:grid; gap:3rem; align-items:center}
.hero h1{font-size:clamp(2.6rem, 8.4vw, 4.6rem); line-height:1.02; letter-spacing:-.03em; font-weight:700; margin:0}
.hero h1 .line{display:block; overflow:hidden; padding-bottom:.08em}
.hero h1 .line > span{display:inline-block; animation:rise 1s var(--ease) both}
.hero h1 .line:nth-child(2) > span{animation-delay:.12s; color:var(--green)}
.hero .sub{font-size:clamp(1.1rem, 2.4vw, 1.3rem); max-width:31rem; margin:1.5rem 0 2rem; animation:fadeup .9s .3s var(--ease) both}
.hero .cta{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; animation:fadeup .9s .42s var(--ease) both}
.hero .small-print{font-size:.92rem; margin:1.2rem 0 0; font-style:italic; animation:fadeup .9s .5s var(--ease) both}
@keyframes rise{from{transform:translateY(105%)}}
@keyframes fadeup{from{opacity:0; transform:translateY(16px)}}

.stage{position:relative; height:34rem; display:grid; place-items:center; --px:0; --py:0}
.stage .glow{
  position:absolute; width:30rem; height:30rem; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--green) 22%, transparent), transparent 66%);
  filter:blur(10px); animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{50%{transform:scale(1.08); opacity:.8}}
.stage .p-back{
  --pw:13.5rem; position:absolute; left:50%; top:50%;
  transform:translate(calc(-50% - 7.5rem + var(--px) * -12px), calc(-50% + 1.4rem + var(--py) * -9px)) rotate(calc(-8deg + var(--px) * -3deg));
  animation:back-in 1.2s .25s var(--ease) backwards;
}
.stage .p-front{
  --pw:15.5rem; position:absolute; left:50%; top:50%;
  transform:translate(calc(-50% + 3.2rem + var(--px) * 16px), calc(-50% + var(--py) * 11px)) rotate(calc(4deg + var(--px) * 3deg));
  animation:front-in 1.3s .1s var(--spring) backwards;
}
@keyframes front-in{from{opacity:0; transform:translate(calc(-50% + 3.2rem), calc(-50% + 9rem)) rotate(12deg)}}
@keyframes back-in{from{opacity:0; transform:translate(calc(-50% - 3rem), calc(-50% + 6rem)) rotate(-2deg)}}

.bird{position:absolute; z-index:3; pointer-events:none}
.bird .b{display:block; animation:bob 4.2s ease-in-out infinite}
.bird img{width:100%}
.bird-a{width:7.2rem; right:max(-.5rem, calc(50% - 17rem)); top:.2rem; animation:fly-a 1.8s .6s var(--ease) backwards}
.bird-b{width:6.2rem; left:max(-.5rem, calc(50% - 17.5rem)); bottom:3rem; animation:fly-b 1.9s .9s var(--ease) backwards}
.bird-b .b{animation-delay:-2s}
@keyframes fly-a{from{opacity:0; transform:translate(14rem,-9rem) rotate(-18deg) scale(.7)}}
@keyframes fly-b{from{opacity:0; transform:translate(-14rem,6rem) rotate(16deg) scale(.7)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(-3deg)}}

.leaves{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0}
.leaf{position:absolute; top:-3rem; width:1.1rem; height:1.1rem; opacity:0; animation:fall linear infinite}
.leaf svg{width:100%; height:100%; animation:twirl 3.4s ease-in-out infinite alternate}
.leaf:nth-child(1){left:8%;  animation-duration:17s; animation-delay:0s}
.leaf:nth-child(2){left:27%; animation-duration:21s; animation-delay:4s; width:.9rem}
.leaf:nth-child(3){left:49%; animation-duration:19s; animation-delay:9s}
.leaf:nth-child(4){left:68%; animation-duration:23s; animation-delay:2s; width:1.3rem}
.leaf:nth-child(5){left:86%; animation-duration:18s; animation-delay:12s; width:.8rem}
.leaf:nth-child(6){left:93%; animation-duration:25s; animation-delay:6s}
@keyframes fall{
  0%{opacity:0; transform:translate(0,0)}
  8%{opacity:.85}
  50%{transform:translate(3rem, 50vh)}
  92%{opacity:.75}
  100%{opacity:0; transform:translate(-1rem, 100vh)}
}
@keyframes twirl{from{transform:rotate(-35deg)} to{transform:rotate(55deg)}}

@media (min-width:960px){
  .hero{padding:3rem 0 5rem}
  .hero .wrap{grid-template-columns:1.05fr .95fr; gap:2rem}
  .stage{height:40rem}
  .stage .p-front{--pw:17.5rem}
  .stage .p-back{--pw:15rem}
}
/* Phones and small tablets: both phones are sized from the screen width, and they move less,
   so even at the far end of a tilt or a drag they stay inside the screen. */
@media (max-width:959px){
  .stage{height:min(34rem, calc(min(15.5rem, 52vw) * 2.173 + 3rem))}
  .stage .p-back{
    --pw:min(13.5rem, 44vw);
    transform:translate(calc(-50% - min(7.5rem, 14.5vw) + var(--px) * -8px), calc(-50% + 1.2rem + var(--py) * -8px)) rotate(calc(-8deg + var(--px) * -2deg));
  }
  .stage .p-front{
    --pw:min(15.5rem, 52vw);
    transform:translate(calc(-50% + min(3.2rem, 11vw) + var(--px) * 10px), calc(-50% + var(--py) * 9px)) rotate(calc(4deg + var(--px) * 2deg));
  }
}
@media (max-width:420px){
  .bird-a{width:5.2rem; right:-.4rem; top:-.4rem}
  .bird-b{width:4.6rem; left:-.4rem; bottom:1.5rem}
}

/* ── Statement: one other person, underlined by hand ───────────────────── */
.statement{padding:4rem 0 3rem}
.statement p{font-size:clamp(1.7rem, 4.6vw, 2.9rem); line-height:1.3; letter-spacing:-.015em; font-weight:500; max-width:52rem; margin:0; text-wrap:balance}
.statement .hl{position:relative; white-space:nowrap; color:var(--green); font-style:italic; font-weight:600}
.statement .hl svg{position:absolute; left:-4%; width:108%; bottom:-.34em; height:.55em; overflow:visible; pointer-events:none}
.statement .hl path{fill:none; stroke:var(--green); stroke-linecap:round; stroke-linejoin:round; stroke-width:.085em; stroke-dasharray:1 1.3; stroke-dashoffset:1.15}
.js .statement .hl path{transition:stroke-dashoffset 1.1s .5s var(--ease)}
.statement .in .hl path, html:not(.js) .statement .hl path{stroke-dashoffset:0}

/* ── How it works ──────────────────────────────────────────────────────── */
.how{padding:4rem 0 2rem}
.how-head{max-width:38rem; margin-bottom:2.5rem}
.how-head h2, .sec-head h2{font-size:clamp(2rem, 5.4vw, 3.2rem); line-height:1.08; letter-spacing:-.02em; font-weight:700; margin:0}
.story{display:grid; gap:4.5rem}
.step{display:grid; gap:1.8rem; justify-items:center}
.step .num{
  display:inline-grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--green); color:var(--on-green); font-weight:700; font-size:1rem; margin-bottom:1rem;
}
.step h3{font-size:clamp(1.6rem, 4vw, 2.1rem); line-height:1.15; letter-spacing:-.015em; font-weight:700; margin:0 0 .7rem}
.step p{font-size:1.12rem; margin:0; max-width:28rem}
.step .text{width:100%}
.step .phone{--pw:15rem}
.sticky-phone{display:none}

@media (min-width:960px){
  .story{grid-template-columns:1fr 1fr; gap:0 4rem; align-items:start}
  .steps-col{display:grid}
  .step{min-height:68vh; align-content:center; justify-items:start}
  .step .phone{display:none}
  /* Steps are driven by scroll position on wide screens, so they never wait on a fade. */
  .js .step .text.reveal{opacity:1; transform:none; transition:none}
  .js .step .num{background:transparent; color:var(--green); box-shadow:inset 0 0 0 1.5px var(--green); transition:background-color .25s var(--ease), color .25s var(--ease), transform .35s var(--spring)}
  .js .step.active .num{background:var(--green); color:var(--on-green); transform:scale(1.12)}
  .js .step h3{transition:color .25s var(--ease)}
  .js .step.active h3{color:var(--green)}
  .sticky-phone{display:grid; place-items:center; position:sticky; top:calc(50vh - 19.5rem); height:39rem}
  .sticky-phone .phone{--pw:17.5rem}
  .screens{position:relative; overflow:hidden}
  .screens img{position:absolute; inset:0; width:100%; height:100%; border-radius:0; opacity:0; transform:scale(1.03); transition:opacity .35s var(--ease), transform .5s var(--ease)}
  .screens img.on{opacity:1; transform:none}
  .sticky-phone .halo{position:absolute; width:26rem; height:26rem; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--green) 18%, transparent), transparent 66%)}
  .dots{position:absolute; right:-1.6rem; top:50%; transform:translateY(-50%); display:grid; gap:.6rem}
  .dots i{width:.5rem; height:.5rem; border-radius:50%; background:var(--line); transition:background-color .25s, transform .25s var(--spring)}
  .dots i.on{background:var(--green); transform:scale(1.5)}
}

/* ── Roots ─────────────────────────────────────────────────────────────── */
.roots{position:relative; height:270vh; margin-top:3rem}
.roots-pin{position:sticky; top:0; height:100vh; height:100svh; display:grid; align-items:center; overflow:hidden}
.roots-grid{display:grid; gap:1.2rem; align-items:center; justify-items:center}
.roots-text{width:100%; max-width:30rem}
.roots-text h2{font-size:clamp(1.6rem, 4.6vw, 2.8rem); line-height:1.12; letter-spacing:-.02em; font-weight:700; margin:0 0 .8rem}
.counter{display:flex; align-items:baseline; gap:.7rem; margin:0}
.counter .n{font-size:clamp(3.6rem, 12vw, 6.4rem); font-weight:600; line-height:1; letter-spacing:-.04em; min-width:1.25em}
.counter .of{font-size:1.1rem; font-style:italic}
.bar{height:6px; border-radius:6px; background:var(--paper-2); overflow:hidden; margin:.9rem 0 1rem; max-width:22rem}
.bar i{display:block; height:100%; width:100%; background:linear-gradient(90deg, var(--soil), var(--green)); transform-origin:0 50%; transform:scaleX(var(--p, 1))}
.met-line{font-size:1.15rem; margin:0; min-height:3.4em}
.met-line .before{display:none}
.js .roots:not(.met) .met-line .after{display:none}
.js .roots:not(.met) .met-line .before{display:inline}
.met-line .after strong{color:var(--green)}

.canvas{
  position:relative; aspect-ratio:1100 / 1206;
  width:min(100%, calc((100vh - 25rem) * .912)); width:min(100%, calc((100svh - 25rem) * .912));
  background:#F4EDDE; border-radius:26px; overflow:hidden; box-shadow:var(--shadow-lg);
}
.canvas img{position:absolute; left:0; width:100%; height:auto}
.canvas .apart{top:0; height:100%}
.canvas .meet{top:54.21%; height:45.79%}
.js .canvas .meet{
  --rx:4%; --ry:4%;
  -webkit-mask-image:radial-gradient(ellipse var(--rx) var(--ry) at 29% 0%, #000 70%, transparent 100%), radial-gradient(ellipse var(--rx) var(--ry) at 71% 0%, #000 70%, transparent 100%);
          mask-image:radial-gradient(ellipse var(--rx) var(--ry) at 29% 0%, #000 70%, transparent 100%), radial-gradient(ellipse var(--rx) var(--ry) at 71% 0%, #000 70%, transparent 100%);
}
.canvas .seal{
  position:absolute; left:50%; bottom:7%; transform:translate(-50%, 1rem) scale(.9); opacity:0;
  background:var(--card); color:var(--ink); border-radius:999px; padding:.45rem 1rem; font-weight:600; font-size:.95rem;
  box-shadow:var(--shadow); transition:opacity .5s var(--ease), transform .6s var(--spring); white-space:nowrap
}
.roots.met .canvas .seal{opacity:1; transform:translate(-50%, 0) scale(1)}

@media (min-width:960px){
  .roots-grid{grid-template-columns:1fr auto; gap:4rem; justify-items:start}
  .canvas{width:min(40rem, calc(82vh * .912))}
}
@media (max-width:959px){
  /* The pinned roots view stops well short of the bottom of the screen. If it reaches the bottom
     edge, iPhone Safari treats it like a bar and paints a solid white or black strip under its toolbar. */
  .roots{height:250vh}
  .roots-pin{align-items:start; padding-top:4.8rem; height:auto; max-height:calc(100vh - 5rem); max-height:calc(100svh - 5rem)}
  .canvas{width:min(100%, calc((100vh - 31rem) * .912)); width:min(100%, calc((100svh - 31rem) * .912))}
  .roots-text h2{font-size:clamp(1.45rem, 5.6vw, 2rem)}
  .counter .n{font-size:clamp(3rem, 14vw, 4.2rem)}
  .met-line{font-size:1rem; min-height:3.2em}
}

.tie{padding:3rem 0 1rem}
.tie-panel{
  position:relative; overflow:hidden; border-radius:32px; background:#2F7A4D; color:#FBF7EF; padding:3rem 1.8rem;
  box-shadow:var(--shadow-lg); text-align:center; isolation:isolate
}
.tie-panel::before{content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.6; z-index:-1}
.tie-panel .eyebrow{color:#CFE6C6}
.tie-panel blockquote{margin:0 auto; max-width:44rem; font-size:clamp(1.5rem, 3.8vw, 2.4rem); line-height:1.28; font-weight:500; letter-spacing:-.01em; text-wrap:balance}
.tie-panel blockquote em{color:#CFE6C6}
.tie-panel p{margin:1.4rem auto 0; max-width:30rem; font-size:1.1rem}
.tie-panel .rings{position:absolute; inset:auto; left:50%; top:50%; width:58rem; height:58rem; transform:translate(-50%,-50%); z-index:-1; opacity:.16; pointer-events:none}
.tie-panel .rings circle{fill:none; stroke:#FBF7EF; stroke-width:1}
@media (min-width:860px){ .tie-panel{padding:4.6rem 4rem} }

/* ── Research ──────────────────────────────────────────────────────────── */
.research{padding:6rem 0 2rem}
.sec-head{display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:end; justify-content:space-between; margin-bottom:2rem}
.sec-head p{font-size:1.15rem; margin:.8rem 0 0; max-width:30rem}
.arrows{display:none; gap:.6rem}
.arrows button{
  width:3rem; height:3rem; border-radius:50%; border:1.5px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer;
  display:grid; place-items:center; transition:background-color .2s, transform .2s var(--ease)
}
.arrows button:hover{background:color-mix(in srgb, var(--ink) 7%, transparent); transform:translateY(-2px)}
.arrows svg{width:1.2rem; height:1.2rem}
@media (min-width:760px){ .arrows{display:flex} }
.cards{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(19.5rem, 82vw); gap:1.1rem;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:.8rem calc(50vw - 50%) 3rem; margin:0 calc(50% - 50vw); scroll-padding-inline:calc(50vw - 50%);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cards::-webkit-scrollbar{display:none}
.card{
  scroll-snap-align:start; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:1.5rem 1.4rem 1.4rem;
  box-shadow:var(--shadow); display:flex; flex-direction:column; min-height:22rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease)
}
.card:hover{transform:translateY(-6px) rotate(-.6deg); box-shadow:var(--shadow-lg)}
.card .journal{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--green); margin:0 0 .8rem}
.card h3{font-size:1.12rem; line-height:1.35; font-weight:600; margin:0 0 .5rem}
.card .who{font-style:italic; font-size:.92rem; margin:0}
.card hr{border:0; height:1px; background:var(--line); margin:1.2rem 0}
.card .big{font-size:1.3rem; line-height:1.4; font-weight:600; margin:auto 0 .7rem}
.card .big span{background:linear-gradient(var(--mark), var(--mark)) no-repeat 0 100% / 0% 100%; padding:.05em .2em; border-radius:4px; transition:background-size .9s .25s var(--ease); -webkit-box-decoration-break:clone; box-decoration-break:clone}
.card.in .big span, .no-anim .card .big span{background-size:100% 100%}
.card .note-line{font-style:italic; color:var(--green); margin:0; font-size:.98rem}

/* ── Real trees: a hundred downloads become the leaves of one tree ─────── */
.planted{padding:6rem 0 5rem}
.planted .wrap{display:grid; gap:2.6rem; align-items:center}
.planted h2{font-size:clamp(2rem, 5.4vw, 3.2rem); line-height:1.08; letter-spacing:-.02em; font-weight:700; margin:0 0 1.1rem; text-wrap:balance}
.planted h2 span{color:var(--green)}
.planted .lede{font-size:1.15rem; max-width:30rem}
.equation{display:flex; align-items:center; flex-wrap:wrap; gap:.6rem 1rem; margin:1.6rem 0 1.8rem; font-weight:600}
.equation .chip{display:inline-flex; align-items:center; gap:.5rem; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:.45rem .95rem .45rem .55rem; box-shadow:var(--shadow)}
.equation .chip svg{width:1.6rem; height:1.6rem}
.equation .eq{font-size:1.4rem; color:var(--green)}
.plot{
  position:relative; aspect-ratio:1000 / 820; width:100%; max-width:36rem; justify-self:center;
  border-radius:28px; overflow:hidden; box-shadow:var(--shadow-lg); isolation:isolate;
  background:radial-gradient(ellipse 70% 55% at 50% 40%, rgba(255,250,236,.95), rgba(255,250,236,0) 72%), linear-gradient(#F3ECDC, #EDE3CD);
}
.plot::before{content:""; position:absolute; inset:0; background-image:var(--grain); z-index:0}
.p-count{position:absolute; left:6%; top:5.5%; z-index:6; display:grid; line-height:1}
.p-count b{font-size:clamp(2.4rem, 7vw, 3.6rem); font-weight:700; letter-spacing:-.04em; color:#232B23; font-variant-numeric:tabular-nums}
.p-count span{font-size:.92rem; font-style:italic; margin-top:.35rem; color:#232B23}
.p-count b.tree{color:#2F7A4D}
.p-grid{position:absolute; left:50%; top:26.5%; width:48%; aspect-ratio:1; transform:translateX(-50%); z-index:5; display:grid; grid-template-columns:repeat(10, 1fr); gap:3%}
.p-grid i{
  display:block; aspect-ratio:1; border-radius:50% 0 50% 0; background:#2F7A4D; transform:rotate(-45deg) scale(.35); opacity:.13;
  transition:transform .45s var(--spring), opacity .3s var(--ease), background-color .3s
}
.p-grid i.on{opacity:1; transform:rotate(-45deg) scale(.82)}
.p-grid i.on:nth-child(3n){background:#5E9B57} .p-grid i.on:nth-child(7n){background:#7BA65A} .p-grid i.on:nth-child(11n){background:#3F7F47}
.p-grid.fly i{
  transition:transform 1.25s cubic-bezier(.5,0,.2,1) var(--d, 0s), opacity .55s calc(var(--d, 0s) + .85s) var(--ease);
  transform:translate(var(--tx), var(--ty)) rotate(var(--r, 0deg)) scale(.55); opacity:0
}
.p-tree{
  position:absolute; left:50%; bottom:9.8%; width:46%; z-index:3; transform:translateX(-50%) scale(.94); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top, #000 42%, transparent 58%); mask-image:linear-gradient(to top, #000 42%, transparent 58%);
  -webkit-mask-size:100% 240%; mask-size:100% 240%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:0 0%; mask-position:0 0%;
  transition:-webkit-mask-position 2.6s cubic-bezier(.45,.05,.3,1), mask-position 2.6s cubic-bezier(.45,.05,.3,1), transform 2.8s var(--ease)
}
.plot.grown .p-tree{-webkit-mask-position:0 100%; mask-position:0 100%; transform:translateX(-50%) scale(1)}
.p-ground{position:absolute; left:0; right:0; bottom:0; height:12.5%; z-index:4; background:url(assets/ground.webp) 0 0 / auto 165% repeat-x}
.p-tag{position:absolute; right:6%; top:6.5%; z-index:6; background:#2F7A4D; color:#FBF7EF; border-radius:999px; padding:.4rem .9rem; font-weight:600; font-size:.9rem;
  opacity:0; transform:translateY(-.5rem); transition:opacity .5s var(--ease), transform .6s var(--spring)}
.plot.done .p-tag{opacity:1; transform:none}
.replay{position:absolute; right:4.5%; bottom:3%; z-index:7; font:inherit; font-size:.85rem; font-weight:600; color:#FBF7EF; background:rgba(35,43,35,.4);
  border:0; border-radius:999px; padding:.35rem .8rem; cursor:pointer; opacity:0; transition:opacity .4s, background-color .2s; display:inline-flex; gap:.35rem; align-items:center}
.replay svg{width:.9rem; height:.9rem}
.replay:hover{background:rgba(35,43,35,.6)}
.plot.done .replay{opacity:1; transition-delay:.6s}
html:not(.js) .p-grid i{opacity:1; transform:rotate(-45deg) scale(.82)}
@media (min-width:960px){ .planted .wrap{grid-template-columns:1fr 1.05fr; gap:4rem} }

@media (prefers-reduced-motion: reduce){
  .roots{height:auto}
  .roots-pin{position:relative; height:auto; padding:4rem 0}
  .leaves{display:none}
  .js .ch{opacity:1; transform:none; position:relative}
  .chapters{gap:1.2rem}
  .ch{grid-area:auto}
}
.fade-in-eyebrow{animation:fadeup .8s var(--ease) both}