/* UmmahCauses redesign r2505 (card 7kbvYXoH): Alisha's "Sunshine and Peace" prototype.
   Homepage, Browse Charities and the shared redesign header. Plain CSS, no build step.
   Values come from UmmahCauses+Style+Guide.md. Font: Plus Jakarta Sans (Bunny Fonts, loaded
   by the layout). No pills, no uppercase labels, no text arrows. */

.ucr-body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 500; color: #17231e; -webkit-font-smoothing: antialiased; }
.ucr-page, .ucr-page * { box-sizing: border-box; }
.ucr-page { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 500; color: #17231e; background: #fff; }
.ucr-page a { color: #14855f; text-decoration: none; }
.ucr-page a:hover { color: #0f6e4f; }
.ucr-page input, .ucr-page button, .ucr-page select { font-family: inherit; font-weight: 500; }
.ucr-page h1, .ucr-page h2, .ucr-page h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; text-wrap: balance; margin: 0; }
.ucr-page p { margin: 0; }
.ucr-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.ucr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.ucr-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid #eeebe3; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.ucr-header-in { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; }
.ucr-logo { font-size: 23px; font-weight: 700; letter-spacing: -.02em; display: inline-flex; align-items: baseline; min-height: 44px; align-items: center; text-decoration: none; }
.ucr-logo span:first-child { color: #14855f; }
.ucr-logo span:last-child { color: #b8892e; }
.ucr-nav { display: none; gap: 8px; white-space: nowrap; position: absolute; left: 50%; transform: translateX(-50%); }
.ucr-nav a { font-size: 15px; color: #3d4a44; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.ucr-nav a:hover, .ucr-nav a.is-active { color: #14855f; }
.ucr-nav a.is-active { font-weight: 700; }
.ucr-header-right { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.ucr-login { font-size: 15px; color: #3d4a44; min-height: 44px; display: none; align-items: center; padding: 0 8px; text-decoration: none; }
.ucr-login:hover { color: #14855f; }
a.ucr-donate, .ucr-donate { font-size: 18px; font-weight: 700; color: #fff !important; background: #14855f; padding: 0 26px; min-height: 48px; display: inline-flex; align-items: center; border-radius: 12px; text-decoration: none; }
a.ucr-donate:hover { background: #0f6e4f; }
.ucr-burger { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 10px; color: #3d4a44; cursor: pointer; }
.ucr-burger .ucr-ico-close { display: none; }
.ucr-burger[aria-expanded="true"] .ucr-ico-open { display: none; }
.ucr-burger[aria-expanded="true"] .ucr-ico-close { display: block; }
.ucr-mobile { border-top: 1px solid #eeebe3; background: #fff; padding: 8px 24px 16px; }
.ucr-mobile[hidden] { display: none; }
.ucr-mobile a { display: flex; align-items: center; min-height: 48px; font-size: 17px; font-weight: 600; color: #17231e; text-decoration: none; border-bottom: 1px solid #f4f0e6; }
@media (min-width: 1000px) { .ucr-nav { display: flex; } .ucr-burger, .ucr-mobile { display: none !important; } .ucr-login { display: inline-flex; } }
@media (max-width: 520px) { .ucr-header-in { padding: 0 16px; } a.ucr-donate { padding: 0 18px; font-size: 16px; } }

/* ---------- Buttons ---------- */
.ucr-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; border-radius: 13px; cursor: pointer; border: 0; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.ucr-page a.ucr-btn-lg, .ucr-btn-lg { font-size: 21px; padding: 22px 44px; border-radius: 14px; min-height: 44px; color: #fff; background: #14855f; box-shadow: 0 10px 28px rgba(20,133,95,.25); }
.ucr-page a.ucr-btn-md, .ucr-btn-md { font-size: 19px; padding: 17px 30px; color: #fff; background: #14855f; box-shadow: 0 6px 16px rgba(20,133,95,.2); min-height: 44px; }
.ucr-page a.ucr-btn-lg:hover, .ucr-page a.ucr-btn-md:hover, .ucr-page button.ucr-btn-md:hover { background: #0f6e4f; color: #fff; }
.ucr-page a.ucr-btn-2nd { color: #14855f; background: rgba(255,255,255,.75); border: 1px solid rgba(20,133,95,.2); box-shadow: none; }
.ucr-page a.ucr-btn-2nd:hover { background: #fff; color: #0f6e4f; }
.ucr-link { font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

/* ---------- Hero ---------- */
.ucr-hero { position: relative; overflow: hidden; background: #fdf6df; }
.ucr-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ucr-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.ucr-hero-veil { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(255,253,246,.7) 0%, rgba(255,253,246,.35) 60%, rgba(255,253,246,0) 100%); }
.ucr-hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); }
.ucr-hero-in { position: relative; max-width: 920px; margin: 0 auto; padding: 128px 32px 120px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ucr-h1 { font-weight: 700; font-size: clamp(46px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.035em; color: #14855f; }
.ucr-h1 em { font-style: normal; color: #b07f1c; } /* large text, 3:1 floor */
.ucr-lead { margin-top: 28px !important; max-width: 580px; font-size: 21px; line-height: 1.6; color: #3a4640; text-wrap: pretty; }
.ucr-lead strong, .ucr-strong { color: #17231e; font-weight: 700; }
.ucr-hero-btns { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.ucr-trust { margin-top: 48px; max-width: 860px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 32px; font-size: 17px; color: #3a4640; }
.ucr-trust > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px; text-align: left; max-width: 100%; }
.ucr-trust b { font-weight: 800; color: #14855f; }
.ucr-trust b.gold { color: #8a6516; }
.ucr-hero-note { margin-top: 28px !important; font-size: 17px; color: #3a4640; text-wrap: balance; }
.ucr-hero-note strong { color: #14855f; font-weight: 700; }

/* ---------- Section heads ---------- */
.ucr-h2 { font-weight: 700; font-size: clamp(34px, 4vw, 46px); letter-spacing: -.03em; line-height: 1.08; color: #14855f; }
.ucr-sec-lead { margin-top: 14px !important; font-size: 19px; line-height: 1.6; color: #46524c; }

/* ---------- Causes ---------- */
.ucr-causes { scroll-margin-top: 80px; }
.ucr-causes-in { max-width: 1200px; margin: 0 auto; padding: 104px 32px 96px; }
.ucr-causes-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.ucr-causes-head > div { max-width: 560px; }
.ucr-picker { background: #fff8e4; border-radius: 20px; padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-bottom: 20px; }
.ucr-picker-t { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #17231e; }
.ucr-picker-s { font-size: 17px; color: #3a4640; margin-top: 4px; }
.ucr-picker-r { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ucr-picked { font-size: 24px; font-weight: 700; min-width: 0; text-align: right; }
.ucr-page a.ucr-picked:hover { text-decoration: underline; }
.ucr-bism { position: relative; font-size: 19px; font-weight: 700; color: #fff; border: 0; padding: 17px 30px; border-radius: 13px; cursor: pointer; white-space: nowrap; text-shadow: 0 1px 2px rgba(60,40,0,.4); background: #b07f1c; min-height: 44px; }
.ucr-bism:hover { filter: brightness(1.08); }
.ucr-spark { position: absolute; pointer-events: none; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: ucrTwinkle 2.4s ease-in-out infinite; }
@keyframes ucrTwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.ucr-feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); background: linear-gradient(160deg, #dcefe2 0%, #e8f3d2 35%, #f4f8dc 52%, #e5f1d0 75%, #d9edc9 100%); border-radius: 24px; overflow: hidden; color: #17231e; margin-bottom: 20px; transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; }
.ucr-page a.ucr-feature { color: #17231e; }
.ucr-feature:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(20,133,95,.14); }
.ucr-feature-ph { position: relative; min-height: 340px; background: #e5f1d0; }
.ucr-feature-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ucr-feature-tx { padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.ucr-feature-k { font-size: 15px; font-weight: 600; color: #8a6516; }
.ucr-feature-h { font-weight: 700; font-size: 40px; line-height: 1.05; letter-spacing: -.02em; color: #14855f; }
.ucr-feature-p { font-size: 17px; line-height: 1.6; color: #3a4640; max-width: 420px; text-wrap: pretty; }
.ucr-raised { font-size: 22px; font-weight: 700; color: #14855f; }
.ucr-raised small { font-size: 16px; font-weight: 500; color: #46524c; }
.ucr-feature-tx .ucr-btn { align-self: flex-start; margin-top: 8px; color: #fff; background: #14855f; padding: 17px 30px; font-size: 19px; }
.ucr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.ucr-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eeebe3; border-radius: 20px; overflow: hidden; color: #17231e; transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; outline: 0 solid transparent; outline-offset: 4px; }
.ucr-page a.ucr-card { color: #17231e; }
.ucr-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23,35,30,.10); }
.ucr-card.is-picked, .ucr-feature.is-picked { outline: 3px solid #e6b84d; }
.ucr-card-ph { position: relative; aspect-ratio: 4/3; background: #f4f8f5; }
.ucr-card-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ucr-card-bd { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.ucr-card-t { font-size: 21px; font-weight: 700; line-height: 1.2; }
.ucr-card-n { font-size: 14px; color: #56605a; margin-top: 6px; }
.ucr-card-row { margin-top: auto; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ucr-logos { display: flex; align-items: center; min-height: 28px; }
.ucr-logos span { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #eeebe3; position: relative; display: block; }
.ucr-logos span + span { margin-left: -8px; }
.ucr-logos img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ucr-amt { font-size: 17px; font-weight: 700; color: #14855f; white-space: nowrap; }
.ucr-amt small { font-size: 14px; font-weight: 500; color: #56605a; }
.ucr-amt.first { font-size: 15px; font-weight: 600; color: #8a6516; white-space: normal; text-align: right; }
.ucr-card-btn { margin-top: 18px; text-align: center; font-size: 19px; font-weight: 700; color: #fff; background: #14855f; padding: 17px 30px; border-radius: 13px; box-shadow: 0 6px 16px rgba(20,133,95,.2); min-height: 44px; }
.ucr-card:hover .ucr-card-btn { background: #0f6e4f; }

/* ---------- Doors band ---------- */
.ucr-band { background: linear-gradient(180deg, #fff 0%, #fffaf0 22%, #fffaf0 78%, #fff 100%); }
.ucr-band-in { max-width: 1200px; margin: 0 auto; padding: 104px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px 80px; align-items: center; }
.ucr-band p.big { margin-top: 20px; font-size: 20px; line-height: 1.65; color: #3a4640; max-width: 480px; text-wrap: pretty; }
.ucr-facts { display: flex; flex-direction: column; gap: 14px; }
.ucr-fact { background: #fff; border-radius: 18px; padding: 26px 28px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; box-shadow: 0 1px 0 #f0e8d4; }
.ucr-fact-n { font-size: 44px; font-weight: 700; color: #14855f; line-height: 1; min-width: 96px; }
.ucr-fact-t { font-size: 19px; font-weight: 700; }
.ucr-fact-d { font-size: 17px; color: #3a4640; margin-top: 4px; line-height: 1.5; }

/* ---------- How: reach strip + sunrise ---------- */
.ucr-how { scroll-margin-top: 80px; overflow: hidden; }
.ucr-how-in { max-width: 1200px; margin: 0 auto; padding: 104px 24px 112px; }
.ucr-reach { background: linear-gradient(160deg, #dcefe2 0%, #e8f3d2 35%, #f4f8dc 52%, #e5f1d0 75%, #d9edc9 100%); box-shadow: 0 30px 60px -30px rgba(159,216,176,.55); border-radius: 28px; padding: 48px 0 8px; overflow: hidden; }
.ucr-reach h3 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.02em; color: #b07f1c; text-align: center; padding: 0 24px; }
.ucr-reach-row { display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 36px; padding: 32px 36px 44px; scrollbar-width: none; }
.ucr-reach-row::-webkit-scrollbar { display: none; }
.ucr-reach-item { flex: 0 0 calc((100% - 40px) / 2); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 18px; background: #fff; border-radius: 24px; padding: 24px 14px; box-shadow: 0 8px 24px rgba(23,35,30,.07); color: #17231e; transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; }
.ucr-page a.ucr-reach-item { color: #17231e; }
.ucr-reach-item:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(23,35,30,.10); }
@media (min-width: 600px) { .ucr-reach-item { flex-basis: calc((100% - 80px) / 3); } }
@media (min-width: 900px) { .ucr-reach-item { flex-basis: calc((100% - 120px) / 4); } }
.ucr-heart { position: relative; width: 100%; aspect-ratio: 1.108/1; }
.ucr-heart-clip { position: absolute; inset: 0; background: #fff; clip-path: polygon(50% 100%, 42.5% 97.8%, 33.5% 91%, 24% 82.1%, 15.1% 72.4%, 8.3% 62.9%, 3.2% 52.3%, .6% 42.3%, 0 33.7%, .5% 26.8%, 2.7% 18.6%, 6.8% 11.2%, 12.5% 5.4%, 19.5% 1.5%, 27.1% 0%, 34.8% 1%, 41.7% 5%, 45.8% 10.2%, 50% 14.8%, 54.2% 10.2%, 58.3% 5%, 65.2% 1%, 72.9% 0%, 80.5% 1.5%, 87.5% 5.4%, 93.2% 11.2%, 97.3% 18.6%, 99.5% 26.8%, 100% 33.7%, 99.4% 42.3%, 96.8% 52.3%, 91.7% 62.9%, 84.9% 72.4%, 76% 82.1%, 66.5% 91%, 57.5% 97.8%); background: #eef6ea; display: flex; align-items: center; justify-content: center; }
.ucr-heart-clip img { width: 100%; height: 100%; object-fit: contain; padding: 12%; display: block; }
.ucr-heart-clip span { font-size: 40px; font-weight: 700; color: #14855f; }
.ucr-reach-name { text-align: center; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: #17231e; text-wrap: balance; }

.ucr-sun { margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 56px; background: linear-gradient(180deg, #ffefc2 0%, #fff7df 38%, #fff 100%); border-radius: 28px; padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 56px); }
.ucr-sun-art { position: relative; flex: 1 1 440px; min-width: 0; max-width: 720px; aspect-ratio: 16/10; }
.ucr-sun-glow { position: absolute; left: 50%; top: 52%; width: 70%; height: 90%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #ffeab0 0%, rgba(255,234,176,.45) 38%, rgba(255,234,176,0) 70%); filter: blur(20px); pointer-events: none; }
.ucr-sun-art img { position: absolute; height: auto; }
.ucr-sun-art img.small { width: 12%; left: 50%; top: 50%; opacity: .15; transform: translate(-50%, -50%) scale(.45); filter: drop-shadow(0 6px 12px rgba(176,127,28,.22)); will-change: left, top, transform; }
.ucr-sun-art img.big { left: 50%; top: 50%; width: 32%; transform: translate(-50%, -50%); filter: drop-shadow(0 18px 32px rgba(176,127,28,.3)); }
.ucr-sun-tx { flex: 1 1 400px; min-width: 0; max-width: 540px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ucr-sun-h { font-weight: 700; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.035em; line-height: 1.08; color: #14855f; }
.ucr-sun-h em { font-style: normal; color: #b07f1c; }
.ucr-sun-p { margin-top: 18px !important; max-width: 580px; font-size: 20px; line-height: 1.6; color: #3a4640; text-wrap: pretty; }
.ucr-amts { margin-top: 36px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ucr-amt-b { font-size: 17px; font-weight: 700; min-width: 76px; min-height: 48px; padding: 14px 18px; border-radius: 12px; cursor: pointer; border: 1.5px solid rgba(20,133,95,.35); background: #fff; color: #14855f; }
.ucr-amt-b[aria-pressed="true"] { background: #14855f; border-color: #14855f; color: #fff; }
.ucr-amt-line { margin-top: 14px !important; font-size: 17px; color: #46524c; }
.ucr-sun-tx .ucr-btn-lg { margin-top: 28px; }
.ucr-sun-note { margin-top: 16px !important; font-size: 15px; color: #56605a; }
@media (min-width: 960px) { .ucr-sun-tx { align-items: flex-start; text-align: left; } .ucr-amts { justify-content: flex-start; } .ucr-sun-art { order: 1; max-width: 560px; } }

/* ---------- Narration panels (scripture sits alone: never under a call to action) ---------- */
.ucr-narr { max-width: 1200px; margin: 0 auto; padding: 56px 24px 24px; }
.ucr-narr-in { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid #f1ead6; border-radius: 20px; padding: 32px 36px; text-align: center; }
.ucr-quote { font-style: italic; font-weight: 600; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.4; color: #14855f; text-wrap: balance; margin: 0; }
.ucr-ref { margin-top: 14px !important; font-size: 15px; color: #6b4e0f; font-weight: 500; }

/* ---------- Closing ---------- */
.ucr-close { padding: 0 24px 40px; scroll-margin-top: 80px; }
.ucr-close-panel { position: relative; overflow: hidden; max-width: 1200px; margin: 0 auto; border-radius: 32px; background: linear-gradient(160deg, #dcefe2 0%, #e8f3d2 35%, #f4f8dc 52%, #e5f1d0 75%, #d9edc9 100%); }
.ucr-close-glow { position: absolute; left: 25%; top: -40%; width: 50%; height: 80%; border-radius: 50%; background: radial-gradient(circle, #ffe7a3 0%, rgba(255,231,163,0) 70%); filter: blur(30px); pointer-events: none; }
.ucr-close-in { position: relative; max-width: 760px; margin: 0 auto; padding: 88px 32px; text-align: center; }
.ucr-close-in .ucr-quote { font-size: clamp(26px, 3vw, 34px); }
.ucr-after { max-width: 760px; margin: 0 auto; padding: 36px 24px 96px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ---------- Disclaimer ---------- */
.ucr-legal { border-top: 1px solid #eeebe3; }
.ucr-legal p { max-width: 880px; padding: 40px 0; font-size: 13px; line-height: 1.7; color: #56605a; text-wrap: pretty; }
.ucr-ad { padding: 0 24px 48px; display: flex; justify-content: center; }

/* ---------- Browse charities ---------- */
.ucr-bhero { position: relative; overflow: hidden; background: #fdf6df; }
.ucr-bhero .ucr-hero-fade { height: 140px; }
.ucr-bhero-in { position: relative; max-width: 920px; margin: 0 auto; padding: 96px 32px 128px; text-align: center; }
.ucr-bhero .ucr-h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.04; }
.ucr-bhero .ucr-lead { margin-left: auto; margin-right: auto; max-width: 640px; }
.ucr-filter { position: relative; z-index: 2; margin-top: -72px; background: #fff; border-radius: 24px; box-shadow: 0 20px 50px rgba(23,35,30,.08), 0 0 0 1px #eeebe3; padding: 16px; }
.ucr-search { position: relative; }
.ucr-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #56605a; }
.ucr-search input { width: 100%; font-size: 17px; min-height: 52px; padding: 0 16px 0 46px; border: 1px solid #e6e1d3; border-radius: 12px; background: #fff; color: #17231e; }
.ucr-filter-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.ucr-filter select { width: 100%; min-height: 48px; font-size: 16px; padding: 0 12px; border: 1px solid #e6e1d3; border-radius: 10px; background: #fff; color: #17231e; }
.ucr-zakat { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid #e6e1d3; border-radius: 10px; font-size: 16px; color: #17231e; cursor: pointer; }
.ucr-zakat input { width: 20px; height: 20px; accent-color: #14855f; }
.ucr-filter-go { grid-column: 1 / -1; min-height: 48px; border: 0; border-radius: 12px; background: #14855f; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; padding: 0 22px; }
.ucr-filter-go:hover { background: #0f6e4f; }
@media (min-width: 900px) { .ucr-filter-row { grid-template-columns: 1fr 1fr 1fr auto auto; } .ucr-filter-go { grid-column: auto; } }
.ucr-count { padding: 20px 0; font-size: 15px; color: #46524c; }
.ucr-accept { background: linear-gradient(180deg, #ffefc2 0%, #fff7df 30%, #fff 100%); border-radius: 28px; margin-top: 28px; padding: clamp(32px, 5vw, 56px) clamp(16px, 3vw, 40px); }
.ucr-accept-head { padding: 0 0 28px; }
.ucr-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); gap: 20px; }
.ucr-ccard { display: flex; flex-direction: column; background: #fff; border: 1px solid #eeebe3; border-radius: 20px; padding: 16px 20px 20px; transition: transform .25s ease, box-shadow .25s ease; }
.ucr-ccard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23,35,30,.10); }
.ucr-cphoto { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #dcefe2, #f4f8dc); }
.ucr-cphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ucr-feat { position: absolute; top: 10px; left: 10px; font-size: 14px; font-weight: 700; color: #6b4e0f; background: rgba(255,255,255,.92); padding: 4px 10px; border-radius: 8px; }
.ucr-cmeta { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 12px; }
.ucr-clogo { width: 60px; height: 60px; border-radius: 14px; border: 1px solid #efebe1; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.ucr-clogo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ucr-clogo span { font-size: 24px; font-weight: 700; color: #14855f; }
.ucr-cland { font-size: 14px; color: #3a4640; text-align: right; }
.ucr-cname { margin-top: 12px !important; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: #17231e; }
.ucr-ccause { margin-top: 6px !important; font-size: 14px; font-weight: 700; color: #0f6e4f; }
.ucr-czakat { margin-top: 4px !important; font-size: 14px; font-weight: 600; color: #8a6516; }
.ucr-cstat { margin-top: auto !important; padding-top: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; color: #46524c; min-height: 40px; }
.ucr-cstat b { font-size: 18px; color: #14855f; font-weight: 700; }
.ucr-cstat .first { color: #8a6516; font-weight: 600; }
.ucr-ccard .ucr-btn-md { width: 100%; margin-top: 12px; padding: 17px 20px; }
.ucr-ccard .ucr-link { justify-content: center; margin-top: 4px; width: 100%; }
.ucr-note { margin-top: 12px !important; font-size: 15px; color: #46524c; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.ucr-soon { margin-top: 48px; }
.ucr-soon h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; color: #14855f; }
.ucr-soon .ucr-sec-lead { font-size: 17px; }
.ucr-notify { margin-top: auto; padding-top: 14px; }
.ucr-notify input { width: 100%; min-height: 48px; font-size: 16px; padding: 0 12px; border: 1px solid #e6e1d3; border-radius: 10px; margin-bottom: 8px; }
.ucr-notify button { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid rgba(20,133,95,.3); background: #fff; color: #14855f; font-size: 16px; font-weight: 700; cursor: pointer; }
.ucr-empty { background: linear-gradient(160deg, #dcefe2 0%, #e8f3d2 35%, #f4f8dc 52%, #e5f1d0 75%, #d9edc9 100%); border-radius: 24px; padding: 56px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ucr-empty p { font-size: 22px; font-weight: 700; color: #14855f; }
.ucr-facts3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; padding: 72px 0 40px; }
.ucr-facts3 svg { color: #14855f; margin-bottom: 12px; }
.ucr-facts3 .t { font-size: 19px; font-weight: 700; }
.ucr-facts3 .d { font-size: 17px; color: #3a4640; margin-top: 4px; line-height: 1.5; }
.ucr-pager { margin-top: 28px; }

@media (max-width: 700px) {
  .ucr-wrap { padding: 0 20px; }
  .ucr-hero-in { padding: 72px 20px 80px; }
  .ucr-lead { font-size: 18px; }
  .ucr-page a.ucr-btn-lg, .ucr-btn-lg { font-size: 19px; padding: 18px 32px; }
  .ucr-causes-in { padding: 72px 20px 64px; }
  .ucr-feature-tx { padding: 28px 24px; }
  .ucr-feature-h { font-size: 32px; }
  .ucr-band-in { padding: 72px 20px; }
  .ucr-how-in { padding: 64px 16px 72px; }
  .ucr-picker { padding: 20px; }
  .ucr-picked { text-align: left; }
  .ucr-bhero-in { padding: 64px 20px 112px; }
  .ucr-narr-in { padding: 24px 20px; }
  .ucr-close-in { padding: 64px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ucr-spark { animation: none; opacity: 0; }
  .ucr-card, .ucr-ccard, .ucr-feature, .ucr-reach-item { transition: none; }
}

/* ---------- Round 2 ---------- */
.ucr-coin { position: absolute; z-index: 1; height: auto; pointer-events: none; display: none; filter: drop-shadow(0 18px 32px rgba(176,127,28,.3)); }
@media (min-width: 1100px) { .ucr-coin { display: block; } .ucr-coin-l { width: 120px; left: 7%; top: 34%; transform: rotate(-10deg); } .ucr-coin-r { width: 210px; right: 6%; top: 22%; transform: rotate(8deg); } }
.ucr-hero-veil { background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(255,253,246,.55) 0%, rgba(255,253,246,.25) 60%, rgba(255,253,246,0) 100%); }
.ucr-trust1 { margin-top: 36px !important; font-size: 17px; color: #3a4640; }
.ucr-trust1 b { color: #14855f; font-weight: 800; }
.ucr-tile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-size: 22px; font-weight: 700; line-height: 1.2; color: #14855f; background: linear-gradient(160deg, #fff8e4 0%, #f4f8dc 100%); text-wrap: balance; }
.ucr-featline { margin-top: 2px !important; font-size: 14px; font-weight: 700; color: #6b4e0f; }
.ucr-flag { display: inline-block; vertical-align: -2px; border-radius: 2px; margin-right: 4px; }
.ucr-nominate { margin-top: 20px; display: flex; justify-content: center; }
/* the Ummah One upgrade strip: light gold, dark button (round 2) */
.ucr-body .ucr-promo-box { background: #fff3cf !important; border-color: #f1ead6 !important; }
.ucr-body .ucr-promo-box > .absolute.inset-0 { display: none; }
.ucr-body .ucr-promo-h { color: #17231e !important; }
.ucr-body .ucr-promo-p { color: #3a4640 !important; }
.ucr-body .ucr-promo-em { color: #6b4e0f !important; }
.ucr-body .ucr-promo-x { color: #3a4640 !important; }
.ucr-body .ucr-promo-btn { background: #17231e !important; color: #fff !important; }
@media (max-width: 700px) {
  .ucr-grid { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ucr-grid > .ucr-card { border-radius: 16px; }
  .ucr-card-ph { aspect-ratio: 1/1; }
  .ucr-card-bd { padding: 12px; }
  .ucr-card-t { font-size: 16px; }
  .ucr-card-row { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 10px; }
  .ucr-amt.first { text-align: left; font-size: 13px; }
  .ucr-card-btn { font-size: 16px; padding: 12px; margin-top: 10px; }
  .ucr-tile { font-size: 17px; }
  .ucr-picker-r { width: 100%; }
  .ucr-bism { width: 100%; }
  .ucr-trust1 { font-size: 15px; margin-top: 28px !important; }
  .ucr-narr { padding: 40px 16px 8px; }
  .ucr-feature-ph { min-height: 190px; }
  .ucr-hero-in { padding: 48px 20px 56px; }
  .ucr-causes-in { padding: 40px 20px 48px; }
  .ucr-causes-head { margin-bottom: 20px; }
  .ucr-h2 { font-size: 30px; }
  .ucr-sec-lead { font-size: 17px; }
  .ucr-hero-btns { margin-top: 28px; }
  .ucr-feature-tx { gap: 10px; padding: 22px 20px; }
  .ucr-sun { margin-top: 32px !important; }
}

.ucr-h1 .uc-gradient-text { background: none !important; -webkit-text-fill-color: #b07f1c !important; color: #b07f1c !important; }
@media (max-width: 700px) { .ucr-causes-head .ucr-sec-lead { display: none; } .ucr-feature-ph { min-height: 150px !important; } .ucr-picker-s { font-size: 15px; } }

/* ---------- Round 3 ---------- */
.ucr-tile { background: #fff8e4 !important; }
.ucr-coin-m { width: 72px; height: 72px; margin-bottom: 8px; filter: drop-shadow(0 8px 14px rgba(176,127,28,.3)); }
@media (min-width: 1100px) { .ucr-coin-m { display: none; } }
/* charity page hero: cream to gold, charity name in green (no dark blocks on her pages) */
.ucr-show-hero { background: linear-gradient(180deg, #fff8e4 0%, #fffdf6 55%, #f4f8dc 100%); border-bottom: 1px solid #f1ead6; }
.ucr-show-hero .uc-pattern { display: none; }
.ucr-show-hero h1, .ucr-show-hero .text-white { color: #14855f !important; }
.ucr-show-hero .text-emerald-100, .ucr-show-hero [class*="text-emerald-100"] { color: #3a4640 !important; }
.ucr-show-hero span[class*="rounded-full"] { border-radius: 8px !important; background: #fff !important; color: #3a4640 !important; border: 1px solid #eee3c6; }
.ucr-show-hero a[class*="bg-white"] { background: #14855f !important; color: #fff !important; }
.ucr-show-hero a[class*="bg-white"]:hover { background: #0f6e4f !important; }
.ucr-show-hero [class*="bg-white/20"], .ucr-show-hero [class*="bg-white/15"] { background: #fff !important; }

.ucr-adslot { display: flex; justify-content: center; margin: 40px auto 24px; padding: 0 16px; min-height: 250px; }

/* ---------- Round 4 ---------- */
.ucr-amt.first { font-size: 14px !important; }
.ucr-adslot { margin: 0 auto; }
.ucr-body .breadcrumb-back { color: #14855f !important; font-size: 14px !important; }


/* ---------- r2550: back to the spec (Tab, Oct 27) ---------- */
.ucr-trust { margin-top: 48px; }
.ucr-trust strong { color: #17231e; font-weight: 600; }
.ucr-trust strong.gold { color: #8a6516; font-weight: 700; }
.ucr-trust b { font-size: 17px; }
.ucr-trust-close { margin-top: 28px !important; font-size: 17px; color: #3a4640; text-wrap: balance; }
.ucr-trust-close strong { color: #14855f; font-weight: 700; }
@media (max-width: 700px) { .ucr-trust { margin-top: 28px; font-size: 15px; gap: 10px 20px; } .ucr-trust-close { font-size: 15px; margin-top: 18px !important; } }
.ucr-sun-cite { margin-top: 6px !important; font-size: 14px; color: #6b4e0f; }
.ucr-close-btn { margin-top: 44px; }
.ucr-close-link { margin-top: 18px; font-size: 15px; font-weight: 500; }
.ucr-close-in { display: flex; flex-direction: column; align-items: center; }
.ucr-close { padding-bottom: 96px; }
@media (max-width: 700px) { .ucr-close { padding-bottom: 56px; } .ucr-close-btn { margin-top: 28px; } }
/* browse: photo frame is always there (a charity with no cover photo gets its real logo or initial on the soft panel), live filter hides the button */
.ucr-cphoto-fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ucr-cphoto-fb img { max-width: 62%; max-height: 62%; object-fit: contain; }
.ucr-cphoto-fb span { font-size: 56px; font-weight: 700; color: #14855f; }
.ucr-filter.is-live .ucr-filter-go { display: none; }
@media (min-width: 900px) { .ucr-filter.is-live .ucr-filter-row { grid-template-columns: 1fr 1fr 1fr auto; } }
.ucr-soon .ucr-ccard { align-self: start; }
.ucr-heart-clip:has(img) { background: #fff; box-shadow: inset 0 0 0 0 #fff; }

.ucr-ccard .ucr-cphoto { margin: 0 -4px; background: #fff; border: 1px solid #efebe1; }
.ucr-ccard .ucr-cphoto .ucr-cphoto-fb { background: #fff; }
.ucr-ccard .ucr-cphoto .ucr-cphoto-fb img { position: static; inset: auto; width: auto; height: auto; max-width: 62%; max-height: 62%; object-fit: contain; }
.ucr-ccard .ucr-feat { top: 10px; left: 12px; font-size: 13px; color: #6b4e0f; background: none; padding: 0; border-radius: 0; z-index: 1; }

/* r2577: the Zakat line is a link to the charity's own page */
.ucr-czakat a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Oct 27: logo box sizes the image, never the padding on top of it */
.ucr-heart-clip img { box-sizing: border-box; }

/* ---------- r2584: the inside pages (/causes, donate, how it works, transparency, about, FAQ, for charities, apply, contact) ----------
   They carry the redesign header, footer and tokens. Content keeps its own markup; these rules take the dark green
   band, dark panels, pill and uppercase labels out, and put cards and forms on the same tokens as home and Browse. */
.ucr-inner { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #17231e; background: #fff; }
.ucr-inner h1, .ucr-inner h2, .ucr-inner h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; text-wrap: balance; }
.ucr-inner h2.text-gray-900, .ucr-inner h2.text-3xl.text-gray-900 { color: #14855f; letter-spacing: -.02em; }
.ucr-inner .bg-gray-50 { background: #fffdf6; }
.ucr-inner .min-h-screen.bg-gray-50 { min-height: 0; }
.ucr-inner .bg-white.rounded-2xl, .ucr-inner .bg-white.rounded-xl, .ucr-inner .bg-white.rounded-3xl { border: 1px solid #eeebe3; box-shadow: 0 6px 22px rgba(23,35,30,.04); }
.ucr-inner .bg-white.rounded-2xl.shadow-sm, .ucr-inner .bg-white.rounded-xl.shadow-sm { box-shadow: 0 6px 22px rgba(23,35,30,.04); }
.ucr-inner input[type="text"], .ucr-inner input[type="email"], .ucr-inner input[type="number"], .ucr-inner input[type="url"], .ucr-inner input[type="tel"], .ucr-inner select, .ucr-inner textarea { border-color: #e6e1d3; border-radius: 12px; font-family: inherit; font-weight: 500; }
.ucr-inner input:focus, .ucr-inner select:focus, .ucr-inner textarea:focus { border-color: #14855f; box-shadow: 0 0 0 3px rgba(20,133,95,.18); outline: none; }
.ucr-inner a:not([class*="bg-"]):not([class*="uc-btn"]):not([class*="border-"]) { text-decoration-color: rgba(20,133,95,.35); }
.ucr-inner button.bg-emerald-600, .ucr-inner a.bg-emerald-600 { border-radius: 13px; font-weight: 700; }
.ucr-inner .bg-emerald-600:hover { background: #0f6e4f; }
.ucr-inner .uc-btn-primary { background: #14855f; color: #fff; border-radius: 13px; }
.ucr-inner .uc-btn-primary:hover { background: #0f6e4f; }
.ucr-inner [class*="rounded-full"][class*="bg-gold-500/1"], .ucr-inner [class*="rounded-full"][class*="bg-gold-500/2"], .ucr-inner [class*="rounded-full"][class*="bg-emerald-500/20"], .ucr-inner span[class*="rounded-full"][class*="text-xs"][class*="font-bold"] { border-radius: 8px !important; }
/* no uppercase eyebrow labels on the redesign pages */
/* r2626 (blind seats R1 #8, R2 #2): text-gray-400 is 2.3 to 2.5:1 on cream; inner pages read #56605a (6.4:1) */
.ucr-inner .text-gray-400 { color: #56605a; }
/* the closing line of the pill and other quiet emerald lines pass 4.5:1 */
.ucr-inner h1.text-gray-900 { color: #14855f; text-wrap: balance; }
.ucr-inner .uppercase { text-transform: none !important; letter-spacing: 0 !important; }
.ucr-inner .tracking-wider, .ucr-inner .tracking-wide { letter-spacing: 0 !important; }

/* page hero (inner pages) */
.ucr-phero .ucr-bhero-in, .ucr-phero .ucr-hero-in { padding-top: 72px; padding-bottom: 96px; }
.ucr-phero .ucr-h1 { font-size: clamp(38px, 5vw, 58px); }
@media (max-width: 700px) { .ucr-phero .ucr-bhero-in { padding: 48px 20px 80px; } }
/* the cream hero for pages whose hero carries stats, buttons and a Ramadan strip (/causes, for charities, onboarding) */
.ucr-inhero { background: linear-gradient(180deg, #fff8e4 0%, #fffdf6 62%, #fff 100%); border-bottom: 1px solid #f1ead6; }
.ucr-inhero [class*="text-emerald-100"], .ucr-inhero [class*="text-emerald-200"], .ucr-inhero [class*="text-gold-100"] { color: #3a4640 !important; }
.ucr-inhero p strong, .ucr-inhero strong.text-white { color: #17231e !important; }
.ucr-inhero .text-white { color: #17231e !important; }
.ucr-inhero h1, .ucr-inhero h1.text-white { color: #14855f !important; }
.ucr-inhero .uc-gradient-text { background: none !important; -webkit-text-fill-color: #b07f1c !important; color: #b07f1c !important; }
.ucr-inhero [class*="bg-white/15"], .ucr-inhero [class*="bg-white/10"] { background: #fff !important; }
.ucr-inhero [class*="bg-gold-500/15"] { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin-bottom: 20px !important; backdrop-filter: none !important; }
.ucr-inhero [class*="bg-gold-500/15"] span { color: #8a6516 !important; font-size: 16px !important; font-weight: 600 !important; }
.ucr-inhero [class*="bg-gold-500/15"] [class*="animate-ping"], .ucr-inhero [class*="bg-gold-500/15"] > span.relative { display: none; }
.ucr-inhero a[class*="border-white/30"] { border: 1px solid rgba(20,133,95,.3) !important; color: #14855f !important; background: rgba(255,255,255,.8) !important; box-shadow: none !important; }
.ucr-inhero a[class*="border-white/30"]:hover { background: #fff !important; color: #0f6e4f !important; }
.ucr-inhero .bg-white\/15, .ucr-inhero .w-px { background: #e6e1d3 !important; }
.ucr-inhero .uc-btn-primary { color: #fff !important; }
.ucr-inhero .uc-pattern, .ucr-inhero > .absolute { display: none; }
.ucr-inhero .text-emerald-200\/70 { color: #56605a !important; }

/* soft green panel: replaces the dark panels and green bands */
.ucr-soft { background: linear-gradient(160deg, #dcefe2 0%, #e8f3d2 35%, #f4f8dc 52%, #e5f1d0 75%, #d9edc9 100%) !important; color: #17231e; border: 1px solid #d3e6c8; border-radius: 24px; }
.ucr-soft .absolute.inset-0 { display: none; }
.ucr-soft h2, .ucr-soft h3, .ucr-soft .text-white { color: #17231e !important; }
.ucr-soft h2 { color: #14855f !important; }
.ucr-soft [class*="text-gray-200"], .ucr-soft [class*="text-gray-300"], .ucr-soft [class*="text-gray-400"], .ucr-soft [class*="text-emerald-100"], .ucr-soft [class*="text-emerald-200"] { color: #3a4640 !important; }
.ucr-soft [class*="text-gray-500"] { color: #56605a !important; }
.ucr-soft [class*="text-gold-300"], .ucr-soft [class*="text-gold-400"], .ucr-soft [class*="text-gold-100"] { color: #8a6516 !important; }
.ucr-soft [class*="text-emerald-300"], .ucr-soft [class*="text-emerald-400"] { color: #14855f !important; }
.ucr-soft [class*="bg-white/5"], .ucr-soft [class*="bg-white/10"] { background: rgba(255,255,255,.7) !important; border-color: #e6e1d3 !important; backdrop-filter: none !important; }
.ucr-soft [class*="bg-emerald-500/20"], .ucr-soft [class*="bg-gold-500/20"] { background: #fff !important; border-radius: 8px; }
.ucr-soft [class*="border-white/"] { border-color: #cfe3c4 !important; }
/* r2626 (blind seats R1 #1, R2 #1): match the EXACT utility token (~=), never a substring. [class*="bg-white"] also
   matched "hover:bg-white/10" on the ghost button and painted it green on green with no label. */
.ucr-soft.text-white { color: #17231e !important; }
.ucr-soft a[class~="bg-gold-500"], .ucr-soft a[class~="bg-white"], .ucr-soft a[class~="bg-emerald-500"], .ucr-soft a[class~="bg-emerald-600"] { background: #14855f !important; color: #fff !important; }
.ucr-soft a[class~="bg-gold-500"]:hover, .ucr-soft a[class~="bg-white"]:hover, .ucr-soft a[class~="bg-emerald-500"]:hover, .ucr-soft a[class~="bg-emerald-600"]:hover { background: #0f6e4f !important; }
/* ghost button (a border-white link with no solid fill): outlined, dark-green label on white */
.ucr-soft a[class*="border-white"]:not([class~="bg-white"]):not([class~="bg-emerald-500"]):not([class~="bg-emerald-600"]):not([class~="bg-gold-500"]) { color: #14855f !important; border-color: rgba(20,133,95,.35) !important; background: #fff !important; }
.ucr-soft a.uc-btn-primary { color: #fff !important; }
.ucr-soft .grid > div { color: inherit; }
@media (max-width: 700px) { .ucr-soft { border-radius: 20px; } }