/* Living Water Church: OnlineGiving.org demo church website */
:root {
    --navy: #1e3a5f;
    --navy-deep: #0c1828;
    --navy-ink: #08111d;
    --gold: #c9a54a;
    --gold-soft: #e9d8a6;
    --ink: #0f1a2a;
    --body: #3d4757;
    --muted: #6b7686;
    --paper: #f6f3ec;
    --paper-2: #efe9dd;
    --white: #ffffff;
    --radius: 20px;
    --shadow-sm: 0 1px 2px rgba(12, 24, 40, .06), 0 4px 14px rgba(12, 24, 40, .06);
    --shadow-md: 0 2px 4px rgba(12, 24, 40, .05), 0 18px 40px -12px rgba(12, 24, 40, .18);
    --shadow-xl: 0 30px 80px -20px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .25);
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wrap: 1240px;
    --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { color: var(--ink); margin: 0; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 32px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; font: 600 15px/1 var(--sans); text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-navy { background: var(--navy); color: var(--white); box-shadow: 0 6px 18px -6px rgba(30, 58, 95, .6); }
.btn-navy:hover { background: #24466f; }
.btn-gold { background: var(--gold); color: var(--navy-ink); box-shadow: 0 8px 22px -8px rgba(201, 165, 74, .8); }
.btn-gold:hover { background: #d4b25a; }
.btn-soft { background: var(--paper-2); color: var(--ink); }
.btn-soft:hover { background: #e6dece; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); transition: box-shadow .25s ease; }
.site-header.scrolled { box-shadow: 0 1px 0 rgba(12, 24, 40, .06), 0 8px 24px -12px rgba(12, 24, 40, .18); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 50px; width: auto; }
.nav { display: none; margin-left: auto; align-items: center; gap: 4px; }
.nav a { position: relative; padding: 8px 12px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; border-radius: 8px; transition: color .15s ease, background-color .15s ease; }
.nav a:hover { background: var(--paper); }
.nav a[aria-current="page"] { font-weight: 700; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gold); }
.header-cta { display: none; }
.menu-btn { margin-left: auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: var(--paper); color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.mobile-nav { position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--white); box-shadow: 0 24px 40px -16px rgba(12, 24, 40, .25); padding: 8px 16px 20px; display: none; }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 14px 8px; font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--paper-2); }
.mobile-nav a[aria-current="page"] { color: var(--navy); font-weight: 700; }
.mobile-nav a.btn { display: flex; width: 100%; margin-top: 16px; padding: 0 22px; border-bottom: 0; color: var(--white); font-weight: 600; }
@media (min-width: 1040px) {
    .nav, .header-cta { display: flex; }
    .menu-btn, .mobile-nav, .mobile-nav.open { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; background: var(--navy-ink); color: rgba(255, 255, 255, .82); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(1200px 600px at 78% 30%, rgba(201, 165, 74, .14), transparent 60%),
        linear-gradient(90deg, rgba(8, 17, 29, .94) 0%, rgba(8, 17, 29, .82) 42%, rgba(8, 17, 29, .62) 72%, rgba(8, 17, 29, .74) 100%),
        linear-gradient(0deg, rgba(8, 17, 29, .85) 0%, transparent 35%); }
.hero .wrap { display: grid; gap: 36px; grid-template-areas: "intro" "card" "details"; padding-top: 48px; padding-bottom: 64px; }
.hero-intro { grid-area: intro; }
.hero-card { grid-area: card; }
.hero-details { grid-area: details; }
@media (min-width: 1040px) {
    .hero .wrap { grid-template-columns: minmax(0, 1fr) 500px; grid-template-areas: "intro card" "details card"; grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 40px; padding-top: 64px; padding-bottom: 104px; min-height: min(calc(100vh - var(--nav-h)), 900px); }
    .hero-intro { align-self: end; }
    .hero-card { align-self: start; }
}

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hero .eyebrow { padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--gold-soft); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--gold); opacity: .35; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(2.2); opacity: 0; } }

.hero h1 { margin-top: 22px; color: var(--white); font-family: var(--serif); font-weight: 340; font-size: clamp(46px, 8.4vw, 88px); line-height: .98; letter-spacing: -.025em; font-variation-settings: "opsz" 144; }
.hero h1 em { display: block; font-style: italic; font-weight: 300; color: var(--gold-soft); }
.hero-lede { margin-top: 24px; max-width: 34em; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: rgba(255, 255, 255, .78); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.stat { padding: 18px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 36px); line-height: 1; color: var(--white); letter-spacing: -.02em; }
.stat span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .66); }
.assurances { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.assurances li { display: inline-flex; align-items: center; gap: 8px; }
.assurances svg { width: 18px; height: 18px; color: var(--gold); flex: none; }

/* Widget card */
.give-card { position: relative; background: var(--white); border-radius: 24px; box-shadow: var(--shadow-xl); overflow: hidden; }
.give-frame { position: relative; padding: 10px 8px 4px; }
.give-frame iframe { display: block; border: 0; }
.give-card-foot { padding: 0 22px 18px; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }
.give-card-foot a { color: var(--muted); }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: 88px 0; }
@media (min-width: 900px) { .section { padding: 120px 0; } }
.section-head { max-width: 720px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section .eyebrow { color: #9a7a2a; }
.section h2 { margin-top: 14px; font-family: var(--serif); font-weight: 360; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -.02em; font-variation-settings: "opsz" 144; }
.section h2 em { font-style: italic; font-weight: 300; color: var(--navy); }
.section-head p { margin-top: 18px; font-size: 18px; color: var(--body); }

/* Impact */
.impact-grid { margin-top: 56px; display: grid; gap: 20px; }
@media (min-width: 760px) { .impact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.impact-card { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy-deep); box-shadow: var(--shadow-md); aspect-ratio: 4 / 5; isolation: isolate; }
.impact-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.impact-card:hover img { transform: scale(1.04); }
.impact-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 17, 29, 0) 35%, rgba(8, 17, 29, .88) 100%); }
.impact-card .body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; color: rgba(255, 255, 255, .8); }
.impact-card b { display: block; font-family: var(--serif); font-weight: 380; font-size: 48px; line-height: 1; color: var(--white); letter-spacing: -.02em; }
.impact-card h3 { margin-top: 10px; color: var(--white); font-size: 18px; font-weight: 600; }
.impact-card p { margin-top: 6px; font-size: 15px; line-height: 1.5; }
@media (max-width: 759px) { .impact-card { aspect-ratio: 4 / 3.4; } }

