/* Shared visual language: keep the logo and palette, simplify content surfaces. */
body { background: #faf9f6; }
main { color: #4558a1; }
main :is(h1,h2,h3,h4,.font-vintage) { font-family: "Gabarito", "Gabarito Local", sans-serif; font-weight: 600; letter-spacing: -.025em; }
main :is(h1,h2,h3,h4) { text-wrap: balance; }
main h1.h1, main h1.h2 { font-size: 36px; line-height: 1.12; }
main h2.h2 { font-size: 32px; line-height: 1.15; }
.btn.btn { border-radius: 999px; }
.focused-header .focused-back { border-radius: 999px; }
/* Contained mint banners sit beneath the existing blue navigation. */
.site-banner { padding: 104px 16px 24px; background: linear-gradient(#4558a1 80px, #faf9f6 80px); }
.site-banner > [aria-hidden="true"] { display: none; }
.site-banner > .max-w-6xl { max-width: 1104px; padding: 0; border-radius: 20px; background: #e6f3ed; }
.site-banner > .max-w-6xl > div { padding: 32px 20px; }
.site-banner .hero__content { padding-bottom: 0; }
.site-banner :is(h1,p,.text-white,.text-blue-light) { color: #4558a1; }
.site-banner h1 { margin-bottom: 0; }
.site-banner p { margin-top: 16px; }
.site-banner a { color: #4558a1; }
.site-banner a:hover { color: #4558a1; }
.site-banner a svg { color: currentColor; }
main > .bg-gray-base, main > .bg-gay-base { background: #faf9f6; }
main .bodyLayout { background: #fff; border-radius: 14px; padding: 24px; }
.featuresA { background: #faf9f6; }
.featuresA__item { padding: 28px; background: #fff; border-radius: 14px; box-shadow: 0 4px 16px #4558a10a; }
.featuresA__item .featureIcon { border-radius: 10px; }
.feature-tab { border-radius: 12px; box-shadow: none; }
.teamMember { background: #fff; padding: 24px; border-radius: 14px; box-shadow: 0 4px 16px #4558a10a; }
.videoSpotlightBlock img, .featuresC img { border-radius: 14px; }
main article > a:has(img), main article .grid article { border-radius: 14px; overflow: hidden; }
/* The FAQ keeps its existing accessible accordion behavior. */
main ul:has(.faqAnswer) { display: grid; gap: 12px; }
main li:has(> .faqAnswer) { background: #fff; border: 0; border-radius: 12px; padding: 0; }
main li:has(> .faqAnswer) > button { padding: 20px; margin: 0; font-size: 19px; line-height: 1.4; border-radius: 12px; }
main li:has(> .faqAnswer) > button[aria-expanded="true"] { border-radius: 12px 12px 0 0; }
main li:has(> .faqAnswer) > button:focus-visible { outline-offset: -4px; }
main li > .faqAnswer { padding-inline: 20px; }
main li > .faqAnswer > :first-child { padding-top: 16px; }
main li:has(> .faqAnswer) > button:hover { color: #4558a1; }
/* Soft backgrounds for calls to action. */
.ctaBlock.ctaBlock--light, .ctaBlock.ctaBlock--dark { background: #c7e8db; }
.ctaBlock :is(h2,p) { color: #4558a1; }
.ctaBlock h2 { font-size: 32px; line-height: 1.15; }
.ctaBlock h2 span { color: inherit !important; }
.ctaBlock > div > div { padding-top: 48px; padding-bottom: 48px; }
.singleQuote--dark { background: #4558a1; }
/* Form content remains the focus; embedded provider controls are untouched. */
.focused-page { padding: 0 16px 24px; }
.focused-page .focused-content { background: #fff; border-radius: 16px; padding: 28px 20px; box-shadow: 0 4px 20px #4558a10a; }
.focused-intro h1 { color: #4558a1; }
.focused-next { background: #e6f3ed; border: 0; border-radius: 12px; padding: 24px; }
.focused-footer { background: #faf9f6; }
/* Video-library cards use the same surfaces. */
.video-tour .tour-intro { padding: 104px 16px 24px; background: linear-gradient(#4558a1 80px, #faf9f6 80px); color: #4558a1; }
.video-tour .tour-intro > .tour-container { padding: 32px 20px; max-width: 1104px; background: #e6f3ed; border-radius: 20px; }
.video-tour .tour-intro p:not(.tour-eyebrow) { color: #4558a1; }
.video-tour .tour-intro h1 { color: #4558a1; }
.video-tour .tour-jump:focus-visible { outline-color: #4558a1; }
.video-tour .tour-card { background: #fff; padding: 16px; border-radius: 14px; box-shadow: 0 4px 16px #4558a10a; }
.video-tour .tour-card-copy { padding: 20px 8px 8px; }
@media (min-width: 768px) {
  main h1.h1, main h1.h2 { font-size: 48px; }
  main h2.h2 { font-size: 40px; }
  .site-banner { padding: 112px 24px 32px; }
  .site-banner > .max-w-6xl > div { padding: 48px; }
  .ctaBlock h2 { font-size: 40px; }
  .ctaBlock > div > div { padding-top: 64px; padding-bottom: 64px; }
  .focused-page .focused-content { padding: 40px; }
  .video-tour .tour-intro { padding: 112px 24px 32px; }
  .video-tour .tour-intro > .tour-container { padding: 48px; }
}
.site-banner h1, .ctaBlock h2 { text-shadow: none; }
body:has(.focused-page) { background: #faf9f6; }
.teamMember .text-green-base { color: #4558a1; }
main .inline-link { color: #4558a1; }
main .inline-link:hover { color: #4558a1; }
.site-banner .hero, .site-banner p { text-shadow: none; }
.site-banner p { font-size: 18px; font-weight: 400; line-height: 1.55; }
/* Use the header blue for brand surfaces, with neutral body text for reading. */
main, .home-page, .video-tour, .focused-intro p, .focused-next p { color: #343942; }
.site-footer, .site-footer a, .site-footer .footer-bottom p { color: #fff; }
.footer-bottom { border-top-color: #ffffff40; }
.btn.btn { --action-hover: #5267b5; --action-pressed: #4558a1; }
.btn.btn:where(.bg-green-base, .btn--with-arrow), .ctaBlock--light .btn.btn--secondary { --action-text: #30343b; --action-hover: #80cbb0; --action-pressed: #5cb798; }
.btn.btn--secondary, .ctaBlock--dark .btn.btn--secondary { --action-text: #30343b; --action-hover: #fff; --action-pressed: #dbdff0; }
.header nav:not(#mobile-nav) > ul > li > a:is(:hover,:focus-visible,:active), .hamburger:is(:hover,:focus-visible,:active,[aria-expanded="true"]), .footer-social a:is(:hover,:focus-visible,:active) { background: #ffffff24; }
main :is(.text-blue-shadow\/75,.text-blue-dark) { color: #4558a1; }
main :is(.bg-blue-shadow,.bg-blue-dark) { background-color: #4558a1; }
.ctaBlock--light .btn.btn--primary { --action-hover: #5267b5; --action-pressed: #4558a1; }
/* Content-led pages skip the introductory banner but retain room for navigation. */
main.content-first { padding-top: 80px; background: linear-gradient(#4558a1 80px, #fff 80px); }
.content-first > section:first-child > .max-w-6xl > div { padding-top: 32px; }
.content-first h1.content-heading { font-size: 32px; line-height: 1.18; color: #4558a1; margin-bottom: 24px; }
.content-first h1.content-heading span { color: inherit !important; }
.content-first > section:first-child > .max-w-6xl > div > .pb-12 { padding-bottom: 16px; }
@media (min-width: 768px) {
  .content-first > section:first-child > .max-w-6xl > div { padding-top: 48px; }
  .content-first h1.content-heading { font-size: 40px; }
}

/* Depth from the existing blue, mint, and lavender palette. */
:root { --surface-edge: #4558a12b; --surface-shadow: 0 6px 18px #4558a10c; }
.site-banner > .max-w-6xl, .home-page .home-hero-grid, .video-tour .tour-intro > .tour-container {
  background: linear-gradient(125deg, #e6f3ed 5%, #c7e8db 52%, #e8ecf7 100%);
  border: 1px solid #4558a126;
  box-shadow: inset 0 1px 0 #fff9, var(--surface-shadow);
}
.featuresA__item, .teamMember, .video-tour .tour-card, main li:has(> .faqAnswer), .focused-page .focused-content, .home-page .home-ways-panel, .home-page .home-quote {
  background: linear-gradient(145deg, #fff 65%, #f1f3fa);
  border: 1px solid var(--surface-edge);
  box-shadow: var(--surface-shadow);
}
.home-page .home-stats > div, .home-page .home-products > div {
  background-image: linear-gradient(130deg, #ffffff18, #ffffff00 55%, #4558a10d);
  border: 1px solid #4558a12b;
  box-shadow: inset 0 1px 0 #ffffff66, 0 6px 16px #4558a112;
}
.home-page .home-stats > div:first-child, .home-page .home-products > div:first-child {
  background-image: linear-gradient(125deg, #5267b5, #4558a1 70%);
}
.home-page .home-stories, .site-footer, .singleQuote--dark {
  background: linear-gradient(120deg, #4558a1 35%, #5267b5 100%);
  border-top: 1px solid #ffffff26;
}
.home-page .home-cta, .ctaBlock.ctaBlock--light, .ctaBlock.ctaBlock--dark {
  background: radial-gradient(ellipse at 50% 0%, #ffffff85, transparent 65%), linear-gradient(115deg, #c7e8db, #e6f3ed 55%, #dbdff0);
  border-top: 1px solid #4558a126;
  border-bottom: 1px solid #4558a126;
}
.focused-next, .tour-coach {
  background: linear-gradient(130deg, #eef7f3, #c7e8db);
  border: 1px solid var(--surface-edge);
}
.btn.btn {
  background-image: linear-gradient(180deg, #ffffff18, #ffffff00);
  box-shadow: inset 0 1px 0 #ffffff40, 0 3px 8px #4558a124;
}
.btn.btn:active { box-shadow: inset 0 1px 3px #4558a130; }
/* A quiet nod to the heart in the logo, behind the people who support programs. */
.team-whimsy { position: relative; isolation: isolate; background: #faf9f6; }
.team-whimsy .teamMember img { border: 2px solid #d7dded; background: #fff; }
.team-whimsy::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='160' viewBox='0 0 180 160'%3E%3Cpath d='M90 110 63 84C46 67 69 50 82 63l8 8 8-8c13-13 36 4 19 21Z' fill='%234558a1' transform='rotate(-12 90 80)'/%3E%3C/svg%3E"); pointer-events: none; }

/* Optional team portrait surprises. */
.team-portrait { position: relative; display: block; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.team-portrait .team-hat { position: absolute; width: 62%; height: auto; left: 17%; top: -22%; opacity: 0; transform: translateY(-8px) rotate(var(--accessory-tilt, -5deg)); pointer-events: none; }
.team-portrait[aria-pressed="true"] .team-hat, .team-portrait:focus-visible .team-hat { opacity: 1; transform: translateY(0) rotate(var(--accessory-tilt, -5deg)); }
@media (hover: hover) { .team-portrait:hover .team-hat { opacity: 1; transform: translateY(0) rotate(var(--accessory-tilt, -5deg)); } }
@media (prefers-reduced-motion: no-preference) { .team-hat { transition: opacity 180ms ease-out, transform 180ms ease-out; } }

.team-portrait .team-hat--pirate { width: 76%; left: 13%; top: -34%; }
.team-portrait .team-hat--bunny { width: 54%; left: 24%; top: -22%; --accessory-tilt: 0deg; }
.team-portrait .team-hat--top { width: 60%; left: 15%; top: -27%; }
.team-portrait .team-hat--halo { width: 72%; left: 14%; top: -28%; }
.team-portrait .team-hat--cowboy { width: 84%; left: 6%; top: -36%; }
.team-portrait .team-hat--arrow { width: 100%; left: -2%; top: -15%; --accessory-tilt: -3deg; }
.team-portrait .team-hat--lips { width: 29%; left: 35.5%; top: 41%; --accessory-tilt: -5deg; }

.team-portrait .team-hat--cigar { width: 34%; left: 51%; top: 46%; --accessory-tilt: 12deg; }