/* Help a Human public campaign — light, warm, GoFundMe-like (.hhp-*) */
:root{
  --hhp-green:#0a8a5f; --hhp-green-d:#076c4a; --hhp-ink:#14202b; --hhp-muted:#5c6b78;
  --hhp-line:#e4e9ee; --hhp-bg:#f6f8fa; --hhp-card:#fff; --hhp-accent:#1f7ae0;
  --hhp-warm:#fff8ef; --hhp-gold:#c9893a; --hhp-radius:16px;
}
*{box-sizing:border-box}
body.hhp{margin:0;background:var(--hhp-bg);color:var(--hhp-ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--hhp-green);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:2rem;line-height:1.15;margin:.2em 0 .4em}
h2{font-size:1.35rem;margin:0 0 .6em}
h3{font-size:1.05rem;margin:0 0 .5em}
.hhp-wrap{max-width:1060px;margin:0 auto;padding:0 1.1rem}
.hhp-muted{color:var(--hhp-muted);font-size:.95rem}

/* Top nav */
.hhp-topnav{background:var(--hhp-card);border-bottom:1px solid var(--hhp-line);position:sticky;top:0;z-index:20}
.hhp-topnav__in{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.1rem}
.hhp-brand{font-weight:800;font-size:1.1rem}

/* Buttons */
.hhp-btn{display:inline-block;padding:.7rem 1.1rem;border-radius:999px;border:1px solid var(--hhp-line);
  background:#fff;color:var(--hhp-ink);font-weight:700;cursor:pointer;font-size:1rem;text-align:center}
.hhp-btn:hover{text-decoration:none;filter:brightness(.98)}
.hhp-btn--primary{background:var(--hhp-green);border-color:var(--hhp-green);color:#fff}
.hhp-btn--primary:hover{background:var(--hhp-green-d)}
.hhp-btn--card{background:var(--hhp-accent);border-color:var(--hhp-accent);color:#fff}
.hhp-btn--ghost{background:#fff}
.hhp-btn--lg{display:block;width:100%;margin-top:.6rem;padding:.85rem 1.1rem;font-size:1.05rem}
.hhp-btn--sm{padding:.4rem .8rem;font-size:.9rem}

/* Hero */
.hhp-hero{background:linear-gradient(180deg,#fff, var(--hhp-bg));padding:1.6rem 0 1rem;border-bottom:1px solid var(--hhp-line)}
.hhp-hero__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:1.6rem;align-items:start}
.hhp-hero__media img{width:100%;border-radius:var(--hhp-radius);object-fit:cover;max-height:420px}
.hhp-hero__placeholder{width:100%;aspect-ratio:4/3;border-radius:var(--hhp-radius);display:grid;place-items:center;
  background:linear-gradient(135deg,#cfe9df,#a9d6c4);font-size:5rem;font-weight:800;color:#0a8a5f}
.hhp-hero__panel{background:var(--hhp-card);border:1px solid var(--hhp-line);border-radius:var(--hhp-radius);padding:1.2rem}
.hhp-eyebrow{color:var(--hhp-gold);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;margin:0}
.hhp-verified{display:inline-block;background:var(--hhp-warm);color:var(--hhp-gold);border:1px solid #f0dcc0;
  padding:.25rem .7rem;border-radius:999px;font-size:.85rem;font-weight:700;margin:.2rem 0 .6rem}

/* Progress */
.hhp-progress{margin:.6rem 0 1rem}
.hhp-progress__bar{position:relative;height:10px;background:#e9eef2;border-radius:999px;overflow:hidden}
.hhp-progress__bar span{display:block;height:100%;background:var(--hhp-green);border-radius:999px;transition:width 1s ease}
.hhp-progress__pending{position:absolute;top:0;height:100%;background:repeating-linear-gradient(45deg,rgba(10,138,95,.38),rgba(10,138,95,.38) 6px,rgba(10,138,95,.20) 6px,rgba(10,138,95,.20) 12px);border-radius:999px;animation:hhpPend 1.6s linear infinite}
@keyframes hhpPend{to{background-position:24px 0}}
.hhp-progress__nums{margin-top:.5rem}
.hhp-progress__nums strong{font-size:1.5rem}
.hhp-progress__nums span{color:var(--hhp-muted);margin-left:.3rem}
.hhp-progress__meta{margin:.2rem 0 0;color:var(--hhp-muted);font-size:.9rem}
.hhp-progress__pendnote{margin:.35rem 0 0;font-size:.9rem;color:var(--hhp-green-d);background:#eaf6f1;border-radius:8px;padding:.35rem .6rem}
.hhp-views{display:inline-flex;align-items:center;gap:.85rem;margin:.2rem 0 1rem;padding:.5rem .95rem;background:#fff;border:1px solid var(--hhp-line);border-radius:999px;font-size:.9rem;color:var(--hhp-muted);box-shadow:0 2px 8px rgba(20,32,42,.05)}
.hhp-views__stat b{color:var(--hhp-ink);font-size:1.08rem;font-weight:800;margin-right:.15rem}
.hhp-views__sep{width:1px;height:18px;background:var(--hhp-line)}

/* Layout cols */
.hhp-main{padding:1.4rem 1.1rem 3rem}
.hhp-cols{display:grid;grid-template-columns:1fr 360px;gap:1.4rem;align-items:start}
.hhp-cols>*{min-width:0}
.hhp-card{background:var(--hhp-card);border:1px solid var(--hhp-line);border-radius:var(--hhp-radius);padding:1.2rem 1.3rem;margin-bottom:1.2rem}
.hhp-story{white-space:normal;overflow-wrap:break-word;word-break:break-word}
.hhp-col-side{position:sticky;top:70px}

/* Voices */
.hhp-voices{display:flex;flex-direction:column;gap:.9rem}
.hhp-voice__who span{color:var(--hhp-muted)}
.hhp-voice audio{width:100%;margin-top:.35rem}

/* Needs */
.hhp-needs{list-style:none;margin:0;padding:0}
.hhp-needs li{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--hhp-line)}
.hhp-needs li>div{min-width:0}
.hhp-needs li .hhp-btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:560px){
  .hhp-needs li{flex-direction:column;align-items:stretch;gap:.6rem}
  .hhp-needs li .hhp-btn{width:100%;text-align:center}
}
.hhp-tag{display:inline-block;background:var(--hhp-warm);color:var(--hhp-gold);border:1px solid #f0dcc0;
  padding:.05rem .5rem;border-radius:999px;font-size:.75rem;font-weight:700;margin-right:.3rem}

/* Portfolio */
.hhp-portfolio{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.hhp-art{margin:0}
.hhp-art img{width:100%;height:140px;object-fit:cover;border-radius:10px}
.hhp-art figcaption{font-size:.9rem;margin-top:.3rem}

/* Updates / wall */
.hhp-update{border-bottom:1px solid var(--hhp-line);padding:.6rem 0}
.hhp-wall{list-style:none;margin:0;padding:0}
.hhp-wall li{padding:.6rem 0;border-bottom:1px solid var(--hhp-line)}
.hhp-wall__name{font-weight:700}
.hhp-wall__amt{color:var(--hhp-green);font-weight:700;margin-left:.4rem}
.hhp-wall__msg{color:var(--hhp-muted);font-style:italic;margin-top:.2rem}
.hhp-badge{display:inline-block;padding:.05rem .5rem;border-radius:999px;font-size:.72rem;font-weight:700;margin-left:.4rem;border:1px solid var(--hhp-line)}
.hhp-badge--gift{color:var(--hhp-green)} .hhp-badge--loan{color:var(--hhp-gold)} .hhp-badge--payitforward{color:var(--hhp-accent)}
.hhp-badge--pending{color:var(--hhp-green-d);background:#eaf6f1;border-color:#cfe9df}
/* Humans-helping live feed (slow, smooth auto-scroll; pause on hover) */
.hhp-feed__view{position:relative;margin-top:.3rem}
.hhp-feed--live .hhp-feed__view{max-height:320px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.hhp-feed__track{list-style:none;margin:0;padding:0}
.hhp-feed--live .hhp-feed__track{animation:hhpFeedScroll var(--hhp-feed-dur,40s) linear infinite}
.hhp-feed__view:hover .hhp-feed__track,.hhp-feed__view:focus-within .hhp-feed__track{animation-play-state:paused}
@keyframes hhpFeedScroll{from{transform:translateY(0)}to{transform:translateY(var(--hhp-feed-shift,0))}}
.hhp-feed__item{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem 0;border-bottom:1px solid var(--hhp-line)}
.hhp-feed__line{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.hhp-feed__name{font-weight:700}
.hhp-feed__amt{color:var(--hhp-green);font-weight:800}
.hhp-feed__body .hhp-badge{margin-left:0;margin-top:.15rem}
.hhp-feed__msg{color:var(--hhp-muted);font-style:italic;margin-top:.25rem;font-size:.92rem}
.hhp-feed__foot{margin:.6rem 0 0;font-size:.88rem}
.hhp-feed__pause{align-items:center;gap:.35rem;margin:.1rem 0 .55rem;background:#eaf6f1;border:1px solid #cfe9df;color:var(--hhp-green-d);border-radius:999px;padding:.35rem .85rem;font:inherit;font-weight:700;font-size:.86rem;cursor:pointer}
.hhp-feed__pause:hover{background:#dcefe4}
.hhp-feed--reading .hhp-feed__track{animation:none!important;transform:none!important}
.hhp-feed--reading .hhp-feed__item[data-clone]{display:none}
.hhp-feed--reading .hhp-feed__view{max-height:70vh;overflow-y:auto;-webkit-mask-image:none;mask-image:none}
.hhp-feed__item.is-new{animation:hhpFeedNew 2.2s ease}
@keyframes hhpFeedNew{0%{background:#eaf6f1;transform:translateY(-6px);opacity:.2}100%{background:transparent;transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.hhp-feed--live .hhp-feed__track{animation:none}.hhp-feed--live .hhp-feed__view{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}}
.hhp-wall--pending{opacity:.92}
.hhp-av--pending{background:repeating-linear-gradient(45deg,var(--hhp-green),var(--hhp-green) 4px,var(--hhp-green-d) 4px,var(--hhp-green-d) 8px)!important}

/* Donate box */
.hhp-donate__form{display:flex;flex-direction:column;gap:.6rem}
.hhp-amts{display:flex;flex-wrap:wrap;gap:.4rem}
.hhp-amt{flex:1 1 28%;padding:.6rem;border:1px solid var(--hhp-line);border-radius:10px;background:#fff;font-weight:700;cursor:pointer}
.hhp-amt.is-active{border-color:var(--hhp-green);background:#eaf7f1;color:var(--hhp-green-d)}
.hhp-field{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--hhp-muted)}
.hhp-field input,.hhp-field textarea,.hhp-field select{padding:.7rem .75rem;border:1px solid var(--hhp-line);border-radius:10px;font:inherit;font-size:16px;color:var(--hhp-ink);width:100%}
.hhp-field textarea{min-height:120px;line-height:1.5;resize:vertical}
.hhp-field input:focus,.hhp-field textarea:focus,.hhp-field select:focus,.hh-rich:focus{outline:none;border-color:var(--hhp-green);box-shadow:0 0 0 3px rgba(10,138,95,.12)}
.hh-rich{width:100%;min-height:160px;padding:.8rem .85rem;border:1px solid var(--hhp-line);border-radius:10px;font:inherit;font-size:16px;line-height:1.55;color:var(--hhp-ink);resize:vertical}
.hhp-kind{border:1px solid var(--hhp-line);border-radius:10px;padding:.6rem .7rem;margin:.2rem 0;font-size:.92rem}
.hhp-kind legend{font-size:.8rem;color:var(--hhp-muted);padding:0 .3rem}
.hhp-kind label{display:block;padding:.15rem 0}
.hhp-freq label{display:inline-block;margin-right:.9rem}
.hhp-freq__note{font-size:.84rem;color:var(--hhp-green,#0a8a5f);background:#eaf6f1;border:1px solid #cfe9df;border-radius:10px;padding:.5rem .65rem;margin:.1rem 0 .3rem}
.hhp-check{font-size:.9rem;display:flex;gap:.4rem;align-items:center}
.hhp-fineprint{font-size:.78rem;color:var(--hhp-muted);margin:.4rem 0 0}
.hhp-pms{margin-top:1rem;border-top:1px solid var(--hhp-line);padding-top:.8rem}
.hhp-pms ul{list-style:none;margin:0;padding:0}
.hhp-pms li{padding:.4rem 0;border-bottom:1px dashed var(--hhp-line)}
.hhp-pm__kind{font-weight:700;margin-right:.4rem}
.hhp-pm__handle{font-family:ui-monospace,Menlo,monospace}
/* Big, can't-miss "send your gift" block on the post-pledge page */
.hhp-pay{background:linear-gradient(180deg,#fffaf0,#fff);border:2px solid var(--hhp-gold)!important;box-shadow:0 16px 44px rgba(201,137,58,.16)}
.hhp-pay__head{text-align:center;margin-bottom:1rem}
.hhp-pay__step{display:inline-block;background:var(--hhp-gold);color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding:.25rem .7rem;border-radius:999px}
.hhp-pay__head h2{margin:.5rem 0 .3rem;font-size:1.5rem}
.hhp-pay__head p{margin:0;color:var(--hhp-muted)}
.hhp-pay__grid{display:grid;gap:.8rem}
.hhp-pay__m{border:1px solid var(--hhp-line);border-radius:14px;padding:1rem 1.1rem;background:#fff}
.hhp-pay__kind{display:block;font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--hhp-gold);margin-bottom:.45rem}
.hhp-pay__handle{display:flex;align-items:center;justify-content:space-between;gap:.7rem;width:100%;cursor:pointer;
  background:#f7faf8;border:1px solid var(--hhp-line);border-radius:11px;padding:.7rem .85rem;font:inherit}
.hhp-pay__handle:hover{border-color:var(--hhp-green)}
.hhp-pay__h{font-family:ui-monospace,Menlo,monospace;font-size:1.25rem;font-weight:700;color:var(--hhp-ink);word-break:break-all;text-align:left}
.hhp-pay__copy{flex:0 0 auto;background:var(--hhp-green);color:#fff;font-weight:800;font-size:.85rem;border-radius:999px;padding:.4rem .9rem}
.hhp-pay__handle.is-copied .hhp-pay__copy{background:var(--hhp-green-d)}
.hhp-pay__note{margin-top:.5rem;color:var(--hhp-muted);font-size:.92rem;line-height:1.5}

/* Footer */
.hhp-footer{background:var(--hhp-card);border-top:1px solid var(--hhp-line);padding:1.4rem 0;text-align:center}

@media(max-width:860px){
  .hhp-hero__grid{grid-template-columns:1fr}
  .hhp-cols{grid-template-columns:1fr}
  .hhp-col-side{position:static}
}

/* ---- Recommendations / testimonials ---- */
.hhp-testimonials{display:flex;flex-direction:column;gap:1rem}
.hhp-quote{margin:0;border-left:3px solid var(--hhp-green);padding:.4rem 0 .4rem 1rem}
.hhp-quote blockquote{margin:0 0 .5rem;font-size:1.05rem;line-height:1.5}
.hhp-quote figcaption{display:flex;align-items:center;gap:.6rem;color:var(--hhp-muted);font-size:.9rem}
.hhp-quote figcaption img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.hhp-quote figcaption strong{color:var(--hhp-ink)}

/* ---- Recipient-selectable color themes (look & feel) ---- */
/* Each theme overrides the primary/accent palette; the recipient picks one on
   their "My campaign" page. 'default' uses the :root values above. */
body.hhp-theme-ocean  {--hhp-green:#0e7c9b;--hhp-green-d:#0a5f78;--hhp-accent:#1f7ae0;--hhp-gold:#c97a3a;--hhp-warm:#eef7fb}
body.hhp-theme-violet {--hhp-green:#6d44c8;--hhp-green-d:#54329e;--hhp-accent:#9a5cff;--hhp-gold:#b07ad0;--hhp-warm:#f5f0fe}
body.hhp-theme-sunset {--hhp-green:#e06a2b;--hhp-green-d:#b9521c;--hhp-accent:#e0892b;--hhp-gold:#c9893a;--hhp-warm:#fff4ec}
body.hhp-theme-rose   {--hhp-green:#c83a78;--hhp-green-d:#9e2c5e;--hhp-accent:#e05c97;--hhp-gold:#c95a8a;--hhp-warm:#fdf0f6}
body.hhp-theme-forest {--hhp-green:#1f6b45;--hhp-green-d:#155033;--hhp-accent:#2f8f6a;--hhp-gold:#b08a3a;--hhp-warm:#eef6f1}
body.hhp-theme-slate  {--hhp-green:#3f5163;--hhp-green-d:#2c3a48;--hhp-accent:#5a7a99;--hhp-gold:#8a7a5a;--hhp-warm:#f1f4f7}

/* ============================================================
   Engagement layer — reveals, hover, vouch chips, avatars
   ============================================================ */

/* Scroll reveal (JS adds .is-in) */
.reveal-on [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal-on [data-reveal].is-in{opacity:1;transform:none}

/* Cards lift a little on hover; section headings get an accent bar */
.hhp-card{transition:transform .2s ease,box-shadow .2s ease}
.hhp-main .hhp-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(20,32,42,.08)}
.hhp-card h2{display:flex;align-items:center;gap:.5rem}
.hhp-card h2:before{content:"";width:6px;height:1.1em;border-radius:99px;background:linear-gradient(180deg,var(--hhp-green),var(--hhp-green-d));flex:0 0 auto}

/* Hero polish */
.hhp-hero{background:radial-gradient(120% 80% at 0% 0%,rgba(10,138,95,.08),transparent 60%),linear-gradient(180deg,#fff,var(--hhp-bg))}
.hhp-hero__panel{box-shadow:0 18px 50px rgba(20,32,42,.08)}
.hhp-hero__media img{box-shadow:0 18px 50px rgba(20,32,42,.12)}
.hhp-hero__media{position:relative}
.hhp-verified{box-shadow:0 2px 0 rgba(201,137,58,.12)}
/* Floating hero chips (illustrated touch) */
.hhp-hero__chip{position:absolute;background:#fff;border:1px solid var(--hhp-line);border-radius:12px;
  padding:.45rem .75rem;font-size:.82rem;font-weight:600;color:var(--hhp-ink);
  box-shadow:0 14px 32px rgba(20,32,42,.18);white-space:nowrap;z-index:2}
.hhp-hero__chip strong{font-weight:800}
.hhp-hero__chip{bottom:16px;left:-10px}
.hhp-hero__chip--verify{bottom:auto;left:auto;top:16px;right:-10px;color:#076c4a;background:#eaf6f1;border-color:#cfe9df}
.hhp-float{animation:hhpfloat 6s ease-in-out infinite}
.hhp-float2{animation:hhpfloat 5s ease-in-out .9s infinite}
@keyframes hhpfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:720px){.hhp-hero__chip{display:none}}

/* Progress bar shimmer */
.hhp-progress__bar span{position:relative;overflow:hidden}
.hhp-progress__bar span:after{content:"";position:absolute;inset:0;border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%);animation:hhpshim 2.4s ease-in-out 1s infinite}
@keyframes hhpshim{60%,100%{transform:translateX(100%)}}

/* Reusable avatar (initials) */
.hhp-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-weight:800;font-size:.82rem;color:#fff;background:linear-gradient(135deg,var(--hhp-green),var(--hhp-green-d))}

/* Vouched-by section */
.hhp-vouch__list{display:flex;flex-wrap:wrap;gap:.6rem}
.hhp-vouch__chip{display:flex;align-items:center;gap:.55rem;background:var(--hhp-warm);
  border:1px solid #f0dcc0;border-radius:999px;padding:.3rem .9rem .3rem .35rem}
.hhp-vouch__chip .hhp-av{width:30px;height:30px;font-size:.75rem;background:linear-gradient(135deg,var(--hhp-gold),#a96f22)}
.hhp-vouch__chip b{font-weight:700;font-size:.92rem}
.hhp-vouch__chip span{color:var(--hhp-muted);font-size:.8rem;display:block;line-height:1.1}

/* Supporter wall with avatars */
.hhp-wall li{display:flex;gap:.7rem;align-items:flex-start}
.hhp-wall__body{flex:1;min-width:0}

/* Amount buttons + give-kind feel a bit more tactile */
.hhp-amt{transition:transform .12s ease,border-color .12s,background .12s}
.hhp-amt:hover{transform:translateY(-1px);border-color:var(--hhp-green)}
.hhp-amt.is-active{box-shadow:0 6px 16px rgba(10,138,95,.18)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none}
}

/* Performance: skip rendering offscreen cards until scrolled near. */
.hhp-main .hhp-card{content-visibility:auto;contain-intrinsic-size:1px 320px}