/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 19 2026 | 12:37:05 */
/* ==========================================================================
   YESHIVA GIVING FUND — Site Stylesheet (v2.0 — complete, corrected)
   Brand: Midnight navy + Burnished gold + Parchment
   Voice: editorial, institutional, bold-but-restrained
   Scope: page content under .ygf-* classes; form UX under .ygf-form-host
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --ygf-midnight: #0F1F3D;
  --ygf-midnight-deep: #081428;
  --ygf-midnight-soft: #1B2D52;
  --ygf-gold: #B8893A;
  --ygf-gold-bright: #C4953F;
  --ygf-gold-deep: #8E6A2C;
  --ygf-ink: #1A1D24;
  --ygf-slate: #5B6472;
  --ygf-parchment: #FAF7F0;
  --ygf-parchment-deep: #F2EDE0;
  --ygf-surface: #FFFFFF;
  --ygf-stone: #E6E2D6;
  --ygf-stone-soft: #EFEBDF;

  /* Functional */
  --ygf-success: #2E6F4A;
  --ygf-error: #9B2C2C;
  --ygf-info: #2B5A8C;

  /* Type scale */
  --ygf-font-serif: "Tiempos Headline", "Source Serif Pro", "Charter", Georgia, serif;
  --ygf-font-sans: "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ygf-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* TIGHTER spacing scale for content-site density */
  --ygf-space-3xs: 0.25rem;
  --ygf-space-2xs: 0.5rem;
  --ygf-space-xs:  0.625rem;
  --ygf-space-sm:  0.875rem;
  --ygf-space-md:  1.25rem;
  --ygf-space-lg:  1.75rem;
  --ygf-space-xl:  2.5rem;
  --ygf-space-2xl: 3.5rem;
  --ygf-space-3xl: 5rem;

  /* Other */
  --ygf-radius-sm: 4px;
  --ygf-radius-md: 8px;
  --ygf-radius-lg: 16px;
  --ygf-hairline: 1px solid var(--ygf-stone);
  --ygf-hairline-dark: 1px solid rgba(255,255,255,0.12);
  --ygf-shadow-card: 0 1px 2px rgba(15,31,61,0.04), 0 8px 32px rgba(15,31,61,0.06);
  --ygf-shadow-lift: 0 4px 12px rgba(15,31,61,0.08), 0 20px 60px rgba(15,31,61,0.12);
  --ygf-shadow-focus: 0 0 0 4px rgba(184,137,58,0.20);

  /* Motion */
  --ygf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ygf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ygf-dur-fast: 180ms;
  --ygf-dur-med:  280ms;
  --ygf-dur-slow: 520ms;
}

/* --------------------------------------------------------------------------
   2. PAGE BASE
   -------------------------------------------------------------------------- */
.ygf-page {
  background: var(--ygf-parchment);
  color: var(--ygf-ink);
  font-family: var(--ygf-font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ygf-page ::selection {
  background: var(--ygf-gold);
  color: var(--ygf-midnight);
}

.ygf-page h1,
.ygf-page h2,
.ygf-page h3 {
  font-family: var(--ygf-font-serif);
  color: var(--ygf-midnight);
  letter-spacing: -0.015em;
  line-height: 1.15;
  font-weight: 500;
}

.ygf-page h1 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0 0 var(--ygf-space-sm);
}

.ygf-page h2 {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  margin: 0 0 var(--ygf-space-sm);
}

.ygf-page h3 {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  letter-spacing: -0.01em;
  margin: 0 0 var(--ygf-space-2xs);
}

.ygf-page h4 {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-family: var(--ygf-font-sans);
  text-transform: uppercase;
  color: var(--ygf-gold-deep);
  margin: 0 0 var(--ygf-space-2xs);
}

.ygf-page p {
  margin: 0 0 var(--ygf-space-sm);
  max-width: 64ch;
}

.ygf-page p:last-child { margin-bottom: 0; }

.ygf-page a {
  color: var(--ygf-midnight);
  text-decoration: underline;
  text-decoration-color: var(--ygf-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--ygf-dur-fast) var(--ygf-ease),
              text-decoration-color var(--ygf-dur-fast) var(--ygf-ease);
}

.ygf-page a:hover {
  color: var(--ygf-gold-deep);
  text-decoration-color: var(--ygf-gold-deep);
}

.ygf-page strong { font-weight: 600; color: var(--ygf-midnight); }

/* --------------------------------------------------------------------------
   3. KILL WORDPRESS LAYOUT GAPS
   Strip Gutenberg's auto-applied margin-block on direct children. We control
   rhythm via component spacing instead.
   -------------------------------------------------------------------------- */
.ygf-page .wp-block-group.is-layout-flow > * + *,
.ygf-page .wp-block-group.is-layout-constrained > * + * {
  margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   4. SECTIONS — TIGHT padding
   -------------------------------------------------------------------------- */
.ygf-page .ygf-section {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem);
  position: relative;
}

.ygf-page .ygf-section--tight  { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.ygf-page .ygf-section--loose  { padding-block: clamp(3rem, 5vw, 4.5rem); }

.ygf-page .ygf-section--dark {
  background: var(--ygf-midnight);
  color: var(--ygf-parchment);
}

.ygf-page .ygf-section--dark h1,
.ygf-page .ygf-section--dark h2,
.ygf-page .ygf-section--dark h3 { color: var(--ygf-parchment); }

.ygf-page .ygf-section--dark h4 { color: var(--ygf-gold); }
.ygf-page .ygf-section--dark p { color: rgba(250,247,240,0.82); }
.ygf-page .ygf-section--dark strong { color: var(--ygf-parchment); }
.ygf-page .ygf-section--dark a {
  color: var(--ygf-parchment);
  text-decoration-color: var(--ygf-gold);
}

.ygf-page .ygf-section--cream { background: var(--ygf-parchment-deep); }
.ygf-page .ygf-section--surface { background: var(--ygf-surface); }

.ygf-page .ygf-container {
  max-width: 1140px;
  margin-inline: auto;
}

.ygf-page .ygf-container--narrow  { max-width: 720px; }
.ygf-page .ygf-container--reading { max-width: 640px; }

/* --------------------------------------------------------------------------
   5. EYEBROW
   -------------------------------------------------------------------------- */
.ygf-page .ygf-eyebrow {
  font-family: var(--ygf-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ygf-gold-deep);
  margin: 0 0 var(--ygf-space-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--ygf-space-2xs);
  flex-wrap: nowrap;
  max-width: 100%;
}

.ygf-page .ygf-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--ygf-gold);
  flex-shrink: 0;
}

.ygf-page .ygf-section--dark .ygf-eyebrow,
.ygf-page .ygf-hero .ygf-eyebrow {
  color: var(--ygf-gold);
}

/* --------------------------------------------------------------------------
   6. HERO — Seal positioned absolutely
   The grid approach failed because WordPress wraps inner Groups in extra
   containers, severing parent-child relationships. Instead, the hero is a
   positioned context and the seal is absolutely positioned in the right
   half. Text content flows naturally in the left half.
   -------------------------------------------------------------------------- */
.ygf-page .ygf-hero {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--ygf-midnight);
  color: var(--ygf-parchment);
  overflow: hidden;
  isolation: isolate;
}

.ygf-page .ygf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 85% 30%, rgba(184,137,58,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 110%, rgba(27,45,82,0.6) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
}

.ygf-page .ygf-hero::after {
  content: "";
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ygf-gold) 20%, var(--ygf-gold) 80%, transparent);
  opacity: 0.4;
  z-index: 1;
}

.ygf-page .ygf-hero__inner {
  max-width: 1140px;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

/* On wide screens, constrain text content so the seal has room on the right */
@media (min-width: 861px) {
  .ygf-page .ygf-hero__inner > .wp-block-group:first-child,
  .ygf-page .ygf-hero__inner > div:first-child {
    max-width: 58%;
  }
}

.ygf-page .ygf-hero h1 {
  color: var(--ygf-parchment);
  max-width: 18ch;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin: 0 0 var(--ygf-space-sm);
}

.ygf-page .ygf-hero h1 em {
  font-style: italic;
  color: var(--ygf-gold);
  font-weight: 400;
}

.ygf-page .ygf-hero__lede {
  font-family: var(--ygf-font-serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  max-width: 44ch;
  color: rgba(250,247,240,0.85);
  margin: 0 0 var(--ygf-space-md);
}

.ygf-page .ygf-hero .wp-block-buttons {
  margin-top: var(--ygf-space-md);
  margin-bottom: 0;
}

/* Hero meta strip — horizontal flex */
.ygf-page .ygf-hero__meta,
.ygf-page .ygf-hero__meta.wp-block-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: var(--ygf-space-lg);
  padding-top: var(--ygf-space-md);
  border-top: var(--ygf-hairline-dark);
}

.ygf-page .ygf-hero__meta-item {
  font-size: 0.8125rem;
  color: rgba(250,247,240,0.7);
  margin: 0;
  flex: 0 1 auto;
}

.ygf-page .ygf-hero__meta-item strong {
  display: block;
  font-family: var(--ygf-font-serif);
  font-size: 1.5rem;
  color: var(--ygf-gold);
  font-weight: 400;
  margin-bottom: 0.1em;
  line-height: 1;
}

/* SEAL — absolutely positioned in the right half of the hero */
.ygf-page .ygf-seal {
  position: absolute;
  top: 50%;
  right: clamp(2rem, 5vw, 5rem);
  transform: translateY(-50%);
  width: clamp(180px, 22vw, 260px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  z-index: 1;
  pointer-events: none;
}

.ygf-page .ygf-seal::before,
.ygf-page .ygf-seal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--ygf-gold);
  opacity: 0.45;
}

.ygf-page .ygf-seal::after {
  inset: 12%;
  opacity: 0.7;
}

.ygf-page .ygf-seal__mark {
  font-family: var(--ygf-font-serif);
  font-style: italic;
  color: var(--ygf-gold);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  font-weight: 400;
}

.ygf-page .ygf-seal__label {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ygf-gold);
  white-space: nowrap;
}

/* Hide seal on mobile — text takes full width */
@media (max-width: 860px) {
  .ygf-page .ygf-seal { display: none; }
  .ygf-page .ygf-hero__inner > .wp-block-group:first-child,
  .ygf-page .ygf-hero__inner > div:first-child { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.ygf-page .wp-block-buttons {
  gap: var(--ygf-space-xs);
}

.ygf-page .wp-block-button__link {
  font-family: var(--ygf-font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  padding: 0.75em 1.5em;
  border-radius: 999px;
  transition: all var(--ygf-dur-med) var(--ygf-ease);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 1.5px solid transparent;
  line-height: 1;
}

.ygf-page .wp-block-button__link::after {
  content: "→";
  font-size: 1.05em;
  transition: transform var(--ygf-dur-med) var(--ygf-ease-out);
}

.ygf-page .wp-block-button__link:hover::after { transform: translateX(3px); }

/* Primary — gold */
.ygf-page .wp-block-button:not(.is-style-outline):not(.is-style-ghost) .wp-block-button__link {
  background: var(--ygf-gold);
  color: var(--ygf-midnight);
  border-color: var(--ygf-gold);
}

.ygf-page .wp-block-button:not(.is-style-outline):not(.is-style-ghost) .wp-block-button__link:hover {
  background: var(--ygf-gold-deep);
  border-color: var(--ygf-gold-deep);
  color: var(--ygf-parchment);
  transform: translateY(-1px);
  box-shadow: var(--ygf-shadow-lift);
}

/* Outline button — default (light bg) */
.ygf-page .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ygf-midnight);
  border-color: var(--ygf-midnight);
}

.ygf-page .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--ygf-midnight);
  color: var(--ygf-parchment);
  border-color: var(--ygf-midnight);
}

/* Outline button — dark bg (hero + dark sections) */
.ygf-page .ygf-hero .wp-block-button.is-style-outline .wp-block-button__link,
.ygf-page .ygf-section--dark .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ygf-parchment) !important;
  border-color: rgba(250,247,240,0.5);
}

.ygf-page .ygf-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.ygf-page .ygf-section--dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--ygf-parchment);
  color: var(--ygf-midnight) !important;
  border-color: var(--ygf-parchment);
}

/* --------------------------------------------------------------------------
   8. SECTION HEAD
   -------------------------------------------------------------------------- */
.ygf-page .ygf-section-head {
  margin-bottom: var(--ygf-space-md);
  max-width: 720px;
}

.ygf-page .ygf-section-head > * + * {
  margin-top: var(--ygf-space-xs);
}

.ygf-page .ygf-section-head h2 { margin: 0; }

/* --------------------------------------------------------------------------
   9. LEDE PARAGRAPH
   -------------------------------------------------------------------------- */
.ygf-page .ygf-lede,
.ygf-page p.ygf-lede {
  font-family: var(--ygf-font-serif);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--ygf-midnight);
  font-weight: 400;
  max-width: 56ch;
  margin: 0 0 var(--ygf-space-md);
}

.ygf-page .ygf-section--dark .ygf-lede,
.ygf-page .ygf-section--dark p.ygf-lede {
  color: var(--ygf-parchment);
}

/* --------------------------------------------------------------------------
   10. PILLARS
   -------------------------------------------------------------------------- */
.ygf-page .ygf-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ygf-space-md);
  margin: var(--ygf-space-md) 0 0;
}

.ygf-page .ygf-pillar {
  background: var(--ygf-surface);
  padding: var(--ygf-space-md) var(--ygf-space-lg) var(--ygf-space-lg);
  border-radius: var(--ygf-radius-md);
  border: var(--ygf-hairline);
  position: relative;
  transition: transform var(--ygf-dur-med) var(--ygf-ease),
              box-shadow var(--ygf-dur-med) var(--ygf-ease);
}

.ygf-page .ygf-pillar:hover {
  transform: translateY(-2px);
  box-shadow: var(--ygf-shadow-lift);
}

