/* ============================================================
   DONATE PAGE — Clarity Lab green-ink (mirrors contact)
   White bg · Switzer body · Libre Baskerville serif accents
   ============================================================ */

/* ---- generic helpers (page-scoped; only loads on donate) ---- */
.vh-section { padding:clamp(56px,8vh,110px) 0; }
.vh-eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint); }
.vh-eyebrow::before { display:none; }
.vh-sub { font-size:clamp(1rem,1.4vw,1.15rem); color:var(--ink-soft); line-height:1.7; max-width:460px; }
.vh-btn { display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:var(--r-pill);
  font-size:14px; font-weight:600; cursor:pointer; border:none; text-decoration:none;
  transition:transform 0.25s var(--ease), background 0.25s, box-shadow 0.25s; }
.vh-btn-ink { background:var(--ink); color:#fff; box-shadow:0 12px 28px rgba(28,36,25,0.22); }
.vh-btn-ink:hover { background:#11160e; transform:translateY(-2px); box-shadow:0 18px 36px rgba(28,36,25,0.30); }
.vh-arr { transition:transform 0.3s var(--ease); }
.vh-btn:hover .vh-arr { transform:translateX(4px); }

/* ---- Hero (white, no video) ---- */
.vh-dn-hero { padding:calc(var(--nav-h,66px) + clamp(56px,10vh,120px)) 0 clamp(40px,6vh,72px); }
.vh-dn-hero-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(28px,4vw,64px); align-items:end; }
.vh-dn-hero-title { margin-top:16px; font-size:clamp(2.2rem,5vw,4rem); font-weight:500; line-height:1.06;
  letter-spacing:-0.03em; color:var(--ink); padding-bottom:0.12em; }
.vh-dn-hero-title em { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--sage-deep); }
.vh-dn-hero-sub { font-size:clamp(1rem,1.4vw,1.15rem); color:var(--ink-soft); line-height:1.7; }
.vh-dn-hero-sig { display:block; margin-top:14px; font-size:12px; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-faint); }

/* ---- Meta / live-stats strip ---- */
.vh-dn-meta { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(24px,4vw,56px);
  margin-top:clamp(34px,6vh,60px); padding-top:26px; border-top:1px solid var(--line); }
.vh-dn-stat b { display:block; font-size:1.6rem; font-weight:600; letter-spacing:-0.02em; color:var(--ink); }
.vh-dn-stat span { font-size:12px; color:var(--ink-faint); }
.vh-dn-meta-jump { display:inline-flex; align-items:center; gap:8px; margin-left:auto; font-size:13px;
  font-weight:600; color:var(--sage-deep); text-decoration:none; }
.vh-dn-meta-jump:hover { color:var(--ink); }

/* ---- Give section ---- */
.vh-dn-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; }
.vh-dn-form-title { margin:14px 0 26px; font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:500;
  letter-spacing:-0.025em; line-height:1.08; color:var(--ink); }
.vh-dn-label { display:block; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-faint); margin:24px 0 4px; }
.vh-dn-label:first-of-type { margin-top:0; }

/* amount pills */
.vh-dn-amounts { display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 2px; }
.vh-dn-pill { appearance:none; font-family:var(--font); font-size:14px; font-weight:600; letter-spacing:0.02em;
  padding:11px 20px; border-radius:var(--r-pill); border:1px solid rgba(138,170,124,0.45);
  background:rgba(138,170,124,0.08); color:var(--ink); cursor:pointer;
  transition:background 0.25s var(--ease), border-color 0.25s, color 0.25s, transform 0.25s var(--ease); }
.vh-dn-pill:hover { border-color:var(--sage-deep); transform:translateY(-2px); }
.vh-dn-pill.is-selected { background:var(--ink); border-color:var(--ink); color:#fff; }

/* floating-label fields (mirror .vh-ct-field) */
.vh-dn-fields { display:flex; flex-direction:column; gap:6px; }
.vh-dn-row { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.vh-dn-field { position:relative; padding-top:18px; margin-bottom:14px; }
.vh-dn-field input, .vh-dn-field textarea {
  width:100%; padding:8px 0; font-family:var(--font); font-size:15px; color:var(--ink);
  background:transparent; border:none; outline:none; resize:vertical; }
.vh-dn-field label { position:absolute; left:0; top:24px; font-size:15px; color:var(--ink-faint);
  pointer-events:none; transition:all 0.25s var(--ease); }
.vh-dn-field label span { font-size:12px; opacity:0.7; }
.vh-dn-field input:focus ~ label, .vh-dn-field input:not(:placeholder-shown) ~ label,
.vh-dn-field textarea:focus ~ label, .vh-dn-field textarea:not(:placeholder-shown) ~ label {
  top:0; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage-deep); }
.vh-dn-line { position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--line); }
.vh-dn-line::after { content:''; position:absolute; inset:0; background:var(--sage-deep);
  transform:scaleX(0); transform-origin:left; transition:transform 0.35s var(--ease); }
.vh-dn-field input:focus ~ .vh-dn-line::after, .vh-dn-field textarea:focus ~ .vh-dn-line::after { transform:scaleX(1); }

/* anonymous toggle */
.vh-dn-check { display:flex; align-items:center; gap:11px; margin-top:18px; cursor:pointer;
  font-size:14px; color:var(--ink-soft); }
.vh-dn-check input { width:17px; height:17px; accent-color:var(--sage-deep); flex-shrink:0; }

