/* DonateFlow — community: support page, wall, partners, sharing, requests */
.dnflc {
	--dnfl-accent: #1F6F5C;
	--dnflc-gold: #C8962E;
	--dnflc-earth: #7C2D12;
	--dnflc-ink: #1b1712;
	--dnflc-muted: #6b6258;
	--dnflc-line: #ebe4da;
	--dnflc-paper: #fbf8f3;
	box-sizing: border-box;
	color: var(--dnflc-ink);
	font-size: 1rem;
	line-height: 1.6;
}
.dnflc *, .dnflc *::before, .dnflc *::after { box-sizing: border-box; }
.dnflc-section { margin: 56px 0; }
.dnflc .dnflc-h { margin: 0 0 14px; font-size: 1.55em; line-height: 1.2; font-weight: 750; letter-spacing: -.015em; }
.dnflc-center { text-align: center; }
.dnflc .dnflc-lead { margin: 0 0 18px; color: var(--dnflc-muted); }
.dnflc-lead.dnflc-center { max-width: 56ch; margin-left: auto; margin-right: auto; }

/* Buttons */
.dnflc-btn, a.dnflc-btn, .dnflc-btn:visited {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 22px; border: 0; border-radius: 999px;
	background: var(--dnfl-accent); color: #fff !important;
	font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
	box-shadow: 0 8px 20px -10px var(--dnfl-accent);
	transition: filter .15s, transform .12s;
}
.dnflc-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dnflc-btn[disabled] { opacity: .6; cursor: default; transform: none; }
.dnflc-btn-lg { padding: 15px 28px; font-size: 1.05em; }
.dnflc-btn-sm { padding: 8px 14px; font-size: .88em; }
.dnflc-btn-ghost { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.dnflc-link { background: none; border: 0; padding: 0; color: var(--dnflc-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9em; }

/* Hero */
.dnflc-hero {
	position: relative; overflow: hidden;
	padding: 64px 40px 40px; border-radius: 28px;
	color: #fff; text-align: center;
	background:
		radial-gradient(1200px 400px at 80% -10%, color-mix(in srgb, var(--dnflc-gold) 35%, transparent), transparent 60%),
		linear-gradient(160deg, color-mix(in srgb, var(--dnfl-accent) 92%, #000) 0%, var(--dnflc-earth) 120%);
}
.dnflc-kente {
	position: absolute; inset: 0 0 auto 0; height: 10px;
	background: repeating-linear-gradient(90deg,
		var(--dnflc-gold) 0 28px, #111 28px 34px, #B91C1C 34px 52px, #111 52px 58px,
		#15803D 58px 86px, #111 86px 92px, var(--dnflc-gold) 92px 104px, #111 104px 110px);
}
.dnflc .dnflc-eyebrow { display: inline-block; margin: 0 0 16px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .82em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dnflc .dnflc-hero-title { margin: 0 auto 16px; max-width: 20ch; color: #fff; font-size: clamp(1.8em, 4.4vw, 2.8em); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.dnflc .dnflc-hero-lead { margin: 0 auto 28px; max-width: 62ch; color: rgba(255,255,255,.88); font-size: 1.08em; }
.dnflc-hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 36px; }
.dnflc-hero .dnflc-btn:not(.dnflc-btn-ghost) { background: var(--dnflc-gold); color: #1b1206 !important; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
.dnflc-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dnflc-stat { min-width: 140px; padding: 14px 18px; border-radius: 16px; background: rgba(255,255,255,.1); backdrop-filter: blur(4px); }
.dnflc-stat strong { display: block; font-size: 1.9em; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.dnflc-stat span { font-size: .82em; opacity: .85; }

/* Founder letter */
.dnflc-letter {
	display: flex; gap: 28px; align-items: flex-start;
	padding: 36px; border-radius: 22px; background: var(--dnflc-paper);
	border: 1px solid var(--dnflc-line);
	font-size: 1.04em;
}
.dnflc-letter p { margin: 0 0 14px; }
.dnflc-founder { flex: 0 0 120px; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--dnflc-gold); }
.dnflc .dnflc-sign { margin-top: 18px; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1.15em; }
.dnflc-sign span { display: block; font-family: inherit; font-style: normal; font-size: .75em; color: var(--dnflc-muted); }

/* Why */
.dnflc-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dnflc-why-card { padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--dnflc-line); }
.dnflc-why-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px; background: color-mix(in srgb, var(--dnflc-gold) 18%, #fff); font-size: 1.5em; }
.dnflc-why-card strong { display: block; margin-bottom: 6px; font-size: 1.08em; }
.dnflc-why-card p { margin: 0; color: var(--dnflc-muted); font-size: .95em; }

/* Join tabs */
.dnflc-tabs { display: flex; justify-content: center; gap: 6px; width: max-content; max-width: 100%; margin: 6px auto 22px; padding: 5px; border-radius: 999px; background: #f1ece4; }
.dnflc-tabs button { padding: 10px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--dnflc-muted); font: inherit; font-weight: 700; cursor: pointer; }
.dnflc-tabs button.is-active { background: #fff; color: var(--dnflc-ink); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.dnflc-join .dnfl { margin-top: 0; }

/* Spend */
.dnflc-spend { max-width: 720px; margin-left: auto; margin-right: auto; }
.dnflc-spend-row { margin-bottom: 14px; }
.dnflc-spend-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: .95em; }
.dnflc-spend-bar { height: 10px; border-radius: 99px; background: #f1ece4; overflow: hidden; }
.dnflc-spend-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dnfl-accent), var(--dnflc-gold)); }

/* Network */
.dnflc-sites { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dnflc-site, a.dnflc-site:visited { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--dnflc-line); background: #fff; color: var(--dnflc-ink); font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
a.dnflc-site:hover { border-color: var(--dnfl-accent); color: var(--dnfl-accent); }

/* Wall */
.dnflc-count { display: inline-grid; place-items: center; min-width: 32px; height: 26px; padding: 0 8px; margin-left: 6px; border-radius: 999px; background: var(--dnfl-accent); color: #fff; font-size: .55em; vertical-align: middle; }
.dnflc-wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.dnflc-person { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--dnflc-line); }
.dnflc-person.is-featured { grid-column: span 2; padding: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--dnflc-gold) 14%, #fff), #fff 60%); border-color: color-mix(in srgb, var(--dnflc-gold) 45%, transparent); }
.dnflc-avatar { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #ccc center/cover no-repeat; color: #fff; font-weight: 800; font-size: 1.05em; }
.dnflc-person.is-featured .dnflc-avatar { flex-basis: 84px; width: 84px; height: 84px; font-size: 1.5em; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--dnflc-gold); }
.dnflc-person-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dnflc-name { font-size: 1em; line-height: 1.3; }
.dnflc-tier { align-self: flex-start; padding: 1px 9px; border-radius: 99px; background: color-mix(in srgb, var(--dnfl-accent) 12%, #fff); color: var(--dnfl-accent); font-size: .74em; font-weight: 700; }
.dnflc-person.is-featured .dnflc-tier { background: var(--dnflc-gold); color: #1b1206; }
.dnflc-meta { color: var(--dnflc-muted); font-size: .8em; }
.dnflc-quote { display: block; margin-top: 6px; font-style: italic; font-size: .9em; color: #3c342b; quotes: "« " " »"; }
.dnflc-inspired { margin-top: 4px; font-size: .78em; font-weight: 600; color: var(--dnflc-earth); }
.dnflc-more { margin: 14px 0 0; color: var(--dnflc-muted); font-weight: 600; }
.dnflc-empty { padding: 24px; border: 1px dashed var(--dnflc-line); border-radius: 16px; text-align: center; color: var(--dnflc-muted); }

/* Partners */
.dnflc-ptier { margin-bottom: 18px; }
.dnflc .dnflc-ptier-name { margin: 0 0 8px; font-size: .78em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dnflc-gold); }
.dnflc-logos { display: grid; gap: 12px; }
.dnflc-logos-xl { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dnflc-logos-lg { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.dnflc-logos-md { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.dnflc-logo, a.dnflc-logo:visited { display: grid; place-items: center; padding: 18px; min-height: 96px; border-radius: 16px; background: #fff; border: 1px solid var(--dnflc-line); color: var(--dnflc-ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.dnflc-logos-xl .dnflc-logo { min-height: 140px; }
a.dnflc-logo:hover { border-color: var(--dnfl-accent); transform: translateY(-2px); }
.dnflc-logo img { max-width: 100%; max-height: 70px; object-fit: contain; }
.dnflc-logos-xl .dnflc-logo img { max-height: 100px; }
.dnflc-logo-text { font-weight: 800; font-size: 1.1em; text-align: center; }

/* Requests */
.dnflc-req-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.dnflc-req { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--dnflc-line); }
.dnflc-req-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dnflc-req-main small { color: var(--dnflc-muted); }
.dnflc-req-status { align-self: flex-start; padding: 1px 9px; border-radius: 99px; font-size: .72em; font-weight: 700; background: #eef0ef; color: #4b5563; }
.dnflc-req.is-writing .dnflc-req-status { background: #fff4e0; color: #9a5b00; }
.dnflc-req.is-published .dnflc-req-status { background: #e7f6ee; color: #137a43; }
.dnflc-vote { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--dnflc-line); background: #fff; color: var(--dnflc-ink); font: inherit; font-size: .85em; font-weight: 600; cursor: pointer; }
.dnflc-vote:hover { border-color: var(--dnfl-accent); }
.dnflc-vote-n { min-width: 22px; padding: 0 6px; border-radius: 99px; background: var(--dnfl-accent); color: #fff; font-size: .9em; text-align: center; }
.dnflc-vote.is-voted { border-color: var(--dnfl-accent); color: var(--dnfl-accent); }

/* Cards: profile, request, share */
.dnflc-card { max-width: 640px; margin: 18px auto; padding: 26px; border-radius: 20px; background: #fff; border: 1px solid var(--dnflc-line); box-shadow: 0 12px 32px -18px rgba(40,25,10,.25); }
.dnflc-card h3 { margin: 0 0 6px; font-size: 1.25em; }
.dnflc-after { margin-top: 10px; }
.dnflc-photo { margin-bottom: 14px; }
.dnflc-photo-drop { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.dnflc-photo-preview { flex: 0 0 84px; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; border: 2px dashed var(--dnflc-line); background: var(--dnflc-paper) center/cover no-repeat; color: var(--dnflc-muted); font-weight: 800; font-size: 1.4em; }
.dnflc-photo-preview.is-logo { border-radius: 16px; width: 120px; flex-basis: 120px; background-size: contain; background-color: #fff; }
.dnflc-photo-label { display: flex; flex-direction: column; font-weight: 700; color: var(--dnfl-accent); }
.dnflc-photo-label small { font-weight: 400; color: var(--dnflc-muted); }
.dnflc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dnflc-card .dnfl-field { position: relative; }
.dnflc-card .dnfl-field input, .dnflc-card .dnfl-field textarea { width: 100%; margin: 0; padding: 22px 14px 8px; border: 1.5px solid var(--dnflc-line); border-radius: 12px; background: #fff; color: var(--dnflc-ink); font: inherit; font-size: .95em; }
.dnflc-card .dnfl-field input { height: 56px; }
.dnflc-card .dnfl-field label { position: absolute; left: 15px; top: 17px; margin: 0; color: var(--dnflc-muted); font-size: .95em; pointer-events: none; transition: transform .15s, font-size .15s; transform-origin: left top; }
.dnflc-card .dnfl-field input:focus + label, .dnflc-card .dnfl-field input:not(:placeholder-shown) + label,
.dnflc-card .dnfl-field textarea:focus + label, .dnflc-card .dnfl-field textarea:not(:placeholder-shown) + label { transform: translateY(-10px); font-size: .72em; color: var(--dnfl-accent); font-weight: 600; }
.dnflc-card .dnfl-field input:focus, .dnflc-card .dnfl-field textarea:focus { outline: none; border-color: var(--dnfl-accent); }
.dnflc-card .dnfl-field-full { grid-column: 1 / -1; }
.dnflc-request .dnfl-field { margin-bottom: 10px; }
.dnflc-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.dnflc-msg { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: #e7f6ee; color: #137a43; font-weight: 600; font-size: .92em; }
.dnflc-msg.is-error { background: #fdecec; color: #a12626; }
.is-busy { opacity: .6; pointer-events: none; }
.dnflc-notice { text-align: center; color: var(--dnflc-muted); }

.dnflc-share { max-width: 720px; text-align: center; background: linear-gradient(180deg, #fff, var(--dnflc-paper)); }
.dnflc-share-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0; }
.dnflc-sbtn, a.dnflc-sbtn:visited { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 0; background: #374151; color: #fff; font: inherit; font-weight: 700; font-size: .9em; text-decoration: none; cursor: pointer; transition: filter .15s, transform .12s; }
.dnflc-sbtn:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }
.dnflc-sbtn-whatsapp { background: #1FA855; }
.dnflc-sbtn-facebook { background: #1877F2; }
.dnflc-sbtn-x { background: #111; }
.dnflc-sbtn-telegram { background: #229ED9; }
.dnflc-sbtn-linkedin { background: #0A66C2; }
.dnflc-sbtn-email { background: #6b6258; }
.dnflc-sbtn-native { background: var(--dnfl-accent); }
.dnflc-share.is-after .dnflc-sbtn-whatsapp { order: -2; padding: 13px 22px; font-size: 1em; }
.dnflc-copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.dnflc-copy-label { width: 100%; font-size: .82em; font-weight: 700; color: var(--dnflc-muted); }
.dnflc-copy input { flex: 1; min-width: 200px; max-width: 420px; height: 44px; padding: 0 14px; border: 1.5px solid var(--dnflc-line); border-radius: 999px; background: #fff; color: var(--dnflc-ink); font: inherit; font-size: .88em; }

/* FAQ */
.dnflc-faq { max-width: 760px; margin-left: auto; margin-right: auto; }
.dnflc-faq details { border-bottom: 1px solid var(--dnflc-line); }
.dnflc-faq summary { padding: 16px 30px 16px 0; font-weight: 700; cursor: pointer; list-style: none; position: relative; }
.dnflc-faq summary::-webkit-details-marker { display: none; }
.dnflc-faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.4em; color: var(--dnfl-accent); transition: transform .2s; }
.dnflc-faq details[open] summary::after { transform: rotate(45deg); }
.dnflc-faq details p { margin: 0 0 16px; color: var(--dnflc-muted); }

@media (max-width: 760px) {
	.dnflc-hero { padding: 48px 20px 28px; border-radius: 20px; }
	.dnflc-why { grid-template-columns: 1fr; }
	.dnflc-letter { flex-direction: column; padding: 24px; }
	.dnflc-person.is-featured { grid-column: auto; }
	.dnflc-grid { grid-template-columns: 1fr; }
	.dnflc-req { flex-direction: column; align-items: flex-start; }
	.dnflc-section { margin: 40px 0; }
}
@media (prefers-reduced-motion: reduce) { .dnflc * { transition: none !important; } }

/* Ghost button must win over a.dnflc-btn */
.dnflc a.dnflc-btn.dnflc-btn-ghost, .dnflc a.dnflc-btn.dnflc-btn-ghost:visited { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
.dnflc a.dnflc-btn.dnflc-btn-ghost:hover { background: rgba(255,255,255,.12); }
.dnflc-btn { white-space: normal; text-align: center; }
@media (max-width: 760px) {
	.dnflc .dnflc-eyebrow { font-size: .7em; letter-spacing: .03em; }
	.dnflc-hero-ctas { flex-direction: column; align-items: stretch; }
	.dnflc .dnflc-hero-lead { font-size: 1em; }
	.dnflc-stat { min-width: 0; flex: 1 1 40%; }
}