.hero-more { margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, .6); }
.hero-more a { color: var(--gold-soft); font-weight: 600; text-decoration: none; }
.hero-more a:hover { text-decoration: underline; }

/* Missions: partners beside the missions widget */
.missions-layout { display: grid; gap: 40px; grid-template-areas: "head" "give" "partners"; }
.m-head { grid-area: head; }
.m-give { grid-area: give; }
.m-partners { grid-area: partners; display: grid; gap: 16px; }
@media (min-width: 1040px) {
    .missions-layout { grid-template-columns: minmax(0, 1fr) 500px; grid-template-areas: "head give" "partners give"; grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 40px; align-items: start; }
}
@media (min-width: 1040px) and (min-height: 820px) { .m-give { position: sticky; top: calc(var(--nav-h) + 24px); } }
.stats.light { margin-top: 28px; }
.stats.light .stat { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
.stats.light .stat b { color: var(--ink); }
.stats.light .stat span { color: var(--muted); }
.m-give .give-card { box-shadow: var(--shadow-md); }

/* Partners */
.partners { background: var(--white); }
.partner { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--radius); background: var(--paper); transition: box-shadow .25s ease, transform .25s ease; }
.partner:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.partner-top { display: flex; align-items: center; gap: 14px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 600 17px/1 var(--sans); color: var(--white); background: var(--navy); }
.avatar.gold { background: var(--gold); color: var(--navy-ink); }
.avatar.teal { background: #2f6f73; }
.partner h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
.partner .where { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14px; color: var(--muted); }
.partner .where svg { width: 14px; height: 14px; }
.partner p { font-size: 15.5px; line-height: 1.6; flex: 1; }
.partner a.link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: none; }
.partner a.link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.partner a.link:hover svg { transform: translateX(3px); }

/* Ways to give */
.ways-layout { display: grid; gap: 48px; }
@media (min-width: 1040px) { .ways-layout { grid-template-columns: 380px minmax(0, 1fr); gap: 72px; align-items: start; } .ways-layout .section-head { position: sticky; top: calc(var(--nav-h) + 40px); } }
.ways-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .ways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.way { display: flex; flex-direction: column; padding: 26px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: box-shadow .25s ease, transform .25s ease; }
.way:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.way-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #eaf0f7; color: var(--navy); }
.way-icon svg { width: 22px; height: 22px; }
.way h3 { margin-top: 18px; font-size: 18px; font-weight: 600; }
.way p { margin-top: 6px; font-size: 15.5px; line-height: 1.6; }
.way .tag { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: #f6edd3; color: #7a5d16; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 3px; }
.way.here { background: var(--navy); color: rgba(255, 255, 255, .78); }
.way.here h3 { color: var(--white); }
.way.here .way-icon { background: rgba(255, 255, 255, .1); color: var(--gold-soft); }
.way p { flex: 1; }
.way-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--navy); }
.way-cta svg { width: 16px; height: 16px; transition: transform .2s ease; }
.way:hover .way-cta svg { transform: translateX(3px); }
.way.here .way-cta { color: var(--gold-soft); }

/* Scripture */
.scripture { background: var(--navy-deep); color: rgba(255, 255, 255, .78); overflow: hidden; isolation: isolate; text-align: center; }
.scripture::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 420px at 50% 0%, rgba(201, 165, 74, .16), transparent 70%); }
.scripture blockquote { margin: 0 auto; max-width: 920px; }
.scripture .mark { display: block; margin: 0 auto 8px; font-family: var(--serif); font-size: 96px; line-height: .6; color: var(--gold); opacity: .8; }
.scripture p { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 4vw, 46px); line-height: 1.22; letter-spacing: -.015em; color: var(--white); font-variation-settings: "opsz" 144; }
.scripture cite { display: block; margin-top: 28px; font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }

/* Visit / Watch / Groups */
.visit-grid { margin-top: 48px; display: grid; gap: 20px; }
@media (min-width: 900px) { .visit-grid { grid-template-columns: 1.25fr 1fr 1fr; gap: 24px; } .visit-card .photo { aspect-ratio: auto; height: 240px; } }
.visit-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); transition: box-shadow .25s ease, transform .25s ease; }
.visit-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.visit-card .photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.visit-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.visit-card .body { display: flex; flex-direction: column; gap: 10px; padding: 26px; flex: 1; }
.visit-card h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; }
.visit-card p { font-size: 15.5px; line-height: 1.6; }
.times { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.times li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--paper); font-size: 15px; }
.times b { color: var(--ink); font-weight: 600; }
.visit-card .actions { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }

/* FAQ */
.faq { background: var(--white); }
.faq-list { margin: 48px auto 0; max-width: 820px; display: grid; gap: 12px; }
.faq details { border-radius: 16px; background: var(--paper); transition: background-color .2s ease; }
.faq details[open] { background: var(--paper-2); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; font-size: 17px; font-weight: 600; color: var(--ink); border-radius: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--navy); transition: transform .25s ease; }
.faq summary .chev svg { width: 16px; height: 16px; }
.faq details[open] .chev { transform: rotate(45deg); }
.faq .answer { padding: 0 24px 22px; font-size: 16px; line-height: 1.65; }
.faq .answer a { color: var(--navy); font-weight: 600; }

/* Closing CTA */
.closing { padding: 0 0 96px; background: var(--white); }
.closing-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; padding: 56px 28px; text-align: center; background: var(--navy); color: rgba(255, 255, 255, .8); }
.closing-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 300px at 50% 120%, rgba(201, 165, 74, .35), transparent 70%), radial-gradient(500px 260px at 0% 0%, rgba(255, 255, 255, .08), transparent 70%); }
.closing-card h2 { font-family: var(--serif); font-weight: 340; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -.02em; color: var(--white); }
.closing-card p { margin: 16px auto 0; max-width: 34em; font-size: 18px; }
.closing-card .actions { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.closing-card .btn-ghost { background: rgba(255, 255, 255, .1); color: var(--white); }
.closing-card .btn-ghost:hover { background: rgba(255, 255, 255, .16); }

/* Footer */
.site-footer { background: var(--navy-ink); color: rgba(255, 255, 255, .62); padding: 72px 0 120px; font-size: 15px; }
.footer-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand img { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.footer-brand p { margin-top: 18px; max-width: 26em; line-height: 1.6; }
.site-footer h3 { color: var(--white); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.site-footer ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.site-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; }

/* ---------- Demo bar (sales layer) ---------- */
.demo-bar { position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%); width: calc(100% - 24px); max-width: 720px; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 18px; background: rgba(12, 24, 40, .88); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); color: rgba(255, 255, 255, .82); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .5); font-size: 14px; line-height: 1.4; transition: opacity .3s ease, transform .3s ease; }
.demo-bar.hidden { opacity: 0; transform: translate(-50%, 20px); pointer-events: none; }
.demo-bar .spark { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(201, 165, 74, .18); color: var(--gold-soft); }
.demo-bar .spark svg { width: 16px; height: 16px; }
.demo-bar .msg { flex: 1; min-width: 0; }
.demo-bar .msg b { color: var(--white); font-weight: 600; }
.demo-bar .long { display: none; }
@media (min-width: 640px) { .demo-bar .long { display: inline; } }
@media (min-width: 1040px) { .demo-bar { left: 24px; bottom: 24px; transform: none; width: auto; max-width: 560px; } .demo-bar.hidden { transform: translateY(20px); } }
.demo-bar .btn { height: 38px; padding: 0 16px; font-size: 13.5px; }
.icon-btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: rgba(255, 255, 255, .6); cursor: pointer; }
.icon-btn:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
.icon-btn svg { width: 18px; height: 18px; }

.modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: flex-end; justify-content: center; padding: 12px; background: rgba(8, 17, 29, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal.open { display: flex; animation: fade .2s ease; }
@media (min-width: 640px) { .modal { align-items: center; padding: 24px; } }
.code pre { max-height: 46vh; }
@keyframes fade { from { opacity: 0; } }
.modal-card { position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 24px); overflow: auto; border-radius: 24px; background: var(--white); box-shadow: var(--shadow-xl); padding: 28px; animation: rise .25s cubic-bezier(.2, .7, .2, 1); }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
.modal-card h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -.015em; padding-right: 40px; }
.modal-card > p { margin-top: 10px; font-size: 16px; }
.modal-card .icon-btn { position: absolute; top: 18px; right: 18px; color: var(--muted); }
.modal-card .icon-btn:hover { background: var(--paper); color: var(--ink); }
.code { position: relative; margin-top: 20px; border-radius: 16px; background: var(--navy-ink); color: #d6deea; }
.code pre { margin: 0; padding: 20px 20px 22px; overflow-x: auto; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.code .c { color: #7d8aa0; } .code .t { color: #8fb3e0; } .code .a { color: var(--gold-soft); } .code .s { color: #a7d7b0; }
.code .copy { position: absolute; top: 10px; right: 10px; height: 34px; padding: 0 12px; font-size: 12.5px; background: rgba(255, 255, 255, .1); color: var(--white); }
.code .copy:hover { background: rgba(255, 255, 255, .18); }
.checks { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.5; }
.checks svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: #1f6b45; }
.modal-card .actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .hero-intro > *, .js .hero-details, .js .hero-card { animation: up .9s cubic-bezier(.2, .7, .2, 1) both; }
.js .hero-intro h1 { animation-delay: .08s; }
.js .hero-intro .hero-lede { animation-delay: .16s; }
.js .hero-card { animation-delay: .2s; }
.js .hero-details { animation-delay: .28s; }
@keyframes up { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Header: give button ---------- */
.nav a.nav-give { margin-left: 6px; padding: 9px 16px; border-radius: 999px; background: var(--gold); color: var(--navy-ink); font-weight: 700; }
.nav a.nav-give:hover { background: #d4b25a; }
.nav a.nav-give[aria-current="page"]::after { display: none; }
@media (min-width: 1040px) and (max-width: 1180px) { .nav a { padding: 8px 9px; font-size: 14.5px; } }

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-ink); color: rgba(255, 255, 255, .8); }
.page-hero img.bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 17, 29, .92) 0%, rgba(8, 17, 29, .74) 50%, rgba(8, 17, 29, .5) 100%), linear-gradient(0deg, rgba(8, 17, 29, .7) 0%, transparent 45%); }
.page-hero .wrap { padding-top: 72px; padding-bottom: 80px; }
@media (min-width: 900px) { .page-hero .wrap { padding-top: 104px; padding-bottom: 112px; } }
.page-hero .eyebrow { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--gold-soft); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.page-hero h1 { margin-top: 20px; max-width: 14em; color: var(--white); font-family: var(--serif); font-weight: 340; font-size: clamp(42px, 6.4vw, 72px); line-height: 1; letter-spacing: -.025em; font-variation-settings: "opsz" 144; }
.page-hero h1 em { font-style: italic; font-weight: 300; color: var(--gold-soft); }
.page-hero p.lede { margin-top: 20px; max-width: 36em; font-size: clamp(17px, 1.6vw, 19px); color: rgba(255, 255, 255, .78); }
.page-hero .chips { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.page-hero .chips a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--white); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .2s ease; }
.page-hero .chips a:hover { background: rgba(255, 255, 255, .18); }
.page-hero .chips svg { width: 16px; height: 16px; color: var(--gold-soft); }

