/* ========================================
   CHARITY CATALYST - HOMEPAGE V2
   Warm sandy theme · Lora + DM Sans
   ======================================== */

/* ========================================
   HERO SECTION - Full Screen
   ======================================== */

.v2-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.v2-hero-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(42, 161, 152, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(27, 54, 93, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(42, 161, 152, 0.06) 0%, transparent 50%),
    linear-gradient(160deg, #0d4f4a 0%, #1a7872 30%, #2aa198 55%, #1a7872 75%, #0d4f4a 100%);
  z-index: 0;
}

.v2-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  opacity: 0.5;
}

.v2-hero-bg::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--cream) 0%, rgba(255, 252, 246, 0.6) 40%, transparent 100%);
  z-index: 1;
}

.v2-hero-logo-watermark {
  position: absolute;
  /* Sizing against the hero's width alone made the mark taller than the hero
     and cropped it. The inset plus `contain` keeps the whole logo on screen at
     any window shape. */
  inset: 21% 15%;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0.12;
  pointer-events: none;
}

.v2-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1000px;
  padding: 0 var(--spacing-xl);
  animation: v2FadeInUp 1s ease-out;
}

.v2-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 10px 24px;
  border-radius: 50px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9em;
  font-weight: 600;
  font-family: var(--font-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-xl);
  animation: v2FadeInUp 1s ease-out 0.2s both;
}

.v2-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  font-weight: 800;
  line-height: 1.05;
  color: white;
  margin: 0 0 var(--spacing-lg);
  letter-spacing: -0.03em;
  animation: v2FadeInUp 1s ease-out 0.3s both;
}

.v2-title-line {
  display: block;
}

.v2-highlight {
  background: linear-gradient(135deg, var(--sand) 0%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.v2-hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 650px;
  margin: 0 auto var(--spacing-xl);
  line-height: 1.65;
  font-weight: 400;
  animation: v2FadeInUp 1s ease-out 0.5s both;
}

.v2-hero-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  animation: v2FadeInUp 1s ease-out 0.7s both;
}

/* Scroll Hint */
.v2-scroll-hint {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.86em;
  font-family: var(--font-heading);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: v2FadeInUp 1s ease-out 1s both;
}

.v2-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: v2ScrollPulse 2s ease-in-out infinite;
}

/* ========================================
   FLOATING DECORATIVE ELEMENTS
   ======================================== */

@keyframes v2Float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(3deg); }
}

@keyframes v2FloatReverse {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(15px) rotate(-2deg); }
}

@keyframes v2Pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* ========================================
   BUTTONS
   ======================================== */

.v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95em;
  font-family: var(--font-heading);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: 2px solid transparent;
  letter-spacing: 0.01em;
}

.v2-btn-primary {
  background: linear-gradient(135deg, #fff 0%, var(--sand) 100%);
  color: var(--navy);
  box-shadow: 0 8px 30px rgba(27, 54, 93, 0.2);
}

.v2-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(27, 54, 93, 0.3);
  background: linear-gradient(135deg, #fff 0%, #fff 100%);
  color: var(--navy);
}

.v2-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: white;
  border-color: rgba(255, 255, 255, 0.35);
}

.v2-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-3px);
  color: white;
}

.v2-btn-white {
  background: white;
  color: var(--navy);
  box-shadow: 0 8px 30px rgba(27, 54, 93, 0.15);
}

.v2-btn-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(27, 54, 93, 0.25);
  color: var(--navy);
}

.v2-btn-ghost-light {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
}

.v2-btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: white;
  transform: translateY(-3px);
  color: white;
}

.v2-btn-accent {
  background: var(--accent-gradient);
  color: white;
  box-shadow: 0 8px 30px rgba(42, 161, 152, 0.3);
}

.v2-btn-accent:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(42, 161, 152, 0.45);
  color: white;
}

.v2-btn-navy {
  background: var(--navy);
  color: white;
  box-shadow: 0 8px 30px rgba(27, 54, 93, 0.25);
}

.v2-btn-navy:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(27, 54, 93, 0.4);
  background: var(--navy-dark);
  color: white;
}

/* ========================================
   SHARED SECTION STYLES
   ======================================== */

.v2-section {
  padding: 88px 0;
  position: relative;
}

.v2-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
}

.v2-label {
  display: inline-block;
  font-size: 0.87em;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: var(--spacing-md);
  position: relative;
  padding-left: 20px;
}

.v2-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  animation: v2Pulse 3s ease-in-out infinite;
}

.v2-label-light {
  color: rgba(255, 255, 255, 0.85);
}

.v2-label-light::before {
  background: rgba(255, 255, 255, 0.7);
}