.ygf-page .ygf-pillar::before {
  content: "";
  position: absolute;
  top: var(--ygf-space-md);
  left: var(--ygf-space-lg);
  width: 32px;
  height: 2px;
  background: var(--ygf-gold);
}

.ygf-page .ygf-pillar h4 {
  margin: var(--ygf-space-sm) 0 var(--ygf-space-2xs);
}

.ygf-page .ygf-pillar h3 {
  margin: 0 0 var(--ygf-space-2xs);
  font-size: 1.1875rem;
}

.ygf-page .ygf-pillar p {
  color: var(--ygf-slate);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   11. STEPS
   -------------------------------------------------------------------------- */
.ygf-page .ygf-steps {
  counter-reset: ygf-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ygf-space-sm);
  margin: var(--ygf-space-md) 0 0;
}

.ygf-page .ygf-step {
  background: var(--ygf-surface);
  padding: var(--ygf-space-md) var(--ygf-space-lg);
  border-radius: var(--ygf-radius-md);
  border: var(--ygf-hairline);
  counter-increment: ygf-step;
}

.ygf-page .ygf-step::before {
  content: counter(ygf-step, decimal-leading-zero);
  font-family: var(--ygf-font-serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--ygf-gold);
  display: block;
  line-height: 1;
  margin-bottom: var(--ygf-space-2xs);
}

.ygf-page .ygf-step h4 {
  color: var(--ygf-midnight);
  text-transform: none;
  letter-spacing: -0.01em;
  font-family: var(--ygf-font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 var(--ygf-space-3xs);
}

.ygf-page .ygf-step p {
  margin: 0;
  color: var(--ygf-slate);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.ygf-page .ygf-section--dark .ygf-step {
  background: var(--ygf-midnight-soft);
  border-color: rgba(255,255,255,0.08);
}

.ygf-page .ygf-section--dark .ygf-step h4 { color: var(--ygf-parchment); }
.ygf-page .ygf-section--dark .ygf-step p { color: rgba(250,247,240,0.7); }

/* --------------------------------------------------------------------------
   12. COMPARE GRID
   -------------------------------------------------------------------------- */
.ygf-page .ygf-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ygf-space-sm);
  margin: var(--ygf-space-md) 0 0;
}

@media (max-width: 720px) {
  .ygf-page .ygf-compare { grid-template-columns: 1fr; }
}

.ygf-page .ygf-compare__panel {
  padding: var(--ygf-space-md) var(--ygf-space-lg);
  border-radius: var(--ygf-radius-md);
  border: var(--ygf-hairline);
  background: var(--ygf-surface);
}

.ygf-page .ygf-compare__panel--is { border-left: 3px solid var(--ygf-success); }
.ygf-page .ygf-compare__panel--isnt { border-left: 3px solid var(--ygf-stone); background: var(--ygf-stone-soft); }

.ygf-page .ygf-compare__panel h3 {
  font-size: 0.8125rem;
  font-family: var(--ygf-font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ygf-slate);
  margin: 0 0 var(--ygf-space-sm);
}

.ygf-page .ygf-compare__panel--is h3 { color: var(--ygf-success); }

.ygf-page .ygf-compare__panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ygf-page .ygf-compare__panel li {
  padding: var(--ygf-space-2xs) 0;
  border-top: 1px dashed var(--ygf-stone);
  font-size: 0.9375rem;
  display: flex;
  gap: var(--ygf-space-xs);
  align-items: flex-start;
  line-height: 1.5;
}

.ygf-page .ygf-compare__panel li:first-child { border-top: 0; }

.ygf-page .ygf-compare__panel li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: 2px;
}

.ygf-page .ygf-compare__panel--is li::before {
  background: var(--ygf-success);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.5 L7.5 12.5 L13.5 6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ygf-page .ygf-compare__panel--isnt li::before {
  background: var(--ygf-stone);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 6 L12 12 M12 6 L6 12' stroke='%235B6472' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   13. PRINCIPLES
   -------------------------------------------------------------------------- */
.ygf-page .ygf-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border-top: var(--ygf-hairline);
  border-left: var(--ygf-hairline);
  margin: var(--ygf-space-md) 0 0;
}

.ygf-page .ygf-principle {
  padding: var(--ygf-space-md) var(--ygf-space-lg);
  border-right: var(--ygf-hairline);
  border-bottom: var(--ygf-hairline);
  background: var(--ygf-surface);
}

.ygf-page .ygf-principle__num {
  font-family: var(--ygf-font-serif);
  font-style: italic;
  color: var(--ygf-gold);
  font-size: 0.875rem;
  margin-bottom: var(--ygf-space-3xs);
  display: block;
}

.ygf-page .ygf-principle h4 {
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--ygf-midnight);
  font-family: var(--ygf-font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  margin: 0 0 var(--ygf-space-3xs);
}

.ygf-page .ygf-principle p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ygf-slate);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   14. ROLES
   -------------------------------------------------------------------------- */
.ygf-page .ygf-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ygf-space-sm);
  margin: var(--ygf-space-md) 0 0;
}

.ygf-page .ygf-role {
  background: var(--ygf-surface);
  padding: var(--ygf-space-md) var(--ygf-space-lg);
  border-radius: var(--ygf-radius-md);
  border: var(--ygf-hairline);
}

.ygf-page .ygf-role__tag {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ygf-gold-deep);
  background: var(--ygf-stone-soft);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: var(--ygf-space-2xs);
  font-weight: 600;
}

.ygf-page .ygf-role h3 {
  font-family: var(--ygf-font-serif);
  font-size: 1.25rem;
  margin: 0 0 var(--ygf-space-2xs);
}

.ygf-page .ygf-role ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ygf-page .ygf-role li {
  padding: var(--ygf-space-2xs) 0;
  font-size: 0.9375rem;
  color: var(--ygf-slate);
  border-top: 1px solid var(--ygf-stone);
  padding-left: 1.25em;
  position: relative;
  line-height: 1.5;
}

.ygf-page .ygf-role li:first-child { border-top: 0; padding-top: 0; }

.ygf-page .ygf-role li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--ygf-gold);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   15. FLOW DIAGRAM
   -------------------------------------------------------------------------- */
.ygf-page .ygf-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ygf-space-xs);
  margin: var(--ygf-space-md) 0 0;
  position: relative;
}

@media (max-width: 920px) {
  .ygf-page .ygf-flow { grid-template-columns: 1fr; gap: var(--ygf-space-sm); }
}

.ygf-page .ygf-flow__step {
  text-align: center;
  position: relative;
}

.ygf-page .ygf-flow__step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -10px;
  top: 18px;
  color: var(--ygf-gold);
  font-size: 1.125rem;
  z-index: 1;
}

@media (max-width: 920px) {
  .ygf-page .ygf-flow__step:not(:last-child)::after {
    content: "↓";
    top: auto;
    bottom: -14px;
    right: 50%;
    transform: translateX(50%);
  }
}

.ygf-page .ygf-flow__num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ygf-surface);
  border: 1.5px solid var(--ygf-gold);
  color: var(--ygf-gold);
  display: grid;
  place-items: center;
  font-family: var(--ygf-font-serif);
  font-size: 1.0625rem;
  margin: 0 auto var(--ygf-space-2xs);
  position: relative;
  z-index: 2;
}

.ygf-page .ygf-flow__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ygf-midnight);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   16. PULL QUOTE
   -------------------------------------------------------------------------- */
.ygf-page .ygf-pullquote {
  font-family: var(--ygf-font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  color: var(--ygf-midnight);
  font-weight: 400;
  font-style: italic;
  max-width: 32ch;
  margin: 0 auto;
  position: relative;
  padding: 0 var(--ygf-space-md);
  text-align: center;
}

.ygf-page .ygf-pullquote::before,
.ygf-page .ygf-pullquote::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--ygf-gold);
  margin: var(--ygf-space-sm) auto;
}

/* --------------------------------------------------------------------------
   17. DEFINITION CARD
   -------------------------------------------------------------------------- */
.ygf-page .ygf-definition {
  background: var(--ygf-midnight);
  color: var(--ygf-parchment);
  padding: var(--ygf-space-lg);
  border-radius: var(--ygf-radius-lg);
  position: relative;
  overflow: hidden;
  margin: var(--ygf-space-md) 0;
}

.ygf-page .ygf-definition::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(184,137,58,0.2), transparent 60%);
  pointer-events: none;
}

.ygf-page .ygf-definition__term {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ygf-gold);
  margin-bottom: var(--ygf-space-2xs);
  display: block;
  position: relative;
}

.ygf-page .ygf-definition__body {
  font-family: var(--ygf-font-serif);
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  color: var(--ygf-parchment);
  max-width: 60ch;
  position: relative;
  margin: 0;
}

.ygf-page .ygf-definition__body strong { color: var(--ygf-gold); font-weight: 500; }

/* --------------------------------------------------------------------------
   18. CALLOUT
   -------------------------------------------------------------------------- */
.ygf-page .ygf-callout {
  background: var(--ygf-stone-soft);
  padding: var(--ygf-space-sm) var(--ygf-space-md);
  border-radius: var(--ygf-radius-md);
  border-left: 3px solid var(--ygf-gold);
  margin: var(--ygf-space-md) 0 0;
  font-size: 0.9375rem;
}

.ygf-page .ygf-callout p:last-child { margin-bottom: 0; }
.ygf-page .ygf-callout strong { color: var(--ygf-midnight); }

/* --------------------------------------------------------------------------
   19. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.ygf-page .ygf-faq {
  margin: var(--ygf-space-md) 0 0;
  border-top: var(--ygf-hairline);
}

.ygf-page .ygf-faq__item {
  border-bottom: var(--ygf-hairline);
}

.ygf-page .ygf-faq__q {
  width: 100%;
  background: none;
  border: 0;
  padding: var(--ygf-space-sm) 0;
  font-family: var(--ygf-font-serif);
  font-size: 1.0625rem;
  color: var(--ygf-midnight);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ygf-space-md);
  transition: color var(--ygf-dur-fast) var(--ygf-ease);
}

.ygf-page .ygf-faq__q:hover { color: var(--ygf-gold-deep); }

.ygf-page .ygf-faq__q::after {
  content: "+";
  font-size: 1.375rem;
  font-weight: 300;
  color: var(--ygf-gold);
  flex-shrink: 0;
  transition: transform var(--ygf-dur-med) var(--ygf-ease);
  line-height: 1;
}

.ygf-page .ygf-faq__item.is-open .ygf-faq__q::after { transform: rotate(45deg); }

.ygf-page .ygf-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ygf-dur-slow) var(--ygf-ease-out);
}

.ygf-page .ygf-faq__a-inner {
  padding-bottom: var(--ygf-space-sm);
  color: var(--ygf-slate);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 64ch;
}

.ygf-page .ygf-faq__item.is-open .ygf-faq__a {
  max-height: 600px;
}

/* --------------------------------------------------------------------------
   20. LIST OVERRIDES
   -------------------------------------------------------------------------- */
.ygf-page .wp-block-list {
  padding-left: 0;
  list-style: none;
  margin: 0 0 var(--ygf-space-sm);
}

.ygf-page .wp-block-list li {
  padding: var(--ygf-space-3xs) 0 var(--ygf-space-3xs) 1.5em;
  position: relative;
  line-height: 1.55;
}

.ygf-page .wp-block-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 14px;
  height: 1px;
  background: var(--ygf-gold);
}

.ygf-page ol.wp-block-list { counter-reset: ygf-ol; }

.ygf-page ol.wp-block-list li {
  counter-increment: ygf-ol;
  padding-left: 2.25em;
}

.ygf-page ol.wp-block-list li::before {
  content: counter(ygf-ol, decimal-leading-zero);
  font-family: var(--ygf-font-serif);
  color: var(--ygf-gold);
  width: auto;
  height: auto;
  background: none;
  top: 0.15em;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   21. CONTACT STRIP
   -------------------------------------------------------------------------- */
.ygf-page .ygf-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ygf-space-md);
  padding: var(--ygf-space-lg);
  background: var(--ygf-midnight);
  color: var(--ygf-parchment);
  border-radius: var(--ygf-radius-md);
  margin: var(--ygf-space-md) 0;
}

.ygf-page .ygf-contact__item h4 {
  color: var(--ygf-gold);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  margin: 0 0 var(--ygf-space-2xs);
}

.ygf-page .ygf-contact__item p {
  font-family: var(--ygf-font-serif);
  font-size: 1.0625rem;
  margin: 0;
  color: var(--ygf-parchment);
  line-height: 1.4;
}

.ygf-page .ygf-contact__item a {
  color: var(--ygf-parchment);
  text-decoration: none;
  border-bottom: 1px solid var(--ygf-gold);
  padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   22. FORMS — Gravity Forms styling
   -------------------------------------------------------------------------- */
.ygf-form-host {
  background: var(--ygf-surface);
  border-radius: var(--ygf-radius-lg);
  border: var(--ygf-hairline);
  padding: clamp(var(--ygf-space-lg), 4vw, var(--ygf-space-xl));
  box-shadow: var(--ygf-shadow-card);
  margin: var(--ygf-space-md) 0 0;
  position: relative;
}

.ygf-form-host::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--ygf-space-lg);
  width: 40px;
  height: 3px;
  background: var(--ygf-gold);
  border-radius: 0 0 2px 2px;
}

.ygf-form-host .gform_heading,
.ygf-form-host .gform_title {
  font-family: var(--ygf-font-serif);
  color: var(--ygf-midnight);
}

.ygf-form-host .gform_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ygf-space-md);
  list-style: none;
  padding: 0;
}

@media (max-width: 640px) {
  .ygf-form-host .gform_fields { grid-template-columns: 1fr; }
}

.ygf-form-host .gfield { grid-column: 1 / -1; }
.ygf-form-host .gfield--width-half { grid-column: span 1; }

@media (max-width: 640px) {
  .ygf-form-host .gfield--width-half { grid-column: 1 / -1; }
}

.ygf-form-host .gfield_label,
.ygf-form-host label {
  font-family: var(--ygf-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ygf-midnight);
  margin-bottom: var(--ygf-space-2xs);
  display: block;
}