/* ---------- Showcase: copy beside a live embed ---------- */
.showcase { display: grid; gap: 36px; align-items: start; }
@media (min-width: 1040px) { .showcase { grid-template-columns: minmax(0, 1fr) 520px; column-gap: 72px; } .showcase.flip { grid-template-columns: 520px minmax(0, 1fr); } .showcase.flip > .showcase-copy { order: 2; } .showcase.wide { grid-template-columns: minmax(0, 1fr) 640px; } }
@media (min-width: 1040px) and (min-height: 820px) { .showcase-copy { position: sticky; top: calc(var(--nav-h) + 32px); } }
.showcase + .showcase { margin-top: 96px; }
.showcase-copy h2 { margin-top: 14px; }
.showcase-copy > p { margin-top: 16px; font-size: 18px; }
.shows { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.shows li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; }
.shows li b { color: var(--ink); font-weight: 600; }
.shows svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: #1f6b45; }
.showcase-copy .actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Embed card ---------- */
.embed-card { position: relative; background: var(--white); border-radius: 24px; box-shadow: var(--shadow-md); overflow: hidden; scroll-margin-top: calc(var(--nav-h) + 16px); }
.hero .embed-card { box-shadow: var(--shadow-xl); }
.embed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 0 20px; }
.embed-head .label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.embed-head .label i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #2fa36b; box-shadow: 0 0 0 4px rgba(47, 163, 107, .15); }
.embed-head .label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--paper); color: var(--navy); font: 600 12.5px/1 var(--sans); cursor: pointer; transition: background-color .2s ease; }
.code-chip:hover { background: var(--paper-2); }
.code-chip svg { width: 14px; height: 14px; }
.embed-slot { padding: 6px 8px 4px; }
.embed-slot iframe { display: block; border: 0; }
.embed-foot { padding: 0 20px 16px; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }
.embed-foot a { color: var(--muted); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-sm); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs-wrap { display: flex; justify-content: center; margin: 40px 0 56px; }
.tab { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--body); font: 600 15px/1 var(--sans); cursor: pointer; transition: background-color .2s ease, color .2s ease; white-space: nowrap; }
.tab svg { width: 18px; height: 18px; }
.tab:hover { color: var(--ink); background: var(--paper); }
.tab[aria-selected="true"] { background: var(--navy); color: var(--white); }
.tab[aria-selected="true"] svg { color: var(--gold-soft); }
.tab-panel[hidden] { display: none; }
@media (max-width: 639px) { .tabs-wrap { justify-content: flex-start; margin: 32px -16px 40px; padding: 0 16px; } .tabs { border-radius: 18px; } }

/* ---------- Home: campaign banner ---------- */
.campaign-banner { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 28px; align-items: center; padding: 36px 28px; border-radius: 28px; background: var(--navy-deep); color: rgba(255, 255, 255, .8); box-shadow: var(--shadow-md); }
.campaign-banner img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.campaign-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 17, 29, .95) 0%, rgba(8, 17, 29, .8) 55%, rgba(8, 17, 29, .35) 100%); }
@media (min-width: 900px) { .campaign-banner { grid-template-columns: minmax(0, 1fr) auto; padding: 52px 56px; } }
.campaign-banner .eyebrow { color: var(--gold-soft); }
.campaign-banner h2 { margin-top: 12px; color: var(--white); font-family: var(--serif); font-weight: 340; font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -.02em; }
.campaign-banner p { margin-top: 12px; max-width: 34em; }
.campaign-banner .actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Cards linking to pages ---------- */
.link-grid { margin-top: 48px; display: grid; gap: 20px; }
@media (min-width: 760px) { .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .link-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.link-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: box-shadow .25s ease, transform .25s ease; }
.link-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.link-card .photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.link-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.link-card:hover .photo img { transform: scale(1.04); }
.link-card .body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 24px; }
.link-card h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.12; letter-spacing: -.01em; }
.link-card p { font-size: 15.5px; line-height: 1.6; flex: 1; }
.link-card .way-cta { margin-top: 8px; }