.v2-section-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto var(--spacing-xxl);
}

.v2-section-header .v2-label {
  padding-left: 0;
}

.v2-section-header .v2-label::before {
  display: none;
}

.v2-section-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 var(--spacing-md);
  letter-spacing: -0.02em;
}

.v2-section-heading em {
  font-style: normal;
  color: var(--accent);
}

.v2-section-desc {
  font-family: var(--font-body);
  font-size: 1.02em;
  color: var(--text-light);
  line-height: 1.85;
  margin: 0;
}

/* ========================================
   MISSION SECTION
   ======================================== */

.v2-mission {
  background: var(--cream);
  border-top: 1px solid var(--border);
}

.v2-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.v2-mission-left .v2-section-heading {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  color: var(--navy);
  position: sticky;
  top: 120px;
}

.v2-mission-right {
  font-family: var(--font-body);
  font-size: 1em;
  color: var(--text);
  line-height: 1.7;
}

.v2-mission-right strong {
  color: var(--navy);
}

.v2-mission-right p {
  margin-bottom: var(--spacing-md);
}

.v2-check-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
}

.v2-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-weight: 500;
  color: var(--text);
  font-size: 1em;
}

.v2-check-list li i {
  color: var(--accent);
  font-size: 1.2em;
  margin-top: 3px;
  flex-shrink: 0;
}

.v2-tagline {
  padding: var(--spacing-md) var(--spacing-lg);
  background: rgba(42, 161, 152, 0.08);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 1em;
  color: var(--navy);
}

/* ========================================
   HOW IT WORKS SECTION
   ======================================== */

.v2-how-it-works {
  background: var(--sand-light);
  border-top: 1px solid var(--border);
}

.v2-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 950px;
  margin: 0 auto;
}

.v2-step {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
  position: relative;
  padding: var(--spacing-sm) 0;
}

.v2-step-number {
  font-family: var(--font-heading);
  font-size: 2.6em;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  line-height: 1;
  flex-shrink: 0;
  width: 76px;
  text-align: center;
  transition: all 0.4s ease;
}

.v2-step:hover .v2-step-number {
  color: var(--accent);
  -webkit-text-stroke: 2px var(--accent);
  transform: scale(1.1) rotate(-3deg);
}

.v2-step-content h3 {
  font-family: var(--font-heading);
  font-size: 1.2em;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
}

.v2-step-content p {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  font-size: 0.98em;
}

.v2-step-connector {
  width: 2px;
  height: 22px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  margin-left: 38px;
  opacity: 0.4;
}

/* ========================================
   STATS BANNER
   ======================================== */

.v2-stats-banner {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}

.v2-stats-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(42, 161, 152, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: v2Float 8s ease-in-out infinite;
}

.v2-stats-banner::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(245, 240, 230, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: v2FloatReverse 10s ease-in-out infinite;
}

.v2-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  text-align: center;
  position: relative;
  z-index: 1;
}

.v2-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.v2-stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  font-weight: 800;
  color: white;
  line-height: 1;
}

.v2-stat-label {
  font-family: var(--font-heading);
  font-size: 0.88em;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ========================================
   STAKEHOLDER CARDS
   ======================================== */

.v2-stakeholders {
  background: var(--cream);
  border-top: 1px solid var(--border);
}

.v2-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.v2-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl) var(--spacing-lg);
  text-decoration: none;
  color: var(--text);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.v2-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.v2-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(27, 54, 93, 0.12);
  border-color: var(--accent);
  color: var(--text);
}

.v2-card:hover::before {
  transform: scaleX(1);
}

.v2-card-featured {
  background: linear-gradient(160deg, #0d4f4a 0%, #1a7872 100%);
  border-color: transparent;
  color: #ffffff;
}

.v2-card-featured h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  font-size: 1.2em;
}

.v2-card-featured p {
  color: #ffffff !important;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.v2-card-featured ul li {
  color: #ffffff !important;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.v2-card-featured .v2-card-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.v2-card-featured .v2-card-link {
  color: var(--sand);
  font-weight: 800;
}

.v2-card-featured::before {
  background: linear-gradient(135deg, var(--sand-dark), var(--sand));
}

.v2-card-featured:hover {
  box-shadow: 0 20px 60px rgba(26, 120, 114, 0.35);
  color: white;
}

.v2-card-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: rgba(42, 161, 152, 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  margin-bottom: var(--spacing-lg);
  transition: all 0.4s ease;
}

.v2-card:hover .v2-card-icon {
  transform: scale(1.1) rotate(-5deg);
  background: rgba(42, 161, 152, 0.18);
}

.v2-card h3 {
  font-family: var(--font-heading);
  font-size: 1.15em;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 var(--spacing-sm);
}

