/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 24 2026 | 17:03:15 */
/* ============================================================
   BrightLeaf Giving — Homepage stylesheet
   Scoped to homepage via .home body class + .blg-* hooks.
   Paste into Code Snippets or the Customizer Additional CSS.
   ============================================================ */

/* ============================================================
   PAGE BACKGROUND OVERRIDE (homepage only)
   The site-wide --page-background is #F7F9F6, a very faint green-
   tinted off-white. Where it meets pure --white in section bgs
   and cards, the seam is visible but ambiguous — too subtle to
   read as deliberate contrast, just enough to read as "patches."
   We darken it for the homepage so the white cards/sections feel
   intentionally different, and the page-as-surface feels unified.
   ============================================================ */
.home {
  --page-background: #ECF1EC;
}
.home body,
body.home {
  background-color: var(--page-background);
}

/* ============================================================
   1. HIDE THE FEATURED IMAGE ON THIS PAGE
   Keeps the image available for social sharing (og:image) but
   prevents the theme from rendering it above page content.
   ============================================================ */
.home .wp-post-image,
.home .page-header-image,
.home .featured-image,
.home .post-image,
.home .entry-header .post-image,
.home .inside-article > .featured-image,
.home article > .post-image,
.home .gb-element-page-hero-image,
body.page-template-default.home .entry-header img.attachment-full {
  display: none !important;
}

/* ============================================================
   2. HERO — ATMOSPHERE
   Soft layered gradient + decorative blurred orbs for depth.
   Works as background; content sits above on z-index:2.
   ============================================================ */
#blg-hero {
  background:
    /* Subtle top-right tint */
    radial-gradient(ellipse 80% 60% at 85% 0%, rgba(46, 94, 59, 0.08) 0%, transparent 60%),
    /* Subtle bottom-left tint, fading out before the section ends so
       there's no abrupt edge into the next section */
    radial-gradient(ellipse 60% 40% at 10% 70%, rgba(168, 198, 74, 0.06) 0%, transparent 65%),
    /* Top fade-in: paint a band of page-background at the very top so the
       hero blends seamlessly down from the header/page edge, instead of
       starting with a hard horizontal line and the orb gradient against
       a plain rectangular boundary. */
    linear-gradient(180deg,
      var(--page-background) 0%,
      var(--page-background) 60px,
      transparent 180px,
      transparent 100%
    ),
    /* Base layer */
    linear-gradient(180deg, var(--page-background) 0%, var(--page-background) 100%);
  /* Modest bottom padding — enough to clear the form's shadow, not so
     much that we create a visible "patch" of tinted area below the form */
  padding-bottom: 80px !important;
}

#blg-hero::before,
#blg-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

#blg-hero::before {
  /* Top-right orb. Positioned fully INSIDE the section bounds so its
     blur fades to nothing naturally before reaching any edge. Previous
     version had right:-120px which got clipped by overflow:hidden,
     leaving a visible hard vertical edge on the right side. */
  width: 360px;
  height: 360px;
  top: 40px;
  right: 80px;
  background: radial-gradient(circle, rgba(46, 94, 59, 0.18) 0%, transparent 70%);
  animation: blgHeroOrb 16s ease-in-out infinite;
}

#blg-hero::after {
  /* Bottom-left orb — same treatment, positioned inside bounds */
  width: 320px;
  height: 320px;
  bottom: 40px;
  left: 60px;
  background: radial-gradient(circle, rgba(168, 198, 74, 0.16) 0%, transparent 70%);
  animation: blgHeroOrb 20s ease-in-out infinite reverse;
}

@keyframes blgHeroOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  #blg-hero::before,
  #blg-hero::after { animation: none; }
}

/* Hero copy — entrance animations, staggered */
.blg-hero__copy > * {
  opacity: 0;
  transform: translateY(12px);
  animation: blgFadeUp 0.7s ease forwards;
}
.blg-hero__copy > *:nth-child(1) { animation-delay: 0.05s; }
.blg-hero__copy > *:nth-child(2) { animation-delay: 0.15s; }
.blg-hero__copy > *:nth-child(3) { animation-delay: 0.25s; }
.blg-hero__copy > *:nth-child(4) { animation-delay: 0.35s; }
.blg-hero__copy > *:nth-child(5) { animation-delay: 0.45s; }