/* ---------- Tour ---------- */
.tour-shade { position: fixed; inset: 0; z-index: 90; pointer-events: auto; background: transparent; }
.tour-spot { position: fixed; z-index: 91; border-radius: 22px; box-shadow: 0 0 0 9999px rgba(8, 17, 29, .62), 0 0 0 3px var(--gold); pointer-events: none; transition: top .35s cubic-bezier(.2, .7, .2, 1), left .35s cubic-bezier(.2, .7, .2, 1), width .35s cubic-bezier(.2, .7, .2, 1), height .35s cubic-bezier(.2, .7, .2, 1); }
.tour-spot.none { box-shadow: 0 0 0 9999px rgba(8, 17, 29, .62); width: 0 !important; height: 0 !important; top: 50% !important; left: 50% !important; }
.tour-card { position: fixed; z-index: 92; width: min(380px, calc(100vw - 24px)); padding: 22px 22px 18px; border-radius: 20px; background: var(--white); color: var(--body); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); transition: top .35s cubic-bezier(.2, .7, .2, 1), left .35s cubic-bezier(.2, .7, .2, 1); }
.tour-card.center { width: min(520px, calc(100vw - 24px)); padding: 32px; text-align: center; }
.tour-card .step { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a7a2a; }
.tour-card h2 { margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.12; letter-spacing: -.01em; color: var(--ink); }
.tour-card.center h2 { font-size: 34px; }
.tour-card p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; }
.tour-card .tour-badge { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; background: #f6edd3; color: #7a5d16; }
.tour-card .tour-badge svg { width: 28px; height: 28px; }
.tour-dots { display: flex; gap: 6px; margin-top: 16px; }
.tour-card.center .tour-dots { justify-content: center; }
.tour-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--paper-2); transition: width .25s ease, background-color .25s ease; }
.tour-dots i.on { width: 22px; background: var(--gold); }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.tour-card.center .tour-actions { justify-content: center; flex-wrap: wrap; }
.tour-actions .skip { margin-right: auto; height: 40px; padding: 0 6px; border: 0; background: none; color: var(--muted); font: 600 14px/1 var(--sans); cursor: pointer; }
.tour-card.center .tour-actions .skip { margin-right: 0; }
.tour-actions .skip:hover { color: var(--ink); }
@media (max-width: 639px) {
    .tour-card:not(.center) { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; }
}

/* ---------- Toast ---------- */
.toast { position: fixed; z-index: 95; left: 50%; bottom: 96px; transform: translate(-50%, 12px); padding: 12px 18px; border-radius: 14px; background: var(--navy-ink); color: var(--white); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Small helpers ---------- */
.bg-white { background: var(--white); }
.center-head { margin: 0 auto; text-align: center; }
.center-head p { margin-left: auto; margin-right: auto; }
.mt-48 { margin-top: 48px; }
.note { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* ---------- Full-width showcase (whole pages like pledge campaigns) ---------- */
.full-copy { display: grid; gap: 20px 72px; align-items: start; margin-bottom: 40px; }
@media (min-width: 1040px) { .full-copy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .full-copy .shows { margin-top: 6px; grid-row: 1 / span 4; grid-column: 2; } }
.full-copy h2 { margin-top: 0; }
.full-copy > p { font-size: 18px; }
.full-showcase .embed-card { max-width: 1120px; margin: 0 auto; }
.full-showcase + .full-showcase { margin-top: 96px; }

/* ---------- Launch cards: open a hosted page where payment happens ---------- */
.launch-grid { display: grid; gap: 20px; }
@media (min-width: 720px) { .launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .launch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.launch-card { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: box-shadow .25s ease, transform .25s ease; }
.launch-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.launch-card .way-icon { width: 52px; height: 52px; border-radius: 16px; }
.launch-card h3 { margin-top: 20px; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.12; letter-spacing: -.01em; }
.launch-card > p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; }
.launch-card .mini { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; flex: 1; }
.launch-card .mini li { display: flex; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.launch-card .mini svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #1f6b45; }
.launch-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--paper-2); font-size: 15px; font-weight: 700; color: var(--navy); }
.launch-cta small { font-size: 12px; font-weight: 500; color: var(--muted); }
.launch-cta .go { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--white); transition: transform .2s ease; }
.launch-card:hover .launch-cta .go { transform: translate(2px, -2px); }
.launch-cta .go svg { width: 16px; height: 16px; }
.launch-card.featured { background: var(--navy); color: rgba(255, 255, 255, .78); }
.launch-card.featured h3 { color: var(--white); }
.launch-card.featured .way-icon { background: rgba(255, 255, 255, .1); color: var(--gold-soft); }
.launch-card.featured .mini svg { color: var(--gold-soft); }
.launch-card.featured .launch-cta { border-color: rgba(255, 255, 255, .12); color: var(--gold-soft); }
.launch-card.featured .launch-cta small { color: rgba(255, 255, 255, .55); }
.launch-card.featured .launch-cta .go { background: var(--gold); color: var(--navy-ink); }

/* Secure hand-off explainer */
.handoff { display: grid; gap: 16px; margin-top: 28px; padding: 22px 24px; border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); }
.handoff-row { display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.45; }
.handoff-row b { color: var(--ink); }
.handoff-num { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #f6edd3; color: #7a5d16; font-size: 13px; font-weight: 700; }
.pay-marks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pay-marks span { padding: 6px 12px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 600; }

/* ---------- Project rows: a story with a link to its hosted page ---------- */
.project { display: grid; gap: 32px; align-items: center; scroll-margin-top: calc(var(--nav-h) + 24px); }
@media (min-width: 960px) { .project { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; } .project.flip .project-photo { order: 2; } }
.project + .project { margin-top: 88px; }
.project-photo { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2); box-shadow: var(--shadow-md); }
.project-photo img { width: 100%; height: 100%; object-fit: cover; }
.project-photo .badge { position: absolute; left: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 13px; font-weight: 700; }
.project-photo .badge svg { width: 16px; height: 16px; color: var(--navy); }
.project-copy h2 { margin-top: 14px; }
.project-copy > p { margin-top: 16px; font-size: 18px; }
.project-copy .actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.project-copy .actions small { font-size: 13px; color: var(--muted); }