.ygf-form-host .gfield_required {
  color: var(--ygf-gold);
  margin-left: 4px;
}

.ygf-form-host .gfield_description {
  font-size: 0.8125rem;
  color: var(--ygf-slate);
  margin-top: var(--ygf-space-2xs);
  line-height: 1.5;
}

.ygf-form-host input[type="text"],
.ygf-form-host input[type="email"],
.ygf-form-host input[type="tel"],
.ygf-form-host input[type="url"],
.ygf-form-host input[type="number"],
.ygf-form-host input[type="date"],
.ygf-form-host select,
.ygf-form-host textarea {
  width: 100%;
  padding: 0.75em 1em;
  font-family: var(--ygf-font-sans);
  font-size: 1rem;
  color: var(--ygf-ink);
  background: var(--ygf-parchment);
  border: 1.5px solid var(--ygf-stone);
  border-radius: var(--ygf-radius-sm);
  transition: border-color var(--ygf-dur-fast) var(--ygf-ease),
              background var(--ygf-dur-fast) var(--ygf-ease),
              box-shadow var(--ygf-dur-fast) var(--ygf-ease);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}

.ygf-form-host textarea {
  min-height: 130px;
  resize: vertical;
}

.ygf-form-host select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6 L8 11 L13 6' stroke='%230F1F3D' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 14px;
  padding-right: 2.5em;
}

.ygf-form-host input::placeholder,
.ygf-form-host textarea::placeholder {
  color: var(--ygf-slate);
  opacity: 0.7;
}

.ygf-form-host input:focus,
.ygf-form-host select:focus,
.ygf-form-host textarea:focus {
  outline: none;
  border-color: var(--ygf-gold);
  background: var(--ygf-surface);
  box-shadow: var(--ygf-shadow-focus);
}

.ygf-form-host input:hover:not(:focus),
.ygf-form-host select:hover:not(:focus),
.ygf-form-host textarea:hover:not(:focus) {
  border-color: var(--ygf-slate);
}

.ygf-form-host input.has-value,
.ygf-form-host select.has-value,
.ygf-form-host textarea.has-value {
  background: var(--ygf-surface);
  border-color: var(--ygf-stone);
}

.ygf-form-host .gfield_radio,
.ygf-form-host .gfield_checkbox {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ygf-space-2xs);
}

.ygf-form-host .gfield_radio li,
.ygf-form-host .gfield_checkbox li,
.ygf-form-host .gchoice {
  border: 0;
  padding: 0;
}

.ygf-form-host .gfield_radio label,
.ygf-form-host .gfield_checkbox label,
.ygf-form-host .gchoice label {
  display: flex;
  align-items: center;
  gap: var(--ygf-space-xs);
  padding: var(--ygf-space-2xs) var(--ygf-space-sm);
  background: var(--ygf-parchment);
  border: 1.5px solid var(--ygf-stone);
  border-radius: var(--ygf-radius-sm);
  cursor: pointer;
  font-size: 0.9375rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ygf-ink);
  transition: all var(--ygf-dur-fast) var(--ygf-ease);
}

.ygf-form-host .gfield_radio label:hover,
.ygf-form-host .gfield_checkbox label:hover,
.ygf-form-host .gchoice label:hover {
  border-color: var(--ygf-slate);
  background: var(--ygf-surface);
}

.ygf-form-host input[type="radio"],
.ygf-form-host input[type="checkbox"] {
  flex-shrink: 0;
  accent-color: var(--ygf-gold);
  width: 18px;
  height: 18px;
  margin: 0;
}

.ygf-form-host input[type="radio"]:checked + label,
.ygf-form-host input[type="checkbox"]:checked + label,
.ygf-form-host .gchoice input:checked ~ label {
  border-color: var(--ygf-gold);
  background: rgba(184,137,58,0.06);
  color: var(--ygf-midnight);
  font-weight: 500;
}

.ygf-form-host .gfield_error input,
.ygf-form-host .gfield_error select,
.ygf-form-host .gfield_error textarea,
.ygf-form-host .gfield.gfield_error {
  border-color: var(--ygf-error) !important;
}

.ygf-form-host .gfield_validation_message,
.ygf-form-host .validation_message {
  color: var(--ygf-error);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ygf-form-host .gfield_validation_message::before,
.ygf-form-host .validation_message::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  background: var(--ygf-error);
  color: var(--ygf-parchment);
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
}

.ygf-form-host .gform_validation_errors {
  background: rgba(155,44,44,0.08);
  border: 1px solid rgba(155,44,44,0.2);
  border-radius: var(--ygf-radius-sm);
  padding: var(--ygf-space-sm) var(--ygf-space-md);
  margin-bottom: var(--ygf-space-md);
  color: var(--ygf-error);
}

.ygf-form-host .gform_footer,
.ygf-form-host .gform_page_footer {
  margin-top: var(--ygf-space-md);
  padding-top: var(--ygf-space-sm);
  border-top: var(--ygf-hairline);
  display: flex;
  justify-content: flex-end;
  gap: var(--ygf-space-sm);
  flex-wrap: wrap;
}

.ygf-form-host .gform_button,
.ygf-form-host .gform_next_button,
.ygf-form-host .gform_previous_button,
.ygf-form-host button[type="submit"] {
  background: var(--ygf-gold);
  color: var(--ygf-midnight);
  border: 1.5px solid var(--ygf-gold);
  border-radius: 999px;
  padding: 0.85em 1.85em;
  font-family: var(--ygf-font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all var(--ygf-dur-med) var(--ygf-ease);
  line-height: 1;
}

.ygf-form-host .gform_button:hover,
.ygf-form-host .gform_next_button:hover,
.ygf-form-host button[type="submit"]:hover {
  background: var(--ygf-gold-deep);
  border-color: var(--ygf-gold-deep);
  color: var(--ygf-parchment);
  transform: translateY(-1px);
  box-shadow: var(--ygf-shadow-lift);
}

.ygf-form-host .gform_previous_button {
  background: transparent;
  color: var(--ygf-midnight);
  border-color: var(--ygf-stone);
}

.ygf-form-host .gform_previous_button:hover {
  background: var(--ygf-parchment-deep);
  border-color: var(--ygf-slate);
  color: var(--ygf-midnight);
  transform: none;
  box-shadow: none;
}

.ygf-form-host .gf_page_steps {
  display: flex;
  align-items: center;
  gap: var(--ygf-space-sm);
  margin-bottom: var(--ygf-space-md);
  padding-bottom: var(--ygf-space-sm);
  border-bottom: var(--ygf-hairline);
  list-style: none;
  flex-wrap: wrap;
}

.ygf-form-host .gf_step {
  display: flex;
  align-items: center;
  gap: var(--ygf-space-2xs);
  font-size: 0.8125rem;
  color: var(--ygf-slate);
  padding: 0;
}

.ygf-form-host .gf_step_number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ygf-stone-soft);
  color: var(--ygf-slate);
  font-family: var(--ygf-font-serif);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--ygf-dur-med) var(--ygf-ease);
}

.ygf-form-host .gf_step_active .gf_step_number {
  background: var(--ygf-midnight);
  color: var(--ygf-gold);
}

.ygf-form-host .gf_step_completed .gf_step_number {
  background: var(--ygf-gold);
  color: var(--ygf-midnight);
}

.ygf-form-host .gf_step_active .gf_step_label {
  color: var(--ygf-midnight);
  font-weight: 600;
}

.ygf-form-host .gf_step:not(:last-child)::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--ygf-stone);
  margin-left: var(--ygf-space-2xs);
}

.ygf-form-host .gform_confirmation_message,
.ygf-form-host .gform_confirmation_wrapper {
  padding: var(--ygf-space-lg);
  background: rgba(46,111,74,0.06);
  border: 1px solid rgba(46,111,74,0.2);
  border-radius: var(--ygf-radius-md);
  color: var(--ygf-midnight);
  font-family: var(--ygf-font-serif);
  font-size: 1.125rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   23. ANIMATIONS
   -------------------------------------------------------------------------- */
.ygf-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--ygf-dur-slow) var(--ygf-ease-out),
              transform var(--ygf-dur-slow) var(--ygf-ease-out);
}

.ygf-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ygf-reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------------
   24. RESPONSIVE FINE-TUNING
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .ygf-page .ygf-section { padding: var(--ygf-space-lg) var(--ygf-space-sm); }
  .ygf-page .ygf-pillars,
  .ygf-page .ygf-steps,
  .ygf-page .ygf-roles { grid-template-columns: 1fr; }
}

/* Print */
@media print {
  .ygf-page { background: white; }
  .ygf-hero { background: white; color: black; padding: 1rem 0; }
  .ygf-section--dark { background: white; color: black; }
  .ygf-form-host { box-shadow: none; }
  .ygf-seal { display: none; }
}

/* ==========================================================================
   YESHIVA GIVING FUND — Targeted overrides (v2.1)
   Append AFTER existing v2.0 CSS. Fixes WordPress + theme inner-container
   wrapping that the v2.0 selectors don't account for.
   ========================================================================== */

/* ----- 1. Strip theme's __inner-container constraints inside .ygf-page ---- */
/* Theme applies max-width: 1350px and margin: auto to inner-containers.
   Inside .ygf-page we want sections to control their own width via
   .ygf-section + .ygf-container, so neutralize the theme's behavior. */
.ygf-page > .wp-block-group__inner-container,
.ygf-page .ygf-hero > .wp-block-group__inner-container,
.ygf-page .ygf-section > .wp-block-group__inner-container {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Inner Groups inside hero/sections — let our component classes control */
.ygf-page .ygf-hero__inner > .wp-block-group__inner-container {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}

/* All inner-containers stripped of WP's auto-gap behavior */
.ygf-page .wp-block-group__inner-container.is-layout-flow > * + *,
.ygf-page .wp-block-group__inner-container.is-layout-constrained > * + * {
  margin-block-start: 0;
}

/* ----- 2. HERO: tighten height and align content properly -------------- */
.ygf-page .ygf-hero {
  /* Override the v2.0 rule to prevent vertical centering of content
     that the theme might be applying via flex or grid */
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) clamp(2rem, 4vw, 3rem) !important;
  min-height: auto !important;
  display: block !important;
}