@keyframes blgFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .blg-hero__copy > * { opacity: 1; transform: none; animation: none; }
}

/* H1 polish — make the highlighted span sit just right */
.blg-hero__h1 {
  letter-spacing: -0.02em;
  /* Ensure the H1 wraps properly at narrow widths even when the mark
     element has its own white-space rules. */
  overflow-wrap: break-word;
}
.blg-hero__h1 mark {
  position: relative;
  white-space: nowrap;
}
@media (max-width: 991px) {
  /* On tablet/mobile, allow the highlighted span to wrap rather than
     overflow the viewport horizontally. */
  .blg-hero__h1 mark { white-space: normal; }
}

/* ============================================================
   3. HERO FORM — STYLED GRAVITY FORM EMBED
   Form 176 lives inside .blg-hero__formwrap. We override GF's
   default styling to make it feel native to the design.
   ============================================================ */
.blg-hero__formwrap {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  animation: blgFormReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.3s;
}

@keyframes blgFormReveal {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .blg-hero__formwrap { opacity: 1; transform: none; animation: none; }
}

/* The form card itself — framed in deep brand green, not just lifted */
.blg-hero__formwrap .gform_wrapper {
  background: var(--white);
  border: 1px solid var(--borders-strokes);
  border-radius: 24px;
  padding: 40px;
  box-shadow:
    /* Inner ring that crystallizes the boundary */
    inset 0 0 0 1px rgba(46, 94, 59, 0.08),
    /* Tight contact shadow */
    0 2px 6px rgba(46, 94, 59, 0.10),
    /* Mid-depth */
    0 12px 30px -10px rgba(46, 94, 59, 0.35),
    /* Long, deep ambient — the "frame" effect */
    0 28px 50px -16px rgba(46, 94, 59, 0.42),
    /* Deepest atmospheric */
    0 40px 70px -30px rgba(30, 64, 42, 0.50);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.blg-hero__formwrap .gform_wrapper:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px rgba(46, 94, 59, 0.10),
    0 2px 6px rgba(46, 94, 59, 0.12),
    0 16px 36px -10px rgba(46, 94, 59, 0.42),
    0 32px 60px -16px rgba(46, 94, 59, 0.48),
    0 50px 90px -30px rgba(30, 64, 42, 0.55);
}

/* Decorative green accent strip on the form card */
.blg-hero__formwrap .gform_wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-green) 0%, var(--brand-green-hover) 50%, var(--accent, #A8C64A) 100%);
  border-radius: 24px 24px 0 0;
}

/* Optional eyebrow on the form, injected via CSS */
.blg-hero__formwrap .gform_wrapper::after {
  content: "Start your program";
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-green);
  opacity: 0.7;
}

/* Form fields */
.blg-hero__formwrap .gform_fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
}

.blg-hero__formwrap .gfield_label {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-header);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  display: block;
}

/* Inline "Create My ▼" treatment for the program-type select (field id 1)
   --------------------------------------------------------------------------
   Render the label and the select on the same row, so the dropdown looks
   like it completes the sentence started by the label. Targets the first
   select field; if you ever add more selects to the form, scope this with
   #field_176_1 or similar. */
.blg-hero__formwrap .gfield--type-select,
.blg-hero__formwrap .gfield.gfield--input-type-select {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
}

.blg-hero__formwrap .gfield--type-select > .gfield_label,
.blg-hero__formwrap .gfield.gfield--input-type-select > .gfield_label {
  margin-bottom: 0;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0;
  color: var(--primary-header);
  flex-shrink: 0;
}

.blg-hero__formwrap .gfield--type-select > .ginput_container,
.blg-hero__formwrap .gfield.gfield--input-type-select > .ginput_container {
  flex: 1 1 200px;
  min-width: 0;
}