/* ---------- Campaign panels ---------- */
.campaign-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; border-radius: 28px; background: var(--navy-deep); color: rgba(255, 255, 255, .78); box-shadow: var(--shadow-md); scroll-margin-top: calc(var(--nav-h) + 24px); }
@media (min-width: 960px) { .campaign-panel { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); } }
.campaign-panel + .campaign-panel { margin-top: 40px; }
.campaign-panel .copy { padding: 40px 28px; }
@media (min-width: 960px) { .campaign-panel .copy { padding: 56px; } }
.campaign-panel .photo { min-height: 260px; }
.campaign-panel .photo img { width: 100%; height: 100%; object-fit: cover; }
.campaign-panel .eyebrow { color: var(--gold-soft); }
.campaign-panel h2 { margin-top: 12px; color: var(--white); font-family: var(--serif); font-weight: 340; font-size: clamp(34px, 4vw, 52px); line-height: 1.04; letter-spacing: -.02em; }
.campaign-panel .copy > p { margin-top: 14px; font-size: 17px; }
.options { display: grid; gap: 10px; margin-top: 26px; }
@media (min-width: 640px) { .options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.option { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .07); }
.option b { display: block; color: var(--white); font-size: 15px; }
.option span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .66); }
.campaign-panel .actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.campaign-panel .actions small { font-size: 13px; color: rgba(255, 255, 255, .55); }
.goal-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: 999px; background: rgba(47, 163, 107, .18); color: #9fe0bd; font-size: 13.5px; font-weight: 700; }
.goal-chip svg { width: 16px; height: 16px; }

/* ---------- Event cards ---------- */
.event-list { display: grid; gap: 20px; }
@media (min-width: 900px) { .event-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.event-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: box-shadow .25s ease, transform .25s ease; }
.event-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.event-card .photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.event-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.event-card:hover .photo img { transform: scale(1.04); }
.date-badge { position: absolute; left: 16px; top: 16px; width: 58px; padding: 8px 0 7px; border-radius: 14px; background: var(--white); text-align: center; box-shadow: var(--shadow-sm); }
.date-badge small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9a7a2a; }
.date-badge b { display: block; margin-top: 2px; font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1; color: var(--ink); }
.event-card .body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 24px; }
.event-card h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.12; letter-spacing: -.01em; }
.event-card .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--muted); }
.event-card .meta span { display: inline-flex; align-items: center; gap: 6px; }
.event-card .meta svg { width: 15px; height: 15px; }
.event-card p { font-size: 15.5px; line-height: 1.6; }
.event-card .mini { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; flex: 1; }
.event-card .mini li { display: flex; gap: 8px; font-size: 14px; line-height: 1.45; }
.event-card .mini svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #1f6b45; }
.event-card .launch-cta { margin-top: 14px; }

/* ---------- Tour welcome card ---------- */
.tour-card.welcome { width: min(560px, calc(100vw - 24px)); padding: 0 0 26px; overflow: hidden; max-height: calc(100vh - 24px); overflow-y: auto; }
.tour-card.welcome > :not(.tour-hero) { margin-left: 32px; margin-right: 32px; }
.tour-hero { position: relative; height: 150px; margin-bottom: 24px; overflow: hidden; background: var(--navy-ink); }
.tour-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.tour-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 17, 29, .1) 0%, rgba(8, 17, 29, .55) 100%); }
.tour-live { position: absolute; z-index: 1; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--ink); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.tour-live i { width: 8px; height: 8px; border-radius: 50%; background: #2fa36b; box-shadow: 0 0 0 4px rgba(47, 163, 107, .2); }
.tour-card.welcome h2 { font-size: 32px; }
.tour-points { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; text-align: left; }
@media (min-width: 560px) { .tour-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tour-points li { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--paper); font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.tour-points b { display: block; color: var(--ink); font-size: 14.5px; }
.tour-point-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--white); color: var(--navy); }
.tour-point-icon svg { width: 18px; height: 18px; }
@media (max-width: 559px) { .tour-points li { flex-direction: row; align-items: center; } .tour-card.welcome > :not(.tour-hero) { margin-left: 22px; margin-right: 22px; } .tour-card.welcome h2 { font-size: 27px; } }
@media (max-width: 559px) { .tour-card.center .tour-actions { flex-direction: column-reverse; gap: 6px; } .tour-card.center .tour-actions .btn { width: 100%; } }

