/* =========================================================
   BenTreder.com — Modern Clean Theme
   Visual Polish Phase 2 (services rescue)

   Scope: every rule is prefixed with .servicesPage so this
   file can ONLY affect services.html.

   Direction: a modern professional page, not a stack of
   glass boxes. Wider shell, real multi-column layout,
   flat/open link sections, lighter cards, calmer noise,
   confident headings. Keeps the green Ben Treder accent.

   Loaded last, so it wins same-specificity rules from
   global.css and the page's inline <style> block. Revert by
   removing the single <link> in services.html.
   ========================================================= */

/* ---------- 1. Wider shell + readable measure ---------- */
.servicesPage{
  --max:1280px;            /* up from the global 1080px */
  --radius:20px;
  --radius2:18px;
  --radius-sm:14px;
}

.servicesPage .wrap{
  width:min(calc(100% - 48px), var(--max));
}

/* ---------- 2. Softer neutral background, no noise ---------- */
.servicesPage{
  background:
    radial-gradient(1200px 640px at 50% -10%, rgba(89,168,126,.07), transparent 60%),
    linear-gradient(180deg, #fbfdfb 0%, #f4f7f4 100%);
}

.servicesPage .fx,
.servicesPage .grain{
  display:none !important;
}

/* ---------- 3. Remove frosted glass blur ---------- */
.servicesPage .glass,
.servicesPage .section,
.servicesPage .card,
.servicesPage .subCard,
.servicesPage .app,
.servicesPage .proofCard,
.servicesPage .ctaBox,
.servicesPage .statusCard,
.servicesPage .quickPanel,
.servicesPage .services-main,
.servicesPage .services-side,
.servicesPage .services-service-card,
.servicesPage .topbar{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ---------- 4. Remove per-card gradient overlays ---------- */
.servicesPage .glass::before,
.servicesPage .section::before,
.servicesPage .card::before,
.servicesPage .subCard::before,
.servicesPage .app::before,
.servicesPage .proofCard::before,
.servicesPage .ctaBox::before,
.servicesPage .statusCard::before,
.servicesPage .quickPanel::before{
  display:none !important;
}

/* ---------- 5. Confident section rhythm ---------- */
.servicesPage main section{
  margin-top:56px;
}

.servicesPage main .section:first-child,
.servicesPage main section:first-child{
  margin-top:0;
}

/* ---------- 6. Cleaner, lighter cards ---------- */
.servicesPage .glass,
.servicesPage .section,
.servicesPage .services-main,
.servicesPage .services-side,
.servicesPage .statusCard,
.servicesPage .subCard,
.servicesPage .services-service-card,
.servicesPage .ctaBox{
  background:#ffffff;
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 18px rgba(32,64,48,.05);
}

/* :not(.featured) keeps the dark-green featured card intact. */
.servicesPage .servicesChooserCard:not(.featured){
  background:#ffffff;
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 18px rgba(32,64,48,.05);
}

.servicesPage .servicesTrustStrip div,
.servicesPage .portrait{
  background:#ffffff;
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 3px 14px rgba(32,64,48,.05);
}

/* Calmer hover lift across cards. */
.servicesPage .servicesChooserCard:hover,
.servicesPage .services-service-card:hover,
.servicesPage .subCard:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(32,64,48,.09);
  border-color:rgba(39,133,100,.20);
}

/* Subtler green accent bar on service cards. */
.servicesPage .services-service-card:before{
  opacity:.5;
}

/* ---------- 7. FLAT / OPEN sections (no box for link rows) ----------
   Sections tagged .flatSection drop the card chrome and sit
   open on the page background, so the page is not one long
   column of boxes. */
.servicesPage .flatSection,
.servicesPage .flatSection.glass,
.servicesPage .flatSection.section{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
}

.servicesPage .flatSection::before{
  display:none !important;
}

/* Give flat sections a clean divider feel rather than a box. */
.servicesPage .flatSection .sectionHead{
  margin-bottom:14px;
}

/* ---------- 8. Real multi-column layouts ---------- */
/* The 6 service cards: 2-up grid instead of a tall single column. */
.servicesPage .services-section-stack{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
}

/* Keep the two-column comparison/FAQ blocks tidy. */
.servicesPage .services-split{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}

/* Plugin info blocks: clean 2-up cards. */
.servicesPage .contentGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}

/* ---------- 9. Confident headings ---------- */
.servicesPage .sectionHead{
  margin-bottom:18px;
}

.servicesPage .sectionHead h2{
  font-size:clamp(26px, 2.4vw, 34px);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:1000;
}

.servicesPage .sectionHead p{
  max-width:70ch;
  line-height:1.7;
}

.servicesPage .services-service-card h2{
  font-size:clamp(22px, 1.8vw, 27px);
  letter-spacing:-.02em;
}

/* ---------- 10. Readable body copy ---------- */
.servicesPage .services-lead{
  line-height:1.78;
  max-width:62ch;
}

.servicesPage .subCard p,
.servicesPage .services-desc{
  line-height:1.7;
}

/* ---------- 11. Calmer header bar ---------- */
.servicesPage .topbar{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 16px rgba(32,64,48,.05);
}

/* ---------- 12. Polished, simple buttons ---------- */
.servicesPage .services-jump a.primary,
.servicesPage .btn.primary{
  background:linear-gradient(135deg, #5ec79b, #7fd9b4);
  border-color:rgba(46,150,110,.40);
  box-shadow:0 5px 14px rgba(49,143,109,.16);
}

.servicesPage .services-jump a,
.servicesPage .services-chip-link,
.servicesPage .services-chip,
.servicesPage .tag,
.servicesPage .btn:not(.primary){
  background:#ffffff;
  border-color:rgba(20,48,38,.12);
  box-shadow:0 2px 8px rgba(32,64,48,.05);
}

.servicesPage .services-jump a:hover,
.servicesPage .services-chip-link:hover,
.servicesPage .tag:hover,
.servicesPage .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(32,64,48,.10);
  border-color:rgba(39,133,100,.26);
}

