/* ===== V2 ALTERNATE HOMEPAGE — Oak Hall Inspired ===== */

/* ===== HEADER — Transparent overlay on hero ===== */
.v2-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  transition: all 0.3s ease;
}

/* Desktop nav */
.v2-desktop-nav {
  display: none;
  padding: 24px 40px;
  transition: all 0.3s ease;
}
@media (min-width: 1024px) {
  .v2-desktop-nav { display: block; }
  .v2-mobile-nav { display: none !important; }
}

.v2-nav-container {
  display: flex;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

/* Left section: nav links */
.v2-nav-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.v2-menu-icon {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  font-size: 28px;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
}
.v2-menu-icon:hover { opacity: 0.7; }

.v2-sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.4);
  margin: 0 12px;
}

.v2-nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  transition: all 0.2s;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.v2-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--accent);
  transition: all 0.25s ease;
}
.v2-nav-link:hover::after {
  left: 16px;
  right: 16px;
}

/* More dropdown */
.v2-nav-more { position: relative; display: inline-flex; align-items: center; }
.v2-caret { font-size: 9px; margin-left: 4px; vertical-align: middle; }
.v2-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.2);
  padding: 8px 0;
  min-width: 220px;
  z-index: 100;
  /* Invisible bridge to prevent hover gap */
  padding-top: 12px;
}
.v2-nav-more:hover .v2-dropdown { display: block; }
.v2-dropdown a {
  display: block;
  padding: 10px 20px;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
  text-shadow: none;
}
.v2-dropdown a:hover {
  background: var(--primary);
  color: #fff;
}

/* Center section: logo */
.v2-nav-center {
  flex: 1;
  text-align: center;
}
.v2-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.v2-logo-img {
  height: 48px;
  width: auto;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  transition: all 0.3s;
}
.v2-logo-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.v2-logo-cn {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.v2-logo-en {
  font-size: 10px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Right section: Portal */
.v2-nav-right {
  flex: 1;
  text-align: right;
}
.v2-portal-link {
  border: 2px solid rgba(255,255,255,0.5) !important;
  border-radius: 4px;
  padding: 8px 24px !important;
  font-size: 13px !important;
  transition: all 0.25s !important;
}
.v2-portal-link:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff !important;
}
.v2-portal-link::after { display: none !important; }

/* Donate CTA: an accent-tinted ghost button. Distinct from the white Parent
   Portal outline (signals "give"), but subtler than the solid orange Register
   button in the announcement bar — so the header has one loud CTA, not two. */
.v2-donate-link {
  border: 2px solid var(--accent) !important;
  border-radius: 4px;
  padding: 8px 20px !important;
  font-size: 13px !important;
  color: #fff !important;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  margin-right: 10px;
  transition: all 0.25s !important;
}
.v2-donate-link:hover {
  background: var(--accent);
  border-color: var(--accent) !important;
}
.v2-donate-link::after { display: none !important; }
.v2-donate-heart { font-size: 12px; margin-right: 5px; opacity: 0.95; }
/* Mobile menu Donate: match the accent, sit just above Parent Portal.
   Scoped selector so it beats .v2-menu-link's color (which is later in source). */
.v2-menu-content .v2-menu-donate {
  margin-top: 20px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
}
.v2-menu-donate .v2-donate-heart { font-size: 16px; }

/* ===== SCROLLED HEADER (mini) ===== */
/* Applied for a single frame by public-v2.js while it measures the header's
   settled compact height. The header's size comes from its children (nav
   padding, logo), which animate on their own — without this the measurement
   reads the pre-transition size. */
.v2-header.measuring, .v2-header.measuring * { transition: none !important; }

.v2-header.scrolled {
  background: var(--primary-dark);
  backdrop-filter: blur(20px);
  padding: 0;
}
.v2-header.scrolled .v2-desktop-nav {
  padding: 8px 40px;
}
.v2-header.scrolled .v2-logo-img {
  height: 36px;
}

/* ===== MOBILE NAV ===== */
.v2-mobile-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}
.v2-mobile-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.v2-mobile-logo img {
  height: 36px;
  width: auto;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
}
.v2-mobile-logo span {
  color: #fff;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 16px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Hamburger button */
.v2-burger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 10;
}
.v2-burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  transition: all 0.3s ease;
}
.v2-burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.v2-burger.active span:nth-child(2) { opacity: 0; }
.v2-burger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ===== FULL-SCREEN MENU OVERLAY ===== */
/* Mobile menu: a dropdown panel anchored under the header — the same model as
   the v1 navbar, which never blocks. It replaces a full-screen overlay that
   faded out over 0.4s: `visibility` only flips at the END of a transition, so
   for those 400ms the closed menu still covered the viewport and swallowed the
   next tap, which is what made section navigation feel stuck. */