/* Hosted page preview: a photo card that opens a form's own page (forms are linked, not embedded) */
.page-preview { position: relative; display: block; min-height: 460px; border-radius: 24px; overflow: hidden; background: var(--navy); box-shadow: var(--shadow-md); color: #fff; text-decoration: none; scroll-margin-top: calc(var(--nav-h) + 16px); transition: box-shadow .25s ease, transform .25s ease; }
.page-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.page-preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 24, 44, .94) 0%, rgba(12, 24, 44, .55) 48%, rgba(12, 24, 44, .05) 100%); }
.page-preview .pp-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 32px; }
.page-preview .pp-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--gold); color: var(--navy-ink, var(--navy)); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.page-preview .pp-tag svg { width: 15px; height: 15px; }
.page-preview h3 { margin-top: 16px; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.08; letter-spacing: -.01em; color: #fff; }
.page-preview p { margin-top: 10px; max-width: 420px; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.page-preview .pp-cta { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 600; font-size: 15px; box-shadow: var(--shadow-sm); }
.page-preview .pp-cta svg { width: 17px; height: 17px; transition: transform .25s ease; }
.page-preview:hover { box-shadow: var(--shadow-xl); transform: translateY(-3px); }
.page-preview:hover img { transform: scale(1.04); }
.page-preview:hover .pp-cta svg { transform: translate(2px, -2px); }
.page-preview:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
@media (max-width: 640px) { .page-preview { min-height: 400px; } .page-preview .pp-body { padding: 24px; } .page-preview h3 { font-size: 27px; } }
@media (prefers-reduced-motion: reduce) { .page-preview, .page-preview img, .page-preview .pp-cta svg { transition: none; } .page-preview:hover, .page-preview:hover img { transform: none; } }

/* Tour: progress, pause and the paused dock */
.tour-card .tour-pause { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--navy); cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.tour-card .tour-pause:hover { background: #f1e7cc; transform: scale(1.06); }
.tour-card .tour-pause:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tour-card .tour-pause svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.tour-card:not(.center) .step { padding-right: 40px; }
.demo-bar [data-tour-start] svg { width: 13px; height: 13px; fill: currentColor; stroke: none; margin-right: 6px; }
.demo-bar .btn-ghost-light { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .1); color: var(--white); border: 0; }
.demo-bar .btn-ghost-light:hover { background: rgba(255, 255, 255, .18); }
.demo-bar .btn-ghost-light svg { width: 14px; height: 14px; }
.demo-bar .btn-ghost-light[hidden] { display: none; }
.demo-bar.paused { box-shadow: 0 0 0 2px var(--gold), 0 24px 60px -20px rgba(0, 0, 0, .55); }
.demo-bar.paused .spark { background: var(--gold); color: var(--navy-ink, var(--navy)); animation: lw-paused-pulse 2.4s ease-in-out infinite; }
.demo-bar .tour-where { display: block; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes lw-paused-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 165, 74, .5); } 50% { box-shadow: 0 0 0 7px rgba(201, 165, 74, 0); } }
.demo-bar.paused [data-code] { display: none; }
@media (max-width: 639px) { .demo-bar.paused .btn-ghost-light span { display: none; } }
@media (prefers-reduced-motion: reduce) { .demo-bar.paused .spark { animation: none; } }