/* submit + assurance */
.vh-dn-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:30px; }
.vh-dn-assure { font-size:12.5px; color:var(--ink-faint); max-width:280px; line-height:1.5; }

/* ---- Dark gradient side panel (mirror .vh-ct-side) ---- */
.vh-dn-side { position:sticky; top:90px; background:linear-gradient(160deg, var(--ink), #11160e); color:#fff;
  border-radius:24px; padding:clamp(28px,3vw,40px); overflow:hidden; }
.vh-dn-side .vh-eyebrow { color:rgba(255,255,255,0.7); }
.vh-dn-side-title { margin:14px 0 22px; font-size:1.7rem; font-weight:500; letter-spacing:-0.02em;
  color:#fff; line-height:1.2; }
.vh-dn-points { display:flex; flex-direction:column; gap:0; list-style:none; margin:0; padding:0; }
.vh-dn-point { display:flex; flex-direction:column; gap:3px; padding:16px 0; border-top:1px solid rgba(255,255,255,0.14); }
.vh-dn-point:first-child { border-top:none; }
.vh-dn-pt-k { font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.vh-dn-pt-v { font-size:14px; color:rgba(255,255,255,0.92); line-height:1.5; }
.vh-dn-side-note { margin-top:22px; font-size:13px; color:rgba(255,255,255,0.66); line-height:1.65; }
.vh-dn-side-mark { position:absolute; right:-10px; bottom:-22px; font-family:var(--serif); font-style:italic;
  font-size:5.5rem; color:rgba(255,255,255,0.05); pointer-events:none; }

/* ---- Impact steps (mirror .vh-ct-steps) ---- */
.vh-dn-impact-head { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:end;
  margin-bottom:clamp(36px,5vh,56px); }
.vh-dn-impact-title { margin-top:14px; font-size:clamp(1.9rem,3.6vw,3rem); font-weight:500;
  letter-spacing:-0.025em; color:var(--ink); }
.vh-dn-impact-title em { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--sage-deep); }
.vh-dn-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); }
.vh-dn-step { position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid rgba(28,36,25,0.08); border-radius:18px; padding:clamp(26px,2.6vw,36px);
  transition:transform 0.35s var(--ease), border-color 0.3s ease, box-shadow 0.35s ease; }
.vh-dn-step:hover { transform:translateY(-4px); border-color:rgba(138,170,124,0.45); box-shadow:0 18px 40px rgba(28,36,25,0.08); }
.vh-dn-step-n { font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--sage-deep); display:inline-flex; align-items:center; gap:12px; margin-bottom:18px; }
.vh-dn-step-n::after { content:''; flex:1; height:1px; background:linear-gradient(to right, rgba(138,170,124,0.45), transparent); }
.vh-dn-step h3 { margin:0 0 8px; font-size:1.1rem; font-weight:600; letter-spacing:-0.015em; color:var(--ink); line-height:1.25; }
.vh-dn-step p { font-size:13.5px; line-height:1.65; color:var(--ink-soft); margin:0; }

/* ---- Receipt (checkout + thanks) ---- */
.vh-dn-receipt-wrap { max-width:620px; margin:0 auto; text-align:center;
  padding-top:calc(var(--nav-h,66px) + clamp(40px,8vh,90px)); }
.vh-dn-receipt-title { margin:14px 0 12px; font-size:clamp(2rem,4vw,3rem); font-weight:500;
  letter-spacing:-0.025em; line-height:1.1; color:var(--ink); }
.vh-dn-amount { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; margin:30px 0; }
.vh-dn-amount .lbl { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint); }
.vh-dn-amount .big { font-family:var(--serif); font-size:clamp(2.4rem,6vw,3.4rem); color:var(--sage-deep); margin:8px 0 6px; line-height:1; }
.vh-dn-amount .who { font-size:13px; color:var(--ink-faint); }
.vh-dn-receipt-actions { display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:6px; }
.vh-dn-back { font-size:14px; font-weight:600; color:var(--ink-faint); text-decoration:none;
  padding:14px 22px; border-radius:var(--r-pill); transition:color 0.2s, background 0.2s; }
.vh-dn-back:hover { color:var(--ink); background:rgba(28,36,25,0.05); }
.vh-dn-medallion { width:88px; height:88px; border-radius:50%; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:var(--sage-deep);
  background:var(--paper); border:1.5px solid rgba(138,170,124,0.4); box-shadow:0 14px 34px rgba(28,36,25,0.10); }

/* ---- Responsive ---- */
@media(max-width:880px){
  .vh-dn-grid { grid-template-columns:1fr; }
  .vh-dn-side { position:static; }
}
@media(max-width:760px){
  .vh-dn-steps { grid-template-columns:1fr; }
  .vh-dn-impact-head { grid-template-columns:1fr; gap:16px; }
}
@media(max-width:640px){
  .vh-dn-hero-grid { grid-template-columns:1fr; gap:24px; align-items:start; }
  .vh-dn-row { grid-template-columns:1fr; gap:0; }
  .vh-dn-meta { gap:24px 32px; }
  .vh-dn-meta-jump { margin-left:0; }
}
@media(prefers-reduced-motion:reduce){
  .vh-dn-pill, .vh-dn-field label, .vh-dn-line::after, .vh-dn-step, .vh-btn, .vh-arr, .vh-dn-back { transition:none; }
}