/* ---------- 13. Final CTA reads as the climax ---------- */
/* A soft green feature panel, not just another white box. */
.servicesPage .servicesFinalCTA .ctaBox{
  background:linear-gradient(135deg, #eafaf2, #f3fbf6);
  border:1px solid rgba(46,150,110,.20);
  box-shadow:0 8px 28px rgba(49,143,109,.10);
}

/* ---------- 14. Roomier card padding ---------- */
.servicesPage .section,
.servicesPage .subCard,
.servicesPage .ctaBox,
.servicesPage .statusCard,
.servicesPage .services-service-card{
  padding:32px;
}

.servicesPage .services-main,
.servicesPage .services-side{
  padding:36px;
}

/* ---------- 15. Responsive ---------- */
@media (max-width:980px){
  .servicesPage .services-section-stack,
  .servicesPage .services-split,
  .servicesPage .contentGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width:860px){
  .servicesPage main section{
    margin-top:36px;
  }

  .servicesPage .section,
  .servicesPage .subCard,
  .servicesPage .ctaBox,
  .servicesPage .statusCard,
  .servicesPage .services-service-card{
    padding:24px;
  }

  .servicesPage .services-main,
  .servicesPage .services-side{
    padding:22px;
  }

  .servicesPage .wrap{
    width:min(calc(100% - 24px), var(--max));
  }
}


/* =========================================================
   PRICING PAGE (.pricingPage)
   Same modern clean system as services, mapped to the
   pricing page's component classes. Visual Polish Phase 3.
   ========================================================= */

/* ---------- Wider shell + readable measure ---------- */
.pricingPage{
  --max:1280px;
  --radius:20px;
  --radius2:18px;
  --radius-sm:14px;
}

.pricingPage .wrap{
  width:min(calc(100% - 48px), var(--max));
}

/* ---------- Softer neutral background, no noise ---------- */
.pricingPage{
  background:
    radial-gradient(1200px 640px at 50% -10%, rgba(89,168,126,.07), transparent 60%),
    linear-gradient(180deg, #fbfdfb 0%, #f4f7f4 100%);
}

.pricingPage .fx,
.pricingPage .grain{
  display:none !important;
}

/* ---------- Remove frosted glass blur ---------- */
.pricingPage .glass,
.pricingPage .section,
.pricingPage .pricing-hero,
.pricingPage .pricing-main,
.pricingPage .pricing-side,
.pricingPage .pricing-card,
.pricingPage .startCard,
.pricingPage .pricing-note,
.pricingPage .subCard,
.pricingPage .ctaBox,
.pricingPage .statusCard,
.pricingPage .topbar{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ---------- Remove per-card gradient overlays ---------- */
.pricingPage .glass::before,
.pricingPage .section::before,
.pricingPage .card::before,
.pricingPage .subCard::before,
.pricingPage .ctaBox::before,
.pricingPage .statusCard::before{
  display:none !important;
}

/* ---------- Confident section rhythm ---------- */
.pricingPage main section{
  margin-top:56px;
}

.pricingPage main .section:first-child,
.pricingPage main section:first-child{
  margin-top:0;
}

/* ---------- Cleaner, lighter cards (featured cards untouched) ---------- */
.pricingPage .glass,
.pricingPage .section,
.pricingPage .pricing-hero,
.pricingPage .pricing-main,
.pricingPage .pricing-side,
.pricingPage .pricing-card,
.pricingPage .startCard:not(.featured),
.pricingPage .pricing-note,
.pricingPage .subCard,
.pricingPage .ctaBox,
.pricingPage .statusCard{
  background:#ffffff;
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 18px rgba(32,64,48,.05);
}

.pricingPage .pricing-card:hover,
.pricingPage .startCard:hover,
.pricingPage .subCard:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(32,64,48,.09);
  border-color:rgba(39,133,100,.20);
}

/* ---------- Flat / open sections for link + chip rows ---------- */
.pricingPage .flatSection,
.pricingPage .flatSection.glass,
.pricingPage .flatSection.section{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
}

.pricingPage .flatSection::before{
  display:none !important;
}

.pricingPage .flatSection .sectionHead{
  margin-bottom:14px;
}

/* ---------- Multi-column rhythm ---------- */
.pricingPage .pricing-grid{
  gap:22px;
}

.pricingPage .startGrid{
  gap:18px;
}

.pricingPage .pricing-split{
  gap:18px;
}

/* ---------- Confident headings ---------- */
.pricingPage .sectionHead{
  margin-bottom:18px;
}

.pricingPage .sectionHead h2{
  font-size:clamp(26px, 2.4vw, 34px);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:1000;
}

.pricingPage .sectionHead p{
  max-width:70ch;
  line-height:1.7;
}

.pricingPage .pricing-card h2{
  letter-spacing:-.02em;
}

/* ---------- Readable body copy ---------- */
.pricingPage .pricing-lead{
  line-height:1.78;
  max-width:62ch;
}

.pricingPage .pricing-note p,
.pricingPage .subCard p{
  line-height:1.7;
}

/* ---------- Calmer header bar ---------- */
.pricingPage .topbar{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 16px rgba(32,64,48,.05);
}

/* ---------- Polished, simple buttons ---------- */
.pricingPage .pricing-jump a.primary,
.pricingPage .btn.primary{
  background:linear-gradient(135deg, #5ec79b, #7fd9b4);
  border-color:rgba(46,150,110,.40);
  box-shadow:0 5px 14px rgba(49,143,109,.16);
}

.pricingPage .pricing-jump a,
.pricingPage .pricing-chip-link,
.pricingPage .pricing-chip,
.pricingPage .tag,
.pricingPage .btn:not(.primary){
  background:#ffffff;
  border-color:rgba(20,48,38,.12);
  box-shadow:0 2px 8px rgba(32,64,48,.05);
}

.pricingPage .pricing-jump a:hover,
.pricingPage .pricing-chip-link:hover,
.pricingPage .tag:hover,
.pricingPage .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(32,64,48,.10);
  border-color:rgba(39,133,100,.26);
}

/* ---------- Roomier padding ---------- */
.pricingPage .section,
.pricingPage .ctaBox{
  padding:32px;
}

.pricingPage .pricing-card,
.pricingPage .startCard,
.pricingPage .pricing-note,
.pricingPage .subCard,
.pricingPage .statusCard{
  padding:28px;
}

.pricingPage .pricing-main,
.pricingPage .pricing-side{
  padding:36px;
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .pricingPage .pricing-split{
    grid-template-columns:1fr;
  }
}

@media (max-width:860px){
  .pricingPage main section{
    margin-top:36px;
  }

  .pricingPage .section,
  .pricingPage .ctaBox{
    padding:24px;
  }

  .pricingPage .pricing-card,
  .pricingPage .startCard,
  .pricingPage .pricing-note,
  .pricingPage .subCard{
    padding:22px;
  }

  .pricingPage .pricing-main,
  .pricingPage .pricing-side{
    padding:22px;
  }

  .pricingPage .wrap{
    width:min(calc(100% - 24px), var(--max));
  }
}


/* =========================================================
   CONTACT PAGE (.contactPage)
   Same modern clean system as services, mapped to the
   contact page's component classes. Visual Polish Phase 3.
   The contact form fields are left to the page's own styles;
   only the surrounding cards/layout are cleaned up.
   ========================================================= */

/* ---------- Wider shell + readable measure ---------- */
.contactPage{
  --max:1280px;
  --radius:20px;
  --radius2:18px;
  --radius-sm:14px;
}

.contactPage .wrap{
  width:min(calc(100% - 48px), var(--max));
}

/* ---------- Softer neutral background, no noise ---------- */
.contactPage{
  background:
    radial-gradient(1200px 640px at 50% -10%, rgba(89,168,126,.07), transparent 60%),
    linear-gradient(180deg, #fbfdfb 0%, #f4f7f4 100%);
}

.contactPage .fx,
.contactPage .grain{
  display:none !important;
}

/* ---------- Remove frosted glass blur ---------- */
.contactPage .glass,
.contactPage .section,
.contactPage .contact-hero,
.contactPage .contact-main,
.contactPage .contact-side,
.contactPage .contact-card,
.contactPage .contactProcessCard,
.contactPage .subCard,
.contactPage .ctaBox,
.contactPage .statusCard,
.contactPage .topbar{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ---------- Remove per-card gradient overlays ---------- */
.contactPage .glass::before,
.contactPage .section::before,
.contactPage .card::before,
.contactPage .subCard::before,
.contactPage .ctaBox::before,
.contactPage .statusCard::before{
  display:none !important;
}

/* ---------- Confident section rhythm ---------- */
.contactPage main section{
  margin-top:56px;
}

.contactPage main .section:first-child,
.contactPage main section:first-child{
  margin-top:0;
}

/* ---------- Cleaner, lighter cards (featured process card untouched) ---------- */
.contactPage .glass,
.contactPage .section,
.contactPage .contact-hero,
.contactPage .contact-main,
.contactPage .contact-side,
.contactPage .contact-card,
.contactPage .contactProcessCard:not(.featured),
.contactPage .subCard,
.contactPage .ctaBox,
.contactPage .statusCard{
  background:#ffffff;
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 18px rgba(32,64,48,.05);
}

.contactPage .contactProcessCard:hover,
.contactPage .contact-card:hover,
.contactPage .subCard:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(32,64,48,.09);
  border-color:rgba(39,133,100,.20);
}

/* ---------- Flat / open sections for link + chip rows ---------- */
.contactPage .flatSection,
.contactPage .flatSection.glass,
.contactPage .flatSection.section{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
}

.contactPage .flatSection::before{
  display:none !important;
}

.contactPage .flatSection .sectionHead{
  margin-bottom:14px;
}

/* ---------- Confident headings ---------- */
.contactPage .sectionHead{
  margin-bottom:18px;
}

.contactPage .sectionHead h2{
  font-size:clamp(26px, 2.4vw, 34px);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:1000;
}

.contactPage .sectionHead p{
  max-width:70ch;
  line-height:1.7;
}

/* ---------- Readable body copy ---------- */
.contactPage .contact-lead{
  line-height:1.78;
  max-width:62ch;
}

.contactPage .subCard p,
.contactPage .contact-mini{
  line-height:1.7;
}

/* ---------- Calmer header bar ---------- */
.contactPage .topbar{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 16px rgba(32,64,48,.05);
}

/* ---------- Polished, simple buttons ---------- */
.contactPage .contact-actions a.primary,
.contactPage .btn.primary,
.contactPage .contact-submit button{
  background:linear-gradient(135deg, #5ec79b, #7fd9b4);
  border-color:rgba(46,150,110,.40);
  box-shadow:0 5px 14px rgba(49,143,109,.16);
}

.contactPage .contact-actions a:not(.primary),
.contactPage .tag,
.contactPage .btn:not(.primary){
  background:#ffffff;
  border-color:rgba(20,48,38,.12);
  box-shadow:0 2px 8px rgba(32,64,48,.05);
}

.contactPage .contact-actions a:hover,
.contactPage .tag:hover,
.contactPage .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(32,64,48,.10);
  border-color:rgba(39,133,100,.26);
}

/* ---------- Roomier padding ---------- */
.contactPage .section,
.contactPage .contact-card,
.contactPage .ctaBox{
  padding:32px;
}

.contactPage .subCard,
.contactPage .statusCard,
.contactPage .contactProcessCard{
  padding:24px;
}

.contactPage .contact-main,
.contactPage .contact-side{
  padding:34px;
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .contactPage main section{
    margin-top:36px;
  }

  .contactPage .section,
  .contactPage .contact-card,
  .contactPage .ctaBox{
    padding:24px;
  }

  .contactPage .contact-main,
  .contactPage .contact-side{
    padding:22px;
  }

  .contactPage .wrap{
    width:min(calc(100% - 24px), var(--max));
  }
}


/* =========================================================
   TOOLS PAGE (.toolPage)
   Same modern clean system, mapped to the tools page's
   component classes. Visual Polish Phase 4.
   ========================================================= */

/* ---------- Wider shell ---------- */
.toolPage{
  --max:1280px;
  --radius:20px;
  --radius2:18px;
  --radius-sm:14px;
}

.toolPage .wrap{
  width:min(calc(100% - 48px), var(--max));
}

.toolPage .fx,
.toolPage .grain{
  display:none !important;
}

/* ---------- Remove frosted glass blur ---------- */
.toolPage .glass,
.toolPage .section,
.toolPage .heroMain,
.toolPage .heroSide,
.toolPage .toolCard,
.toolPage .noticeBox,
.toolPage .topbar{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ---------- Remove per-card gradient overlays ---------- */
.toolPage .glass::before,
.toolPage .section::before,
.toolPage .card::before,
.toolPage .ctaBox::before{
  display:none !important;
}

/* ---------- Confident section rhythm ---------- */
.toolPage main section{
  margin-top:56px;
}

.toolPage main section:first-child{
  margin-top:0;
}

/* ---------- Cleaner, lighter cards (page-specific classes) ---------- */
.toolPage .toolCard,
.toolPage .noticeBox{
  background:#ffffff;
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 18px rgba(32,64,48,.05);
}

.toolPage .toolCard:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(32,64,48,.09);
  border-color:rgba(39,133,100,.20);
}

/* ---------- Flat / open sections for link + chip rows ---------- */
.toolPage .flatSection,
.toolPage .flatSection.glass,
.toolPage .flatSection.section{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
}

.toolPage .flatSection::before{
  display:none !important;
}

.toolPage .flatSection .sectionHead{
  margin-bottom:14px;
}

/* ---------- Multi-column rhythm ---------- */
.toolPage .toolGrid{
  gap:22px;
}

/* ---------- Confident headings ---------- */
.toolPage .sectionHead{
  margin-bottom:18px;
}

.toolPage .sectionHead h2{
  font-size:clamp(26px, 2.4vw, 34px);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:1000;
}

.toolPage .sectionHead p{
  max-width:70ch;
  line-height:1.7;
}

/* ---------- Readable body copy ---------- */
.toolPage .heroLead{
  line-height:1.78;
  max-width:64ch;
}

/* ---------- Calmer header bar ---------- */
.toolPage .topbar{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 16px rgba(32,64,48,.05);
}

/* ---------- Polished, simple buttons ---------- */
.toolPage .btn.primary{
  background:linear-gradient(135deg, #5ec79b, #7fd9b4);
  border-color:rgba(46,150,110,.40);
  box-shadow:0 5px 14px rgba(49,143,109,.16);
}

.toolPage .tag,
.toolPage .btn:not(.primary){
  background:#ffffff;
  border-color:rgba(20,48,38,.12);
  box-shadow:0 2px 8px rgba(32,64,48,.05);
}

.toolPage .tag:hover,
.toolPage .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(32,64,48,.10);
  border-color:rgba(39,133,100,.26);
}

/* ---------- Roomier padding ---------- */
.toolPage .toolCard{
  padding:26px;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .toolPage main section{
    margin-top:36px;
  }

  .toolPage .wrap{
    width:min(calc(100% - 24px), var(--max));
  }
}


/* =========================================================
   PROJECTS PAGE (.projectsPage)
   Same modern clean system, mapped to the projects page's
   component classes. Visual Polish Phase 4.
   The dark "aiwaProjectPremium" feature section (which holds
   the Stripe purchase link and uses light text on a dark
   panel) is deliberately left alone.
   ========================================================= */

/* ---------- Wider shell ---------- */
.projectsPage{
  --max:1280px;
  --radius:20px;
  --radius2:18px;
  --radius-sm:14px;
}

.projectsPage .wrap{
  width:min(calc(100% - 48px), var(--max));
}

.projectsPage .fx,
.projectsPage .grain{
  display:none !important;
}

/* ---------- Remove frosted glass blur ---------- */
.projectsPage .glass,
.projectsPage .section,
.projectsPage .projectHeroMain,
.projectsPage .projectHeroSide,
.projectsPage .projectStat,
.projectsPage .projectTile,
.projectsPage .proofBox,
.projectsPage .focusCard,
.projectsPage .subCard,
.projectsPage .ctaBox,
.projectsPage .topbar{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ---------- Remove per-card gradient overlays ---------- */
.projectsPage .glass::before,
.projectsPage .section::before,
.projectsPage .card::before,
.projectsPage .subCard::before,
.projectsPage .ctaBox::before{
  display:none !important;
}

/* ---------- Confident section rhythm ---------- */
.projectsPage main section{
  margin-top:56px;
}

.projectsPage main section:first-child{
  margin-top:0;
}

/* ---------- Cleaner, lighter cards (page-specific classes;
   featured cards and the dark AI feature are excluded) ---------- */
.projectsPage .projectHeroMain,
.projectsPage .projectHeroSide,
.projectsPage .projectStat,
.projectsPage .projectTile,
.projectsPage .proofBox:not(.featured),
.projectsPage .focusCard{
  background:#ffffff;
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 18px rgba(32,64,48,.05);
}

.projectsPage .projectTile:hover,
.projectsPage .proofBox:not(.featured):hover,
.projectsPage .focusCard:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(32,64,48,.09);
  border-color:rgba(39,133,100,.20);
}

/* ---------- Flat / open sections for link + chip rows ---------- */
.projectsPage .flatSection,
.projectsPage .flatSection.glass,
.projectsPage .flatSection.section{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
}

.projectsPage .flatSection::before{
  display:none !important;
}

.projectsPage .flatSection .sectionHead{
  margin-bottom:14px;
}

/* ---------- Multi-column rhythm ---------- */
.projectsPage .projectGrid{
  gap:22px;
}

.projectsPage .proofGrid,
.projectsPage .focusGrid,
.projectsPage .btGrid3{
  gap:16px;
}

/* ---------- Confident headings ---------- */
.projectsPage .sectionHead{
  margin-bottom:18px;
}

.projectsPage .sectionHead h2{
  font-size:clamp(26px, 2.4vw, 34px);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:1000;
}

.projectsPage .sectionHead p{
  max-width:70ch;
  line-height:1.7;
}

/* ---------- Readable body copy ---------- */
.projectsPage .projectsLead{
  line-height:1.78;
  max-width:64ch;
}

/* ---------- Calmer header bar ---------- */
.projectsPage .topbar{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 16px rgba(32,64,48,.05);
}

/* ---------- Polished, simple buttons (gold accents left alone) ---------- */
.projectsPage .projectsActions a.primary,
.projectsPage .btn.primary{
  background:linear-gradient(135deg, #5ec79b, #7fd9b4);
  border-color:rgba(46,150,110,.40);
  box-shadow:0 5px 14px rgba(49,143,109,.16);
}

.projectsPage .tag,
.projectsPage .btn:not(.primary){
  background:#ffffff;
  border-color:rgba(20,48,38,.12);
  box-shadow:0 2px 8px rgba(32,64,48,.05);
}

.projectsPage .tag:hover,
.projectsPage .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(32,64,48,.10);
  border-color:rgba(39,133,100,.26);
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .projectsPage main section{
    margin-top:36px;
  }

  .projectsPage .wrap{
    width:min(calc(100% - 24px), var(--max));
  }
}


/* =========================================================
   WORDPRESS PLUGIN PRODUCT PAGES (.btLocalPage)
   Shared modern clean system for the 4 plugin product pages
   (shop-buddy, shop-buddy-premium, website-fix-finder,
   website-fix-finder-premium). Visual Polish Phase 5.

   These pages already load the full Group A stack
   (home/global/global-fixes/comfort/local-growth), so they
   are Group A pages; this block scopes to their shared
   .btLocalPage body class plus their prefixed components
   (tsb*, tsbp*, twff*, twffp*) via [class*="..."] selectors.
   ========================================================= */

/* ---------- Wider shell ---------- */
.btLocalPage{
  --max:1280px;
  --radius:20px;
  --radius2:18px;
  --radius-sm:14px;
}

.btLocalPage .wrap{
  width:min(calc(100% - 48px), var(--max));
}

.btLocalPage .fx,
.btLocalPage .grain{
  display:none !important;
}

/* ---------- Remove frosted glass blur ---------- */
.btLocalPage .glass,
.btLocalPage .section,
.btLocalPage [class*="Hero"],
.btLocalPage [class*="Panel"],
.btLocalPage [class*="Card"],
.btLocalPage .topbar{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ---------- Remove per-card gradient overlays ---------- */
.btLocalPage .glass::before,
.btLocalPage .section::before{
  display:none !important;
}

/* ---------- Confident section rhythm ---------- */
.btLocalPage main section{
  margin-top:48px;
}

.btLocalPage main section:first-child{
  margin-top:0;
}

/* ---------- Cleaner, lighter cards (emphasis cards left alone) ---------- */
.btLocalPage [class*="Card"]:not(.highlight):not(.featured),
.btLocalPage [class*="Panel"]:not(.highlight):not(.featured){
  background:#ffffff;
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 18px rgba(32,64,48,.05);
}

.btLocalPage [class*="Card"]:not(.highlight):not(.featured):hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(32,64,48,.09);
  border-color:rgba(39,133,100,.20);
}

/* ---------- Confident headings ---------- */
.btLocalPage .sectionHead{
  margin-bottom:18px;
}

.btLocalPage .sectionHead h2{
  font-size:clamp(26px, 2.4vw, 34px);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:1000;
}

.btLocalPage .sectionHead p{
  max-width:70ch;
  line-height:1.7;
}

/* ---------- Calmer header bar ---------- */
.btLocalPage .topbar{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 16px rgba(32,64,48,.05);
}

/* ---------- Brand-green eyebrow chip (was cyan) ---------- */
.btLocalPage .btEyebrow{
  color:#1f5b41;
  border-color:rgba(46,150,110,.30);
  background:rgba(94,199,155,.12);
}

/* ---------- Polished, simple buttons (green accent) ---------- */
.btLocalPage [class*="Btn"].primary{
  background:linear-gradient(135deg, #5ec79b, #7fd9b4);
  border-color:rgba(46,150,110,.40);
  box-shadow:0 5px 14px rgba(49,143,109,.16);
}

.btLocalPage [class*="Btn"].secondary,
.btLocalPage [class*="Btn"]:not(.primary){
  background:#ffffff;
  border-color:rgba(20,48,38,.12);
  box-shadow:0 2px 8px rgba(32,64,48,.05);
}

.btLocalPage [class*="Btn"]:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(32,64,48,.10);
  border-color:rgba(39,133,100,.26);
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .btLocalPage main section{
    margin-top:32px;
  }

  .btLocalPage .wrap{
    width:min(calc(100% - 24px), var(--max));
  }
}


/* =========================================================
   FREE PAGE: PREMIUM UPSELL SECTION
   The "Premium available" upgrade section on the free pages
   gets a distinct soft green-to-gold panel so the upgrade
   reads differently from the free content cards.
   (uses !important to override comfort-theme's .section rule)
   ========================================================= */
.btLocalPage .btPremiumUpsell{
  background:linear-gradient(135deg, #f2faf5 0%, #fbf6e8 100%) !important;
  border:1px solid rgba(199,159,89,.30) !important;
  box-shadow:0 8px 26px rgba(120,98,40,.08) !important;
}

.btLocalPage .btPremiumUpsell .btEyebrow{
  color:#7a5e1f;
  border-color:rgba(199,159,89,.38);
  background:linear-gradient(135deg, rgba(199,159,89,.16), rgba(255,255,255,.45));
}

/* =========================================================
   PREMIUM PAGES: distinct premium treatment
   (.shopBuddyPremiumPage, .twffPremiumPage)
   A subtle gold hairline marks paid offerings as premium
   while keeping the trustworthy green base.
   ========================================================= */
.shopBuddyPremiumPage [class*="Btn"].primary,
.twffPremiumPage [class*="Btn"].primary{
  background:linear-gradient(135deg, #3fae86, #5ec79b);
  border-color:rgba(199,159,89,.45);
  box-shadow:0 6px 18px rgba(49,143,109,.20);
}

.shopBuddyPremiumPage .btEyebrow,
.twffPremiumPage .btEyebrow{
  color:#7a5e1f;
  border-color:rgba(199,159,89,.38);
  background:linear-gradient(135deg, rgba(199,159,89,.16), rgba(255,255,255,.45));
}

/* Premium comparison table: clean, easy to scan */
.shopBuddyPremiumPage [class*="Compare"],
.twffPremiumPage [class*="Compare"]{
  background:#ffffff;
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 18px rgba(32,64,48,.05);
  border-radius:16px;
  overflow:hidden;
}


/* =========================================================
   HOMEPAGE — Visual Polish Phase 8 (hybrid: dark hero, light content)
   Scope: every rule is prefixed with .homePage (body class on
   index.html only). Direction: keep the topbar, hero, and the two
   dark "spotlight" feature bands (Fix Finder + Contact Center) as
   intentional dark accents; convert the standard glass content
   sections, cards, chips, and footer to the clean light style used
   across Services/Pricing/Contact/Projects/Tools/plugins. Keeps the
   Ben Treder green accent. Loaded last; revert by removing the single
   <link> and the homePage body class in index.html.
   ========================================================= */

/* 1. Light page canvas + calmer noise. Hero/topbar/spotlight bands
   keep their own dark backgrounds, so they stay dark on this canvas. */
.homePage{
  --max:1240px;
  background:
    radial-gradient(1100px 600px at 50% -8%, rgba(89,168,126,.07), transparent 60%),
    linear-gradient(180deg, #fbfdfb 0%, #f4f7f4 100%);
}
.homePage .fx,
.homePage .grain{ display:none !important; }
.homePage .wrap{ width:min(calc(100% - 32px), var(--max)); }
/* Phase 8D adjusts this gutter further at mobile widths (see end of file). */

/* 2. Confident section rhythm (no gap before the hero). */
.homePage main > section + section{ margin-top:34px; }

/* 3. Standard glass content sections -> clean white panels.
   `main > section.glass` matches the content sections only. It does
   NOT match the hero (section.hero), the spotlight bands
   (.wffHomeFeature / .lbcc-home-spotlight) or the hero's inner glass
   panels, so all of those keep their dark styling untouched. */
.homePage main > section.glass{
  --ink:#13352b;
  --muted:#4c6258;
  --muted2:#5d7168;
  --line:rgba(20,48,38,.12);
  --line2:rgba(20,48,38,.16);
  color:#13352b;
  background:#ffffff;
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 18px rgba(32,64,48,.05);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.homePage main > section.glass::before{ display:none !important; }

/* 4. Force dark text on the content sections so nothing inherits the
   old light-on-dark colors. Featured (dark green) cards are excluded. */
.homePage main > section.glass :is(h2,h3,h4,h5,p,li,strong,em,small,summary,figcaption,.sectionHead p,.kicker,.smallKicker,.proofMeta,.networkMiniLabel,.areaMiniLabel,.statRow span,.proofStat span){
  color:#1b3a2e;
}
.homePage main > section.glass :is(.proofStat strong,.statRow strong,.startNum,.conversionNum){
  color:#10261e;
}

/* 5. Inner cards -> light neutral with subtle border + soft shadow. */
.homePage main > section.glass :is(.app,.subCard,.proofCard,.ctaBox,.startCard,.btCard,.areaCard,.networkHomeCard,.localAuthorityCard){
  --ink:#13352b;
  --muted:#4c6258;
  background:#ffffff;
  border:1px solid rgba(20,48,38,.09);
  box-shadow:0 4px 16px rgba(32,64,48,.05);
}
.homePage main > section.glass :is(.app,.subCard,.proofCard,.ctaBox)::before{ display:none !important; }

/* Calm, consistent hover lift. */
.homePage main > section.glass :is(.app,.subCard,.proofCard,.startCard,.btCard,.areaCard,.networkHomeCard,.conversionCard):hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(32,64,48,.10);
  border-color:rgba(39,133,100,.20);
}

/* 6. Chips and non-primary buttons inside content -> light. */
.homePage main > section.glass :is(.tag,.miniTag,.proof,.btn:not(.primary)){
  background:#ffffff;
  color:#1c3d33;
  border-color:rgba(20,48,38,.12);
  box-shadow:0 2px 8px rgba(32,64,48,.05);
}
.homePage main > section.glass :is(.tag,.miniTag,.proof,.btn:not(.primary)):hover{
  border-color:rgba(39,133,100,.26);
}
/* Kickers read as a soft green accent on light. */
.homePage main > section.glass :is(.kicker,.smallKicker){
  background:rgba(39,133,100,.10);
  border:1px solid rgba(39,133,100,.22);
  color:#1c4a3a !important;
}

/* 7. Keep the green accent: soft-green conversion band, and the
   featured conversion card stays dark green with light text. */
.homePage main > section.premiumConversion{
  background:
    radial-gradient(640px 260px at 100% 0%, rgba(73,160,132,.12), transparent 62%),
    linear-gradient(180deg, #ffffff, #f3faf6);
  border-color:rgba(39,133,100,.18);
}
.homePage .conversionCard.featured{
  background:linear-gradient(145deg, rgba(20,58,45,.96), rgba(36,95,74,.88));
  border-color:rgba(255,255,255,.16);
}
.homePage .conversionCard.featured :is(h3,p,.conversionNum){ color:rgba(255,255,255,.92); }

/* 8. Footer sits on the light canvas now -> dark text. */
.homePage footer{ color:#5d7168; }
.homePage footer a{ color:#2a6b4f; }

/* 9. Small-screen comfort. Horizontal overflow is already guarded by
   body{overflow-x:hidden} in home.css. */
@media (max-width:560px){
  .homePage main > section.glass{
    padding-left:16px;
    padding-right:16px;
  }
  .homePage .chipRow{ gap:8px; }
  .homePage .heroActions{ gap:10px; }
}


/* ---------------------------------------------------------
   HOMEPAGE Phase 8B — mobile + contrast QA fixes (scoped .homePage)
   --------------------------------------------------------- */

/* a) Plain prose links inside the light content sections must not flip
   to white on hover (the global rule turns unclassed links white).
   Card-as-link elements are excluded so their own hover is preserved. */
.homePage main > section.glass a:not(.btn):not(.pill):not(.tag):not(.proof):not(.mobileDrawerLink):not(.mobileDrawerMini):not(.app):not(.subCard):not(.proofCard):not(.startCard):not(.btCard):not(.areaCard):not(.networkHomeCard):not(.localAuthorityCard):hover{
  color:#0f5a3c;
}

/* b) FAQ accordions: the old near-transparent panel was white-on-white
   on the light canvas. Give them visible card chrome and dark text. */
.homePage main > section.glass .faq details{
  background:#ffffff;
  border:1px solid rgba(20,48,38,.10);
  box-shadow:0 2px 10px rgba(32,64,48,.04);
}
.homePage main > section.glass .faq summary{ color:#13352b; }
.homePage main > section.glass .faq p{ color:#4c6258; }


/* =========================================================
   HOMEPAGE Phase 8C — comfort pass (scoped .homePage)
   Lighten the three remaining dark zones (hero, Website Fix
   Finder band, Local Business Command Center band) into soft
   green / cream / warm-neutral panels with clearly readable
   text. Keeps the Ben Treder green accent. Scoped + reversible.
   ========================================================= */

/* ---------- HERO ---------- */
.homePage .hero .heroMain,
.homePage .hero .heroSide{
  background:
    radial-gradient(760px 340px at 8% 0%, rgba(99,205,164,.16), transparent 62%),
    radial-gradient(700px 300px at 100% 6%, rgba(255,209,102,.08), transparent 60%),
    linear-gradient(180deg, #ffffff, #f3faf6);
  border:1px solid rgba(20,48,38,.10);
  box-shadow:0 18px 50px rgba(32,64,48,.08);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.homePage .hero .heroMain::before,
.homePage .hero .heroSide::before{ display:none !important; }

.homePage .hero :is(.heroTitle,.statusTop,.statusValue,.statusLabel,.statRow span,.statRow strong,.proofStat strong,.proofStat span){
  color:#16382d;
}
.homePage .hero .heroLead{ color:#40574d; }
.homePage .hero .heroLead strong{ color:#13352b; }

/* Gradient hero title -> readable green gradient (keeps the "shine"). */
.homePage .hero .heroTitle .shine{
  background:linear-gradient(135deg, #1f7a52 0%, #2aa46c 55%, #3bb87a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* Kicker -> soft green chip. */
.homePage .hero .kicker{
  background:rgba(39,133,100,.10);
  border:1px solid rgba(39,133,100,.22);
  color:#1c4a3a;
}

/* Hero inner cards -> clean white, readable. */
.homePage .hero .statusCard,
.homePage .hero .quickPanel{
  background:#ffffff;
  border:1px solid rgba(20,48,38,.10);
  box-shadow:0 6px 20px rgba(32,64,48,.06);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.homePage .hero .statusCard::before,
.homePage .hero .quickPanel::before{ display:none !important; }
.homePage .hero .statRow{ background:rgba(20,48,38,.03); }
.homePage .hero .statusLabel{ color:#5d7168; }
.homePage .hero .statusValue{ color:#1f7a52; }
.homePage .hero .statRow span{ color:#5d7168; }
.homePage .hero .statRow strong{ color:#13352b; }

/* Hero secondary buttons + proof chips -> light. */
.homePage .hero .btn:not(.primary),
.homePage .hero .proof{
  background:#ffffff;
  color:#1c3d33;
  border-color:rgba(20,48,38,.12);
  box-shadow:0 2px 8px rgba(32,64,48,.05);
}

/* ---------- WEBSITE FIX FINDER BAND ---------- */
.homePage .wffHomeFeature{
  background:
    radial-gradient(760px 340px at 10% 0%, rgba(99,205,164,.16), transparent 60%),
    radial-gradient(680px 300px at 95% 8%, rgba(255,209,102,.10), transparent 58%),
    linear-gradient(180deg, #ffffff, #f4faf6);
  border:1px solid rgba(20,48,38,.10);
  box-shadow:0 18px 50px rgba(32,64,48,.08);
}
.homePage .wffHomeFeature:before{ opacity:.18; }
.homePage .wffHomeCopy h2{ color:#10231c; }
.homePage .wffHomeCopy p{ color:#40574d; }
.homePage .wffHomeFeature :is(.wffHomeTrust,.wffScoreLabel,.wffScoreRating){ color:#13352b; }
.homePage .wffHomeEyebrow{
  background:rgba(39,133,100,.10);
  border:1px solid rgba(39,133,100,.22);
  color:#1c4a3a;
}
.homePage .wffHomeEyebrow:before{
  background:#2aa06a;
  box-shadow:0 0 0 6px rgba(39,133,100,.14);
}
.homePage .wffScoreCard{
  background:#ffffff;
  border:1px solid rgba(20,48,38,.10);
  box-shadow:0 8px 24px rgba(32,64,48,.07);
}
.homePage .wffScoreValue{ color:#1f7a52; }
.homePage .wffScoreValue small{ color:#5d7168; }
.homePage .wffMiniItem{ background:#f4f8f5; border-color:rgba(20,48,38,.10); }
.homePage .wffMiniItem strong{ color:#13352b; }
.homePage .wffMiniItem span{ color:#5d7168; }
.homePage .wffHomeFeature .btn:not(.primary){
  background:#ffffff;
  color:#1c3d33;
  border-color:rgba(20,48,38,.12);
}

/* ---------- LOCAL BUSINESS COMMAND CENTER BAND ---------- */
.homePage .lbcc-home-spotlight__inner{
  background:
    radial-gradient(620px 300px at 8% 0%, rgba(99,205,164,.16), transparent 60%),
    radial-gradient(520px 260px at 95% 10%, rgba(123,170,255,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #f3faf6);
  border:1px solid rgba(20,48,38,.10);
  color:#16382d;
  box-shadow:0 18px 50px rgba(32,64,48,.08);
}
.homePage .lbcc-home-spotlight h2{ color:#10231c; }
.homePage .lbcc-home-spotlight p{ color:#40574d; }
.homePage .lbcc-home-spotlight__eyebrow{
  background:rgba(39,133,100,.10);
  border:1px solid rgba(39,133,100,.22);
  color:#1c4a3a;
}
.homePage .lbcc-home-spotlight__card{
  background:#ffffff;
  border:1px solid rgba(20,48,38,.10);
  box-shadow:0 6px 18px rgba(32,64,48,.06);
}
.homePage .lbcc-home-spotlight__card strong{ color:#13352b; }
.homePage .lbcc-home-spotlight__card span{ color:#5d7168; }
.homePage .lbcc-home-spotlight__btn--secondary{
  background:#ffffff;
  color:#1c3d33;
  border-color:rgba(20,48,38,.14);
}

/* ---------- Primary buttons in these bands -> warm green, easy to see ---------- */
.homePage .hero .btn.primary,
.homePage .wffHomeFeature .btn.primary,
.homePage .lbcc-home-spotlight__btn--primary{
  background:linear-gradient(135deg, #37b386, #7fd9b4);
  color:#06231a;
  border:1px solid rgba(46,150,110,.42);
  box-shadow:0 8px 20px rgba(49,143,109,.18);
}


/* =========================================================
   HOMEPAGE Phase 8D — mobile width + overflow cleanup
   (scoped .homePage). Wider, comfortable mobile content with
   small edge gutters, and real overflow fixes (min-width:0 on
   grid/flex children, gentle word wrapping) so nothing clips.
   home.css was NOT modified. Reversible.
   ========================================================= */

/* A. Wider mobile content: replace the wide Phase 8 gutter with a
   small, comfortable edge gutter so panels sit near the screen edges. */
@media (max-width:860px){
  .homePage .wrap{ width:min(calc(100% - 24px), var(--max)); }
}
@media (max-width:520px){
  .homePage .wrap{ width:min(calc(100% - 20px), var(--max)); }
}

/* B. Trim panel side padding on phones so content feels wider, not boxed. */
@media (max-width:560px){
  .homePage main > section.glass,
  .homePage .wffHomeFeature,
  .homePage .lbcc-home-spotlight__inner,
  .homePage .hero .heroMain,
  .homePage .hero .heroSide{
    padding-left:16px;
    padding-right:16px;
  }
  /* The Local Business band wrapper carries its own side padding; drop it
     so the inner panel can use the full comfortable width. */
  .homePage .lbcc-home-spotlight{
    padding-left:0;
    padding-right:0;
  }
}

/* C. Let grid and flex children shrink instead of forcing horizontal
   overflow. This is the main cause of clipped text on phones. */
.homePage .heroGrid > *,
.homePage .contentGrid > *,
.homePage .grid > *,
.homePage .proofGrid > *,
.homePage .conversionGrid > *,
.homePage .wffHomeInner > *,
.homePage .lbcc-home-spotlight__grid > *,
.homePage .lbcc-home-spotlight__card > *,
.homePage .networkHomeGrid > *,
.homePage .localAuthorityGrid > *,
.homePage .statusTop > *,
.homePage .statRow > *{
  min-width:0;
}

/* D. Cards clip with overflow:hidden, so make sure their text can wrap. */
.homePage main > section.glass :is(.app,.subCard,.proofCard,.ctaBox,.startCard,.btCard,.areaCard,.networkHomeCard,.localAuthorityCard,.conversionCard),
.homePage .wffScoreCard,
.homePage .lbcc-home-spotlight__card{
  min-width:0;
}
.homePage main :is(h1,h2,h3,h4,p,li,.statusValue,.statRow strong,.lbcc-home-spotlight__card span){
  overflow-wrap:break-word;
}

/* E. Chip and button rows wrap cleanly and can shrink. */
.homePage .chipRow,
.homePage .heroActions,
.homePage .heroProof,
.homePage .proofMeta,
.homePage .socialProofBar,
.homePage .wffHomeActions,
.homePage .lbcc-home-spotlight__actions{
  flex-wrap:wrap;
  min-width:0;
}

/* F. Long hero/section headings wrap naturally on small screens instead of
   forcing width. (Pairs with the global word-break:normal rule.) */
@media (max-width:560px){
  .homePage .heroTitle,
  .homePage .wffHomeCopy h2,
  .homePage .lbcc-home-spotlight h2,
  .homePage .sectionHead h2{
    max-width:100%;
    overflow-wrap:break-word;
  }
}