/* Make .ygf-hero__inner the actual layout context, full width within its padding */
.ygf-page .ygf-hero__inner {
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* The inner-container WP wraps around our content: make it transparent layout-wise */
.ygf-page .ygf-hero__inner > .wp-block-group__inner-container,
.ygf-page .ygf-hero > .wp-block-group__inner-container > .ygf-hero__inner {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* On desktop, constrain just the text content group to 58% */
@media (min-width: 861px) {
  .ygf-page .ygf-hero__inner > .wp-block-group__inner-container > .wp-block-group:not(.ygf-seal) {
    max-width: 58%;
  }
}

@media (max-width: 860px) {
  .ygf-page .ygf-hero__inner > .wp-block-group__inner-container > .wp-block-group:not(.ygf-seal) {
    max-width: 100%;
  }
}

/* ----- 3. SEAL: position relative to .ygf-hero__inner, not .ygf-hero ---- */
/* The seal sits next to text content. Anchor it to the content area
   rather than the hero (which may have extra padding). */
.ygf-page .ygf-seal {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 4vw, 3rem);
  transform: translateY(-50%);
  width: clamp(180px, 22vw, 240px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  z-index: 1;
  pointer-events: none;
}

/* Hide seal on narrow screens */
@media (max-width: 860px) {
  .ygf-page .ygf-seal { display: none !important; }
}

/* ----- 4. SECTIONS: strip theme padding/margins on inner-containers ---- */
.ygf-page .ygf-section > .wp-block-group__inner-container > .ygf-container,
.ygf-page .ygf-section .ygf-container {
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
}

.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ----- 5. HERO META: ensure horizontal flex even with extra wrapper ---- */
.ygf-page .ygf-hero__meta,
.ygf-page .ygf-hero__meta.wp-block-group,
.ygf-page .ygf-hero__meta > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.ygf-page .ygf-hero__meta {
  margin-top: var(--ygf-space-lg);
  padding-top: var(--ygf-space-md);
  border-top: var(--ygf-hairline-dark);
}

/* ----- 6. Section heads, pillars, etc — ensure they don't get re-wrapped weirdly */
.ygf-page .ygf-pillars,
.ygf-page .ygf-steps,
.ygf-page .ygf-roles,
.ygf-page .ygf-compare,
.ygf-page .ygf-principles,
.ygf-page .ygf-flow {
  width: 100%;
}

/* ==========================================================================
   YESHIVA GIVING FUND — Polish patch (v2.2)
   Append AFTER v2.1 overrides. Addresses:
   - Hero meta strip "stat numbers" too large; gold border-line extending under seal
   - .ygf-container--narrow not narrowing (theme inner-container overriding)
   - Definition card too wide + gold gradient too intense
   - Process flow heading vs flow alignment
   - Sharp 90° corners on dark sections against cream background
   - CTA section content not centered as intended
   ========================================================================== */

/* ---------- 1. HERO META STRIP — restrained, contained ---------- */
/* The big serif numbers were competing with the hero headline. Pull them back
   to a tasteful caption scale, and constrain the border-top so it doesn't
   extend under the seal. */
.ygf-page .ygf-hero__meta-item strong {
  font-size: 1.0625rem !important;  /* down from 1.5rem */
  font-family: var(--ygf-font-serif);
  color: var(--ygf-gold);
  font-weight: 500;
  font-style: normal;
  display: block;
  margin-bottom: 0.1em;
  line-height: 1.2;
}

.ygf-page .ygf-hero__meta-item {
  font-size: 0.75rem;
  color: rgba(250,247,240,0.6);
  letter-spacing: 0.02em;
  flex: 1 1 auto;
  min-width: 0;
}

/* Keep meta strip inside text column (58% width). To fit 3 items there,
   shrink the strong numbers and tighten gap. */
@media (min-width: 861px) {
  .ygf-page .ygf-hero__meta,
  .ygf-page .ygf-hero__meta.wp-block-group {
    max-width: 100%;
    margin-top: var(--ygf-space-md);
    padding-top: var(--ygf-space-sm);
    gap: var(--ygf-space-md) !important;
  }
  .ygf-page .ygf-hero__meta-item {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* Even smaller stat values so they fit and feel proportionate */
.ygf-page .ygf-hero__meta-item strong {
  font-size: 0.9375rem !important;
  letter-spacing: 0.02em;
}

/* ---------- 2. FIX .ygf-container--narrow (theme is overriding) ---------- */
/* WordPress's inner-container wrapper at max-width: 1350px is winning. Force
   our narrow container to actually be narrow inside dark sections. */
.ygf-page .ygf-section .ygf-container--narrow,
.ygf-page .ygf-section--dark .ygf-container--narrow,
.ygf-page .ygf-section--cream .ygf-container--narrow,
.ygf-page .ygf-section--surface .ygf-container--narrow {
  max-width: 760px !important;
  margin-inline: auto !important;
}

.ygf-page .ygf-section .ygf-container--reading {
  max-width: 640px !important;
  margin-inline: auto !important;
}

/* And ensure their inner-container wrappers don't push them back out */
.ygf-page .ygf-container--narrow > .wp-block-group__inner-container,
.ygf-page .ygf-container--reading > .wp-block-group__inner-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- 3. DEFINITION CARD — softer gradient, contained ---------- */
.ygf-page .ygf-definition {
  padding: var(--ygf-space-lg) var(--ygf-space-xl);
  max-width: 100%;
  margin: var(--ygf-space-md) 0 0;
  background: linear-gradient(135deg, var(--ygf-midnight-soft) 0%, var(--ygf-midnight) 60%);
}

.ygf-page .ygf-definition::before {
  /* Softer gradient — was too intense before */
  background: radial-gradient(ellipse at 90% 10%, rgba(184,137,58,0.10), transparent 50%);
}

/* ---------- 4. PROCESS FLOW — center heading to match flow ---------- */
/* When the flow is full-width but the heading is narrow, they look disconnected.
   Make the section head full-width-friendly inside this section. */
.ygf-page .ygf-section--cream .ygf-section-head {
  max-width: 100%;
  text-align: center;
  margin-bottom: var(--ygf-space-xl);
  margin-inline: auto;
}

.ygf-page .ygf-section--cream .ygf-section-head .ygf-eyebrow {
  justify-content: center;
}

/* Reduce flow's vertical empty space */
.ygf-page .ygf-flow {
  margin: var(--ygf-space-md) auto var(--ygf-space-sm);
  max-width: 1000px;
}

.ygf-page .ygf-section--cream {
  padding-block: var(--ygf-space-xl);
}

/* ---------- 5. ROUNDED SECTION TRANSITIONS ---------- */
/* Soften the hard corners at the very top (hero) and very bottom (final CTA)
   so they don't slam against the parchment background with sharp 90° edges.
   Use generous border-radius for an editorial, intentional feel. */

/* Hero — round the top corners (it sits at the top of the page) */
.ygf-page .ygf-hero {
  border-radius: 24px 24px 0 0;
  /* Keep the bottom sharp because content section meets it directly */
}

/* The LAST dark section on each page (the CTA) — round the bottom corners */
.ygf-page .ygf-section--dark:last-of-type,
.ygf-page > .wp-block-group__inner-container > .ygf-section--dark:last-child,
.ygf-page > .ygf-section--dark:last-child {
  border-radius: 0 0 24px 24px;
}

/* Reduce on small screens */
@media (max-width: 640px) {
  .ygf-page .ygf-hero { border-radius: 12px 12px 0 0; }
  .ygf-page .ygf-section--dark:last-of-type,
  .ygf-page > .wp-block-group__inner-container > .ygf-section--dark:last-child,
  .ygf-page > .ygf-section--dark:last-child { border-radius: 0 0 12px 12px; }
}

/* The subtle top-edge gradient on dark sections — keep but make it lighter */
.ygf-page .ygf-section--dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15), transparent);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

.ygf-page .ygf-section--dark {
  position: relative;
}

/* Don't add the top-fade on the hero (it has its own gradient overlay) */
.ygf-page .ygf-hero::before {
  /* Keep the existing radial gradient — don't add a fade */
}

/* For the hero ::after gold line, keep it but constrain to content width */
.ygf-page .ygf-hero::after {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(1140px, calc(100% - 4rem));
  max-width: 1140px;
}

/* ---------- 6. CTA SECTION (dark, bottom of page) ---------- */
/* The "Build a scholarship program" section had content at indent
   without it looking intentional. Center the content within the narrow
   container so it reads as deliberate. */
.ygf-page .ygf-section--dark .ygf-container--narrow {
  text-align: left;  /* keep left-aligned, but */
}

.ygf-page .ygf-section--dark .ygf-container--narrow .wp-block-buttons {
  margin-top: var(--ygf-space-md);
}

/* Hide the ::before overlay on the very first section if it's the hero
   (we don't need a top fade on the first thing the user sees) */
.ygf-page > .ygf-hero:first-child::before,
.ygf-page > .wp-block-group__inner-container > .ygf-hero:first-child::before {
  /* Keep the existing radial gradient overlay; do not override */
}

/* ---------- 7. HERO BOTTOM RULE — keep the gold rule but make it tasteful ---------- */
.ygf-page .ygf-hero::after {
  background: linear-gradient(90deg, transparent, rgba(184,137,58,0.5) 30%, rgba(184,137,58,0.5) 70%, transparent);
  opacity: 0.6;
}

/* ---------- 8. EXTRA POLISH ---------- */
/* The dark CTA section's heading "Build a scholarship program..." has weird
   indent because the inner-container is wrapping. Force its position. */
.ygf-page .ygf-section--dark .ygf-container--narrow h2 {
  margin-top: 0;
  margin-left: 0;
}

/* Improve pull quote area — center properly and remove blockquote default */
.ygf-page .ygf-pullquote {
  border-left: none !important;
  padding-left: var(--ygf-space-md);
  padding-right: var(--ygf-space-md);
  margin: var(--ygf-space-lg) auto;
}

/* Pillars: ensure they're not too wide individually on big screens */
.ygf-page .ygf-pillars {
  max-width: 1140px;
  margin-inline: auto;
}

/* ==========================================================================
   YESHIVA GIVING FUND — Polish v2.3
   Append AFTER v2.2 polish. Fixes:
   - Inconsistent section-head alignment (some center, some left)
   - Dark section body text too low-contrast / unreadable
   - "Ready to build something durable" CTA feeling unanchored
   ========================================================================== */

/* ---------- 1. CONSISTENT LEFT ALIGNMENT FOR ALL SECTION HEADS ---------- */
/* The v2.2 patch centered cream-section heads only, creating inconsistency.
   Revert to left-aligned everywhere for the institutional editorial feel —
   the gold eyebrow rule anchors the left edge of every section. */
.ygf-page .ygf-section .ygf-section-head,
.ygf-page .ygf-section--cream .ygf-section-head,
.ygf-page .ygf-section--surface .ygf-section-head,
.ygf-page .ygf-section--dark .ygf-section-head {
  text-align: left !important;
  max-width: 720px;
  margin-inline: 0;  /* left-anchored, not centered */
  margin-bottom: var(--ygf-space-md);
}

.ygf-page .ygf-section .ygf-section-head .ygf-eyebrow,
.ygf-page .ygf-section--cream .ygf-section-head .ygf-eyebrow {
  justify-content: flex-start !important;
}

/* ---------- 2. DARK SECTION TEXT READABILITY ---------- */
/* The 0.82 opacity on body paragraphs was too dim on the deep navy background.
   Bring everything up to high-contrast parchment for readable body copy. */
.ygf-page .ygf-section--dark p,
.ygf-page .ygf-section--dark li,
.ygf-page .ygf-section--dark .ygf-lede,
.ygf-page .ygf-section--dark p.ygf-lede {
  color: var(--ygf-parchment) !important;
  opacity: 1 !important;
}

/* Slightly muted for secondary text (still readable) */
.ygf-page .ygf-section--dark .ygf-callout p,
.ygf-page .ygf-section--dark figcaption {
  color: rgba(250, 247, 240, 0.92) !important;
}

/* Hero meta still uses muted (it's caption-scale not body) */
.ygf-page .ygf-hero__meta-item {
  color: rgba(250, 247, 240, 0.7) !important;
}

/* Definition card body — full parchment for readability */
.ygf-page .ygf-definition__body {
  color: var(--ygf-parchment) !important;
  opacity: 1 !important;
}

/* Step cards inside dark sections — full parchment for prose */
.ygf-page .ygf-section--dark .ygf-step p,
.ygf-page .ygf-section--dark .ygf-role li,
.ygf-page .ygf-section--dark .ygf-pillar p {
  color: rgba(250, 247, 240, 0.92) !important;
}

/* ---------- 3. NARROW CONTAINER ANCHORING ---------- */
/* When a .ygf-container--narrow sits centered in a wide section with
   left-aligned content, all empty space ends up on the right — making
   content "cling to the left" of its centered box. Fix by left-anchoring
   the narrow container so it sits at the same left edge as all other
   page content. Empty space on the right reads as intentional breathing
   room rather than awkward gap. Consistent across ALL section types. */

.ygf-page .ygf-section .ygf-container--narrow,
.ygf-page .ygf-section--dark .ygf-container--narrow,
.ygf-page .ygf-section--cream .ygf-container--narrow,
.ygf-page .ygf-section--surface .ygf-container--narrow {
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left;
}

/* Make sure inner-container wrappers don't push back to full width */
.ygf-page .ygf-container--narrow > .wp-block-group__inner-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The CTA heading should sit tight to its eyebrow and paragraph */
.ygf-page .ygf-section--dark h2 {
  margin-bottom: var(--ygf-space-sm);
}

.ygf-page .ygf-section--dark .ygf-container--narrow > p,
.ygf-page .ygf-section--dark .ygf-container--narrow > .wp-block-group__inner-container > p {
  max-width: 60ch;
}

/* ---------- 4. CONTAINER WIDTH for non-narrow sections ---------- */
/* For pages where section heads/prose use the default 1140px container,
   keep them readable by capping prose paragraphs. */
.ygf-page .ygf-section p {
  max-width: 64ch;
}

/* Section-head prose should match heading column width */
.ygf-page .ygf-section-head p,
.ygf-page .ygf-section-head .ygf-lede {
  max-width: 56ch;
}

/* ---------- 5. SECTION 5 PROSE ON HOW IT WORKS ---------- */
/* "Oversight and continuity" had the heading at one indent and the prose at
   a deeper indent because the container had no explicit max. Force prose to
   align with the heading left edge. */
.ygf-page .ygf-section .ygf-container--narrow > p,
.ygf-page .ygf-section .ygf-container--narrow > .wp-block-group__inner-container > p {
  margin-left: 0;
  padding-left: 0;
}

/* ---------- 6. EYEBROW + HEADING TIGHTER COUPLING ---------- */
/* Make the gap between eyebrow and heading smaller so they read as a unit */
.ygf-page .ygf-section .ygf-eyebrow + h2,
.ygf-page .ygf-section .ygf-eyebrow + h3 {
  margin-top: var(--ygf-space-2xs);
}

/* Heading and lede paragraph: less gap */
.ygf-page .ygf-section h2 + p,
.ygf-page .ygf-section h2 + .ygf-lede,
.ygf-page .ygf-section h3 + p {
  margin-top: var(--ygf-space-xs);
}

/* ==========================================================================
   YESHIVA GIVING FUND — Polish v2.4
   Append AFTER v2.3 polish. Reverses one v2.3 decision and fixes a bug:
   - Narrow containers: revert to CENTERED (equal margins L/R), not left-anchored
   - Flow labels in dark sections rendering navy-on-navy (invisible)
   - Other dark-section component text colors that the v2.3 patch missed
   ========================================================================== */

/* ---------- 1. CENTER NARROW CONTAINERS (revert v2.3) ---------- */
/* When the narrow container sits at the section's left edge, the empty space
   on the right reads as awkward. Center the block so empty space is split
   evenly on both sides. Content within stays left-aligned. */
.ygf-page .ygf-section .ygf-container--narrow,
.ygf-page .ygf-section--dark .ygf-container--narrow,
.ygf-page .ygf-section--cream .ygf-container--narrow,
.ygf-page .ygf-section--surface .ygf-container--narrow {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left;
}

.ygf-page .ygf-section .ygf-container--reading,
.ygf-page .ygf-section--dark .ygf-container--reading {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Default containers also centered */
.ygf-page .ygf-section .ygf-container {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- 2. FLOW LABELS — readable in dark sections ---------- */
/* The .ygf-flow__label was hardcoded to var(--ygf-midnight). In dark
   sections that becomes navy-on-navy. Override for dark contexts. */
.ygf-page .ygf-section--dark .ygf-flow__label {
  color: var(--ygf-parchment) !important;
}

/* Flow number circles in dark sections — also need to be visible. The
   default has white background + gold border + gold number, which works
   on dark. Just ensure no inheritance issues. */
.ygf-page .ygf-section--dark .ygf-flow__num {
  background: var(--ygf-parchment);
  border-color: var(--ygf-gold);
  color: var(--ygf-gold);
}

/* Flow arrows between steps — ensure visible on dark */
.ygf-page .ygf-section--dark .ygf-flow__step:not(:last-child)::after {
  color: var(--ygf-gold);
}

/* ---------- 3. OTHER DARK-SECTION TEXT COLORS THAT MIGHT BE WRONG ---------- */
/* Catch any other component-level colors hardcoded to midnight that
   would render invisibly on dark backgrounds. */
.ygf-page .ygf-section--dark .ygf-pillar h3,
.ygf-page .ygf-section--dark .ygf-step h4,
.ygf-page .ygf-section--dark .ygf-role h3,
.ygf-page .ygf-section--dark .ygf-principle h4,
.ygf-page .ygf-section--dark .ygf-compare__panel h3,
.ygf-page .ygf-section--dark .ygf-faq__q {
  color: var(--ygf-parchment) !important;
}

/* Pillars/steps/etc. in dark sections need surface adjustments too —
   they have white background by default which is jarring against navy.
   If you have any of these in dark sections, give them the midnight-soft
   background that the v2.0 already specifies for dark steps. */
.ygf-page .ygf-section--dark .ygf-pillar,
.ygf-page .ygf-section--dark .ygf-role,
.ygf-page .ygf-section--dark .ygf-principle,
.ygf-page .ygf-section--dark .ygf-compare__panel {
  background: var(--ygf-midnight-soft) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Body prose within these dark-section components */
.ygf-page .ygf-section--dark .ygf-pillar p,
.ygf-page .ygf-section--dark .ygf-role li,
.ygf-page .ygf-section--dark .ygf-principle p,
.ygf-page .ygf-section--dark .ygf-compare__panel li {
  color: rgba(250, 247, 240, 0.92) !important;
}

/* Pillar/step eyebrow-style h4 tags in dark sections — keep gold */
.ygf-page .ygf-section--dark .ygf-pillar h4,
.ygf-page .ygf-section--dark .ygf-step h4.ygf-eyebrow {
  color: var(--ygf-gold) !important;
}

/* ---------- 4. SECTION HEADS: also center in their parent container ---------- */
/* The section-head element is constrained to 720px max. When inside a
   .ygf-container (1140px wide), it sits left-aligned by default. Now that
   narrow containers are centered, make section heads also center their block. */
.ygf-page .ygf-section .ygf-section-head {
  margin-left: auto;
  margin-right: auto;
  text-align: left;  /* content stays left-aligned inside the block */
}

/* But: if the section uses .ygf-container--narrow as its wrapper, the
   section-head doesn't need its own centering — it inherits the container's
   centering. Let the heading fill the narrow container. */
.ygf-page .ygf-container--narrow .ygf-section-head,
.ygf-page .ygf-container--narrow > .wp-block-group__inner-container > .ygf-section-head {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ==========================================================================
   YESHIVA GIVING FUND — Polish v2.5
   Append AFTER v2.4. Fixes:
   - Heading + prose that sits directly inside .ygf-container (not .ygf-container--narrow)
     was left-anchored at the wide container's left edge. Now centered.
   ========================================================================== */

/* ---------- 1. CENTER PROSE INSIDE WIDE .ygf-container ---------- */
/* When eyebrow + heading + paragraph sit as direct children of .ygf-container
   (1140px), they need their own centering to match narrow-container sections.
   Constrain their effective width and center each as a block. */

.ygf-page .ygf-section .ygf-container > .ygf-eyebrow,
.ygf-page .ygf-section .ygf-container > h2,
.ygf-page .ygf-section .ygf-container > h3,
.ygf-page .ygf-section .ygf-container > p:not(.ygf-eyebrow),
.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container > .ygf-eyebrow,
.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container > h2,
.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container > h3,
.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container > p:not(.ygf-eyebrow) {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Eyebrow uses inline-flex; centering it requires display change at block level.
   Wrap it visually by giving it the same width treatment. */
.ygf-page .ygf-section .ygf-container > .ygf-eyebrow,
.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container > .ygf-eyebrow {
  display: flex;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  justify-content: flex-start;  /* content inside stays left-aligned */
}

/* ---------- 2. KEEP COMPONENT GRIDS FULL CONTAINER WIDTH ---------- */
/* The narrow-centering above should ONLY apply to prose/heads. Component
   grids (.ygf-flow, .ygf-pillars, .ygf-steps, etc.) should still span the
   full .ygf-container width because they're laid out across multiple columns.
   Reset their max-width explicitly. */

.ygf-page .ygf-section .ygf-container > .ygf-flow,
.ygf-page .ygf-section .ygf-container > .ygf-pillars,
.ygf-page .ygf-section .ygf-container > .ygf-steps,
.ygf-page .ygf-section .ygf-container > .ygf-roles,
.ygf-page .ygf-section .ygf-container > .ygf-compare,
.ygf-page .ygf-section .ygf-container > .ygf-principles,
.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container > .ygf-flow,
.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container > .ygf-pillars,
.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container > .ygf-steps,
.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container > .ygf-roles,
.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container > .ygf-compare,
.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container > .ygf-principles {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ---------- 3. CALLOUT BLOCKS — also center if in wide container ---------- */
.ygf-page .ygf-section .ygf-container > .ygf-callout,
.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container > .ygf-callout {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 4. SECTION-HEAD wrappers also centered when in wide container ---------- */
/* If markup uses a .ygf-section-head wrapper directly inside .ygf-container,
   center that wrapper too. */
.ygf-page .ygf-section .ygf-container > .ygf-section-head,
.ygf-page .ygf-section .ygf-container > .wp-block-group__inner-container > .ygf-section-head {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   YESHIVA GIVING FUND — Polish v2.6
   Append AFTER v2.5. Fixes:
   - When card grids don't fill a row (e.g. 5 cards in 4-col layout),
     the orphan card on the second row sat at the left edge with empty
     space to the right. Now orphans center.
   ========================================================================== */

/* ---------- 1. CARD GRIDS: flexbox so orphan rows center ---------- */
/* CSS Grid with auto-fit/auto-fill keeps cards aligned to leftmost tracks
   even in incomplete rows. Flexbox with justify-content: center wraps and
   centers orphan rows naturally. Each card has a fixed-ish basis so the
   layout still feels grid-like. */

.ygf-page .ygf-steps,
.ygf-page .ygf-pillars,
.ygf-page .ygf-roles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ygf-space-sm);
  margin: var(--ygf-space-md) auto 0;
}

.ygf-page .ygf-steps > .ygf-step,
.ygf-page .ygf-pillars > .ygf-pillar,
.ygf-page .ygf-roles > .ygf-role {
  flex: 1 1 240px;
  max-width: 280px;
}

/* Pillars are typically 3-up so they look better wider */
.ygf-page .ygf-pillars {
  gap: var(--ygf-space-md);
}

.ygf-page .ygf-pillars > .ygf-pillar {
  flex: 1 1 280px;
  max-width: 340px;
}

/* Roles also 3-up, similar treatment */
.ygf-page .ygf-roles > .ygf-role {
  flex: 1 1 280px;
  max-width: 360px;
}

/* ---------- 2. MOBILE: full-width single column ---------- */
@media (max-width: 720px) {
  .ygf-page .ygf-steps > .ygf-step,
  .ygf-page .ygf-pillars > .ygf-pillar,
  .ygf-page .ygf-roles > .ygf-role {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   YESHIVA GIVING FUND — Footer CSS
   Append to your CSS plugin (Simple Custom CSS). Works alongside v2.0-v2.6.
   
   Scope: All rules under .ygf-footer so it can live inside GeneratePress's
   .site-footer / .copyright-bar without conflicting with anything.
   ========================================================================== */

/* ---------- 1. RESET THE GENERATEPRESS FOOTER CHROME ---------- */
/* The GeneratePress copyright-bar wraps content in styles that don't suit
   our richer footer. Strip them inside our scope. */
.site-footer:has(.ygf-footer),
.site-footer .copyright-bar:has(.ygf-footer) {
  padding: 0 !important;
  background: var(--ygf-midnight) !important;
}

.site-footer .copyright-bar:has(.ygf-footer) {
  text-align: left;
  color: inherit;
  font-size: inherit;
}

.site-footer:has(.ygf-footer) .inside-site-info {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- 2. FOOTER BASE ---------- */
.ygf-footer {
  background: var(--ygf-midnight, #0F1F3D);
  color: var(--ygf-parchment, #FAF7F0);
  font-family: var(--ygf-font-sans, system-ui, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  border-radius: 0;
  border-top: 1px solid rgba(184, 137, 58, 0.18);
}

.ygf-footer * { box-sizing: border-box; }

.ygf-footer__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2rem) clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 860px) {
  .ygf-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .ygf-footer__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .ygf-footer__inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* ---------- 3. COLUMN HEADINGS ---------- */
.ygf-footer__heading {
  font-family: var(--ygf-font-sans, system-ui, sans-serif);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ygf-gold, #B8893A);
  margin: 0 0 1rem;
  position: relative;
  padding-left: 28px;
}

.ygf-footer__heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 1px;
  background: var(--ygf-gold, #B8893A);
}

.ygf-footer__heading:not(:first-child) {
  margin-top: 1.75rem;
}

/* ---------- 4. COLUMN 1 — BRAND + CONTACT ---------- */
.ygf-footer__brand {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.ygf-footer__mark {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--ygf-gold, #B8893A);
  display: grid;
  place-items: center;
  position: relative;
}

.ygf-footer__mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(184, 137, 58, 0.5);
}

.ygf-footer__mark span {
  font-family: var(--ygf-font-serif, Georgia, serif);
  font-style: italic;
  color: var(--ygf-gold, #B8893A);
  font-size: 1.0625rem;
  line-height: 1;
}

.ygf-footer__brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.15rem;
}

.ygf-footer__brand-text strong {
  font-family: var(--ygf-font-serif, Georgia, serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ygf-parchment, #FAF7F0);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ygf-footer__brand-text span {
  font-size: 0.8125rem;
  color: rgba(250, 247, 240, 0.65);
  line-height: 1.4;
}

.ygf-footer__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.ygf-footer__contact li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.ygf-footer__label {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(184, 137, 58, 0.85);
  font-weight: 600;
}

.ygf-footer__contact li a,
.ygf-footer__contact li span:not(.ygf-footer__label) {
  color: var(--ygf-parchment, #FAF7F0);
  font-size: 0.875rem;
  text-decoration: none;
  line-height: 1.4;
  transition: color 180ms ease;
}

.ygf-footer__contact li a {
  border-bottom: 1px solid rgba(184, 137, 58, 0.3);
  padding-bottom: 1px;
  width: fit-content;
}

.ygf-footer__contact li a:hover {
  color: var(--ygf-gold, #B8893A);
  border-bottom-color: var(--ygf-gold, #B8893A);
}

/* ---------- 5. COLUMN 2 — ABOUT + TRUST ---------- */
.ygf-footer__col--about p {
  font-size: 0.875rem;
  color: rgba(250, 247, 240, 0.78);
  margin: 0 0 1.25rem;
  max-width: 38ch;
  line-height: 1.55;
}

.ygf-footer__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.ygf-footer__trust li {
  display: flex;
  flex-direction: column;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--ygf-gold, #B8893A);
  border-radius: 0 4px 4px 0;
}

.ygf-footer__trust-label {
  font-family: var(--ygf-font-serif, Georgia, serif);
  font-size: 0.9375rem;
  color: var(--ygf-gold, #B8893A);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ygf-footer__trust-detail {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.55);
  margin-top: 0.15rem;
}

/* ---------- 6. COLUMN 3 — HOURS + PARTNER ---------- */
.ygf-footer__hours {
  font-family: var(--ygf-font-serif, Georgia, serif);
  font-size: 0.9375rem;
  color: var(--ygf-parchment, #FAF7F0);
  margin: 0;
  line-height: 1.5;
}

.ygf-footer__partner {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(184, 137, 58, 0.2);
  border-radius: 6px;
  transition: all 200ms ease;
  margin-top: 0.5rem;
}

.ygf-footer__partner:hover {
  background: rgba(184, 137, 58, 0.08);
  border-color: rgba(184, 137, 58, 0.5);
  transform: translateY(-1px);
}

.ygf-footer__partner-label {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: rgba(250, 247, 240, 0.6);
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.ygf-footer__partner-name {
  font-family: var(--ygf-font-serif, Georgia, serif);
  font-size: 1rem;
  color: var(--ygf-gold, #B8893A);
  font-weight: 500;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.ygf-footer__partner:hover .ygf-footer__partner-name {
  color: var(--ygf-gold-bright, #C4953F);
}

/* ---------- 7. BOTTOM STRIP ---------- */
.ygf-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
}

.ygf-footer__bottom-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ygf-footer__copy {
  font-size: 0.75rem;
  color: rgba(250, 247, 240, 0.6);
  margin: 0;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.ygf-footer__disclaimer {
  font-size: 0.6875rem;
  color: rgba(250, 247, 240, 0.45);
  margin: 0;
  line-height: 1.5;
  max-width: 64ch;
  text-align: right;
}

@media (max-width: 720px) {
  .ygf-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .ygf-footer__disclaimer { text-align: left; }
}

/* ---------- 8. FALLBACKS for browsers w/o :has() support ---------- */
/* The :has() rules above target the GeneratePress wrapper. If they fail,
   force the footer to take over the wrapper visually. */
.copyright-bar .ygf-footer {
  margin: -1rem calc(-50vw + 50%);  /* Bleed out of any constrained wrapper */
  width: 100vw;
  max-width: none;
}

/* If your GeneratePress copyright bar has a background color, hide it */
.site-footer .copyright-bar { background: transparent !important; }
.site-info { padding: 0 !important; }

/* ==========================================================================
   YESHIVA GIVING FUND — Application Page Addendum  (v2.8)
   Replaces v2.7. Append AFTER existing v2.0–v2.6 base stylesheet.

   Changes from v2.7:
   - REPLACED `.ygf-seal` with new `.ygf-hero__panel` stat-stack (no more EOS trademark)
   - REWROTE `.ygf-hero__meta` as a flex row of <li> items — no more <br> autop fallout
   - REWROTE `.ygf-donor-banner__cta` to use explicit <span> children — autop-safe
   - REWROTE `.gf_page_steps` for 7 steps: compact single row, wraps 4+3 on tablet,
     stacks vertically only on phone
   - ADDED pillar glyphs, edge card decorative numbering, quote ornament,
     gold-grain backgrounds, dark-section starfield, animated number reveals
   ========================================================================== */


/* ==========================================================================
   1. HERO — text column + stat panel
   ========================================================================== */

/* Override the legacy seal so it doesn't render even if cached markup persists */
.ygf-page .ygf-seal { display: none !important; }

.ygf-page .ygf-apply-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Subtle gold radial bloom + grain texture for visual richness */
.ygf-page .ygf-apply-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(196, 149, 63, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 0% 100%, rgba(27, 45, 82, 0.7) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
}

/* Faint diagonal-line accent in upper-right */
.ygf-page .ygf-apply-hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 280px;
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0,
      transparent 14px,
      rgba(184, 137, 58, 0.06) 14px,
      rgba(184, 137, 58, 0.06) 15px);
  z-index: 0;
  pointer-events: none;
  mask-image: radial-gradient(circle at 100% 0%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, black 0%, transparent 70%);
}

/* HERO LAYOUT — using FLEX, not grid, because flex tolerates empty <p> nodes
   inserted by WordPress autop between siblings without breaking column placement.
   Grid pushes those empties into new tracks; flex just ignores them when sized. */

/* Force flex layout on the hero inner — beats base CSS's default block layout */
.ygf-page .ygf-apply-hero .ygf-hero__inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: clamp(2rem, 4vw, 4rem) !important;
  align-items: center !important;
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Two columns with explicit flex basis */
.ygf-page .ygf-apply-hero .ygf-hero__col {
  min-width: 0;
  flex: 0 1 auto;
}

.ygf-page .ygf-apply-hero .ygf-hero__col--content {
  flex: 1 1 58%;
  max-width: 58%;
}

.ygf-page .ygf-apply-hero .ygf-hero__col--panel {
  flex: 1 1 42%;
  max-width: 42%;
}

/* CRITICAL: kill base CSS rules that cap any wp-block-group child at 58%.
   We're not using wp-block-group on the columns anymore, but defang any leftover
   selectors that target generic descendants of .ygf-hero__inner. */
.ygf-page .ygf-apply-hero .ygf-hero__inner > div,
.ygf-page .ygf-apply-hero .ygf-hero__inner > .wp-block-group,
.ygf-page .ygf-apply-hero .ygf-hero__inner > .wp-block-group__inner-container > .wp-block-group {
  margin-inline: 0 !important;
}

/* Hide any empty <p></p> or <p><br/></p> WordPress autop may stuff between columns —
   they're not visible anyway but they take up flex space if not removed */
.ygf-page .ygf-apply-hero .ygf-hero__inner > p:empty,
.ygf-page .ygf-apply-hero .ygf-hero__inner > p > br:only-child {
  display: none !important;
}

/* Defang the v2.1 patch that explicitly caps wp-block-group children at 58% */
@media (min-width: 861px) {
  .ygf-page .ygf-apply-hero .ygf-hero__inner > .wp-block-group__inner-container > .wp-block-group:not(.ygf-seal),
  .ygf-page .ygf-apply-hero .ygf-hero__inner > .wp-block-group:not(.ygf-seal) {
    max-width: none !important;
  }
}

/* Tighten the hero h1 — less italic competition */
.ygf-page .ygf-apply-hero h1 {
  max-width: 16ch;
  margin: 0 0 var(--ygf-space-md);
}

.ygf-page .ygf-apply-hero h1 em {
  font-style: italic;
  color: var(--ygf-gold);
  display: block;  /* puts "every kind of learner" on its own line, like the screenshot */
}

/* Lede — NOT italic, just clean serif. Italic is reserved for the h1 accent. */
.ygf-page .ygf-apply-hero .ygf-hero__lede {
  font-family: var(--ygf-font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--ygf-parchment);
  margin: 0 0 var(--ygf-space-sm);
  max-width: 48ch;
  opacity: 0.94;
}

/* Punchy tagline below the lede — italic, gold */
.ygf-page .ygf-apply-hero .ygf-hero__tagline {
  font-family: var(--ygf-font-serif);
  font-style: italic;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  color: var(--ygf-gold);
  margin: 0 0 var(--ygf-space-lg);
  letter-spacing: -0.005em;
}

.ygf-page .ygf-apply-hero .ygf-hero__tagline span {
  display: inline-block;
  margin-right: 0.4em;
}

/* --- HERO META STRIP --- as a flex <ul> of <li>s with column layout per item.
       This kills the autop <br> issue because the source has no inline siblings
       across line breaks — each item is its own block. */
.ygf-page .ygf-apply-hero .ygf-hero__meta,
.ygf-page .ygf-apply-hero ul.ygf-hero__meta {
  list-style: none !important;
  padding: 0 !important;
  margin: var(--ygf-space-md) 0 0;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: var(--ygf-space-md) !important;
}

.ygf-page .ygf-apply-hero .ygf-hero__meta-item {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  margin: 0;
  line-height: 1.25;
  gap: 2px;
}

/* Kill the wp-block-list / .ygf-page li::before pseudos that would add bullets */
.ygf-page .ygf-apply-hero .ygf-hero__meta-item::before {
  content: none !important;
  display: none !important;
}

.ygf-page .ygf-apply-hero .ygf-hero__meta-item strong {
  display: block !important;
  font-family: var(--ygf-font-serif);
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  color: var(--ygf-gold);
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.2;
}

.ygf-page .ygf-apply-hero .ygf-hero__meta-item span {
  display: block !important;
  font-family: var(--ygf-font-sans);
  font-size: 0.75rem;
  color: rgba(250, 247, 240, 0.7);
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.3;
}

/* --- HERO STAT PANEL on the right --- */
.ygf-page .ygf-hero__panel {
  background: linear-gradient(160deg, rgba(27, 45, 82, 0.6) 0%, rgba(15, 31, 61, 0.85) 100%);
  border: 1px solid rgba(184, 137, 58, 0.3);
  border-radius: var(--ygf-radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  position: relative;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
}

/* Subtle corner accent inside the panel */
.ygf-page .ygf-hero__panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-top: 1px solid var(--ygf-gold);
  border-right: 1px solid var(--ygf-gold);
  border-top-right-radius: var(--ygf-radius-lg);
  opacity: 0.5;
}

.ygf-page .ygf-hero__panel-eyebrow {
  font-family: var(--ygf-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ygf-gold);
  display: block;
  margin: 0 0 var(--ygf-space-md);
}

.ygf-page .ygf-hero__stats {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ygf-space-sm) var(--ygf-space-md);
}

.ygf-page .ygf-hero__stat {
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  display: block !important;
  position: relative;
}

.ygf-page .ygf-hero__stat::before {
  content: none !important;
  display: none !important;
}

.ygf-page .ygf-hero__stat-num {
  display: block;
  font-family: var(--ygf-font-serif);
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  font-weight: 400;
  color: var(--ygf-gold);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.ygf-page .ygf-hero__stat-label {
  display: block;
  font-family: var(--ygf-font-sans);
  font-size: 0.75rem;
  color: rgba(250, 247, 240, 0.78);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.ygf-page .ygf-hero__panel-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 137, 58, 0.5) 30%, rgba(184, 137, 58, 0.5) 70%, transparent);
  margin: var(--ygf-space-md) 0;
}

.ygf-page .ygf-hero__panel-foot {
  font-family: var(--ygf-font-serif);
  font-style: italic;
  font-size: 0.8125rem;
  color: rgba(250, 247, 240, 0.7);
  margin: 0;
  line-height: 1.5;
}

/* --- HERO RESPONSIVE --- */
@media (max-width: 980px) {
  .ygf-page .ygf-apply-hero .ygf-hero__inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--ygf-space-lg) !important;
  }
  .ygf-page .ygf-apply-hero .ygf-hero__col--content,
  .ygf-page .ygf-apply-hero .ygf-hero__col--panel {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .ygf-page .ygf-apply-hero h1 em { display: inline; }  /* let it flow on mobile */
  .ygf-page .ygf-hero__stats { grid-template-columns: 1fr 1fr; }
  .ygf-page .ygf-apply-hero::after { display: none; }
}

@media (max-width: 480px) {
  .ygf-page .ygf-hero__stats { grid-template-columns: 1fr; }
}


/* ==========================================================================
   2. DONOR-ADVISOR REDIRECT BANNER
   Now with explicit <span> children inside <a> — autop can't break it.
   ========================================================================== */
.ygf-page .ygf-donor-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(var(--ygf-space-sm), 2.5vw, var(--ygf-space-lg));
  align-items: center;
  padding: var(--ygf-space-md) var(--ygf-space-lg);
  background: linear-gradient(135deg, var(--ygf-parchment-deep) 0%, var(--ygf-stone-soft) 100%);
  border: 1px solid var(--ygf-stone);
  border-left: 3px solid var(--ygf-gold);
  border-radius: var(--ygf-radius-md);
}

.ygf-page .ygf-donor-banner__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ygf-midnight);
  display: grid;
  place-items: center;
  color: var(--ygf-gold);
  font-family: var(--ygf-font-serif);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.ygf-page .ygf-donor-banner__body { min-width: 0; }

.ygf-page .ygf-donor-banner__eyebrow {
  font-family: var(--ygf-font-serif);
  font-size: 1rem;
  color: var(--ygf-midnight);
  font-weight: 500;
  margin: 0 0 var(--ygf-space-3xs);
  letter-spacing: -0.005em;
}

.ygf-page .ygf-donor-banner__text {
  font-size: 0.9375rem;
  color: var(--ygf-slate);
  margin: 0;
  line-height: 1.55;
  max-width: 100%;
}

/* Button: explicit span children — bulletproof against autop */
.ygf-page .ygf-donor-banner__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.4em;
  background: var(--ygf-midnight);
  color: var(--ygf-parchment) !important;
  font-family: var(--ygf-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  border-radius: 999px;
  white-space: nowrap;
  transition: background var(--ygf-dur-med) var(--ygf-ease),
              transform var(--ygf-dur-med) var(--ygf-ease);
  flex-shrink: 0;
  line-height: 1;
}

/* The label and arrow are <span>s — keep them inline-block so autop <br>s,
   even if injected between them, don't push the arrow to a new visual line.
   Belt and suspenders: explicit width on parent + nowrap. */
.ygf-page .ygf-donor-banner__cta .ygf-donor-banner__cta-label,
.ygf-page .ygf-donor-banner__cta .ygf-donor-banner__cta-arrow {
  display: inline-block !important;
  vertical-align: middle;
  line-height: 1;
}

.ygf-page .ygf-donor-banner__cta .ygf-donor-banner__cta-arrow {
  font-size: 1.05em;
  transition: transform var(--ygf-dur-med) var(--ygf-ease-out);
  margin-left: 0.3em;
}

/* If autop sneaks in a <br> tag between the spans, hide it */
.ygf-page .ygf-donor-banner__cta br { display: none !important; }

.ygf-page .ygf-donor-banner__cta:hover {
  background: var(--ygf-gold-deep);
  color: var(--ygf-parchment) !important;
  transform: translateY(-1px);
}

.ygf-page .ygf-donor-banner__cta:hover .ygf-donor-banner__cta-arrow {
  transform: translateX(3px);
}

/* Strip the default text-decoration override from .ygf-page a rules */
.ygf-page .ygf-donor-banner__cta {
  text-decoration-color: transparent !important;
}

@media (max-width: 720px) {
  .ygf-page .ygf-donor-banner {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon body"
      "cta cta";
    gap: var(--ygf-space-sm);
  }
  .ygf-page .ygf-donor-banner__icon { grid-area: icon; }
  .ygf-page .ygf-donor-banner__body { grid-area: body; }
  .ygf-page .ygf-donor-banner__cta {
    grid-area: cta;
    justify-self: stretch;
  }
}


/* ==========================================================================
   3. PILLARS — add a glyph for visual richness
   ========================================================================== */
.ygf-page .ygf-pillar {
  position: relative;
  padding-top: var(--ygf-space-lg);
}

.ygf-page .ygf-pillar__glyph {
  display: inline-block;
  font-family: var(--ygf-font-serif);
  font-size: 1.5rem;
  color: var(--ygf-gold);
  line-height: 1;
  margin-bottom: var(--ygf-space-2xs);
  opacity: 0.85;
}


/* ==========================================================================
   4. THE EDGE — Education / Giving / Hi-tech, dark section
   ========================================================================== */
.ygf-page .ygf-section--edge {
  position: relative;
  overflow: hidden;
}

/* Decorative starfield-style gold dots */
.ygf-page .ygf-section--edge::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(184, 137, 58, 0.18) 0, rgba(184, 137, 58, 0.18) 1px, transparent 1.5px),
    radial-gradient(circle at 88% 30%, rgba(184, 137, 58, 0.14) 0, rgba(184, 137, 58, 0.14) 1px, transparent 1.5px),
    radial-gradient(circle at 30% 75%, rgba(184, 137, 58, 0.12) 0, rgba(184, 137, 58, 0.12) 1px, transparent 1.5px),
    radial-gradient(circle at 70% 85%, rgba(184, 137, 58, 0.16) 0, rgba(184, 137, 58, 0.16) 1px, transparent 1.5px);
  pointer-events: none;
  z-index: 0;
}

.ygf-page .ygf-section--edge > * {
  position: relative;
  z-index: 1;
}

.ygf-page .ygf-edge {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ygf-space-md);
  margin: var(--ygf-space-lg) 0 0;
}

@media (max-width: 900px) {
  .ygf-page .ygf-edge { grid-template-columns: 1fr; }
}

.ygf-page .ygf-edge__card {
  background: var(--ygf-midnight-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--ygf-space-lg);
  border-radius: var(--ygf-radius-md);
  position: relative;
  overflow: hidden;
  transition: transform var(--ygf-dur-med) var(--ygf-ease),
              border-color var(--ygf-dur-med) var(--ygf-ease);
}

/* Diagonal gold flash in the top-right corner */
.ygf-page .ygf-edge__card::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, transparent 0%, transparent 45%, var(--ygf-gold) 50%, var(--ygf-gold) 52%, transparent 57%);
  opacity: 0.25;
  pointer-events: none;
}

.ygf-page .ygf-edge__card:hover {
  transform: translateY(-3px);
  border-color: var(--ygf-gold);
}

.ygf-page .ygf-edge__num {
  font-family: var(--ygf-font-serif);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--ygf-gold);
  line-height: 1;
  margin-bottom: var(--ygf-space-sm);
  letter-spacing: -0.02em;
  position: relative;
}

.ygf-page .ygf-edge__card h3 {
  color: var(--ygf-parchment) !important;
  font-family: var(--ygf-font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 var(--ygf-space-2xs);
  letter-spacing: -0.01em;
}

.ygf-page .ygf-edge__card p {
  color: var(--ygf-parchment) !important;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 0.92;
}


/* ==========================================================================
   5. CHECKLIST — required vs optional
   ========================================================================== */
.ygf-page .ygf-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ygf-space-md);
  margin: var(--ygf-space-md) 0 0;
}

@media (max-width: 720px) {
  .ygf-page .ygf-checklist { grid-template-columns: 1fr; }
}

.ygf-page .ygf-checklist__col {
  background: var(--ygf-parchment);
  border: var(--ygf-hairline);
  border-radius: var(--ygf-radius-md);
  padding: var(--ygf-space-md) var(--ygf-space-lg);
}

.ygf-page .ygf-checklist__heading {
  font-family: var(--ygf-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ygf-gold-deep);
  margin: 0 0 var(--ygf-space-sm);
  padding-bottom: var(--ygf-space-2xs);
  border-bottom: 1px solid var(--ygf-stone);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.ygf-page .ygf-checklist__heading-mark {
  font-size: 0.625rem;
  color: var(--ygf-gold);
  line-height: 1;
}

.ygf-page .ygf-checklist__heading-mark--soft {
  color: var(--ygf-slate);
  opacity: 0.7;
}

.ygf-page .ygf-checklist__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ygf-page .ygf-checklist__list li {
  position: relative;
  padding: var(--ygf-space-2xs) 0 var(--ygf-space-2xs) 1.5em;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ygf-ink);
  border-top: 1px dashed var(--ygf-stone);
}

.ygf-page .ygf-checklist__list li:first-child {
  border-top: 0;
}

.ygf-page .ygf-checklist__list li::before {
  content: "●" !important;
  position: absolute;
  left: 0;
  top: 0.55em;
  width: auto !important;
  height: auto !important;
  background: none !important;
  color: var(--ygf-gold);
  font-size: 0.5rem;
  line-height: 1;
}

.ygf-page .ygf-checklist__list--soft li {
  color: var(--ygf-slate);
}

.ygf-page .ygf-checklist__list--soft li::before {
  content: "○" !important;
  color: var(--ygf-slate);
  opacity: 0.7;
  font-size: 0.625rem;
  top: 0.5em;
}


/* ==========================================================================
   6. PULL QUOTE SECTION — ornamented
   ========================================================================== */
.ygf-page .ygf-section--quote {
  position: relative;
}

.ygf-page .ygf-section--quote::before,
.ygf-page .ygf-section--quote::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ygf-gold) 50%, transparent);
  opacity: 0.5;
}

.ygf-page .ygf-section--quote::before { top: 0; }
.ygf-page .ygf-section--quote::after { bottom: 0; }


/* ==========================================================================
   7. FORM SECTION
   ========================================================================== */
.ygf-page .ygf-section--form {
  scroll-margin-top: 80px;
}

.ygf-page .ygf-section-head--form {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: var(--ygf-space-md);
}

.ygf-page .ygf-section-head--form .ygf-eyebrow {
  justify-content: center !important;
}

.ygf-page .ygf-section-head--form .ygf-lede {
  margin-left: auto;
  margin-right: auto;
}

.ygf-page .ygf-form-foot {
  font-size: 0.8125rem;
  color: var(--ygf-slate);
  text-align: center;
  margin: var(--ygf-space-md) auto 0;
  max-width: 56ch;
  line-height: 1.55;
}


/* ==========================================================================
   8. FINAL CTA — extra ornament
   ========================================================================== */
.ygf-page .ygf-section--final {
  position: relative;
  overflow: hidden;
}

.ygf-page .ygf-section--final::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 10% 50%, rgba(184, 137, 58, 0.10) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.ygf-page .ygf-section--final > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   9. GRAVITY FORMS — page step indicators (the 7-step stepper)
   Force a single horizontal row of all 7 steps on desktop.
   ========================================================================== */
.ygf-form-host {
  background: var(--ygf-surface);
  border-radius: var(--ygf-radius-lg);
  border: var(--ygf-hairline);
  padding: clamp(var(--ygf-space-lg), 4vw, var(--ygf-space-xl));
  box-shadow: var(--ygf-shadow-card);
  margin: var(--ygf-space-md) 0 0;
  position: relative;
}

.ygf-form-host::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--ygf-space-lg);
  width: 40px;
  height: 3px;
  background: var(--ygf-gold);
  border-radius: 0 0 2px 2px;
}

.ygf-form-host .gform_wrapper { overflow: visible; }

.ygf-form-host .gform_required_legend {
  font-size: 0.75rem;
  color: var(--ygf-slate);
  margin: 0 0 var(--ygf-space-sm);
  font-style: italic;
}

/* ============================================================
   7-STEP INDICATOR — minimal progress strip
   
   Final design: just "Step X of 7" eyebrow + 7 dots with connectors.
   Step labels are hidden because each form page already has its own
   intro heading (e.g. "Welcome.", "Tell us about your program.") in
   the .ygf-step block, so duplicating step names in the strip is noise.
   Labels appear as hover tooltips for accessibility / discoverability.
   On phone, just the eyebrow remains.
   ============================================================ */

.ygf-form-host .gf_page_steps {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 0;
  list-style: none !important;
  position: relative;
  margin: 0 0 var(--ygf-space-md) !important;
  padding: calc(var(--ygf-space-md) + 22px) var(--ygf-space-md) var(--ygf-space-md) !important;
  background: var(--ygf-parchment);
  border-radius: var(--ygf-radius-sm);
  border: var(--ygf-hairline);
}

/* CSS counter — reset based on which step has .gf_step_active */
.ygf-form-host .gf_page_steps { counter-reset: ygf-active-step 1; }
.ygf-form-host .gf_page_steps:has(.gf_step:nth-child(2).gf_step_active) { counter-reset: ygf-active-step 2; }
.ygf-form-host .gf_page_steps:has(.gf_step:nth-child(3).gf_step_active) { counter-reset: ygf-active-step 3; }
.ygf-form-host .gf_page_steps:has(.gf_step:nth-child(4).gf_step_active) { counter-reset: ygf-active-step 4; }
.ygf-form-host .gf_page_steps:has(.gf_step:nth-child(5).gf_step_active) { counter-reset: ygf-active-step 5; }
.ygf-form-host .gf_page_steps:has(.gf_step:nth-child(6).gf_step_active) { counter-reset: ygf-active-step 6; }
.ygf-form-host .gf_page_steps:has(.gf_step:nth-child(7).gf_step_active) { counter-reset: ygf-active-step 7; }

/* Eyebrow at top-left of the strip */
.ygf-form-host .gf_page_steps::before {
  content: "Step " counter(ygf-active-step) " of 7";
  position: absolute;
  top: var(--ygf-space-md);
  left: var(--ygf-space-md);
  font-family: var(--ygf-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ygf-gold-deep);
}

/* Each step is a column with its number visible, label hidden */
.ygf-form-host .gf_step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100px;
  padding: 0 !important;
  position: relative;
  text-align: center;
  gap: 8px;
}

/* Hairline connector between adjacent step circles */
.ygf-form-host .gf_step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 1px;
  background: var(--ygf-stone);
  z-index: 0;
}

/* All connectors use the same neutral stone color — no "completed" state
   indication. Gravity Forms doesn't reliably tag completed steps in a way
   that survives page navigation, and the active dot already shows progress. */

.ygf-form-host .gf_page_steps .gf_step .gf_step_number {
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: var(--ygf-parchment) !important;
  border: 1px solid var(--ygf-stone) !important;
  color: var(--ygf-slate) !important;
  font-family: var(--ygf-font-serif) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  padding-top: 8px !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
  transition: all var(--ygf-dur-med) var(--ygf-ease);
}

.ygf-form-host .gf_page_steps .gf_step.gf_step_active .gf_step_number {
  background: var(--ygf-midnight) !important;
  border-color: var(--ygf-midnight) !important;
  color: var(--ygf-gold) !important;
  box-shadow: 0 0 0 3px rgba(184, 137, 58, 0.18);
}

/* ALL non-active steps use the same outlined style. Gravity Forms applies
   `gf_step_previous` to the step before the last as a positional marker —
   NOT as a "completed" indicator — so don't gold-fill it.
   Don't try to indicate "completed" steps at all: GF doesn't reliably tag
   them, and visual progression is already clear from the active dot's position. */

.ygf-form-host .gf_page_steps .gf_step .gf_step_label {
  display: block !important;
  padding: 0 !important;
  margin: 0 auto !important;
  font-family: var(--ygf-font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ygf-slate);
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  letter-spacing: 0;
  max-width: 88px;
}

/* Active step: emphasized — bolder weight + midnight color */
.ygf-form-host .gf_step_active .gf_step_label {
  font-weight: 600;
  color: var(--ygf-midnight);
  letter-spacing: 0.01em;
}

/* Phone: drop the dot strip, just show "Step X of 7" eyebrow as a heading */
@media (max-width: 560px) {
  .ygf-form-host .gf_page_steps {
    padding: var(--ygf-space-sm) var(--ygf-space-md) !important;
    justify-content: flex-start;
  }
  .ygf-form-host .gf_step {
    display: none !important;
  }
  /* Show only the active step number inline next to the eyebrow */
  .ygf-form-host .gf_step.gf_step_active {
    display: none !important;  /* Even active is hidden; the ::before counter says it all */
  }
  .ygf-form-host .gf_page_steps::before {
    position: static;
  }
}


/* ==========================================================================
   10. GRAVITY FORMS — intro / step blocks
   ========================================================================== */
.ygf-form-host .ygf-intro,
.ygf-form-host .ygf-step {
  background: var(--ygf-parchment-deep);
  border-left: 3px solid var(--ygf-gold);
  padding: var(--ygf-space-sm) var(--ygf-space-md);
  border-radius: 0 var(--ygf-radius-sm) var(--ygf-radius-sm) 0;
  margin-bottom: var(--ygf-space-sm);
}

.ygf-form-host .ygf-intro h3,
.ygf-form-host .ygf-step h3 {
  font-family: var(--ygf-font-serif);
  font-size: 1.25rem;
  color: var(--ygf-midnight);
  font-weight: 500;
  margin: 0 0 var(--ygf-space-3xs);
  letter-spacing: -0.01em;
}

.ygf-form-host .ygf-intro p,
.ygf-form-host .ygf-step p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ygf-slate);
  margin: 0;
}