/* Build this site: the step-by-step guide */
.page-hero .chips .dot, .guide-toc .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.required { background: #2fa36b; }
.dot.recommended { background: var(--gold); }
.dot.optional { background: #8fa3bf; }
.glance-grid { margin-top: 48px; display: grid; gap: 16px; }
@media (min-width: 800px) { .glance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.glance-card { padding: 28px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.glance-card b { display: block; margin-top: 16px; font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--ink); }
.glance-card p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; }
.glance-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--white); }
.glance-icon svg { width: 22px; height: 22px; }
.glance-card.required .glance-icon { background: #2fa36b; }
.glance-card.recommended .glance-icon { background: var(--gold); color: var(--navy-ink); }
.glance-card.optional .glance-icon { background: var(--navy); }
.guide-layout { display: grid; gap: 40px; }
@media (min-width: 1040px) { .guide-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 64px; align-items: start; } .guide-toc { position: sticky; top: calc(var(--nav-h) + 28px); } }
.guide-toc { padding: 24px; border-radius: var(--radius); background: var(--paper); }
.guide-toc ol { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.guide-toc a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--body); font-size: 14.5px; line-height: 1.35; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.guide-toc a:hover { background: var(--white); color: var(--ink); }
.guide-toc a.active { background: var(--white); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.guide-toc a.done span:last-child { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.guide-toc a.done .dot { background: #2fa36b; box-shadow: 0 0 0 3px rgba(47, 163, 107, .18); }
.guide-progress { margin-top: 14px; display: grid; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.guide-progress-bar { height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.guide-progress-bar i { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2fa36b, #5cc48f); transition: width .4s ease; }
.guide-toc-cta { margin-top: 18px; display: grid; gap: 8px; text-align: center; }
.guide-toc-cta span { font-size: 13px; color: var(--muted, #64748b); }
.guide-toc-cta .btn { width: 100%; }
@media (max-width: 1039px) { .guide-toc ol { display: none; } }
.guide-steps { display: grid; gap: 24px; }
.guide-step { scroll-margin-top: calc(var(--nav-h) + 20px); padding: 28px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-md); }
@media (min-width: 640px) { .guide-step { padding: 36px; } }
.guide-step-head { display: flex; align-items: flex-start; gap: 16px; }
.guide-step-head > div { flex: 1; min-width: 0; }
.guide-num { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--navy); color: var(--white); font-family: var(--serif); font-size: 22px; }
.guide-step[data-level="recommended"] .guide-num { background: var(--gold); color: var(--navy-ink); }
.guide-step[data-level="optional"] .guide-num { background: var(--paper-2); color: var(--navy); }
.guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.guide-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.guide-badge.required { background: #e3f4ea; color: #1f6b45; }
.guide-badge.recommended { background: #f6edd3; color: #7a5f1c; }
.guide-badge.optional { background: #e8eef6; color: #3f5677; }
.guide-time { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.guide-time svg { width: 14px; height: 14px; }
.guide-step h3 { margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.guide-done { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--paper); font-size: 13.5px; font-weight: 600; color: var(--body); cursor: pointer; user-select: none; }
.guide-done input { width: 16px; height: 16px; accent-color: #2fa36b; }
.guide-done:has(input:checked) { background: #e3f4ea; color: #1f6b45; }
.guide-where { margin-top: 18px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--paper); font-size: 14.5px; line-height: 1.5; }
.guide-where svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: #9a7a2a; }
.guide-lede { margin-top: 16px; font-size: 16.5px; line-height: 1.65; }
.guide-todo { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: todo; display: grid; gap: 10px; }
.guide-todo li { position: relative; padding-left: 36px; font-size: 15.5px; line-height: 1.6; counter-increment: todo; }
.guide-todo li::before { content: counter(todo); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--navy); font-size: 12.5px; font-weight: 700; }
.guide-step code { padding: 2px 6px; border-radius: 6px; background: var(--paper); font-size: .88em; color: var(--navy); word-break: break-word; }
.guide-code { position: relative; margin-top: 18px; border-radius: 16px; background: var(--navy-ink); overflow: hidden; }
.guide-code pre { margin: 0; padding: 20px; overflow-x: auto; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: #d8e1ee; }
.guide-code .c { color: #8fa3bf; } .guide-code .t { color: #f3c969; } .guide-code .a { color: #9fd3ff; } .guide-code .s { color: #b6e3a8; }
.guide-code .copy { position: absolute; top: 10px; right: 10px; height: 32px; padding: 0 14px; font-size: 13px; background: rgba(255, 255, 255, .12); color: var(--white); }
.guide-code .copy:hover { background: rgba(255, 255, 255, .2); }
.guide-foot { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--paper-2); display: grid; gap: 16px; }
.guide-see { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-weight: 600; color: var(--navy); text-decoration: none; }
.guide-see svg { width: 16px; height: 16px; transition: transform .2s ease; }
.guide-see:hover svg { transform: translateX(3px); }
.guide-kb { display: grid; gap: 10px; }
.guide-kb-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a7a2a; }
.guide-kb ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
@media (min-width: 720px) { .guide-kb ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-kb a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.35; text-decoration: none; transition: background-color .2s ease; }
.guide-kb a:hover { background: var(--paper-2); }
.guide-kb a span { flex: 1; min-width: 0; }
.guide-kb a svg { width: 16px; height: 16px; flex: none; color: #9a7a2a; }
.guide-kb a svg.ext { width: 13px; height: 13px; color: var(--muted); }
.guide-step.is-done { box-shadow: 0 0 0 2px #2fa36b, var(--shadow-md); }
@media (max-width: 559px) { .guide-step-head { flex-wrap: wrap; } .guide-done { margin-left: 62px; } .guide-num { width: 40px; height: 40px; font-size: 19px; } }
.footer-build { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; color: var(--gold-soft); font-weight: 600; text-decoration: none; }
.footer-build svg { width: 15px; height: 15px; }
.footer-build:hover { text-decoration: underline; }
@media (max-width: 639px) { .footer-build { display: flex; margin: 10px 0 0; } }

/* Phones and tablets: keep the bottom-right corner for the AI agent's chat bubble */
@media (max-width: 1039px) {
    .demo-bar { left: 12px; right: 84px; width: auto; max-width: none; transform: none; }
    .demo-bar.hidden { transform: translateY(20px); }
}
@media (max-width: 639px) {
    .tour-card:not(.center) { bottom: 84px; }
    .demo-bar { padding-left: 12px; gap: 8px; }
    .demo-bar.paused .tour-where { display: none; }
    .demo-bar.paused .msg b { font-size: 13.5px; }
}
@media (max-width: 639px) {
    .demo-bar.paused .spark, .demo-bar.paused [data-close-bar] { display: none; }
    .demo-bar.paused .msg { flex: 1 1 auto; }
    .demo-bar.paused .btn { padding: 0 14px; }
}
.guide-layout > *, .guide-steps > * { min-width: 0; }
@media (max-width: 639px) { .demo-bar [data-code] { display: none; } }
@media (max-width: 559px) { .guide-step-head > div { flex: 1 1 calc(100% - 60px); } .guide-done { order: 3; margin-left: 56px; } .guide-step { padding: 24px 20px; } }

/* Guide hero actions */
.page-hero .actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.page-hero .actions + .chips { margin-top: 20px; }
.btn-ghost-hero { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .12); color: var(--white); border: 0; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-ghost-hero:hover { background: rgba(255, 255, 255, .2); }
.btn-ghost-hero svg { width: 18px; height: 18px; color: var(--gold-soft); }

/* Guide: steps the sign-up wizard already covers */
.guide-onboard { margin-top: 14px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(34, 139, 94, .1); color: var(--ink, #0f1b2d); font-size: 14px; line-height: 1.5; }
.guide-onboard svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #1f8a5c; }
.guide-onboard b { color: #17704a; }
/* keep the sticky steps panel inside the viewport (clear of the demo bar); the step list scrolls, the sign-up box stays visible */
@media (min-width: 1040px) {
    .guide-toc { display: flex; flex-direction: column; max-height: calc(100vh - var(--nav-h) - 128px); }
    .guide-toc ol { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px; }
    .guide-toc-cta { flex: none; }
}

/* Give page: more ways, My Giving */
.more-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .more-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.more-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm); }
.more-card h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.15; color: var(--ink); letter-spacing: -.01em; }
.more-card p { font-size: 15px; line-height: 1.6; }
.more-card p b { color: var(--ink); }
.manage-card { display: grid; gap: 32px; padding: clamp(28px, 5vw, 56px); border-radius: var(--radius); background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep, #12263f) 100%); color: rgba(255, 255, 255, .8); box-shadow: var(--shadow-md); }
@media (min-width: 900px) { .manage-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; } }
.manage-card .eyebrow { color: var(--gold-soft); }
.manage-card h2 { margin-top: 12px; color: var(--white); font-family: var(--serif); font-weight: 340; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.02em; }
.manage-card h2 em { font-style: italic; color: var(--gold-soft); }
.manage-card p { margin-top: 16px; font-size: 17px; }
.manage-card .actions { margin-top: 26px; }
.manage-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.manage-list li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); }
.manage-list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--gold-soft); }
.manage-list b { display: block; color: var(--white); font-weight: 600; }
.manage-list span { font-size: 15px; line-height: 1.5; }
.manage-list a { display: flex; align-items: flex-start; gap: 14px; margin: -14px -16px; padding: 14px 16px; border-radius: 14px; color: inherit; text-decoration: none; transition: background-color .2s ease; }
.manage-list a:hover { background: rgba(255, 255, 255, .08); }
.manage-list a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }