:root {
  --orange:#F28C28; --green:#1F6B4A; --deep:#D9660F; --cream:#FFF8EC; --ink:#1D2A26; --light:#FBB65C;
  --paper:#FFFFFF; --line:#E9DDC6; --muted:#55625A; --dark-green:#174F38; --error:#B3261E;
  --display:"Rubik","Arial Rounded MT Bold","Helvetica Neue",Arial,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font:400 18px/1.55 var(--body); }
img { max-width:100%; display:block; }
a { color:var(--green); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--deep); outline-offset:2px; }
.wrap { max-width:1080px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px)); }
h1,h2,h3 { font-family:var(--display); font-weight:700; color:var(--green); margin:0; text-wrap:balance; line-height:1.1; }
h1 { font-size:clamp(36px,6.4vw,62px); letter-spacing:-0.01em; }
h2 { font-size:clamp(27px,4vw,38px); }
h3 { font-size:21px; }
p { margin:0; max-width:62ch; }
.lede { font-size:clamp(19px,2.4vw,23px); }
.eyebrow { font:700 14px/1 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--deep); }
.skip { position:absolute; left:-999px; } .skip:focus { left:12px; top:12px; background:var(--paper); padding:10px 14px; z-index:20; }

/* header */
.top { background:var(--cream); border-bottom:2px solid var(--line); position:sticky; top:0; z-index:10; }
.top .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; padding-block:12px; }
.top img { height:54px; width:auto; }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; }
nav a { font:500 17px/1 var(--display); text-decoration:none; color:var(--ink); padding:8px 0; }
nav a:hover, nav a[aria-current="page"] { color:var(--green); box-shadow:inset 0 -3px 0 var(--orange); }
.btn { display:inline-block; font:700 17px/1 var(--display); text-decoration:none; border:0; cursor:pointer; padding:15px 24px; border-radius:999px; background:var(--green); color:var(--cream); }
.btn:hover { background:var(--dark-green); }
.btn.orange { background:var(--orange); color:var(--ink); } .btn.orange:hover { background:var(--light); }
.btn.ghost { background:transparent; color:var(--green); box-shadow:inset 0 0 0 2px var(--green); }
nav .btn { padding:11px 18px; font-size:16px; color:var(--ink); box-shadow:none; }

/* sections */
section { padding-block:64px; }
.stack { display:grid; gap:20px; }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:40px; align-items:center; }
.hero .art { background:var(--green); border-radius:28px; padding:36px; display:grid; place-items:center; aspect-ratio:1/1; width:100%; align-self:center; }
.hero .art img { width:82%; }
.row { display:flex; flex-wrap:wrap; gap:12px; }
.facts { display:flex; flex-wrap:wrap; gap:10px 28px; padding:0; margin:0; list-style:none; font:500 17px/1.3 var(--display); }
.facts li::before { content:"\2713"; color:var(--deep); font-weight:700; margin-right:8px; }
.band { background:var(--green); color:var(--cream); }
.band h2, .band h3 { color:var(--cream); } .band a { color:var(--light); }
.band.orange { background:var(--orange); color:var(--ink); } .band.orange h2 { color:var(--ink); }
.paper { background:var(--paper); }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:36px; align-items:start; }
.card { background:var(--paper); border-radius:18px; padding:26px; display:grid; gap:10px; align-content:start; }
.band .card { background:var(--dark-green); }
.step { font:700 15px/1 var(--display); width:34px; height:34px; border-radius:50%; background:var(--orange); color:var(--ink); display:grid; place-items:center; }
.box-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.box-list li { display:flex; gap:12px; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:10px; }
.box-list b { font:700 26px/1 var(--display); color:var(--deep); min-width:2ch; font-variant-numeric:tabular-nums; }
.note { color:var(--muted); font-size:16px; }
.notice { background:var(--paper); border-left:6px solid var(--orange); border-radius:12px; padding:16px 20px; }

/* forms */
form { display:grid; gap:16px; background:var(--paper); border-radius:18px; padding:26px; }
label { display:grid; gap:6px; font-weight:600; }
input[type=text], input[type=tel], input[type=email], input[type=number], select, textarea {
  font:400 18px/1.3 var(--body); padding:12px 14px; border:2px solid var(--line); border-radius:10px; background:var(--cream); color:var(--ink); width:100%; }
textarea { min-height:120px; resize:vertical; }
.check { display:flex; gap:10px; align-items:flex-start; font-weight:400; }
.check input { width:22px; height:22px; margin-top:2px; flex:none; accent-color:var(--green); }
.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.hp { position:absolute; left:-9999px; }
.msg { font-weight:600; padding:12px 14px; border-radius:10px; }
.msg.ok { background:#E3F1E7; color:var(--dark-green); } .msg.err { background:#FBE6E3; color:var(--error); }

/* footer */
footer { background:var(--ink); color:var(--cream); padding-block:44px; font-size:16px; }
footer .wrap { display:grid; gap:22px; }
footer img { height:60px; width:auto; }
footer a { color:var(--light); }
footer .cols { display:flex; flex-wrap:wrap; gap:18px 48px; justify-content:space-between; align-items:flex-start; }
footer nav a { color:var(--cream); font-size:16px; }
footer small { opacity:.8; max-width:80ch; display:block; }

@media (max-width:760px) {
  body { font-size:17px; }
  section { padding-block:44px; }
  .hero .wrap { grid-template-columns:1fr; }
  .hero .art { max-width:300px; padding:24px; }
  .top { position:static; }
  .top img { height:46px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* ---------- home page: scene, ribbon, steps, calculator, week, goals, street ---------- */
.hl { color:var(--deep); background:linear-gradient(transparent 68%, #FFDFA6 68%); padding:0 .08em; }
.btn.big { padding:18px 28px; font-size:19px; }
.btn { transition:transform .15s ease, background .15s ease; } .btn:hover { transform:translateY(-2px); }
.hero { padding-block:44px 56px; overflow:hidden; }
.hero .art { background:none; padding:0; border-radius:0; aspect-ratio:auto; position:relative; display:block; }
.scene { width:100%; height:auto; display:block; filter:drop-shadow(0 18px 0 rgba(31,107,74,.14)); }
.tag { position:absolute; background:var(--paper); border-radius:16px; padding:10px 14px; font:500 14px/1.2 var(--display); box-shadow:0 6px 0 rgba(29,42,38,.12); transform:rotate(-4deg); }
.tag b { font-size:26px; color:var(--deep); display:block; line-height:1; }
.tag.t1 { top:7%; right:-8px; } .tag.t2 { bottom:9%; left:-10px; transform:rotate(5deg); }
.rays { transform-origin:432px 300px; animation:spin 160s linear infinite; }
.wave { animation:drift 9s linear infinite; } .w2 { animation-duration:13s; animation-direction:reverse; } .w3 { animation-duration:17s; }
.cloud.c1 { animation:float 26s ease-in-out infinite alternate; } .cloud.c2 { animation:float 34s ease-in-out infinite alternate-reverse; }
.bird { transform-box:fill-box; transform-origin:40% 100%; animation:sway 5s ease-in-out infinite alternate; }
.birds { animation:float 18s ease-in-out infinite alternate; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes drift { to { transform:translateX(120px); } }
@keyframes float { to { transform:translateX(26px); } }
@keyframes sway { from { transform:rotate(-1.2deg); } to { transform:rotate(1.4deg); } }

.ribbon { background:var(--orange); color:var(--ink); overflow:hidden; padding-block:13px; transform:rotate(-1deg) scale(1.02); margin-block:-6px 0; }
.ribbon .track { display:flex; gap:0; width:max-content; animation:slide 46s linear infinite; }
.ribbon span { font:700 17px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; padding-inline:22px; white-space:nowrap; }
.ribbon span::after { content:"\2726"; margin-left:44px; color:var(--cream); }
@keyframes slide { to { transform:translateX(-25%); } }

.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; counter-reset:s; }
.step-card { background:var(--cream); border-radius:22px; padding:26px; display:grid; gap:8px; align-content:start; position:relative; transition:transform .2s ease; }
.step-card:hover { transform:translateY(-4px) rotate(-.6deg); }
.step-card .badge { width:84px; height:84px; border-radius:50%; background:var(--paper); display:grid; place-items:center; box-shadow:inset 0 0 0 3px var(--line); }
.step-card .num { position:absolute; top:18px; right:22px; font:700 56px/1 var(--display); color:var(--line); }

.calc-sec { background:linear-gradient(180deg, var(--cream), #FFEFD2); }
.calc { background:var(--paper); border-radius:24px; padding:28px; display:grid; gap:18px; box-shadow:0 10px 0 rgba(242,140,40,.25); }
.calc label { font:700 20px/1.2 var(--display); display:block; }
.calc output { color:var(--deep); font-size:28px; }
.calc input[type=range] { width:100%; accent-color:var(--orange); height:34px; }
.calc-row { display:flex; flex-wrap:wrap; gap:6px; min-height:52px; }
.calc-row svg { animation:pop .25s ease both; }
@keyframes pop { from { transform:scale(.4); opacity:0; } }
.calc-nums { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; border-top:2px solid var(--line); padding-top:16px; }
.calc-nums b { font:700 clamp(30px,5vw,44px)/1 var(--display); color:var(--green); display:block; font-variant-numeric:tabular-nums; }
.calc-nums span { font-size:15px; color:var(--muted); }

.week { display:grid; grid-template-columns:repeat(auto-fit,minmax(138px,1fr)); gap:12px; }
.day { background:var(--cream); border-radius:18px; padding:14px; display:grid; gap:12px; align-content:start; }
.day .d { font:700 13px/1 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--paper); background:var(--green); border-radius:999px; padding:6px 12px; justify-self:start; }
.day:nth-child(even) .d { background:var(--deep); }
.meal { display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; align-items:start; }
.meal p { font-size:15px; line-height:1.3; } .meal b { display:block; font:700 12px/1.3 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

.edge { display:block; width:100%; height:40px; margin-bottom:-1px; }
.band + .edge { margin:-1px 0 0; }
.big-nums { display:flex; flex-wrap:wrap; gap:14px 44px; }
.big-nums b { font:700 clamp(46px,8vw,84px)/1 var(--display); color:var(--light); display:block; font-variant-numeric:tabular-nums; }
.big-nums span { font:500 17px/1.2 var(--display); }
.flag { background:var(--dark-green); border-radius:24px; padding:28px; }
.flag img { width:150px; height:auto; }

.card.link { text-decoration:none; color:var(--ink); transition:transform .2s ease, box-shadow .2s ease; }
.card.link:hover { transform:translateY(-4px); box-shadow:0 8px 0 var(--orange); }
.card .go { font:700 16px/1 var(--display); color:var(--green); margin-top:6px; }
.card .go::after { content:" \2192"; }

.street { background:var(--cream); padding-top:30px; line-height:0; overflow:hidden; }
.houses { width:100%; height:clamp(90px,13vw,150px); display:block; }

.reveal.wait { opacity:0; transform:translateY(18px); }
.reveal { transition:opacity .5s ease, transform .5s ease; }
.reveal.in { opacity:1; transform:none; }

.sticky-cta { display:none; }
@media (max-width:760px) {
  .hero { padding-block:28px 40px; }
  .hero .art { max-width:none; }
  .tag.t1 { right:4px; } .tag.t2 { left:4px; }
  .sticky-cta { display:block; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:12; text-align:center; font:700 18px/1 var(--display); text-decoration:none; background:var(--green); color:var(--cream); padding:16px; border-radius:999px; box-shadow:0 6px 18px rgba(29,42,38,.3); }
  .street { padding-bottom:0; } footer { padding-bottom:96px; }
}
@media (prefers-reduced-motion:reduce) {
  .rays, .wave, .cloud, .bird, .birds, .ribbon .track, .calc-row svg { animation:none; }
  .reveal.wait { opacity:1; transform:none; }
}
.meal { grid-template-columns:1fr; gap:4px; }
.week { grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); }
@media (min-width:761px) { .hero .wrap { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; } }

/* ---------- inner pages: head, sign-up layout, questions, timeline, ways to help ---------- */
.phead { padding-block:44px 34px; background:linear-gradient(180deg, var(--cream), #FFEFD2); overflow:hidden; }
.phead.band { background:var(--green); }
.phead .wrap { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:32px; align-items:center; }
.phead.slim .wrap { grid-template-columns:1fr; }
.phead.slim h1 { font-size:clamp(32px,5vw,48px); }
.band h1 { color:var(--cream); } .phead.band .eyebrow { color:var(--light); }
.phead + .edge { margin:-1px 0 0; }
.phead + .edge + section { padding-top:36px; }
.phead .facts li { background:var(--paper); border-radius:999px; padding:9px 16px; }
.spot { width:100%; max-width:360px; height:auto; display:block; margin-inline:auto; }
.rays2 { transform-box:fill-box; transform-origin:center; animation:spin 120s linear infinite; }
.bob { animation:bob 3.4s ease-in-out infinite alternate; } .bob.b2 { animation-delay:-1.2s; } .bob.b3 { animation-delay:-2.3s; }
@keyframes bob { from { transform:translateY(3px); } to { transform:translateY(-7px); } }

.signup-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:start; }
form { border-radius:24px; box-shadow:0 10px 0 rgba(242,140,40,.25); scroll-margin-top:100px; }
form h3 { font-size:26px; }
.next { list-style:none; margin:0; padding:0; display:grid; gap:16px; counter-reset:n; }
.next li { display:grid; grid-template-columns:46px minmax(0,1fr); gap:14px; align-items:start; }
.next li::before { counter-increment:n; content:counter(n); font:700 20px/46px var(--display); width:46px; height:46px; border-radius:50%; background:var(--orange); color:var(--ink); text-align:center; }
.next b { font:700 19px/1.3 var(--display); color:var(--green); display:block; }
.faq { border-bottom:2px solid var(--line); }
.faq summary { font:700 19px/1.3 var(--display); color:var(--green); cursor:pointer; padding:15px 40px 15px 0; list-style:none; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:6px; top:9px; font-size:28px; color:var(--deep); }
.faq[open] summary::after { content:"\2212"; }
.faq p { padding-bottom:16px; }

.stat { display:flex; gap:18px; align-items:center; background:var(--paper); border-radius:22px; padding:18px 24px; box-shadow:0 8px 0 rgba(242,140,40,.25); }
.stat b { font:700 clamp(56px,9vw,84px)/1 var(--display); color:var(--deep); }
.stat span { font:500 19px/1.3 var(--display); }
.card.founder { border-top:8px solid var(--orange); padding:30px; gap:14px; }
.timeline { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; position:relative; }
.timeline::before { content:""; position:absolute; left:22px; right:22px; top:22px; border-top:4px dotted var(--light); }
.tl { display:grid; gap:8px; align-content:start; position:relative; }
.tl .dot { width:48px; height:48px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 3px var(--line); display:grid; place-items:center; }
.tl .when { font:700 14px/1 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--deep); margin-top:6px; }
.cta .wrap { justify-items:center; text-align:center; } .cta .row { justify-content:center; }
.cta .note { color:var(--ink); }

.way { display:grid; grid-template-columns:68px minmax(0,1fr); gap:16px; align-items:start; background:var(--paper); border-radius:20px; padding:20px; text-decoration:none; color:var(--ink); transition:transform .2s ease, box-shadow .2s ease; }
.way > span:last-child { display:grid; gap:8px; }
.way:hover { transform:translateY(-3px); box-shadow:0 8px 0 var(--orange); }
.badge { width:68px; height:68px; border-radius:50%; background:var(--cream); display:grid; place-items:center; }
.way .go { font:700 16px/1 var(--display); color:var(--green); } .way .go::after { content:" \2192"; }

.prose { background:var(--paper); border-radius:24px; padding:clamp(22px,4vw,40px); display:grid; gap:24px; max-width:820px; }
.prose .qa { display:grid; gap:6px; }
.lost .wrap { justify-items:center; text-align:center; }

@media (max-width:760px) {
  .phead { padding-block:30px 24px; }
  .phead .wrap, .signup-grid, .timeline { grid-template-columns:1fr; }
  .spot { max-width:230px; }
  .hide-pic-m .pic { display:none; }
  .signup-grid #signup { order:-1; }
  .timeline::before { left:22px; right:auto; top:10px; bottom:10px; border-top:0; border-left:4px dotted var(--light); }
  .tl { padding-left:64px; } .tl .dot { position:absolute; left:0; top:-4px; }
  .top nav { flex-wrap:nowrap; overflow-x:auto; width:100%; gap:18px; scrollbar-width:none; }
  .top nav::-webkit-scrollbar { display:none; }
  .top nav a { white-space:nowrap; flex:none; } .top nav a[href="/"] { display:none; }
}
@media (prefers-reduced-motion:reduce) { .rays2, .bob { animation:none; } }

/* header: Donate sits beside the logo on phones, links on one row below */
.top nav { margin-left:auto; }
.top .give { padding:11px 18px; font-size:16px; }
@media (max-width:760px) { .top nav { order:3; margin-left:0; } .wide { display:none; } }

.la { width:100%; max-width:420px; height:auto; display:block; margin-inline:auto; }
.home-la { align-items:center; }