/* Mobile: stack label above select once the row would crowd. We use 767px
   as the breakpoint (matches the standard mobile cutoff) so the dropdown
   always has the full row width on phone screens — the option text
   "Community Support Fund" is too long to fit inline at typical mobile sizes. */
@media (max-width: 767px) {
  .blg-hero__formwrap .gfield--type-select,
  .blg-hero__formwrap .gfield.gfield--input-type-select {
    flex-direction: column;
    align-items: stretch;
  }
  .blg-hero__formwrap .gfield--type-select > .gfield_label,
  .blg-hero__formwrap .gfield.gfield--input-type-select > .gfield_label {
    margin-bottom: 4px;
    font-size: 14px;
  }
  /* Critical: reset the flex-grow on the select container. In the desktop
     inline layout, `flex: 1 1 200px` makes the select container grow
     horizontally to fill the remaining row. When the parent switches to
     column direction on mobile, that same rule makes it grow VERTICALLY,
     eating ~150px of empty space inside the field. Reset to flex: 0. */
  .blg-hero__formwrap .gfield--type-select > .ginput_container,
  .blg-hero__formwrap .gfield.gfield--input-type-select > .ginput_container {
    flex: 0 0 auto;
  }
}

/* Inputs and selects */
.blg-hero__formwrap .gfield input[type="text"],
.blg-hero__formwrap .gfield input[type="email"],
.blg-hero__formwrap .gfield select {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  color: var(--primary-header);
  background: var(--page-background);
  border: 1.5px solid var(--borders-strokes);
  border-radius: 12px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.blg-hero__formwrap .gfield input[type="text"]:hover,
.blg-hero__formwrap .gfield input[type="email"]:hover,
.blg-hero__formwrap .gfield select:hover {
  border-color: rgba(46, 94, 59, 0.4);
  background: var(--white);
}

.blg-hero__formwrap .gfield input[type="text"]:focus,
.blg-hero__formwrap .gfield input[type="email"]:focus,
.blg-hero__formwrap .gfield select:focus {
  outline: none;
  border-color: var(--brand-green);
  background: var(--white);
  box-shadow:
    0 0 0 4px rgba(46, 94, 59, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.02);
}

.blg-hero__formwrap .gfield input::placeholder {
  color: var(--secondary-text);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.blg-hero__formwrap .gfield input:focus::placeholder {
  opacity: 0.35;
}

/* Custom chevron on select */
.blg-hero__formwrap .gfield select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E5E3B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 44px;
  cursor: pointer;
}

/* When a value is selected on the dropdown, bump weight + color */
.blg-hero__formwrap .gfield select.blg-has-value {
  color: var(--primary-header);
  font-weight: 600;
}

/* Submit button — full width, big, hero CTA */
.blg-hero__formwrap .gform_footer {
  margin-top: 28px;
  padding: 0;
  position: relative;
}

.blg-hero__formwrap .gform_footer input[type="submit"] {
  width: 100%;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--white);
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-hover) 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow:
    0 4px 14px -2px rgba(46, 94, 59, 0.35),
    0 10px 30px -10px rgba(46, 94, 59, 0.4);
  transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.blg-hero__formwrap .gform_footer input[type="submit"]:hover {
  background-position: 100% 0%;
  transform: translateY(-2px);
  box-shadow:
    0 6px 20px -2px rgba(46, 94, 59, 0.45),
    0 14px 40px -10px rgba(46, 94, 59, 0.5);
}

.blg-hero__formwrap .gform_footer input[type="submit"]:active {
  transform: translateY(0);
}

/* Submitting state — overlay "Setting up your fund…" over the button.
   We use the .gform_footer wrapper's pseudo-element because <input> elements
   cannot have ::after / ::before pseudo-content. The JS adds .blg-form-submitting
   to the .blg-hero__formwrap on submit. */
.blg-hero__formwrap.blg-form-submitting .gform_footer input[type="submit"] {
  color: transparent !important;
  pointer-events: none;
  cursor: wait;
  background-position: 100% 0%;
}