.ygf-form-host .ygf-intro p strong,
.ygf-form-host .ygf-step p strong {
  color: var(--ygf-midnight);
}

.ygf-form-host .gsection .gsection_title {
  font-family: var(--ygf-font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ygf-midnight);
  margin: var(--ygf-space-md) 0 var(--ygf-space-2xs);
  padding-bottom: var(--ygf-space-2xs);
  border-bottom: 1px solid var(--ygf-stone);
  letter-spacing: -0.005em;
}

.ygf-form-host .gsection .gsection_description {
  font-size: 0.875rem;
  color: var(--ygf-slate);
  margin: 0 0 var(--ygf-space-sm);
  line-height: 1.55;
}

.ygf-form-host .ygf-class-radio .gfield_radio label {
  padding: var(--ygf-space-sm) var(--ygf-space-md);
  font-size: 0.9375rem;
  min-height: 48px;
}

.ygf-form-host .mce-tinymce {
  border: 1.5px solid var(--ygf-stone) !important;
  border-radius: var(--ygf-radius-sm) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.ygf-form-host .mce-tinymce iframe { background: var(--ygf-parchment); }

.ygf-form-host .mce-toolbar-grp,
.ygf-form-host .mce-statusbar {
  background: var(--ygf-parchment-deep) !important;
  border-color: var(--ygf-stone) !important;
}

.ygf-form-host .gform_drop_area {
  background: var(--ygf-parchment);
  border: 1.5px dashed var(--ygf-stone);
  border-radius: var(--ygf-radius-sm);
  padding: var(--ygf-space-md);
  text-align: center;
  transition: border-color var(--ygf-dur-fast) var(--ygf-ease),
              background var(--ygf-dur-fast) var(--ygf-ease);
}

.ygf-form-host .gform_drop_area:hover {
  border-color: var(--ygf-gold);
  background: var(--ygf-surface);
}

.ygf-form-host .gform_drop_instructions {
  color: var(--ygf-slate);
  font-size: 0.9375rem;
  margin-right: var(--ygf-space-2xs);
}

.ygf-form-host .gform_button_select_files {
  background: var(--ygf-midnight) !important;
  color: var(--ygf-parchment) !important;
  border: 1.5px solid var(--ygf-midnight) !important;
  border-radius: 999px !important;
  padding: 0.5em 1.25em !important;
  font-family: var(--ygf-font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  transition: all var(--ygf-dur-fast) var(--ygf-ease);
}

.ygf-form-host .gform_button_select_files:hover {
  background: var(--ygf-gold-deep) !important;
  border-color: var(--ygf-gold-deep) !important;
}

.ygf-form-host .gform-datepicker { padding-right: 3em; }

.ygf-form-host .ui-datepicker-trigger {
  width: 20px;
  height: 20px;
  margin-left: -2.25em;
  cursor: pointer;
  vertical-align: middle;
  opacity: 0.7;
  transition: opacity var(--ygf-dur-fast) var(--ygf-ease);
}

.ygf-form-host .ui-datepicker-trigger:hover { opacity: 1; }

.ygf-form-host .iti { width: 100%; }
.ygf-form-host .iti__tel-input { padding-left: 52px !important; }

.ygf-form-host .ginput_counter {
  font-size: 0.75rem;
  color: var(--ygf-slate);
  margin-top: 4px;
  text-align: right;
}

.ygf-form-host .gform_validation_container {
  position: absolute !important;
  left: -9000px !important;
}

/* GF save-and-continue button (new SVG-style button) — match brand */
.ygf-form-host .gform_save_link {
  background: transparent !important;
  color: var(--ygf-midnight) !important;
  border: 1.5px solid var(--ygf-stone) !important;
  border-radius: 999px !important;
  padding: 0.65em 1.25em !important;
  font-family: var(--ygf-font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4em;
  line-height: 1;
  transition: all var(--ygf-dur-fast) var(--ygf-ease);
}

.ygf-form-host .gform_save_link:hover {
  background: var(--ygf-parchment-deep) !important;
  border-color: var(--ygf-slate) !important;
}

.ygf-form-host .gform_save_link svg path {
  fill: var(--ygf-gold-deep);
}


/* ==========================================================================
   10b. CURRENT ACCOUNT FIELD — hi-tech auth indicator (Apple/Vercel modern)

   States detected via :has() on the placeholder option being :checked.
   - Logged out: muted grey gradient, red LED, "Not Logged In" placeholder
   - Logged in:  navy gradient, green LED with soft pulse glow, username
   The select is `disabled` (display-only), so we hide native chrome and
   render the value cleanly.
   ========================================================================== */

/* Hide the parent label — the LED + value is self-explanatory */
.ygf-form-host .gfield.currentaccount > .gfield_label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Field container — slim pill with padding for the LED */
.ygf-form-host .gfield.currentaccount {
  position: relative;
}

.ygf-form-host .gfield.currentaccount .ginput_container_select {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px 8px 30px;  /* left padding leaves room for the LED dot */
  border-radius: 999px;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef0f4 100%);
  border: 1px solid #d8dde6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(15, 31, 61, 0.04),
    0 1px 3px rgba(15, 31, 61, 0.03);
  transition: background var(--ygf-dur-med) var(--ygf-ease),
              border-color var(--ygf-dur-med) var(--ygf-ease),
              box-shadow var(--ygf-dur-med) var(--ygf-ease);
}

/* LED dot — positioned absolutely as ::before of the container */
.ygf-form-host .gfield.currentaccount .ginput_container_select::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* Default (logged-out) color: muted red/amber */
  background: radial-gradient(circle at 30% 30%, #ff8a8a 0%, #c83a3a 60%, #8b1818 100%);
  box-shadow:
    0 0 0 1px rgba(139, 24, 24, 0.15),
    0 0 6px rgba(200, 58, 58, 0.4);
  transform: translateY(-50%);
  transition: background var(--ygf-dur-med) var(--ygf-ease),
              box-shadow var(--ygf-dur-med) var(--ygf-ease);
}

/* The native select: kill all chrome, keep just the text */
.ygf-form-host .gfield.currentaccount select.gfield_select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 120px;
  max-width: 100%;
  height: auto !important;
  font-family: var(--ygf-font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em;
  color: var(--ygf-slate) !important;
  cursor: default;
  outline: none;
  /* Hide the dropdown arrow (the select is disabled anyway) */
  background-position: -100px center !important;
}

/* Remove the disabled state's grey/opacity from browsers */
.ygf-form-host .gfield.currentaccount select.gfield_select:disabled {
  opacity: 1 !important;
  color: var(--ygf-slate) !important;
  -webkit-text-fill-color: var(--ygf-slate);  /* Safari */
}

/* ============ LOGGED-IN STATE ============
   Detected when the placeholder option is NOT the currently checked option.
   We use :has() to check the option state directly. */
.ygf-form-host .gfield.currentaccount:has(select option:checked:not(.gf_placeholder)) .ginput_container_select {
  background: linear-gradient(180deg, #f4f7fb 0%, #e8eef6 100%);
  border-color: #c5d0e0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(15, 31, 61, 0.06),
    0 2px 6px rgba(15, 31, 61, 0.04);
}

.ygf-form-host .gfield.currentaccount:has(select option:checked:not(.gf_placeholder)) .ginput_container_select::before {
  background: radial-gradient(circle at 30% 30%, #7ee89a 0%, #2ea84f 55%, #1a6e33 100%);
  box-shadow:
    0 0 0 1px rgba(26, 110, 51, 0.2),
    0 0 6px rgba(46, 168, 79, 0.5),
    0 0 12px rgba(46, 168, 79, 0.25);
  animation: ygf-led-pulse 2.4s var(--ygf-ease) infinite;
}

.ygf-form-host .gfield.currentaccount:has(select option:checked:not(.gf_placeholder)) select.gfield_select,
.ygf-form-host .gfield.currentaccount:has(select option:checked:not(.gf_placeholder)) select.gfield_select:disabled {
  color: var(--ygf-midnight) !important;
  -webkit-text-fill-color: var(--ygf-midnight);
  font-weight: 600 !important;
}

/* Subtle pulse animation for the green LED — gentle, Apple-style */
@keyframes ygf-led-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(26, 110, 51, 0.2),
      0 0 6px rgba(46, 168, 79, 0.5),
      0 0 12px rgba(46, 168, 79, 0.25);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(26, 110, 51, 0.25),
      0 0 10px rgba(46, 168, 79, 0.7),
      0 0 18px rgba(46, 168, 79, 0.35);
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .ygf-form-host .gfield.currentaccount .ginput_container_select::before {
    animation: none !important;
  }
}


/* ==========================================================================
   11. CONFIRMATION SCREENS  (unchanged from v2.7 — kept here in full)
   ========================================================================== */
.ygf-confirm {
  text-align: left;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--ygf-space-md) 0;
}

.ygf-confirm__seal {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ygf-midnight);
  display: grid;
  place-items: center;
  margin: 0 0 var(--ygf-space-md);
  position: relative;
  box-shadow: 0 8px 24px rgba(15, 31, 61, 0.12);
}

.ygf-confirm__seal::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--ygf-gold);
  opacity: 0.4;
}

