/* maranatha.com: the platform's own look, "Morning Light".
   Loaded only by the main layout (views/layouts/main.ejs), after main.css and app.css. Church sites (church.css) and the church
   dashboard never load it, so they keep their own looks. Hand-written, no build step, no inline styles (CSP).
   Idea: a bright, quiet page in pale sky, lilac and gold, with deep indigo only for text. The one memorable thing is the sunrise
   inside an arch window on the home page (the arch echoes the logo and a church window). Everything else stays calm.
   Motion: one dawn on the home page, soft hover answers, a heartbeat on Support. All of it is switched off for people who ask for
   reduced motion (main.css), and every animation starts from a state that the resting style already matches. */

:root {
  --ink: #1D1A40;
  --ink-soft: #55507A;
  --violet: #5B3CC4;
  --iris-deep: #4A2FA8;
  --link: #4E34B0;
  --plum: #7A3AA8;
  --dawn-ink: #5B3CC4;
  --paper: #FBF9F6;
  --sky: #EEEAFD;
  --line: #E5E0F2;
  --focus: #5B3CC4;
  --radius: 22px;
  --shadow: 0 1px 2px rgba(45, 32, 120, .04), 0 10px 30px rgba(60, 45, 140, .07);
  --shadow-lift: 0 2px 4px rgba(45, 32, 120, .06), 0 24px 48px rgba(91, 60, 196, .16);
  --grad-badge: linear-gradient(135deg, #5B3CC4, #8A52D6);
  --accent: var(--violet);
  --accent-text: #FFFFFF;
  --accent-hover: var(--iris-deep);
  --accent-hover-text: #FFFFFF;
  --accent-ink: var(--violet);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Type ---------- */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
h1 { font-weight: 540; letter-spacing: -0.03em; }
h2 { font-weight: 560; letter-spacing: -0.025em; }
.eyebrow { text-transform: none; letter-spacing: .005em; font-size: 1rem; font-weight: 600; color: var(--violet); }
.lead { color: var(--ink-soft); }
:focus-visible, .hero-dawn :focus-visible, .page-hero :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: var(--focus); }

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; letter-spacing: .005em; }
.btn-primary { background: linear-gradient(135deg, #6748D4, #5236B8); color: #FFFFFF; box-shadow: 0 8px 22px rgba(91, 60, 196, .28), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn-primary:hover { background: linear-gradient(135deg, #7456E0, #5B3CC4); color: #FFFFFF; box-shadow: 0 14px 30px rgba(91, 60, 196, .36), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn-primary::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%); translate: -120% 0; transition: translate .8s var(--ease); }
.btn-primary:hover::after { translate: 120% 0; }
.btn-secondary { background: rgba(255, 255, 255, .6); color: var(--ink); border-color: rgba(29, 26, 64, .35); }
.btn-secondary:hover, .page-hero .btn-secondary:hover, .hero .btn-secondary:hover { background: #FFFFFF; color: var(--violet); border-color: var(--violet); }
.page-hero .btn-secondary, .hero .btn-secondary { color: var(--ink); border-color: rgba(29, 26, 64, .35); }
.btn-quiet { color: var(--link); }
.btn-support { background: linear-gradient(135deg, #FFDB7E, #FFB347); color: #2D1B00; font-weight: 700; box-shadow: 0 8px 22px rgba(255, 166, 61, .34), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn-support:hover { background: linear-gradient(135deg, #FFE394, #FFBD5F); color: #2D1B00; box-shadow: 0 14px 30px rgba(255, 166, 61, .44), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-support .icon { color: #C93B1F; animation: heartbeat 6s ease-in-out 2.5s infinite; }
@keyframes heartbeat { 0%, 36%, 100% { scale: 1; } 6% { scale: 1.28; } 12% { scale: 1; } 18% { scale: 1.2; } 24% { scale: 1; } }

/* ---------- Header ---------- */
.site-header { background: rgba(251, 249, 246, .78); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid rgba(91, 60, 196, .08); transition: background .3s, box-shadow .3s, border-color .3s; }
.site-header.is-scrolled { background: rgba(251, 249, 246, .95); border-bottom-color: var(--line); box-shadow: 0 10px 30px rgba(60, 45, 140, .08); }
.primary-nav a { transition: background .2s, color .2s, box-shadow .2s, translate .2s; }
.primary-nav a:hover { background: var(--sky); color: var(--violet); }
.primary-nav a[aria-current="page"] { background: #FFFFFF; color: var(--violet); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line), 0 1px 4px rgba(60, 45, 140, .08); }
.primary-nav .nav-cta a { background: var(--violet); color: #FFFFFF; font-weight: 600; box-shadow: none; }
.primary-nav .nav-cta a:hover { background: var(--iris-deep); color: #FFFFFF; }
.primary-nav .nav-support { margin-left: 6px; }
.primary-nav .nav-support a { gap: 8px; padding-inline: 18px; background: linear-gradient(135deg, #FFDB7E, #FFB347); color: #2D1B00; font-weight: 700; box-shadow: 0 6px 18px rgba(255, 166, 61, .32), inset 0 1px 0 rgba(255, 255, 255, .55); }
.primary-nav .nav-support a:hover { background: linear-gradient(135deg, #FFE394, #FFBD5F); color: #2D1B00; translate: 0 -1px; }
.primary-nav .nav-support .icon { color: #C93B1F; animation: heartbeat 6s ease-in-out 2.5s infinite; }
.header-support { display: none; }
@media (max-width: 1099px) {
  .logo { margin-right: auto; }
  .primary-nav .nav-support { display: none; }
  .header-support { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: 999px; background: linear-gradient(135deg, #FFDB7E, #FFB347); color: #2D1B00; font-weight: 700; font-size: .95rem; text-decoration: none; box-shadow: 0 6px 16px rgba(255, 166, 61, .32); }
  .header-support:hover { color: #2D1B00; }
  .header-support .icon { color: #C93B1F; animation: heartbeat 6s ease-in-out 2.5s infinite; }
  .primary-nav a[aria-current="page"] { box-shadow: none; background: var(--sky); }
}
@media (max-width: 479px) {
  .header-inner { gap: 10px; }
  .header-support { padding: 8px; }
  .header-support span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .logo-word { font-size: 1.5rem; }
  .js .nav-toggle { padding: 8px 14px; }
}

/* ---------- Home: the dawn ---------- */
.hero-dawn { position: relative; isolation: isolate; overflow: hidden; text-align: left; color: var(--ink);
  padding-block: clamp(36px, 5vw, 72px) clamp(56px, 7vw, 100px);
  background:
    radial-gradient(70% 60% at 10% 0%, rgba(176, 160, 255, .36), transparent 70%),
    radial-gradient(60% 55% at 96% 6%, rgba(150, 205, 255, .32), transparent 70%),
    radial-gradient(80% 60% at 50% 118%, rgba(255, 207, 135, .42), transparent 70%),
    linear-gradient(180deg, #F5F2FF 0%, var(--paper) 100%); }
.hero-dawn::after { content: ''; position: absolute; inset: auto 0 0; height: 96px; z-index: -1; background: linear-gradient(180deg, transparent, var(--paper)); }
.hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(40px); pointer-events: none; }
.hero-glow-a { width: 520px; height: 520px; left: -140px; top: -120px; background: radial-gradient(circle, rgba(167, 139, 250, .38), transparent 68%); animation: drift-a 26s ease-in-out infinite alternate; }
.hero-glow-b { width: 560px; height: 560px; right: -160px; bottom: -200px; background: radial-gradient(circle, rgba(255, 196, 110, .5), transparent 68%); animation: drift-b 30s ease-in-out infinite alternate; }
@keyframes drift-a { to { translate: 90px 50px; scale: 1.12; } }
@keyframes drift-b { to { translate: -110px -40px; scale: 1.1; } }
.hero-layout { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 940px) { .hero-layout { grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); } }
.hero-copy { position: relative; }
.pill { display: inline-block; margin: 0; padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(91, 60, 196, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .9rem; font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--violet); }
.hero-dawn h1 { color: var(--ink); font-size: clamp(3.1rem, 7vw, 5.6rem); font-weight: 520; line-height: 1; letter-spacing: -0.028em; word-spacing: .12em; margin: .3em 0 .3em; text-shadow: none; font-variation-settings: 'opsz' 96, 'WONK' 0; }
.hero-dawn .lead { color: var(--ink-soft); text-shadow: none; max-width: 36rem; margin: 0 0 1.8rem; font-size: clamp(1.1rem, 1.2vw + .75rem, 1.35rem); }
.hero-copy > * { animation: rise .9s var(--ease) both; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-name: rise-solid; }
.hero-copy > :nth-child(3) { animation-delay: .22s; }
.hero-copy > :nth-child(4) { animation-delay: .34s; }
@keyframes rise { from { opacity: 0; translate: 0 14px; } }
@keyframes rise-solid { from { translate: 0 14px; } }

/* the three ways in */
.home-entries { display: grid; gap: 12px; max-width: 34rem; margin: 0; }
.home-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 16px 18px 16px 22px; border-radius: 22px; background: rgba(255, 255, 255, .74); border: 1px solid rgba(91, 60, 196, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); text-decoration: none; transition: translate .3s var(--ease), box-shadow .3s, border-color .3s, background .3s; }
.home-entry h2 { display: block; margin: 0 0 2px; font-size: 1.3rem; color: inherit; letter-spacing: -0.015em; }
.home-entry p { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-soft); }
.he-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(91, 60, 196, .1); color: var(--violet); transition: translate .3s var(--ease), background .3s, color .3s; }
.home-entry:hover { translate: 0 -3px; box-shadow: var(--shadow-lift); border-color: rgba(91, 60, 196, .3); background: rgba(255, 255, 255, .95); color: var(--ink); }
.home-entry:hover .he-go { translate: 3px 0; background: var(--violet); color: #FFFFFF; }
.home-entry:first-child { background: linear-gradient(135deg, #6B4BD6, #5236B8); border-color: transparent; color: #FFFFFF; box-shadow: 0 16px 36px rgba(91, 60, 196, .32); }
.home-entry:first-child p { color: rgba(255, 255, 255, .9); }
.home-entry:first-child .he-go { background: rgba(255, 255, 255, .2); color: #FFFFFF; }
.home-entry:first-child:hover { background: linear-gradient(135deg, #7456E0, #5B3CC4); color: #FFFFFF; }
.home-entry:first-child:hover .he-go { background: #FFFFFF; color: var(--violet); }
@media (max-width: 599px) { .home-entry { padding: 14px 14px 14px 18px; } .home-entry h2 { font-size: 1.2rem; } }

/* the arch window: a sunrise that arrives once, then rests and breathes */
.dawn-window { display: none; }
@media (min-width: 940px) {
  .dawn-window { display: block; position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 5 / 6.3; border-radius: 999px 999px 30px 30px; overflow: hidden; isolation: isolate;
    box-shadow: 0 0 0 9px rgba(255, 255, 255, .62), 0 0 0 10px rgba(91, 60, 196, .14), 0 44px 80px -24px rgba(91, 60, 196, .38);
    animation: window-in 1.2s var(--ease) .1s both; }
}
@keyframes window-in { from { opacity: 0; scale: .96; translate: 0 18px; } }
.dw-sky, .dw-warm { position: absolute; inset: 0; }
.dw-sky { background: linear-gradient(180deg, #B6CBF8 0%, #D2C6F7 36%, #F4CFD6 70%, #FFE3A9 100%); }
.dw-warm { background: radial-gradient(90% 70% at 50% 100%, rgba(255, 216, 132, .95), rgba(255, 172, 122, .5) 46%, transparent 76%); animation: dawn-warm 3.6s ease-out .2s both; }
@keyframes dawn-warm { from { opacity: 0; } }
.dw-rays { position: absolute; left: 50%; bottom: 24%; width: 900px; height: 900px; margin-left: -450px; translate: 0 50%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .42) 0 3.5deg, transparent 3.5deg 12deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 52%); mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 52%);
  animation: spin 200s linear infinite, fade-in 3.4s ease-out 1s both; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes fade-in { from { opacity: 0; } }
.dw-sun { position: absolute; left: 50%; bottom: 24%; width: 66%; aspect-ratio: 1; translate: -50% 50%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFFDF2 0 20%, #FFEBAE 36%, rgba(255, 212, 124, .55) 54%, rgba(255, 180, 100, 0) 72%);
  animation: sun-rise 3.4s cubic-bezier(.2, .75, .2, 1) .15s both, breathe 9s ease-in-out 3.6s infinite alternate; }
@keyframes sun-rise { from { translate: -50% 150%; } }
@keyframes breathe { to { scale: 1.07; } }
.dw-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 36%; display: block; }
.dw-hills .h1 { fill: #EDC8DF; } .dw-hills .h2 { fill: #C9B6F3; } .dw-hills .h3 { fill: url(#dwh); }
.motes { position: absolute; inset: 0; pointer-events: none; animation: motes 12s ease-in-out infinite alternate;
  background-image:
    radial-gradient(2.4px 2.4px at 22% 64%, #FFF3C4 50%, transparent 54%), radial-gradient(1.8px 1.8px at 34% 48%, #FFFFFF 50%, transparent 54%),
    radial-gradient(2.6px 2.6px at 68% 58%, #FFF3C4 50%, transparent 54%), radial-gradient(1.8px 1.8px at 78% 40%, #FFFFFF 50%, transparent 54%),
    radial-gradient(2.2px 2.2px at 50% 34%, #FFF3C4 50%, transparent 54%), radial-gradient(1.6px 1.6px at 14% 36%, #FFFFFF 50%, transparent 54%),
    radial-gradient(2px 2px at 88% 66%, #FFF3C4 50%, transparent 54%); }
@keyframes motes { from { translate: 0 10px; opacity: .45; } to { translate: 0 -16px; opacity: 1; } }

/* ---------- Interior pages: a quiet morning banner ---------- */
.page-hero { color: var(--ink); padding-block: clamp(44px, 6vw, 84px) clamp(36px, 5vw, 60px); border-bottom: 1px solid rgba(91, 60, 196, .08);
  background:
    radial-gradient(50% 130% at 0% 0%, rgba(176, 160, 255, .3), transparent 70%),
    radial-gradient(45% 120% at 100% 100%, rgba(255, 207, 135, .4), transparent 70%),
    linear-gradient(180deg, #F5F2FF, var(--paper)); }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--ink); font-size: clamp(2.3rem, 4.8vw, 3.9rem); max-width: 18ch; line-height: 1.04; }
.page-hero .lead { color: var(--ink-soft); }
.page-hero .eyebrow, .page-hero .eyebrow a { color: var(--violet); }
.page-hero a:not(.btn) { color: var(--link); }
.page-hero .muted { color: var(--ink-soft); }
@media (min-width: 1100px) {
  .page-hero::before, .page-hero::after { content: ''; position: absolute; bottom: -1px; border-radius: 999px 999px 0 0; border: 1.5px solid rgba(91, 60, 196, .16); border-bottom: 0; pointer-events: none; }
  .page-hero::before { right: calc(var(--gutter) + 40px); width: 250px; top: 22px; background: radial-gradient(80% 55% at 50% 100%, rgba(255, 214, 140, .55), transparent 72%), linear-gradient(180deg, rgba(255, 255, 255, .5), transparent); animation: arch-glow 9s ease-in-out infinite alternate; }
  .page-hero::after { right: calc(var(--gutter) + 22px); width: 286px; top: 6px; border-color: rgba(91, 60, 196, .09); }
}
@media (min-width: 1360px) { .page-hero::before { right: calc((100vw - 1180px) / 2 + 40px); } .page-hero::after { right: calc((100vw - 1180px) / 2 + 22px); } }
@keyframes arch-glow { from { opacity: .72; } to { opacity: 1; } }

/* For churches: the same morning, two columns */
.hero { position: relative; overflow: hidden; color: var(--ink); padding-block: 48px 64px;
  background:
    radial-gradient(55% 120% at 0% 0%, rgba(176, 160, 255, .3), transparent 70%),
    radial-gradient(50% 120% at 100% 100%, rgba(255, 207, 135, .42), transparent 70%),
    linear-gradient(180deg, #F5F2FF, var(--paper)); }
@media (min-width: 900px) { .hero { padding-block: 84px 100px; } }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { max-width: 16ch; color: var(--ink); }
.hero .lead { margin-bottom: 1.6rem; color: var(--ink-soft); }
.hero .eyebrow { color: var(--violet); }
.hero .muted { color: var(--ink-soft); }
.hero a:not(.btn) { color: var(--link); }
.hero-media { border-radius: 28px; background: #FFFFFF; box-shadow: var(--shadow-lift); }

/* ---------- Sections ---------- */
.section-sky { background: linear-gradient(180deg, #F1EEFD 0%, #F8F6FF 100%); }
.section-dawn { background: linear-gradient(180deg, #FFF6EA 0%, #FDEEF2 55%, #F1ECFF 100%); }
.section-white { background: #FFFFFF; }
.hero-dawn + .section { padding-top: clamp(24px, 4vw, 56px); }
.horizon { display: none; }
.section-spotlight > .container { position: relative; width: min(1180px, calc(100% - 2 * var(--gutter))); max-width: none; padding: clamp(28px, 5vw, 64px); border-radius: 36px; border: 1px solid #FFFFFF;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 214, 140, .5), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, rgba(176, 160, 255, .34), transparent 70%),
    linear-gradient(135deg, #F3EEFF, #FFF7EC);
  box-shadow: 0 34px 70px -34px rgba(91, 60, 196, .4); }
.feature-list li { background: rgba(255, 255, 255, .78); border: 1px solid rgba(91, 60, 196, .1); border-left: 4px solid #F5B335; color: var(--ink-soft); border-radius: 18px; transition: translate .3s var(--ease), box-shadow .3s; }
.feature-list li:hover { translate: 4px 0; box-shadow: var(--shadow); }
.feature-list strong { color: var(--ink); }
.section-head .lead { margin-bottom: 0; }

/* ---------- Cards ---------- */
.card { border-color: rgba(91, 60, 196, .1); }
a.card:hover, .card-link:hover { border-color: rgba(91, 60, 196, .3); }
.card .icon-badge { width: 54px; height: 58px; border-radius: 27px 27px 14px 14px; background: linear-gradient(170deg, #EFE9FF 0%, #FFEACB 100%); color: var(--violet); box-shadow: inset 0 0 0 1px rgba(91, 60, 196, .12), 0 6px 14px rgba(91, 60, 196, .1); margin-bottom: 18px; transition: translate .3s var(--ease), box-shadow .3s; }
a.card:hover .icon-badge { translate: 0 -3px; box-shadow: inset 0 0 0 1px rgba(91, 60, 196, .22), 0 12px 22px rgba(91, 60, 196, .18); }
.pillar { background: transparent; border: 0; box-shadow: none; padding: 30px 6px 0; border-radius: 0; overflow: visible; }
.pillar::before { inset: 0 auto auto 6px; width: 56px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #F5B335, #E07A5F); }
.pillar-word { font-size: 2.3rem; font-weight: 540; color: var(--violet); background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; }
.pillar .icon-badge { display: none; }
.steps li { border-color: rgba(91, 60, 196, .1); transition: translate .3s var(--ease), box-shadow .3s; }
.steps li:hover { translate: 0 -3px; box-shadow: var(--shadow-lift); }
.step-no { background: linear-gradient(180deg, #F5B335, #E07A5F); -webkit-background-clip: text; background-clip: text; }
.pill-list li { border-color: rgba(91, 60, 196, .12); transition: translate .25s var(--ease), box-shadow .25s; }
.pill-list li:hover { translate: 0 -2px; box-shadow: var(--shadow-lift); }
.verse-of-day .scripture::before { background: linear-gradient(90deg, #F5B335, #E07A5F); width: 56px; height: 4px; }
.walk-streak, .freedom-big { background: linear-gradient(135deg, #5B3CC4, #8A52D6); }
.notice { background: #F1EEFD; border: 1px solid rgba(91, 60, 196, .12); }
.progress > span, progress.meter::-webkit-progress-value { background: linear-gradient(90deg, #5B3CC4, #8A52D6, #F5B335); }
progress.meter::-moz-progress-bar { background: linear-gradient(90deg, #5B3CC4, #8A52D6, #F5B335); }

/* FAQ: the plus turns into a cross as the answer opens */
details.faq { border-radius: 18px; border-color: rgba(91, 60, 196, .1); transition: box-shadow .25s, border-color .25s; }
details.faq:hover, details.faq[open] { border-color: rgba(91, 60, 196, .28); box-shadow: var(--shadow-lift); }
details.faq summary::after, details.faq[open] summary::after { content: '+'; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sky); color: var(--violet); font-size: 1.4rem; transition: rotate .3s var(--ease), background .25s; flex: none; }
details.faq[open] summary::after { rotate: 45deg; background: var(--violet); color: #FFFFFF; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details.faq::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
  details.faq[open]::details-content { block-size: auto; }
}

/* ---------- Support Maranatha: a clear, warm invitation ---------- */
.support-note { padding-block: 8px clamp(48px, 6vw, 80px); text-align: left; }
.support-card { display: grid; gap: 18px 28px; align-items: center; padding: clamp(22px, 3.4vw, 36px) clamp(22px, 4vw, 44px); border-radius: 32px; border: 1px solid #FFFFFF;
  background: radial-gradient(60% 120% at 100% 100%, rgba(255, 200, 120, .5), transparent 70%), linear-gradient(120deg, #F3EDFF, #FFF6EA 62%, #FFEADF);
  box-shadow: 0 30px 60px -34px rgba(91, 60, 196, .4); }
@media (min-width: 760px) { .support-card { grid-template-columns: auto minmax(0, 1fr) auto; } }
.support-heart { display: grid; place-items: center; width: 64px; height: 68px; border-radius: 32px 32px 16px 16px; background: linear-gradient(170deg, #FFFFFF, #FFE9C4); color: #C93B1F; box-shadow: inset 0 0 0 1px rgba(201, 59, 31, .14), 0 10px 22px rgba(255, 166, 61, .26); }
.support-heart .icon { animation: heartbeat 6s ease-in-out 2.5s infinite; }
.support-card h2 { margin: 0 0 .15em; font-size: clamp(1.45rem, 2.4vw, 2rem); }
.support-card p { margin: 0; color: var(--ink-soft); max-width: 46ch; }

/* The amounts on the Support page read as choices, not a list */
.support-form fieldset.field { display: flex; flex-wrap: wrap; gap: 10px; }
.support-form fieldset .check { position: relative; min-height: 0; }
.support-form fieldset .check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.support-form fieldset .check label { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 24px; border-radius: 999px; border: 2px solid #8F88B5; background: #FFFFFF; font-weight: 600; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.support-form fieldset .check:hover label { border-color: var(--violet); color: var(--violet); }
.support-form fieldset .check:has(input:checked) label { background: var(--violet); border-color: var(--violet); color: #FFFFFF; box-shadow: 0 8px 20px rgba(91, 60, 196, .3); }
.support-form fieldset .check:has(input:focus-visible) label { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- Footer: light, with a low sun ---------- */
.site-footer { position: relative; overflow: hidden; color: var(--ink-soft); padding-block: 64px 32px;
  background:
    radial-gradient(70% 90% at 50% 130%, rgba(255, 200, 120, .5), transparent 70%),
    radial-gradient(55% 80% at 0% 0%, rgba(176, 160, 255, .26), transparent 70%),
    linear-gradient(180deg, #F6F3FF 0%, #FBF1EA 100%);
  border-top: 1px solid rgba(91, 60, 196, .1); }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--violet); }
.site-footer a.btn-primary { color: #FFFFFF; }
.site-footer a.btn-support { color: #2D1B00; }
.footer-tag { color: var(--ink-soft); font-family: var(--font-head); font-size: 1.2rem; line-height: 1.45; max-width: 24ch; }
@media (min-width: 1100px) { .footer-top { grid-template-columns: minmax(260px, 1fr) 2.4fr; } .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-grid h2 { font: 700 .95rem var(--font-body); letter-spacing: .01em; text-transform: none; color: var(--ink); margin-bottom: .7em; }
.footer-grid li a { color: var(--ink-soft); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .2s, background-size .3s var(--ease); }
.footer-grid li a:hover { color: var(--violet); background-size: 100% 1px; text-decoration: none; }
.footer-support { margin: 22px 0 0; padding: 18px 20px; border-radius: 22px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 166, 61, .35); box-shadow: 0 14px 30px -18px rgba(255, 140, 40, .5); max-width: 22rem; }
.footer-support p { margin: 0 0 12px; font-size: .95rem; color: var(--ink); }
.footer-crisis { margin-top: 36px; padding: 14px 20px; border-radius: 18px; background: rgba(255, 255, 255, .66); border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.footer-crisis .icon { color: #C4574F; }
.footer-crisis a { color: var(--ink); text-decoration-color: rgba(91, 60, 196, .5); }
.footer-legal { border-top-color: rgba(91, 60, 196, .14); color: var(--ink-soft); }
.footer-legal a { color: var(--link); }

/* ---------- Scroll reveal: gentle, and staggered inside a grid ---------- */
.js .reveal { translate: 0 10px; transform: none; transition: opacity .7s ease, translate .7s var(--ease); }
.js .reveal.in { translate: 0 0; }
.grid > .reveal:nth-child(2) { transition-delay: .07s; }
.grid > .reveal:nth-child(3) { transition-delay: .14s; }
.grid > .reveal:nth-child(4) { transition-delay: .21s; }
.grid > .reveal:nth-child(5) { transition-delay: .28s; }

/* ---------- Page-to-page fade (browsers that support it) and a slow parallax for the dawn ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
  @supports (animation-timeline: scroll()) {
    .hero-glow-a, .hero-glow-b { animation: none; }
    .hero-glow-a { animation: parallax-up linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
    .hero-glow-b { animation: parallax-down linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
  }
}
@keyframes parallax-up { to { translate: 0 -90px; } }
@keyframes parallax-down { to { translate: 0 70px; } }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } .js .reveal { translate: 0 0; } }