.blg-hero__formwrap.blg-form-submitting .gform_footer::after {
  content: "Loading application\2026";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  pointer-events: none;
  /* A subtle pulsing dot to the left of the label */
  padding-left: 24px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 30%, transparent 31%);
  background-size: 8px 8px;
  background-repeat: no-repeat;
  background-position: calc(50% - 90px) center;
  animation: blgSubmitPulse 1.2s ease-in-out infinite;
}

@keyframes blgSubmitPulse {
  0%, 100% { background-color: transparent; opacity: 1; }
  50% { opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  .blg-hero__formwrap.blg-form-submitting .gform_footer::after {
    animation: none;
  }
}

/* Hide GF's default AJAX spinner — we have our own state */
.blg-hero__formwrap.blg-form-submitting .gform_ajax_spinner {
  display: none !important;
}

/* Validation states */
.blg-hero__formwrap .gfield_error input,
.blg-hero__formwrap .gfield_error select {
  border-color: #c0392b !important;
  background: rgba(192, 57, 43, 0.03);
}

.blg-hero__formwrap .gfield_validation_message,
.blg-hero__formwrap .validation_message {
  font-size: 13px;
  color: #c0392b;
  margin-top: 6px;
  font-weight: 500;
}

.blg-hero__formwrap .gform_validation_errors {
  display: none;
}

/* Spinner / loading state */
.blg-hero__formwrap .gform_ajax_spinner {
  margin-left: 10px;
  vertical-align: middle;
}

/* Form description (if shown) */
.blg-hero__formwrap .gfield_description {
  font-size: 13px;
  color: var(--secondary-text);
  margin-top: 6px;
  line-height: 1.5;
}

/* Program oneliner — short descriptive blurb under the Program Name input.
   These live inside Gravity Forms HTML fields (one per program type) with
   GF conditional logic showing only the active one. They sit visually as
   a subtle annotation, like a field hint, but with a touch more presence
   than a typical description. */
.blg-hero__formwrap .programoneliner {
  margin-top: 10px;
  margin-bottom: 0;
  padding-left: 18px;
  position: relative;
  /* Subtle left accent stripe in brand green */
  border-left: 2px solid rgba(46, 94, 59, 0.25);
  animation: blgOneLinerFadeIn 0.4s ease-out;
}

.blg-hero__formwrap .programoneliner p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--secondary-text);
  font-style: italic;
  font-weight: 500;
}

/* Tighten the parent gfield wrapping each oneliner so it doesn't add
   extra vertical space — GF's default field spacing is too generous for
   what's essentially a label annotation. */
.blg-hero__formwrap .gfield--type-html:has(.programoneliner) {
  margin-top: -6px;
  padding: 0;
}

@keyframes blgOneLinerFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .blg-hero__formwrap .programoneliner { animation: none; }
}

/* Reserved space for AJAX spinner so the layout doesn't jump on submit */
.blg-hero__formwrap .gform_ajax_spinner { width: 20px; height: 20px; }

/* Widen narrow centered subheads. The block JSON sets max-width values
   (560px / 640px) that were tighter than the actual copy needed. These
   overrides give the text more horizontal room so it breaks more naturally.
   Applied via class rather than ID so editorial copy changes don't require
   re-tuning the width. */
.gb-text-chooser-004 { max-width: 760px !important; }
.gb-text-blog-004 { max-width: 720px !important; }

/* ============================================================
   SECTION BACKGROUNDS — soft transitions across the page
   ============================================================
   With the darker page-background (#ECF1EC), the meeting points
   between sections need smoothing so the page reads as one
   continuous surface rather than a stack of colored bands.

   Strategy:
   - Sections that share page-background bleed seamlessly into
     each other (no transition needed)
   - Sections with different bgs (chooser white, confidence dark
     green) get gradient soft-edges via ::before/::after pseudos
     so the color change reads as a fade rather than a hard line
   - The off-ramp section gets its block-JSON white background
     overridden to page-background since its inner card already
     provides visual distinction
   ============================================================ */

/* Off-ramp section background — match the page surface so the inner
   card pops as the deliberate element. */
.gb-element-offramp-001 {
  background-color: var(--page-background) !important;
}

/* Chooser section — soft fade in/out top and bottom edges, since the
   white section sits between two page-background neighbors. We use
   inset gradients painted into the section itself, no extra DOM needed. */