.ygf-confirm__seal span {
  color: var(--ygf-gold);
  font-family: var(--ygf-font-serif);
  font-size: 1.875rem;
  line-height: 1;
}

.ygf-confirm__seal--save span { font-size: 1.5rem; }
.ygf-confirm__seal--sent span { font-size: 1.75rem; }

.ygf-confirm__eyebrow {
  font-family: var(--ygf-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ygf-gold-deep);
  margin: 0 0 var(--ygf-space-2xs);
  display: inline-flex;
  align-items: center;
  gap: var(--ygf-space-2xs);
}

.ygf-confirm__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--ygf-gold);
}

.ygf-confirm__title {
  font-family: var(--ygf-font-serif);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 400;
  color: var(--ygf-midnight);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--ygf-space-sm);
}

.ygf-confirm__title em {
  font-style: italic;
  color: var(--ygf-gold);
  font-weight: 400;
}

.ygf-confirm__lede {
  font-family: var(--ygf-font-serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ygf-ink);
  margin: 0 0 var(--ygf-space-lg);
  max-width: 58ch;
}

.ygf-confirm__timeline {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ygf-space-lg);
}

.ygf-confirm__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--ygf-space-md);
  padding: var(--ygf-space-sm) 0;
  border-top: 1px solid var(--ygf-stone);
  align-items: start;
}

