/* Unified card component overrides for Support page (builds on global card tokens) */
.info-card { background:linear-gradient(135deg,#f8fffe 0%,#e8f5e8 100%); border:1px solid var(--color-border); border-radius:18px; padding:2.1rem 1.3rem 2rem; box-shadow:0 6px 22px -10px rgba(45,90,39,.16); display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55rem; min-height:160px; position:relative; transition: box-shadow .35s, transform .35s, border-color .35s; }
.info-card .card-icon { font-size:2.05rem; line-height:1; filter:drop-shadow(0 3px 10px rgba(45,90,39,.18)); margin-bottom:.65rem; }
.info-card .card-title { font-size:1.07rem; font-weight:700; letter-spacing:.015em; color:var(--color-accent); }
.info-card .card-desc { font-size:.9rem; line-height:1.35; color:var(--color-text-primary); opacity:.9; }
.info-card:hover { box-shadow:0 16px 44px -14px rgba(45,90,39,.28); transform:translateY(-6px); border-color: var(--color-accent); }
.accent1 { border-color: #d4af37; }
.accent2 { border-color: #4a7c59; }
.accent3 { border-color: #2d5a27; }
.accent4 { border-color: #7bb661; }
.accent5 { border-color: #f4e99b; }
.accent6 { border-color: #4a7c59; }
.accent7 { border-color: #2d5a27; }
.accent8 { border-color: #d4af37; }
.accent9 { border-color: #7bb661; }
.mission-support-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;
  margin: 0 auto;
}
.mission-block, .support-block {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.centered {
  text-align: center;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  justify-items: center;
  margin: 2.2rem 0 0 0;
}
/* (Removed duplicate earlier definition; consolidation above) */
.work-domains {
  list-style: disc inside;
  margin: var(--space-4) 0 var(--space-4) 0;
  padding-left: var(--space-4);
  font-size: 1rem;
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
/* Support / Buy Me a Coffee Page Styles */
/* Integrate with global nav: highlight Support link */
body.support-page .navbar .nav-link[data-nav="support"] {
  background: var(--grad-accent-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}
body.support-page .navbar .nav-link[data-nav="support"]::after { width:100%; background: var(--color-gold); }

/* Ensure partial-injected navbar overlays custom hero elegantly */
body.support-page .navbar { backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); }
/* Harmonize hero vertical rhythm with homepage (150 top / 110 bottom minus nav height) */
.support-main { --hero-pad-top: 150px; --hero-pad-bottom: 110px; }

/* Rename to avoid legacy .hero collision side-effects */
.support-main .hero { position:relative; background:radial-gradient(1100px 600px at 20% -10%, rgba(244,233,155,.24), transparent 60%), radial-gradient(900px 520px at 90% 0%, rgba(45,90,39,.18), transparent 65%), var(--grad-hero); color:var(--color-text-inverse); text-align:center; margin-top:70px; padding: var(--hero-pad-top) 0 var(--hero-pad-bottom); overflow:hidden; }
.support-main .hero:after { display:none; }
/* Hero inner content alignment (simple stack mirrors homepage hero-content) */
.hero-inner { width:100%; display:flex; justify-content:center; }
.hero-copy { width:100%; max-width:980px; position:relative; z-index:2; margin:0 auto; }
.hero-eyebrow { display:inline-block; font-size:.62rem; letter-spacing:.22em; font-weight:700; text-transform:uppercase; padding:6px 14px 7px; border-radius: var(--radius-pill); background:rgba(255,255,255,0.14); color:rgba(255,255,255,0.85); backdrop-filter: blur(6px); box-shadow:0 2px 8px -2px rgba(0,0,0,.35); margin:0 0 var(--space-4); }
.hero-copy h1 { font-family:'Playfair Display',serif; font-size:clamp(2.4rem,4.2vw + .6rem,3.4rem); font-weight:800; background:linear-gradient(135deg,var(--color-gold) 0%,#fff7d6 40%,var(--color-gold) 80%); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0 0 1.3rem; letter-spacing:.3px; }
.headline-gradient { background:linear-gradient(135deg, var(--color-gold) 0%, #fff7d6 35%, var(--color-gold) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600; }
.hero-copy .subtitle { font-size: clamp(1.05rem,1rem + .4vw,1.28rem); line-height:1.5; max-width: 760px; margin:0 auto var(--space-5) auto; color:rgba(255,255,255,0.90); font-weight:500; text-align:center; }
.hero-copy .subtitle strong { color: var(--color-accent); font-weight:600; }
.cta-cluster { display:flex; flex-wrap:wrap; gap: var(--space-3); align-items:center; justify-content:center; margin:0 0 var(--space-3); }
/* Local CTA scale (avoid clobbering global .cta-button; scope with .support-main) */
.support-main .cta-button { background:var(--grad-accent-gold); color:var(--color-text-inverse); padding:1.15rem 2.1rem 1.2rem; font-size:1.12rem; font-weight:700; letter-spacing:.5px; border-radius: var(--radius-pill); position:relative; overflow:hidden; box-shadow:0 10px 34px -12px rgba(71,94,74,.48); border:2px solid rgba(255,255,255,.18); transition: transform .35s, box-shadow .35s, filter .4s; }
.support-main .cta-button:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 28% 30%,rgba(255,255,255,.55),transparent 65%); opacity:0; transition:.55s; }
.support-main .cta-button:hover { transform:translateY(-4px); box-shadow:0 16px 44px -14px rgba(71,94,74,.55); filter:brightness(1.05); }
.support-main .cta-button:hover:before { opacity:1; }
.cta-secondary { font-weight:600; color: var(--color-accent); padding:.75rem 1.1rem; border-radius: var(--radius-pill); background: var(--color-accent-soft); border:1px solid var(--color-accent-soft-border); }
.cta-secondary:hover { background: var(--color-accent); color: var(--color-text-inverse); }
/* (Removed micro-trust pill; no longer used) */

.hero-art { flex:1; position:relative; min-height:120px; pointer-events:none; }
.orb, .orb-one, .orb-two, .orb-three { display:none !important; }
.vine { position:absolute; inset:0; background: repeating-radial-gradient(circle at 70% 40%, rgba(45,90,39,.08), transparent 120px); mask: linear-gradient(180deg, #000 0%, transparent 75%); }
@keyframes float { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-18px);} }

/* Section theming (space adjustments for visual rhythm) */
.section-light { background: var(--color-surface-0); padding: var(--space-8) 0 var(--space-7); }
.section-dark { background: var(--grad-hero); color: var(--color-text-inverse); padding: var(--space-8) 0 var(--space-7); position:relative; }
.section-dark:before { content:""; position:absolute; inset:0; background:
  radial-gradient(900px 520px at 14% 18%, rgba(244,233,155,.22), transparent 65%),
  radial-gradient(800px 480px at 80% 12%, rgba(255,255,255,.10), transparent 70%);
  pointer-events:none; opacity:.9; mix-blend-mode:overlay; }
.section-dark h2, .section-dark h3 { color: var(--color-gold); }
.section-dark p, .section-dark li { color: #e5efe8; }

.columns { display:grid; gap: var(--space-7); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items:start; }
.benefit-list { list-style:none; padding:0; margin: var(--space-4) 0 var(--space-5); display:flex; flex-direction:column; gap:.85rem; }
.benefit-list li { position:relative; padding-left:1.55rem; font-size: var(--font-size-md); }
.benefit-list li:before { content:""; position:absolute; left:0; top:.35rem; width:.85rem; height:.85rem; border-radius:50%; background: var(--grad-accent-gold); box-shadow:0 0 0 3px rgba(212,175,55,.25); }

/* Removed old fund allocation styles */

/* Impact grid responsive improvements */
/* Removed impact metric styles */

/* Removed tier styles */

/* Removed persuasion/conversion panel styles */

.faq details { background: var(--color-surface-1); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: .95rem 1.15rem 1.05rem; box-shadow: var(--shadow-sm); }
.faq details + details { margin-top: var(--space-3); }
.faq summary { cursor:pointer; font-weight:600; font-size:.95rem; }
.faq p { font-size:.82rem; margin:.65rem 0 0; line-height:1.45; }

.closing-cta { text-align:center; position:relative; }
.closing-cta .wrap { position:relative; }
.closing-cta h2 { font-size: clamp(2rem, 4.2vw, 2.7rem); background:linear-gradient(135deg,#fff7d6,#f4e99b,var(--color-gold)); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0 0 var(--space-4); }
.closing-cta p { font-size: var(--font-size-lg); max-width:740px; margin:0 auto var(--space-5); color:rgba(255,255,255,0.9); }
.final-cta { /* Extends .btn */
  --_bg: var(--btn-primary-bg, var(--grad-accent-gold));
  --_fg: var(--btn-primary-fg, var(--color-text-inverse));
  font-size:1.05rem;
  padding:1.05rem 1.9rem 1.1rem;
  border-radius: var(--btn-radius-pill, 999px);
  box-shadow:0 14px 44px -16px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.08);
}
.final-cta:hover { filter:brightness(1.05); }

.site-footer { background:#0b1a10; color:#d4dfd8; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding: var(--space-5) 0; }
.site-footer p { margin:0; text-align:center; }

/* Responsive tweaks */
@media (max-width: 880px){ .support-main .hero { padding:120px 0 80px; } .hero-copy h1 { font-size:clamp(2.1rem,6.5vw,2.8rem);} }
@media (max-width: 520px){
  .cta-button, .panel-cta, .final-cta { width:100%; text-align:center; }
  .cta-secondary { flex:1 1 100%; text-align:center; }
}