.gb-element-chooser-001 {
  background-image:
    linear-gradient(to bottom,
      var(--page-background) 0%,
      var(--white) 60px,
      var(--white) calc(100% - 60px),
      var(--page-background) 100%
    ) !important;
  background-color: transparent !important;
}

/* Confidence band — fade from page-background INTO the dark green at the
   top, and back OUT to page-background at the bottom. The fade zones are
   kept tight (30px) so the dark green still feels substantial and owns
   the section visually. */
.blg-confidence {
  background-color: transparent !important;
  background-image:
    linear-gradient(to bottom,
      var(--page-background) 0%,
      var(--dark-brand-green) 30px,
      var(--dark-brand-green) calc(100% - 30px),
      var(--page-background) 100%
    ) !important;
}

/* The confidence band's existing radial overlays need to be constrained
   so they don't paint over the fade zones. */
.blg-confidence::before {
  top: 30px !important;
  bottom: 30px !important;
}

/* ============================================================
   HERO COLUMN LAYOUT — fix sub-pixel wrap issue
   The block JSON sets:
     - container column-gap: 60px
     - copy column: width: 50%   (= 590px of 1180)
     - form column: width: 45%   (= 531px of 1180)
   Total: 590 + 60 + 531 = 1181px, which exceeds the 1180px container
   by one pixel. Flex-wrap then drops the form column to a new line.
   We tighten the gap to give the columns breathing room and also
   convert the rigid widths to flex-basis so they share the leftover
   space naturally without sub-pixel rounding bugs.
   ============================================================ */
@media (min-width: 992px) {
  .gb-element-hero-002 {
    column-gap: 40px !important;
  }
  .blg-hero__copy {
    flex: 1 1 50% !important;
    width: auto !important;
    min-width: 0;
  }
  .blg-hero__formwrap {
    flex: 1 1 45% !important;
    width: auto !important;
    min-width: 0;
  }
}

/* ============================================================
   4. HERO TRUST STRIP (below H1) — tighten spacing
   ============================================================ */
/* Hero trust strip — tighten column gap so all three items fit on one row,
   and pull slightly left so the row aligns with the H1 baseline at every size.
   The check items contain "$0 setup · 6.5% platform fee" which is the
   longest, ~28 chars; with the column at ~590px (50% of a 1180 container)
   we need everything packed tightly. 13px font keeps the three items under
   the column width with a comfortable margin at every desktop breakpoint. */
.blg-hero__trust {
  padding-left: 0;
  column-gap: 10px !important;
  margin-left: -2px;
}
.blg-hero__trust li {
  list-style: none;
  white-space: nowrap;
  /* Force smaller font at all widths so all three items fit on one row */
  font-size: 13px !important;
  /* Reduce gap between icon and label inside each item */
  column-gap: 0.3em !important;
}
.blg-hero__trust li .gb-shape svg {
  width: 14px !important;
  height: 14px !important;
}

@media (max-width: 480px) {
  /* On very narrow screens, allow wrapping again so items don't overflow */
  .blg-hero__trust li { white-space: normal; }
}

/* ============================================================
   5. CHOOSER CARDS — extra polish on hover (icon nudge)
   ============================================================ */
.blg-choice {
  position: relative;
}

.blg-choice .gb-shape svg {
  transition: transform 0.4s ease;
}

.blg-choice:hover .gb-shape:first-of-type svg {
  transform: scale(1.08) rotate(-2deg);
}

/* Tighter bullet rows so each check + label fits on one line.
   The block JSON sets column-gap:10px and icon 16px — we trim both
   so the text gets more horizontal room. */
.blg-choice__bullets li {
  column-gap: 6px !important;
}
.blg-choice__bullets li .gb-shape {
  flex-shrink: 0;
  margin-left: -2px; /* outdent slightly so text aligns closer to card edge */
}
.blg-choice__bullets li .gb-shape svg {
  width: 14px !important;
  height: 14px !important;
}

/* The featured "Most popular" card sits slightly forward on desktop */
@media (min-width: 992px) {
  .blg-choice--featured {
    transform: translateY(-8px);
  }
  .blg-choice--featured:hover {
    transform: translateY(-12px) !important;
  }
}

/* The "Most popular" badge needs to overhang the card's top edge by 12px,
   but the card has overflow:hidden from the block JSON (to contain the
   gradient header's rounded corners). Override overflow to visible, then
   re-apply the corner clipping to the gradient header child instead.

   We also replace the card's 2px solid green border with a box-shadow inset
   of the same width/color. Reason: at the rounded corners of a thick
   border, antialiasing leaves a thin sliver of card background visible
   between the border curve and the inner content. Box-shadow inset
   follows border-radius perfectly without that mismatch. */
.blg-choice--featured {
  overflow: visible !important;
  /* Cancel the 2px solid border from the block JSON */
  border-color: transparent !important;
  /* Re-create the green frame as an inset shadow that hugs the radius cleanly */
  box-shadow:
    inset 0 0 0 2px var(--brand-green),
    0 4px 50px -7px rgba(46,94,59,0.12) !important;
}
.blg-choice--featured:is(:hover, :focus) {
  box-shadow:
    inset 0 0 0 2px var(--brand-green),
    0 30px 50px -12px rgba(46,94,59,0.25) !important;
}
/* Clip the gradient header (first DIV child — NOT first-child, which
   matches the absolutely-positioned "Most popular" span before it) to
   the card's top corners. */
.blg-choice--featured > div:first-of-type {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
}

/* ============================================================
   6. OFF-RAMP SECTION — make the card pop against page-bg
   ============================================================
   With the darker page-bg, the block-JSON card bg (rgba green 0.04→0.01)
   is barely distinguishable from the surrounding surface. We deepen the
   card to white-with-warmth, strengthen the border, add a real shadow,
   and make the left accent stripe more saturated. */
.blg-offramp {
  position: relative;
  overflow: hidden;
  /* Override the very-subtle block-JSON gradient with a slightly warm
     white so the card clearly reads as a distinct surface. */
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 252, 249, 0.95) 100%) !important;
  /* Stronger border than the block-JSON's --borders-strokes */
  border-color: rgba(46, 94, 59, 0.18) !important;
  /* Add a real shadow so the card lifts off the page surface */
  box-shadow:
    0 2px 8px rgba(46, 94, 59, 0.06),
    0 12px 32px -8px rgba(46, 94, 59, 0.12),
    0 24px 48px -16px rgba(46, 94, 59, 0.10);
}

.blg-offramp::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--brand-green) 0%, var(--brand-green-hover) 100%);
  /* Bumped from 0.5 to 0.85 — the accent stripe should now read as
     deliberate, not just decorative. */
  opacity: 0.85;
}

/* ============================================================
   7. CONFIDENCE BAND — soft texture
   ============================================================ */
.blg-confidence::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(168, 198, 74, 0.08) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

/* Pricing numbers — small lift on appearance */
.blg-pricing__num {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   8. SCROLL-REVEAL — sections fade up on enter
   The JS adds .blg-revealed when in view.
   ============================================================ */
.blg-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
  .blg-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   9. MOBILE REFINEMENTS
   ============================================================ */
@media (max-width: 991px) {
  .blg-hero__formwrap .gform_wrapper {
    padding: 28px 24px;
  }
  .blg-hero__formwrap .gform_wrapper::after {
    top: 14px;
    right: 18px;
    font-size: 10px;
  }
}

@media (max-width: 767px) {
  #blg-hero {
    padding-top: 50px;
    padding-bottom: 30px;
  }
  #blg-hero::before,
  #blg-hero::after {
    width: 240px;
    height: 240px;
    filter: blur(60px);
  }
  .blg-hero__h1 {
    letter-spacing: -0.015em;
  }
  .blg-hero__formwrap .gform_wrapper {
    padding: 24px 20px;
  }
  .blg-hero__formwrap .gform_footer input[type="submit"] {
    padding: 14px 24px;
    font-size: 15px;
  }
}

/* Smooth anchor scrolling for #blg-hero / #findprogram jumps */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}