/* Bright Starr's Academy — cream · gold · royal purple */

:root {
	/* Swap this one line to change every heading on the site. */
	--font-head: 'Quicksand', 'Nunito Sans', sans-serif;
	--purple: #5A2491;
	--purple-2: #7A3BB8;
	--purple-deep: #3A1568;
	--purple-ink: #2E1150;
	--gold: #F0AE1F;
	--gold-2: #FFC93C;
	--gold-deep: #C4900F;
	--cream: #FDFAF3;
	--cream-2: #FBF7EC;
	--line: #F1EADC;
	--white: #FFFFFF;
	--text: #4A3F63;
	--radius: 18px;
	--shadow: 0 10px 30px rgba(58, 21, 104, 0.10);
	--shadow-sm: 0 4px 14px rgba(58, 21, 104, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: var(--text);
	background: var(--cream);
}
img { max-width: 100%; height: auto; }
a { color: var(--purple); }
h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--purple-ink);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 .5em;
}
/* Non-heading elements that also wear the display face. */
.brand-text, .stat-big, .avatar span, .letter .sig strong, .step-no, .foot-logo { font-weight: 700; }
.verse, .foot-verse { font-weight: 600; }

h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.center { text-align: center; }

.bsa-ic { width: 1.05em; height: 1.05em; vertical-align: -0.16em; }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--purple-ink); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ---------- Announcement bar ---------- */
.announce {
	background: linear-gradient(90deg, var(--purple-deep), var(--purple));
	color: #F3E9FF; font-size: .92rem; padding: 8px 0;
}
.announce .container { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; text-align: center; }
.announce .bsa-ic { color: var(--gold-2); }
.announce strong { color: #fff; }
.announce a {
	color: var(--gold-2); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.announce a:hover { text-decoration: underline; }
.announce a .bsa-ic { width: .85em; height: .85em; }

/* ---------- Header ---------- */
.site-head {
	position: sticky; top: 0; z-index: 100;
	background: rgba(251, 246, 234, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow .25s ease;
}
.site-head.scrolled { box-shadow: var(--shadow-sm); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 0; padding-bottom: 0; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
/* Logo art carries its own vertical whitespace, so a negative margin lets it grow
   without the header growing with it. */
.brand img { width: auto; height: 120px; margin: -10px 0; }
.brand-text { font-family: var(--font-head); font-size: 1.4rem; color: var(--purple-ink); text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav > a:not(.btn) {
	color: var(--purple-ink); text-decoration: none; font-weight: 700; font-size: .98rem;
	padding: 6px 2px; border-bottom: 3px solid transparent; transition: border-color .2s, color .2s;
}
.site-nav > a:not(.btn):hover { color: var(--purple); border-bottom-color: var(--gold-2); }
.site-nav > a[aria-current="page"] { color: var(--purple); border-bottom-color: var(--gold); }
.nav-burger { display: none; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-block; text-decoration: none; font-weight: 800; font-family: 'Nunito Sans', sans-serif;
	border-radius: 999px; padding: 13px 28px; font-size: 1rem; line-height: 1.2;
	border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold {
	background: linear-gradient(180deg, var(--gold-2), var(--gold));
	color: var(--purple-ink); box-shadow: 0 6px 18px rgba(240, 174, 31, 0.35);
}
.btn-gold:hover { box-shadow: 0 10px 24px rgba(240, 174, 31, 0.45); }
.btn-outline { border-color: var(--purple); color: var(--purple); background: transparent; }
.btn-outline:hover { background: var(--purple); color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,.7); color: #fff; background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-nav { padding: 10px 22px; font-size: .95rem; }
.btn-sm { padding: 10px 22px; font-size: .92rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.4em; }
.center .btn-row { justify-content: center; }

/* ---------- Home hero ---------- */
.hero-home {
	position: relative; overflow: hidden;
	padding: 56px 0 46px;
	background:
		radial-gradient(700px 340px at 50% -80px, rgba(255, 201, 60, 0.22), transparent 70%),
		radial-gradient(520px 300px at 88% 12%, rgba(122, 59, 184, 0.10), transparent 70%),
		var(--cream);
}
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 52px; align-items: center; }
.hero-copy h1 { margin-bottom: .35em; }
.hero-copy .lede { margin: 0 0 1em; }
.hero-media { position: relative; }
.hero-photo {
	width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; display: block;
	border-radius: 30px; border: 5px solid var(--white); outline: 3px solid var(--gold-2);
	box-shadow: var(--shadow);
}
.hero-star {
	position: absolute; top: -26px; right: -8px; width: 92px; height: auto;
	transform: rotate(10deg); filter: drop-shadow(0 8px 16px rgba(58, 21, 104, 0.25));
}
.hero-home .verse { margin-top: 22px; }
.kicker {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 800; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--purple); background: rgba(122, 59, 184, 0.10);
	border: 1px solid rgba(122, 59, 184, 0.22);
	padding: 7px 16px; border-radius: 999px; margin: 0 0 18px;
}
.kicker .bsa-ic { color: var(--gold-deep); }
.lede { font-size: 1.16rem; color: var(--text); }
.verse {
	display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
	margin: 26px auto 0; padding: 10px 22px; border-radius: 999px;
	background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
	font-family: var(--font-head); font-size: 1.02rem; color: var(--purple-ink);
}
.verse .bsa-ic { color: var(--gold); }
.verse span { color: var(--gold-deep); font-size: .9rem; }

/* ---------- Badges ---------- */
.badge-strip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 30px 0 0; }
.badge-strip span {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--white); border: 1px solid var(--line); border-radius: 999px;
	padding: 9px 18px; font-weight: 700; font-size: .93rem; color: var(--purple-ink);
	box-shadow: var(--shadow-sm);
}
.badge-strip .bsa-ic { color: var(--gold-deep); }

/* ---------- Inner page hero ---------- */
.page-hero { padding: 58px 0 34px; text-align: center; background:
	radial-gradient(600px 280px at 50% -60px, rgba(255, 201, 60, 0.16), transparent 70%), var(--cream); }
.page-hero .lede { max-width: 44em; margin: 0 auto; }
.hero-swoosh {
	width: 130px; height: 6px; margin: 26px auto 0; border-radius: 999px;
	background: linear-gradient(90deg, var(--gold-2), var(--gold), var(--purple-2));
}

/* ---------- Bands & grids ---------- */
.band { padding: 64px 0; }
.band-cream2 { background: var(--cream-2); }
.band-white { background: var(--white); }
.band-purple {
	background: linear-gradient(140deg, var(--purple-deep) 0%, var(--purple) 65%, var(--purple-2) 100%);
	color: #EFE6FB;
}
.band-purple h2, .band-purple h3 { color: #fff; }
.band-head { text-align: center; max-width: 46em; margin: 0 auto 40px; }
.band-head p { color: var(--text); }
.band-purple .band-head p { color: #E4D7F6; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Cards ---------- */
.card {
	background: var(--white); border-radius: var(--radius); padding: 30px;
	box-shadow: var(--shadow-sm); border: 1px solid rgba(234, 223, 198, 0.6);
	transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { display: flex; align-items: center; gap: 10px; }
.card h3 .bsa-ic { color: var(--gold-deep); flex-shrink: 0; }
.card p:last-child { margin-bottom: 0; }

.mode { text-align: center; }
.mode h3 { justify-content: center; }
.mode-ic {
	width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 16px;
	display: flex; align-items: center; justify-content: center;
}
.mode-ic .bsa-ic { width: 28px; height: 28px; }
.ic-purple { background: linear-gradient(140deg, var(--purple), var(--purple-2)); color: var(--gold-2); }
.ic-gold { background: linear-gradient(140deg, var(--gold-2), var(--gold)); color: var(--purple-ink); }
.img-ic { object-fit: contain; }
/* Uploaded PNG icons standing in for inline SVG — sized to sit on the text baseline. */
.inline-ic { width: 1.5em; height: 1.5em; object-fit: contain; vertical-align: -0.42em; }
.badge-ic  { width: 22px; height: 22px; object-fit: contain; vertical-align: -6px; margin-right: 2px; }
.head-ic   { width: 30px; height: 30px; object-fit: contain; vertical-align: -7px; margin-right: 6px; }
.mode-ic.has-img { background: var(--white); border: 2px solid rgba(240, 174, 31, 0.45); }
.mode-ic.has-img .img-ic { width: 42px; height: 42px; }
.icard-ic { display: block; }
.icard-ic .img-ic { width: 56px; height: 56px; margin-bottom: 12px; }
.cta-graphic { height: 88px; width: auto; margin: 0 auto 14px; display: block; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28)); }
.err-graphic { height: 96px; width: auto; display: block; margin: 0 auto 10px; }
.stack { display: grid; gap: 24px; align-content: start; }
.photo-card { padding: 0; overflow: hidden; display: flex; }
.photo-card img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.step-ic { display: block; }
.step-ic .img-ic { width: 58px; height: 58px; margin: 0 0 14px; }

/* ---------- Results (Prenda stats) ---------- */
.rb-legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 18px; font-size: .88rem; font-weight: 700; color: var(--purple-ink); }
.rb-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 7px; vertical-align: -1px; }
.rb { margin-bottom: 22px; }
.rb:last-child { margin-bottom: 0; }
.rb-label { font-weight: 800; color: var(--purple-ink); margin: 0 0 8px; font-size: .98rem; }
.rb-row { display: grid; grid-template-columns: 74px 1fr 48px; gap: 10px; align-items: center; margin-bottom: 7px; }
.rb-tag { font-size: .78rem; font-weight: 700; color: #7A6F92; text-transform: uppercase; letter-spacing: .05em; }
.rb-track { display: block; background: var(--cream-2); border-radius: 6px; height: 14px; overflow: hidden; }
.rb-bar { display: block; height: 100%; border-radius: 0 4px 4px 0; transition: width 1.1s cubic-bezier(.22,.7,.25,1); }
.rb-before { background: #8E7FAE; }
.rb-after { background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.rb-val { font-weight: 800; color: var(--purple-ink); font-size: .95rem; text-align: right; }
.stat-tile { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.stat-big { font-family: var(--font-head); font-size: clamp(2.6rem, 5vw, 3.4rem); color: var(--purple); line-height: 1; display: block; margin-bottom: 8px; }
.stat-sub { font-weight: 800; color: var(--purple-ink); margin: 0 0 4px; }
.stat-note { font-size: .9rem; color: #7A6F92; margin: 0; }
.rb-src { font-size: .85rem; color: #7A6F92; margin: 18px 0 0; }

/* ---------- Day flow (Prenda modes) ----------
   Deliberately NOT cards: this section sits near another icon-card grid and the
   two read as the same block when scrolling. A connected rail also matches the
   content — the four modes are a sequence through one school day. */
.dayflow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dayflow::before {
	content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 44px; height: 5px;
	background: linear-gradient(90deg, var(--gold-2), var(--gold), var(--purple-2));
	border-radius: 999px; z-index: 0;
}
.flow-step { position: relative; z-index: 1; text-align: center; padding: 0 4px; }
.flow-ic {
	position: relative; width: 94px; height: 94px; border-radius: 50%; margin: 0 auto 16px;
	background: var(--white); border: 4px solid var(--cream-2); box-shadow: var(--shadow-sm);
	display: flex; align-items: center; justify-content: center;
}
.flow-ic .img-ic { width: 46px; height: 46px; }
.flow-no {
	position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%;
	background: var(--purple); color: #fff; font-weight: 800; font-size: .85rem;
	display: flex; align-items: center; justify-content: center; border: 3px solid var(--cream-2);
}
.flow-step h3 { font-size: 1.25rem; margin-bottom: .3em; }
.flow-step p { font-size: .95rem; margin: 0; }

.link-more { font-weight: 800; text-decoration: none; }
.link-more:hover { text-decoration: underline; }
.link-more .bsa-ic { width: .9em; height: .9em; }

/* ---------- Schedule ---------- */
.sched h3 { margin-bottom: 16px; }
.sched-table { width: 100%; border-collapse: collapse; }
.sched-table th, .sched-table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--cream-2); }
.sched-table th { color: var(--purple-ink); font-family: 'Nunito Sans', sans-serif; font-weight: 800; width: 42%; }
.sched-table td { font-weight: 600; }
.sched-table tr:last-child th, .sched-table tr:last-child td { border-bottom: none; }
.sched-table .noschool td { color: var(--gold-deep); font-weight: 800; }
.sched-note { margin: 14px 0 0; font-size: .95rem; color: var(--purple); font-weight: 700; }

/* ---------- Amenities ---------- */
.amen-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.amen-list li {
	display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--purple-ink);
	background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px;
}
.amen-list .bsa-ic { color: var(--gold-deep); flex-shrink: 0; }

/* ---------- Guides ---------- */
.avatar {
	position: relative; width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0;
	background: linear-gradient(140deg, var(--purple-deep), var(--purple-2));
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow-sm);
}
.avatar span {
	font-family: var(--font-head); font-size: 2rem; color: var(--gold-2); letter-spacing: .04em;
}
.avatar-star { position: absolute; right: -6px; bottom: -4px; width: 34px; height: 34px; object-fit: contain; color: var(--gold); }
.avatar.avatar-lg { width: 120px; height: 120px; }
.avatar.avatar-lg span { font-size: 2.6rem; }

.g-circle {
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; overflow: hidden; margin: 0 auto; flex-shrink: 0;
	border: 4px solid var(--white); outline: 3px solid var(--gold-2);
	box-shadow: var(--shadow-sm); background: var(--cream-2);
}
.g-circle img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.g-sm { width: 132px; height: 132px; }
.g-lg { width: 210px; height: 210px; }
.g-xl { width: 270px; height: 270px; }

.guide-mini { text-align: center; }
.guide-mini h3 { justify-content: center; }
.guide-mini .g-circle { margin-bottom: 16px; }
.guide-mini .avatar { margin-bottom: 16px; width: 132px; height: 132px; }
.guide-mini .avatar span { font-size: 2.7rem; }
.guide-mini h3 { margin-bottom: .15em; }
.guide-role { color: var(--gold-deep); font-weight: 800; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .6em; }

.guide-feature { display: grid; grid-template-columns: 360px 1fr; gap: 0; overflow: hidden; padding: 0; }
.guide-feature .gf-photo {
	display: flex; align-items: center; justify-content: center; padding: 34px;
	background: radial-gradient(300px 300px at 50% 45%, rgba(255, 201, 60, 0.18), transparent 75%), var(--cream-2);
}
.guide-feature .gf-body { padding: 34px 36px; }
.guide-card { padding: 0; overflow: hidden; }
.guide-card .gc-photo {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	padding: 34px 20px;
	background: radial-gradient(260px 220px at 50% 40%, rgba(255, 201, 60, 0.16), transparent 75%), var(--cream-2);
}
.gc-placeholder .ph-note { font-weight: 700; color: var(--purple); font-size: .9rem; }
.guide-card .gc-body { padding: 26px 28px 30px; text-align: center; }
.guide-card .gc-body h3 { justify-content: center; }
.guide-card h3 { margin-bottom: .15em; }

/* A grid, not flex wrap: free-flowing chips stranded a single one ("Tutor") on
   its own line. Fixed tracks always break evenly. */
.chips {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 9px; margin: 16px 0 0; padding: 0; list-style: none;
}
.chips li {
	background: rgba(240, 174, 31, 0.14); border: 1px solid rgba(240, 174, 31, 0.4);
	color: var(--purple-ink); font-weight: 700; font-size: .85rem;
	border-radius: 999px; padding: 7px 12px; text-align: center;
	white-space: nowrap;   /* a label breaking mid-phrase made every chip taller */
}
.guide-feature .chips { grid-template-columns: repeat(3, 1fr); }   /* 6 credentials → a tidy 3 × 2 */
@media (max-width: 640px) {
	.chips, .guide-feature .chips { grid-template-columns: 1fr 1fr; }
}

/* ---------- Letter (About) ---------- */
.letter-wrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: start; }
.letter {
	position: relative; background: var(--white); border-radius: var(--radius);
	padding: 42px 44px; box-shadow: var(--shadow); border-top: 6px solid var(--gold);
}
.letter::before {
	content: '\201C'; position: absolute; top: 6px; left: 22px;
	font-family: Georgia, serif; font-size: 5.4rem; line-height: 1; color: rgba(240, 174, 31, 0.35);
}
.letter p { font-size: 1.04rem; }
.letter .sig { margin-top: 26px; }
.letter .sig strong { font-family: var(--font-head); font-size: 1.25rem; color: var(--purple-ink); display: block; }
.letter .sig span { color: var(--gold-deep); font-weight: 700; font-size: .92rem; }
.side-photo { display: flex; align-items: center; justify-content: center; padding: 30px; }
.side-stack { display: grid; gap: 24px; }

/* ---------- Steps ---------- */
/* Enrollment steps: left-aligned so the heading, icon and copy share one edge —
   the old centred version fought the flex heading rule and read as misaligned. */
.step { position: relative; text-align: left; overflow: hidden; }
.step-ghost {
	position: absolute; top: -18px; right: 8px; pointer-events: none; user-select: none;
	font-family: var(--font-head); font-weight: 700; font-size: 6.5rem; line-height: 1;
	color: rgba(122, 59, 184, 0.08);
}
.step-badge {
	display: inline-block; margin-bottom: 16px; padding: 5px 15px; border-radius: 999px;
	background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--purple-ink);
	font-weight: 800; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
.step h3 { justify-content: flex-start; margin-bottom: .35em; }
.step p { margin: 0; }

/* ---------- Checklist ---------- */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; font-weight: 600; }
.check-list .bsa-ic { color: var(--gold-deep); flex-shrink: 0; margin-top: 4px; }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin: 0 auto; }
.faq details {
	background: var(--white); border: 1px solid var(--line); border-radius: 14px;
	padding: 4px 22px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.faq summary {
	cursor: pointer; font-weight: 800; color: var(--purple-ink); font-size: 1.05rem;
	padding: 14px 0; list-style: none; position: relative; padding-right: 34px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem; color: var(--gold-deep); font-weight: 400;
}
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding-bottom: 16px; margin: 0; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-star { width: 40px; height: 40px; color: var(--gold-2); margin-bottom: 12px; }
.cta-band p { max-width: 40em; margin-left: auto; margin-right: auto; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 800; color: var(--purple-ink); margin-bottom: 6px; font-size: .95rem; }
.field input, .field textarea {
	width: 100%; border: 1.5px solid var(--line); border-radius: 12px;
	background: var(--cream); padding: 13px 15px; font: inherit; color: var(--text);
	transition: border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus {
	outline: none; border-color: var(--purple-2); background: var(--white);
	box-shadow: 0 0 0 4px rgba(122, 59, 184, 0.12);
}
.field textarea { min-height: 150px; resize: vertical; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.req { color: var(--gold-deep); }
.notice { border-radius: 12px; padding: 14px 18px; font-weight: 700; margin-bottom: 20px; }
.notice-ok { background: #EDF7EC; border: 1px solid #B7DFB4; color: #2E6B2A; }
.notice-err { background: #FBEFEA; border: 1px solid #EFC4B3; color: #A04A2A; }

/* ---------- Info list (contact) ---------- */
.info-list { list-style: none; margin: 0 0 6px; padding: 0; }
.info-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; font-weight: 600; border-bottom: 1px dashed var(--cream-2); }
.info-list li:last-child { border-bottom: none; }
.info-list .bsa-ic { color: var(--gold-deep); flex-shrink: 0; margin-top: 4px; }

/* ---------- Footer ---------- */
.site-foot { background: var(--purple-deep); color: #D9CCEE; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 40px; padding: 56px 22px 40px; }
.foot-logo { font-family: var(--font-head); font-size: 1.5rem; color: #fff; margin-bottom: 12px; }
.foot-star { color: var(--gold-2); }
.site-foot .btn-gold { color: var(--purple-ink); }
.foot-logo-img { display: block; width: auto; max-width: 300px; height: 132px; margin: 0 0 16px; }
.foot-verse { font-family: var(--font-head); color: #EADCFB; margin-top: 18px; }
.foot-verse span { display: block; color: var(--gold-2); font-size: .9rem; margin-top: 4px; }
.foot-col h3 { color: var(--gold-2); font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; font-family: 'Nunito Sans', sans-serif; font-weight: 800; margin-bottom: 16px; }
.foot-col ul { list-style: none; margin: 0 0 18px; padding: 0; }
.foot-col li { padding: 5px 0; }
.foot-col a { color: #E6DAF8; text-decoration: none; font-weight: 600; }
.foot-col a:hover { color: var(--gold-2); }
.foot-info li { display: flex; align-items: center; gap: 10px; }
.foot-info .bsa-ic { color: var(--gold-2); flex-shrink: 0; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; font-size: .9rem; }
.foot-bottom .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.foot-bottom a { color: #CBB8E8; }
.foot-bottom a:hover { color: var(--gold-2); }

/* ---------- Legal pages ---------- */
.legal { max-width: 800px; }
.legal h2 { font-size: 1.4rem; margin-top: 1.6em; }
.legal .legal-updated { color: var(--gold-deep); font-weight: 700; font-size: .92rem; }
.legal .legal-note {
	margin-top: 2.2em; padding: 16px 20px; border-radius: 14px;
	background: var(--cream-2); border: 1px solid var(--line);
	font-size: .9rem; color: #6E6288;
}

/* ---------- 404 ---------- */
.err-wrap { text-align: center; padding: 90px 22px; }
.err-wrap .bsa-ic { width: 60px; height: 60px; color: var(--gold); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.grid-4 { grid-template-columns: 1fr 1fr; }
	.guide-feature { grid-template-columns: 1fr; }
	/* Photo and credentials lead, the letter follows. */
	.letter-wrap { grid-template-columns: 1fr; }
	.letter-wrap .side-stack { order: -1; }
	.side-stack { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
@media (max-width: 1040px) {
	.nav-burger {
		display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 46px; height: 42px; padding: 8px 10px; background: var(--white);
		border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
	}
	.nav-burger span { display: block; height: 3px; border-radius: 2px; background: var(--purple-ink); transition: transform .25s, opacity .2s; }
	.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
	/* backdrop-filter on an ancestor makes it the containing block for
	   position:fixed children, which pins the panel inside the header instead of
	   the viewport. Drop it here, and lift the header above the scrim so the
	   panel (its child) isn't painted over by it. */
	.site-head {
		backdrop-filter: none; -webkit-backdrop-filter: none;
		background: var(--cream); z-index: 120;
	}

	/* Slide-in panel rather than a dropdown: thumb-reachable, dismissible by
	   tapping away, and it can't push the page around. */
	.site-nav {
		position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 84vw);
		flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
		background: linear-gradient(165deg, var(--purple-deep), var(--purple) 70%, var(--purple-2));
		box-shadow: -18px 0 46px rgba(30, 8, 60, .34);
		padding: 84px 26px 32px; overflow-y: auto; z-index: 120;
		transform: translateX(100%); visibility: hidden;
		transition: transform .32s cubic-bezier(.3,.8,.3,1), visibility .32s;
	}
	.site-nav.open { transform: translateX(0); visibility: visible; }
	.site-nav > a:not(.btn) {
		color: #F1E7FF; font-size: 1.12rem; padding: 15px 2px;
		border-bottom: 1px solid rgba(255,255,255,.13); border-left: 0;
		transform: translateX(14px); opacity: 0;
		transition: transform .3s ease, opacity .3s ease, color .2s;
	}
	.site-nav.open > a:not(.btn) { transform: translateX(0); opacity: 1; }
	.site-nav.open > a:nth-child(1) { transition-delay: .06s; }
	.site-nav.open > a:nth-child(2) { transition-delay: .11s; }
	.site-nav.open > a:nth-child(3) { transition-delay: .16s; }
	.site-nav.open > a:nth-child(4) { transition-delay: .21s; }
	.site-nav.open > a:nth-child(5) { transition-delay: .26s; }
	.site-nav > a:not(.btn):hover { color: var(--gold-2); border-bottom-color: rgba(255,255,255,.13); }
	.site-nav > a[aria-current="page"] { color: var(--gold-2); border-bottom-color: var(--gold); }
	.btn-nav {
		margin-top: 22px; text-align: center; opacity: 0; transform: translateX(14px);
		transition: transform .3s ease .3s, opacity .3s ease .3s;
	}
	.site-nav.open .btn-nav { opacity: 1; transform: translateX(0); }

	/* Tap-anywhere backdrop. */
	.nav-scrim {
		position: fixed; inset: 0; z-index: 110; background: rgba(30, 8, 60, .5);
		backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
		opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
		border: 0; padding: 0; cursor: pointer;
	}
	.nav-scrim.show { opacity: 1; visibility: visible; }
	body.nav-open { overflow: hidden; }

	.nav-burger { position: relative; z-index: 130; }
	.nav-burger[aria-expanded="true"] { background: transparent; border-color: transparent; }
	.nav-burger[aria-expanded="true"] span { background: #fff; }
}
@media (max-width: 860px) {
	.band { padding: 50px 0; }
	.grid-3 { grid-template-columns: 1fr; }
	.grid-2 { grid-template-columns: 1fr; }
	.form-grid { grid-template-columns: 1fr; }
	.side-stack { grid-template-columns: 1fr; }
	.brand img { height: 84px; margin: -8px 0; }
	.hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
	.hero-copy .btn-row { justify-content: center; }
	.hero-media { max-width: 520px; margin: 0 auto; order: -1; }   /* photo leads on small screens */

	/* Rail turns vertical: icons stack down the left, text beside them. */
	.dayflow { grid-template-columns: 1fr; gap: 24px; }
	.dayflow::before {
		left: 47px; right: auto; top: 40px; bottom: 40px; width: 5px; height: auto;
		background: linear-gradient(180deg, var(--gold-2), var(--gold), var(--purple-2));
	}
	.flow-step { display: grid; grid-template-columns: 94px 1fr; gap: 18px; text-align: left; align-items: center; padding: 0; }
	.flow-ic { margin: 0; }
	.hero-star { width: 70px; top: -18px; }
	.photo-card img { min-height: 260px; }
}
@media (max-width: 560px) {
	body { font-size: 16px; }
	.amen-list { grid-template-columns: 1fr; }
	.grid-4 { grid-template-columns: 1fr; }
	.rb-row { grid-template-columns: 62px 1fr 42px; gap: 8px; }
	.rb-tag { font-size: .72rem; }
	.letter { padding: 34px 24px; }
	.guide-feature .gf-body { padding: 26px 24px; }
	.hero-home { padding: 44px 0 36px; }
	.badge-strip span { font-size: .85rem; padding: 8px 14px; }
	.g-xl { width: 220px; height: 220px; }
	.g-lg { width: 180px; height: 180px; }
}

/* The footer had no mobile rules at all — three columns stayed side by side and
   crushed on a phone. Stack and centre them. */
@media (max-width: 860px) {
	.foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; padding: 42px 22px 32px; }
	.foot-brand { grid-column: 1 / -1; }
	.foot-logo-img { height: 110px; }
}
@media (max-width: 560px) {
	.foot-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
	.foot-logo-img { height: 104px; margin-left: auto; margin-right: auto; }
	.foot-verse { margin-top: 14px; }
	.foot-col ul { margin-bottom: 12px; }
	.foot-info li { justify-content: center; }
	.foot-bottom { padding: 16px 0; font-size: .84rem; }
	.foot-bottom .container { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
}

/* Phones: the announcement bar was stacking onto three lines. Let it flow as
   one sentence so "Learn more" sits with the text instead of below it. */
@media (max-width: 640px) {
	.announce { padding: 5px 0; font-size: .78rem; }
	.announce .container { display: block; text-align: center; line-height: 1.4; padding: 0 14px; }
	.announce .inline-ic { width: 1.05em; height: 1.05em; vertical-align: -0.2em; margin-right: 3px; }
	.announce a { display: inline; margin-left: 5px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn:hover, .card:hover { transform: none; }
	* { transition: none !important; }
}