/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · macrostructure: Mosaic Appeal (split hero + sideways appeal row) · tone: calm charity · anchor hue: forest green / marigold · studied: Noho (Awwwards SOTD) · contrast: pass (40-41) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) */
@font-face{font-family:Satoshi;src:url(/assets/fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(/assets/fonts/satoshi-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(/assets/fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#f6f2ea;--sand:#ebe4d7;--sand-deep:#dcd2c1;--ink:#1c2621;--ink-soft:#4d5a53;
  --green:#135d42;--green-deep:#0e4631;--green-tint:#dbe7df;--cream:#f5ebdc;--marigold:#f6a42f;--marigold-ink:#5a3a06;--clay:#a8532f;--clay-tint:#f3dfd3;
  --white:#fffdf8;--shade:rgb(28 38 33 / 0.08);--veil:rgb(246 242 234 / 0.86);
  --t1:#e8c9a8;--t2:#c9dccf;--t3:#f1d7a0;--t4:#d9cfe0;--t5:#e7c2b4;
  --f-body:Satoshi,system-ui,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --gut:clamp(16px,3.2vw,48px);--r:20px;--ctl:44px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{overflow-x:clip;background:var(--paper);scrollbar-color:var(--green) var(--sand);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--sand)}
::-webkit-scrollbar-thumb{background:var(--green);border:2px solid var(--sand);border-radius:8px}
body{margin:0;overflow-x:clip;color:var(--ink);background:var(--paper);font:400 17px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green);text-underline-offset:3px}
a:hover{color:var(--green-deep)}
code{font:500 .92em var(--f-body);background:var(--green-tint);color:var(--green-deep);padding:0 var(--s1);border-radius:6px}
::selection{background:var(--marigold);color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.skip{position:absolute;left:-999px;top:var(--s2);background:var(--green);color:var(--cream);padding:var(--s2) var(--s4);border-radius:999px;z-index:99}
.skip:focus{left:var(--s2)}
h1,h2,h3{font-weight:500;letter-spacing:-.035em;margin:0;overflow-wrap:anywhere;min-width:0;font-style:normal}

/* header */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--gut);background:var(--veil);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:var(--s3);color:var(--ink);text-decoration:none;font:500 24px/1 var(--f-body);letter-spacing:-.04em}
.brand img{width:40px;height:40px;border-radius:10px}
.nav{display:flex;gap:var(--s1);margin-left:var(--s4)}
.nav a{min-height:var(--ctl);display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;padding:0 var(--s3);border-radius:999px;font-weight:500;white-space:nowrap;transition:background-color .2s var(--ease)}
.nav a:hover{background:var(--sand)}
.nav a:active{background:var(--sand-deep)}
.bar-end{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.ca{min-height:var(--ctl);display:inline-flex;align-items:center;gap:var(--s2);border:1px solid var(--sand-deep);background:var(--white);color:var(--ink);font:500 14px/1 var(--f-body);padding:0 var(--s4);border-radius:999px;cursor:pointer;white-space:nowrap;transition:background-color .2s var(--ease)}
.ca b{font-weight:400;color:var(--ink-soft)}
.ca:hover{background:var(--sand)}
.ca:active{background:var(--sand-deep)}
.ca.minted b{color:var(--green)}
.ico{width:var(--ctl);height:var(--ctl);display:inline-grid;place-items:center;border:1px solid var(--sand-deep);border-radius:999px;color:var(--ink);background:var(--white);transition:background-color .2s var(--ease)}
.ico svg{width:18px;height:18px;fill:currentColor}
.ico:hover{background:var(--sand);color:var(--ink)}
.ico:active{background:var(--sand-deep)}

/* buttons */
.btn,.btn-line{min-height:var(--ctl);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:0 var(--s5);border-radius:999px;font:500 16px/1 var(--f-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.btn{background:var(--green);color:var(--cream);border:1px solid var(--green)}
.btn:hover{background:var(--green-deep);color:var(--cream)}
.btn:active{background:var(--ink)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-line:active{background:var(--green-deep);color:var(--paper)}
.btn:disabled,.btn[aria-disabled=true],.btn-line[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.buy[aria-disabled=true]:hover{background:transparent;color:var(--ink)}
.btn.wide{width:100%;margin-top:var(--s4)}
.phantom svg{width:18px;height:18px;fill:currentColor}
.phantom .eye{fill:var(--green)}
.phantom.on{background:var(--white);color:var(--green);border-color:var(--green)}
.phantom.on .eye{fill:var(--white)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);padding:var(--s8) var(--gut) var(--s9);min-height:calc(100svh - 68px);align-items:center}
.display{font-size:clamp(40px,5.2vw,108px);line-height:1.04}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:inline-block}
.lede{font-size:clamp(17px,1.35vw,22px);max-width:36em;margin:var(--s5) 0 0;color:var(--ink-soft)}
.cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6);align-items:center}
.trust{display:flex;align-items:center;gap:var(--s2);margin:var(--s6) 0 0;font-size:15px;color:var(--ink-soft);max-width:40em}
.live-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--green);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--green-tint)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.mosaic{width:100%;max-width:78svh;justify-self:end;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);align-self:stretch;align-content:center}
.tile{margin:0;position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--sand);display:grid;place-items:center;color:var(--ink);text-decoration:none}
.tile:nth-child(3n+2){transform:translateY(var(--s7))}
.tile img{width:66%;height:66%;object-fit:cover;border-radius:50%}
.tile .noimg{width:66%;height:66%}
.tile figcaption{position:absolute;left:var(--s3);bottom:var(--s3);right:var(--s3);font:500 14px/1.2 var(--f-body);display:flex;justify-content:space-between;gap:var(--s2)}
.tile figcaption b{font-weight:500;color:var(--clay)}
.tile.mark{background:var(--green)}
.tile.mark img{width:62%;height:62%;border-radius:0}
.tile.quiet{background:var(--sand)}
.tile.quiet svg{width:30%;fill:var(--sand-deep)}
a.tile{transition:filter .2s var(--ease)}
a.tile:hover{filter:brightness(.96)}
a.tile:active{filter:brightness(.92)}
.c1{background:var(--t1)}.c2{background:var(--t2)}.c3{background:var(--t3)}.c4{background:var(--t4)}.c5{background:var(--t5)}

/* impact */
.impact{padding:0 var(--gut) var(--s9)}
.totals{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.totals div{background:var(--white);border-radius:var(--r);padding:var(--s5)}
.totals dt{font-size:15px;color:var(--ink-soft)}
.totals dd{margin:var(--s2) 0 0;font:500 clamp(36px,3.6vw,64px)/1 var(--f-body);letter-spacing:-.04em}
.totals div:first-child{background:var(--green);color:var(--cream)}
.totals div:first-child dt{color:var(--cream)}
.totals div:first-child dd{color:var(--marigold)}
.impact-note{margin:var(--s4) 0 0;font-size:14px;color:var(--ink-soft)}

/* sections */
.appeals,.give,.gifts,.how,.faq,.share{padding:var(--s9) var(--gut)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);align-items:end;margin-bottom:var(--s7)}
.title{font-size:clamp(34px,4vw,80px);line-height:1.04}
.sec-side p{margin:0;max-width:38em;color:var(--ink-soft)}
.status{list-style:none;padding:0;margin:var(--s4) 0 0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.status li{background:var(--white);border-radius:999px;padding:var(--s1) var(--s3);font-size:14px;color:var(--ink-soft)}
.status b{font-weight:500;color:var(--ink);margin-left:var(--s1)}
.empty{color:var(--ink-soft);margin:0}

/* appeal row */
.appeals{position:relative;background:var(--sand)}
.row{display:flex;gap:var(--s4);overflow-x:auto;padding:var(--s1) var(--s1) var(--s5);scroll-snap-type:x proximity;cursor:grab}
.row.drag{cursor:grabbing;scroll-snap-type:none}
.row>.empty{max-width:40em}
.card{flex:0 0 clamp(260px,24vw,360px);scroll-snap-align:start;text-align:left;font:inherit;color:var(--ink);background:var(--white);border:1px solid transparent;border-radius:var(--r);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);cursor:inherit;transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.card:hover{border-color:var(--sand-deep)}
.card:active{background:var(--paper)}
.card.on{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.card-pic{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--t1)}
.card:nth-child(5n+2) .card-pic{background:var(--t2)}.card:nth-child(5n+3) .card-pic{background:var(--t3)}.card:nth-child(5n+4) .card-pic{background:var(--t4)}.card:nth-child(5n) .card-pic{background:var(--t5)}
.card-pic img{width:52%;aspect-ratio:1;object-fit:cover;border-radius:50%}
.noimg{display:grid;place-items:center;aspect-ratio:1;width:52%;border-radius:50%;background:var(--white);color:var(--ink);font:500 32px/1 var(--f-body)}
.tag{position:absolute;left:var(--s3);top:var(--s3);background:var(--white);color:var(--clay);border-radius:999px;padding:var(--s1) var(--s3);font:500 13px/1.4 var(--f-body)}
.card h3{font-size:24px;line-height:1.1}
.card p{margin:0;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.card .who{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--sand);font-size:15px;font-weight:500}
.card .who span:last-child{color:var(--green);white-space:nowrap}
.cursor{position:fixed;left:0;top:0;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;background:var(--green);color:var(--cream);display:grid;place-items:center;font:500 15px/1 var(--f-body);pointer-events:none;z-index:50;opacity:0;transform:scale(.4)}

/* give */
.desk{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.panel{background:var(--white);border-radius:var(--r);padding:var(--s6)}
.panel-h{font-size:22px;letter-spacing:-.02em;margin-bottom:var(--s4)}
.picked-row{display:flex;gap:var(--s4);align-items:flex-start}
.picked-row img,.picked-row .noimg{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover}
.picked-row h3{font-size:26px}
.picked-row p{margin:var(--s1) 0 0;font-size:15px;color:var(--ink-soft)}
.victims{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);max-height:480px;overflow:auto}
.victims li{display:flex;justify-content:space-between;gap:var(--s2);align-items:center;background:var(--paper);border-radius:12px;padding:var(--s2) var(--s3);font-size:15px;transition:opacity .2s var(--ease)}
.victims li a{font-weight:500}
.victims small{color:var(--ink-soft);font-size:13px;white-space:nowrap}
.victims li.off{opacity:.45}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips button{min-height:var(--ctl);padding:0 var(--s4);border-radius:999px;border:1px solid var(--sand-deep);background:var(--white);color:var(--ink);font:500 15px/1 var(--f-body);cursor:pointer;white-space:nowrap;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.chips button:hover{background:var(--sand)}
.chips button:active{background:var(--sand-deep)}
.chips button.on{background:var(--green-tint);border-color:var(--green);color:var(--green-deep)}
.chips button:disabled{opacity:.55;cursor:not-allowed}
.field{display:grid;gap:var(--s2);margin-top:var(--s5);font-size:15px;color:var(--ink-soft)}
.input{display:flex;align-items:center;min-height:var(--ctl);border:1px solid var(--sand-deep);border-radius:12px;background:var(--white);padding:0 var(--s4);outline:2px solid transparent;transition:border-color .2s var(--ease)}
.input:hover{border-color:var(--ink-soft)}
.input:focus-within{outline:2px solid var(--green);outline-offset:1px}
.input input{flex:1;min-width:0;border:0;background:transparent;font:500 20px/1 var(--f-body);color:var(--ink);outline:0;padding:var(--s2) 0}
.input i{font-style:normal;color:var(--ink-soft)}
.input input:disabled{opacity:.55;cursor:not-allowed}
input[type=range]{width:100%;accent-color:var(--green);height:var(--ctl);cursor:pointer}
.each{margin:var(--s2) 0 0;min-height:1lh;font-weight:500}
#sim{min-height:1lh}
.sim-box,.box{margin-top:var(--s5);background:var(--green-tint);border-radius:16px;padding:var(--s5)}
.box.bad{background:var(--clay-tint)}
.box h4{margin:0 0 var(--s2);font:500 20px/1.2 var(--f-body);letter-spacing:-.02em;color:var(--green-deep)}
.box.bad h4{color:var(--clay)}
.box p{margin:0 0 var(--s2);font-size:15px}
.box ul{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1) var(--s4);font-size:14px}
.box li{display:flex;justify-content:space-between;gap:var(--s2)}

/* share */
.share{background:var(--sand)}
#card{width:100%;max-width:960px;height:auto;border-radius:var(--r);display:block}

/* gifts */
.gift-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.stories{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.stories li{background:var(--white);border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);min-height:180px}
.stories li.empty{grid-column:1/-1;min-height:0}
.stories .amt{font:500 32px/1 var(--f-body);letter-spacing:-.03em;color:var(--green)}
.stories .amt .dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--marigold);margin-right:var(--s2);vertical-align:middle}
.stories p{margin:0;font-size:15px}
.stories small{margin-top:auto;color:var(--ink-soft);font-size:14px;display:flex;justify-content:space-between;gap:var(--s2)}
.tops{list-style:none;margin:0;padding:0;counter-reset:t}
.tops li{counter-increment:t;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s2);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--sand);font-size:15px}
.tops li::before{content:counter(t);color:var(--ink-soft)}
.tops li.empty{display:block;border:0}
.tops li.empty::before{content:none}
.hold{margin-left:var(--s2);background:var(--green-tint);color:var(--green-deep);border-radius:999px;padding:0 var(--s2);font-size:12px}
.otd{margin:var(--s4) 0 0;font-size:14px;color:var(--ink-soft)}

/* how */
.how .title{margin-bottom:var(--s7)}
.steps{display:flex;gap:var(--s3);min-height:340px}
.step{flex:1 1 0;min-width:0;background:var(--sand);border-radius:var(--r);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);transition:flex-grow .6s var(--ease),background-color .3s var(--ease)}
.step svg{width:44px;height:44px;fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:auto}
.step h3{font-size:clamp(22px,1.8vw,30px);line-height:1.1}
.step p{margin:0;font-size:15px;color:var(--ink-soft);max-width:30em}
.step:hover,.step:focus-within{flex-grow:1.8;background:var(--green-tint)}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s7)}
.qs details{border-top:1px solid var(--sand-deep)}
.qs details:last-child{border-bottom:1px solid var(--sand-deep)}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s5) 0;font:500 clamp(18px,1.5vw,24px)/1.25 var(--f-body);letter-spacing:-.02em}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--sand) linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat;transition:transform .3s var(--ease)}
.qs details:not([open]) summary::after{background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));background-size:12px 2px,2px 12px;background-position:center,center;background-repeat:no-repeat}
.qs summary:hover{color:var(--green)}
.qs p{margin:0 0 var(--s5);max-width:44em;color:var(--ink-soft)}

/* footer */
.foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap;padding:var(--s7) var(--gut);background:var(--green);color:var(--cream)}
.foot .brand{color:var(--cream)}
.foot-main{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.foot-main p{margin:0;font-size:15px}
.foot-links{display:flex;gap:var(--s2)}
.foot .ico{background:transparent;border-color:var(--cream);color:var(--cream)}
.foot .ico:hover{background:var(--cream);color:var(--green)}

/* toast */
.toast{position:fixed;left:50%;bottom:var(--s5);transform:translate(-50%,20px);background:var(--ink);color:var(--paper);border-radius:14px;padding:var(--s3) var(--s5);max-width:min(560px,calc(100vw - 32px));font-size:15px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:90}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

@media (max-width:1100px){
  .nav{display:none}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:var(--s7)}
  .sec-head,.desk,.gift-grid,.faq{grid-template-columns:minmax(0,1fr)}
  .sec-head{gap:var(--s4)}
  .totals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{flex-direction:column;min-height:0}
  .step svg{margin-bottom:var(--s2)}
}
@media (max-width:720px){
  .bar{gap:var(--s2);padding:var(--s2) var(--s4)}
  .brand span{display:none}
  .buy{display:none}
  .ca{padding:0 var(--s3)}
  .ca b{display:none}
  .tile figcaption{display:none}
  .phantom span{display:none}
  .phantom{padding:0 var(--s3)}
  .display{font-size:clamp(34px,10vw,52px)}
  .title{font-size:clamp(30px,8.6vw,44px)}
  .appeals,.give,.gifts,.how,.faq,.share{padding:var(--s8) var(--s4)}
  .hero{padding:var(--s6) var(--s4) var(--s8)}
  .impact{padding:0 var(--s4) var(--s8)}
  .panel{padding:var(--s5)}
  .victims,.box ul,.stories{grid-template-columns:minmax(0,1fr)}
  .tile figcaption{font-size:12px}
  .mosaic{gap:var(--s2)}
  .tile:nth-child(3n+2){transform:translateY(var(--s5))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
}