.v2-menu-overlay {
  position: fixed;
  top: 64px; left: 0; right: 0;
  max-height: calc(100vh - 64px);
  background: #fff;
  z-index: 999;
  display: none;
  overflow-y: auto;
  padding: 16px 20px 24px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.18);
}
.v2-menu-overlay.open { display: block; }
/* The header stays on top and tappable, and the burger toggles the panel, so
   the in-panel close button is redundant here. */
.v2-menu-close { display: none; }
/* Keep the logo and burger legible while the white panel is open (the header
   is transparent over the hero). */
.v2-header.menu-open { background: var(--primary-dark); }
/* Anchor jumps land flush below the fixed header. This must equal the header's
   height: too little hides the section heading behind it, too much shows a
   white strip above it. public-v2.js measures the real header and overrides
   this; the value here is the no-JS fallback. */
html { scroll-padding-top: 59px; }

.v2-menu-content {
  text-align: center;
}
.v2-menu-link {
  display: block;
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--text-dark);
  text-decoration: none;
  padding: 12px 0;
  transition: color 0.2s;
}
.v2-menu-link:hover { color: var(--primary); }
.v2-menu-portal {
  margin-top: 24px;
  font-size: 18px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--font-body);
  font-weight: 600;
}
.v2-menu-group { margin-bottom: 4px; }
.v2-menu-sub {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4px 0 12px;
}
.v2-menu-sub a {
  font-size: 14px;
  color: var(--text-mid);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 4px;
  transition: all 0.2s;
}
.v2-menu-sub a:hover { background: var(--primary); color: #fff; }

/* ===== FULL-SCREEN HERO ===== */
.v2-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.v2-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.v2-hero-bg-default {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}
.v2-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}
.v2-hero-gradient {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(45,26,44,0.7) 0%, transparent 100%);
  z-index: 2;
}

.v2-hero-content {
  position: relative;
  z-index: 3;
  padding: 0 60px;
  max-width: 900px;
}

.v2-hero-title {
  margin-bottom: 16px;
}
.v2-hero-outline {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  text-stroke: 2px #fff;
  display: block;
}

.v2-hero-subtitle {
  font-family: var(--font-secondary);
  font-size: 32px;
  font-weight: 300;
  color: var(--accent-light);
  margin-bottom: 20px;
}
.v2-hero-desc {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 32px;
}
.v2-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
}
.v2-btn-accent {
  background: var(--accent);
  color: var(--text-dark);
}
.v2-btn-accent:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.v2-btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
}
.v2-btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}

/* ===== ABOUT SECTION SLIDESHOW (replaces image) ===== */
.v2 .about-image {
  position: relative;
  overflow: hidden;
}
.v2-about-slideshow {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  min-height: 300px;
}
.v2-about-slideshow .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.v2-about-slideshow .hero-slide.active { opacity: 1; }
.v2-about-slideshow .hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-about-slideshow .slide-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  padding: 24px 16px 12px;
  font-size: 13px;
  font-weight: 500;
}
.v2-about-slideshow .slide-dots {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 2;
}

/* ===== V2 BODY OVERRIDES ===== */
/* Remove original navbar and hero section styles that conflict */
body.v2 .navbar { display: none; }

/* News modal must be above the fixed header */
body.v2 .news-modal-overlay { z-index: 10001; }

/* Ensure page sections below hero render properly */
body.v2 .page-section:first-of-type {
  border-top: none;
}

/* ===== RESPONSIVE: TABLET ===== */
@media (max-width: 1024px) {
  .v2-hero-content { padding: 0 30px; }
  .v2-hero-outline { font-size: 52px; }
  .v2-hero-subtitle { font-size: 24px; }
  .v2-hero-desc { font-size: 16px; }
}

/* ===== RESPONSIVE: MOBILE ===== */
@media (max-width: 768px) {
  .v2-hero { min-height: 500px; }
  .v2-hero-content { padding: 0 20px; }
  .v2-hero-outline { font-size: 36px; }
  .v2-hero-subtitle { font-size: 20px; }
  .v2-hero-desc { font-size: 15px; }
  .v2-hero-actions { flex-direction: column; }
  .v2-btn { width: 100%; justify-content: center; }

  .v2-about-slideshow { min-height: 220px; }
}

@media (max-width: 480px) {
  .v2-hero-outline { font-size: 28px; }
  .v2-hero-subtitle { font-size: 18px; }
}

/* ===== REGISTRATION ANNOUNCEMENT BAR =====
   Fixed strip above the (also fixed) header. The header is an overlay on the
   hero, so the bar simply takes the top slot and pushes the header down by its
   own height — the hero image is untouched. Dismissing removes .has-announce
   from <body>, which returns the header to the top with no layout jump. */
:root { --announce-h: 44px; }

.v2-announce {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;                 /* above .v2-header (1000) */
  background: var(--accent);
  color: #fff;
}
.v2-announce-inner {
  max-width: 1400px;
  margin: 0 auto;
  min-height: var(--announce-h);
  padding: 7px 44px 7px 20px;    /* right padding clears the close button */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
}
.v2-announce-msg {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.v2-announce-zh {
  display: block;        /* own line under the English, as designed */
  margin-top: 1px;
  font-weight: 500;
  font-size: 0.92em;
  opacity: 0.95;
}
.v2-announce-btn {
  flex: none;
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.v2-announce-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.v2-announce-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.75;
}
.v2-announce-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.18); }
.v2-announce-btn:focus-visible,
.v2-announce-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Shift the fixed header down so the bar doesn't cover it */
body.has-announce .v2-header { top: var(--announce-h); }

@media (max-width: 640px) {
  :root { --announce-h: 40px; }
  .v2-announce-inner { gap: 10px; padding: 6px 38px 6px 12px; }
  .v2-announce-msg { font-size: 12.5px; }
  .v2-announce-btn { font-size: 12px; padding: 5px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-announce-btn { transition: none; }
  .v2-announce-btn:hover { transform: none; }
}

/* ===== COURSE DETAIL POPUP ===== */
.course-card { cursor: pointer; position: relative; }
.course-card::after {
  content: "Details \203A";
  position: absolute;
  right: 12px; bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.course-card:hover::after { opacity: 1; }

.course-pop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;               /* above announce bar (1100) and header (1000) */
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.course-pop-backdrop.open { display: flex; }
body.course-pop-lock { overflow: hidden; }

.course-pop {
  background: #fff;
  color: var(--text-dark);
  border-radius: var(--radius-lg, 16px);
  max-width: 560px;
  width: 100%;
  max-height: 84vh;
  overflow-y: auto;
  padding: 26px 28px 24px;
  position: relative;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.course-pop h3 {
  margin: 0 34px 6px 0;
  font-size: 22px;
  line-height: 1.25;
}
.course-pop-meta {
  font-size: 13px;
  color: var(--text-mid);
  margin-bottom: 14px;
}
.course-pop-meta .dot { margin: 0 7px; color: var(--text-light); }
.course-pop-block h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary);
  margin: 18px 0 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.course-pop-block h4 .cn { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-mid); margin-left: 6px; }
.course-pop-rich { font-size: 14.5px; line-height: 1.65; }
.course-pop-rich p { margin: 0 0 8px; }
.course-pop-rich ul, .course-pop-rich ol { margin: 6px 0 10px; padding-left: 22px; }
.course-pop-rich img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
.course-pop-rich a { color: var(--primary); }
.course-pop-none { color: var(--text-light); font-size: 14px; margin: 14px 0 0; }
.course-pop-none a { color: var(--primary); }
.course-pop-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-warm, #f1f5f9);
  color: var(--text-mid);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.course-pop-close:hover { background: var(--border); color: var(--text-dark); }
.course-pop-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 560px) {
  .course-pop { padding: 20px 18px 18px; max-height: 88vh; }
  .course-pop h3 { font-size: 19px; }
}

/* ===== SPONSOR STRIP (homepage, platinum tier) ===== */
.v2-sponsor-strip {
  background: var(--primary-dark);
  padding: 40px 20px 44px;
  text-align: center;
}
.v2-sponsor-strip h3 { color: #fff; font-size: 20px; letter-spacing: 1px; margin-bottom: 22px; }
.v2-sponsor-strip-logos { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.v2-sponsor-strip-logos a, .v2-sponsor-strip-logos > span {
  background: #fff; border-radius: 12px; padding: 10px 16px;
  display: flex; align-items: center; height: 64px; transition: transform 0.15s ease;
}
.v2-sponsor-strip-logos a:hover { transform: translateY(-3px); }
.v2-sponsor-strip-logos img { max-height: 44px; max-width: 150px; object-fit: contain; display: block; }

/* ===== DONATIONS: sponsorship tiers + why + wall ===== */
.spon-h2 { font-size: 24px; margin: 36px 0 2px; }
.spon-cn { color: var(--accent); font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.spon-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px; }
.spon-tier { border: 1px solid var(--border); border-radius: 14px; padding: 16px 14px; background: var(--white); display: flex; flex-direction: column; }
.spon-tier.hot { border: 2px solid var(--accent); position: relative; }
.spon-tier.hot .flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 10px; border-radius: 9px; white-space: nowrap; }
.spon-tier h4 { font-size: 15px; }
.spon-tier .amt { font-size: 21px; font-weight: 800; margin: 2px 0 8px; }
.spon-tier ul { list-style: none; font-size: 12.5px; color: var(--text-mid); flex: 1; padding: 0; margin: 0; }
.spon-tier li { padding: 3px 0 3px 16px; position: relative; }
.spon-tier li:before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.spon-tier .cta { margin-top: 10px; text-align: center; background: var(--primary); color: #fff; border-radius: 8px; padding: 8px 0; font-size: 13px; font-weight: 600; text-decoration: none; }
.spon-tier.hot .cta { background: var(--accent); }
.spon-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.spon-extras > div { border: 1px dashed var(--border); border-radius: 14px; padding: 14px 16px; font-size: 13px; color: var(--text-mid); background: var(--white); }
.spon-extras b { color: var(--text-dark); }
.spon-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.spon-why > div { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.spon-why b { display: block; margin-bottom: 3px; font-size: 14px; }
.spon-why p { font-size: 12.5px; color: var(--text-mid); margin: 0; }
.spon-tierhead { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; font-weight: 700; font-size: 14px; }
.spon-tierhead .pill { font-size: 11px; padding: 2px 10px; border-radius: 10px; color: #fff; }
.pill-platinum { background: linear-gradient(135deg, #64748b, #334155); }
.pill-gold { background: #D4A853; }
.pill-silver { background: #94a3b8; }
.pill-bronze { background: #b08d57; }
.pill-friend { background: var(--accent); }
.spon-walllogos { display: flex; gap: 12px; flex-wrap: wrap; }
.spon-walllogos a, .spon-walllogos > span { border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px; height: 58px; display: flex; align-items: center; background: var(--white); }
.spon-walllogos img { max-height: 40px; max-width: 130px; object-fit: contain; display: block; }
.spon-nameonly { font-size: 14px; font-weight: 600; color: var(--text-mid); }
.spon-names { display: flex; gap: 8px; flex-wrap: wrap; }
.spon-names span { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 4px 14px; font-size: 13.5px; color: var(--text-mid); }
@media (max-width: 640px) { .spon-extras { grid-template-columns: 1fr; } }

/* ===== ABOUT: vision / mission / iHOPE (prominent treatment) ===== */
.v2-vm { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--border); }
.v2-vm-kicker { font-family: var(--font-heading); font-size: 30px; color: var(--text-dark); margin-bottom: 10px; }
.v2-vm p { font-size: 17.5px; line-height: 1.7; color: var(--text-mid); margin: 0; }
.v2-ihope { margin-top: 44px; }
.v2-ihope h4 { text-align: center; font-size: 20px; font-family: var(--font-heading); margin-bottom: 18px; }
.v2-ihope h4 b { color: var(--accent); }
.v2-ihope-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.v2-ihope-chips > div { border: 1px solid var(--border); border-radius: 14px; padding: 22px 10px 18px; text-align: center; background: var(--white); }
.v2-ihope-chips .ico { display: block; color: var(--primary); }
.v2-ihope-chips .ico svg { width: 46px; height: 46px; }
.v2-ihope-chips .ico svg .acc, .feature-icon-line svg .acc { stroke: var(--accent); }
.v2-ihope-chips b { display: block; font-size: 14.5px; margin-top: 10px; }
@media (max-width: 640px) { .v2-vm { grid-template-columns: 1fr; gap: 24px; } }

/* Feature-strip line icons (below the hero) */
.feature-icon-line { background: transparent !important; }
.feature-icon-line svg { width: 56px; height: 56px; color: var(--primary); }

/* Top contributor: subtle emphasis (larger card, warm ring) */
.v2-sponsor-strip-logos .top { height: 76px; padding: 12px 20px; box-shadow: 0 0 0 2px var(--accent), 0 6px 18px rgba(0,0,0,0.25); }
.v2-sponsor-strip-logos .top img { max-height: 54px; max-width: 180px; }
.spon-walllogos .wl.top { height: 70px; padding: 10px 18px; border-color: var(--accent); box-shadow: 0 3px 14px rgba(249,115,22,0.18); }
.spon-walllogos .wl.top img { max-height: 50px; max-width: 160px; }

/* ===== DONATION POPUP (donations section) ===== */
.donate-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 16px; }
.donate-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 720px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.donate-modal-head { padding: 14px 20px; background: var(--accent); display: flex; justify-content: space-between; align-items: center; }
.donate-modal-head .t { font-size: 16px; font-weight: 600; color: #fff; }
.donate-close { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.55); border-radius: 8px; width: 34px; height: 34px; font-size: 20px; line-height: 1; cursor: pointer; color: #fff; }
.donate-close:hover { background: rgba(255,255,255,0.28); }