.ygf-confirm__step:first-child {
  border-top: 0;
  padding-top: 0;
}

.ygf-confirm__num {
  font-family: var(--ygf-font-serif);
  font-size: 1.5rem;
  color: var(--ygf-gold);
  line-height: 1;
  padding-top: 4px;
  font-weight: 400;
}

.ygf-confirm__step-body h3 {
  font-family: var(--ygf-font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ygf-midnight);
  margin: 0 0 var(--ygf-space-3xs);
  line-height: 1.3;
}

.ygf-confirm__step-body p {
  font-size: 0.9375rem;
  color: var(--ygf-slate);
  line-height: 1.55;
  margin: 0;
  max-width: 56ch;
}

.ygf-confirm__refnote {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ygf-space-sm);
  padding: var(--ygf-space-sm) var(--ygf-space-md);
  background: var(--ygf-midnight);
  border-radius: var(--ygf-radius-sm);
  margin: 0 0 var(--ygf-space-lg);
}

.ygf-confirm__refnote-label {
  font-family: var(--ygf-font-sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ygf-gold);
  font-weight: 600;
}

.ygf-confirm__refnote-value {
  font-family: var(--ygf-font-serif);
  font-size: 1.125rem;
  color: var(--ygf-parchment);
  letter-spacing: 0.02em;
}