.v2-card p {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 var(--spacing-md);
  font-size: 0.95em;
}

.v2-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-lg);
  flex-grow: 1;
}

.v2-card ul li {
  padding: 6px 0;
  font-size: 0.93em;
  color: var(--text-light);
  position: relative;
  padding-left: 18px;
  font-family: var(--font-body);
}

.v2-card ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.v2-card-featured ul li::before {
  color: var(--sand);
}

.v2-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95em;
  font-family: var(--font-heading);
  color: var(--accent);
  transition: gap 0.3s ease;
  margin-top: auto;
}

.v2-card:hover .v2-card-link {
  gap: 14px;
}

/* ========================================
   CTA SECTION
   ======================================== */

.v2-cta-section {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  color: white;
}

.v2-cta-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 30% 50%, rgba(42, 161, 152, 0.12) 0%, transparent 60%),
    linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 40%, #1b4d6d 70%, var(--navy-dark) 100%);
  z-index: 0;
}

.v2-cta-content {
  position: relative;
  z-index: 1;
  max-width: 950px;
  margin: 0 auto;
  text-align: center;
}

.v2-cta-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: white;
  margin: 0 0 var(--spacing-lg);
  letter-spacing: -0.02em;
}

.v2-cta-content p {
  font-family: var(--font-body);
  font-size: 1.02em;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: var(--spacing-md);
}

.v2-cta-highlight {
  font-size: 1.05em !important;
  font-weight: 600;
  color: white !important;
  margin-top: var(--spacing-lg) !important;
  padding: var(--spacing-md) var(--spacing-lg);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent);
}

.v2-cta-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--spacing-xl);
}

/* ========================================
   SCROLL REVEAL ANIMATIONS
   ======================================== */

.v2-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.v2-reveal.v2-revealed {
  opacity: 1;
  transform: translateY(0);
}

.v2-reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.v2-reveal-left.v2-revealed {
  opacity: 1;
  transform: translateX(0);
}

.v2-reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.v2-reveal-right.v2-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Scale-in reveal */
.v2-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.v2-reveal-scale.v2-revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children delays */
.v2-reveal-delay-1 { transition-delay: 0.1s; }
.v2-reveal-delay-2 { transition-delay: 0.2s; }
.v2-reveal-delay-3 { transition-delay: 0.3s; }
.v2-reveal-delay-4 { transition-delay: 0.4s; }
.v2-reveal-delay-5 { transition-delay: 0.5s; }

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes v2FadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes v2ScrollPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.8;
    transform: scaleY(1.3);
  }
}

@keyframes v2GentleRotate {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
}

@keyframes v2Shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Subtle underline grow on headings */
.v2-section-heading::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin: var(--spacing-md) auto 0;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.v2-section-heading:hover::after {
  width: 120px;
}

/* Left-aligned headings shouldn't center the bar */
.v2-mission-left .v2-section-heading::after {
  margin-left: 0;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
  .v2-mission-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .v2-mission-left .v2-section-heading {
    position: static;
  }

  .v2-cards {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }

  .v2-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
}

@media (max-width: 768px) {
  .v2-section {
    padding: 56px 0;
  }

  .v2-container {
    padding: 0 var(--spacing-md);
  }

  .v2-check-list li {
    margin-bottom: 10px;
  }

  .v2-section-heading {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem);
  }

  .v2-label {
    font-size: 0.82rem;
  }

  .v2-hero-title {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
  }

  .v2-hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .v2-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .v2-step {
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
    align-items: center;
  }

  .v2-step-number {
    font-size: 2.5em;
    width: auto;
  }

  .v2-step-connector {
    margin-left: auto;
    margin-right: auto;
  }

  .v2-stats-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .v2-stats-banner {
    padding: 60px 0;
  }

  .v2-cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .v2-scroll-hint {
    bottom: 30px;
  }
}

/* ========================================
   OVERRIDE PARENT LAYOUT FOR HOMEPAGE
   ======================================== */

/* The parent column is unpadded for public pages (see .main-content:not
   (.with-sidebar) in style.css), so these sit full-bleed on their own. They
   used to cancel that padding with negative margins, which overflowed the
   viewport whenever the assumed padding and the real padding disagreed.

   overflow-x: clip contains the slide-in reveals below, which sit 60px off
   their final position until they scroll into view and would otherwise let the
   whole page be swiped sideways. clip rather than hidden, because hidden would
   create a scroll container and break the sticky section headings. */
.v2-hero,
.v2-section,
.v2-stats-banner,
.v2-cta-section {
  width: 100%;
  overflow-x: clip;
}