.ygf-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ygf-space-xs);
  margin: 0 0 var(--ygf-space-md);
}

.ygf-confirm__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-family: var(--ygf-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: all var(--ygf-dur-med) var(--ygf-ease);
  line-height: 1;
}

.ygf-confirm__btn--primary {
  background: var(--ygf-gold);
  color: var(--ygf-midnight);
  border-color: var(--ygf-gold);
}

.ygf-confirm__btn--primary:hover {
  background: var(--ygf-gold-deep);
  border-color: var(--ygf-gold-deep);
  color: var(--ygf-parchment);
  transform: translateY(-1px);
  box-shadow: var(--ygf-shadow-lift);
}

.ygf-confirm__btn--ghost {
  background: transparent;
  color: var(--ygf-midnight);
  border-color: var(--ygf-stone);
}

.ygf-confirm__btn--ghost:hover {
  background: var(--ygf-stone-soft);
  border-color: var(--ygf-slate);
  color: var(--ygf-midnight);
}

.ygf-confirm__support {
  font-size: 0.875rem;
  color: var(--ygf-slate);
  margin: 0;
  line-height: 1.5;
  padding-top: var(--ygf-space-sm);
  border-top: 1px solid var(--ygf-stone);
}

.ygf-confirm__support a {
  color: var(--ygf-gold-deep);
  text-decoration-color: var(--ygf-gold);
}

.ygf-confirm__linkbox {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label  copy"
    "url    copy";
  gap: var(--ygf-space-2xs) var(--ygf-space-sm);
  align-items: center;
  padding: var(--ygf-space-sm) var(--ygf-space-md);
  background: var(--ygf-parchment-deep);
  border: 1px solid var(--ygf-stone);
  border-left: 3px solid var(--ygf-gold);
  border-radius: var(--ygf-radius-sm);
  margin: 0 0 var(--ygf-space-md);
}

.ygf-confirm__linkbox-label {
  grid-area: label;
  font-family: var(--ygf-font-sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ygf-gold-deep);
  font-weight: 600;
}

.ygf-confirm__linkbox-url {
  grid-area: url;
  font-family: var(--ygf-font-mono);
  font-size: 0.8125rem;
  color: var(--ygf-midnight);
  word-break: break-all;
  line-height: 1.4;
  text-decoration-color: var(--ygf-gold);
}

.ygf-confirm__copy {
  grid-area: copy;
  display: inline-flex;
  align-items: center;
  padding: 0.6em 1em;
  background: var(--ygf-midnight);
  color: var(--ygf-parchment);
  border: 0;
  border-radius: 999px;
  font-family: var(--ygf-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--ygf-dur-fast) var(--ygf-ease);
  white-space: nowrap;
}

.ygf-confirm__copy:hover { background: var(--ygf-gold-deep); }
.ygf-confirm__copy-done { display: none; }
.ygf-confirm__copy.is-copied .ygf-confirm__copy-default { display: none; }
.ygf-confirm__copy.is-copied .ygf-confirm__copy-done { display: inline; }
.ygf-confirm__copy.is-copied { background: var(--ygf-success); }

@media (max-width: 560px) {
  .ygf-confirm__linkbox {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "url"
      "copy";
  }
  .ygf-confirm__copy { justify-self: start; }
}

.ygf-confirm__callout {
  background: var(--ygf-stone-soft);
  padding: var(--ygf-space-sm) var(--ygf-space-md);
  border-left: 3px solid var(--ygf-gold);
  border-radius: 0 var(--ygf-radius-sm) var(--ygf-radius-sm) 0;
  font-size: 0.9375rem;
  color: var(--ygf-ink);
  line-height: 1.55;
  margin: 0 0 var(--ygf-space-md);
}

.ygf-confirm__callout strong { color: var(--ygf-midnight); }

.ygf-confirm__tips {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ygf-space-lg);
}

.ygf-confirm__tips li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--ygf-space-sm);
  align-items: start;
  padding: var(--ygf-space-2xs) 0;
  font-size: 0.9375rem;
  color: var(--ygf-ink);
  line-height: 1.55;
}

.ygf-confirm__tips-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ygf-parchment-deep);
  border: 1px solid var(--ygf-stone);
  color: var(--ygf-gold-deep);
  font-family: var(--ygf-font-serif);
  font-size: 0.9375rem;
  flex-shrink: 0;
}

.ygf-confirm__tips a { color: var(--ygf-gold-deep); }


/* ==========================================================================
   12. MOBILE FINE-TUNING
   ========================================================================== */
@media (max-width: 720px) {
  .ygf-page .ygf-edge { gap: var(--ygf-space-sm); }
  .ygf-page .ygf-edge__card { padding: var(--ygf-space-md); }
  .ygf-page .ygf-edge__num { font-size: 2rem; }
  .ygf-page .ygf-edge__card h3 { font-size: 1.25rem; }

  .ygf-page .ygf-donor-banner { padding: var(--ygf-space-sm) var(--ygf-space-md); }
  .ygf-page .ygf-checklist__col { padding: var(--ygf-space-md); }

  .ygf-confirm__step {
    grid-template-columns: 40px 1fr;
    gap: var(--ygf-space-sm);
  }
  .ygf-confirm__num { font-size: 1.25rem; }
  .ygf-confirm__step-body h3 { font-size: 1rem; }

  .ygf-confirm__actions { flex-direction: column; align-items: stretch; }
  .ygf-confirm__btn { justify-content: center; }
}