/* ------------------------------------------------------------------
   LogicalFrame Task 36 — Sitewide Non-AI Design System
   Final override layer loaded after main CSS and page-specific CSS.

   Goal:
   - Remove the AI/SaaS-template visual language sitewide.
   - Replace glow gradients with a restrained corporate system.
   - Keep Switzer + Inter fonts, content, URLs, forms, SMTP and Turnstile.
------------------------------------------------------------------- */

:root{
  --lf-na-navy:#0A1628;
  --lf-na-navy-2:#11223C;
  --lf-na-band:#1E2A44;
  --lf-na-cyan:#59CBD6;
  --lf-na-cyan-dark:#0E7C86;
  --lf-na-ink:#12213D;
  --lf-na-muted:#5F6B7D;
  --lf-na-soft:#F4F7FA;
  --lf-na-line:#D9E2EC;
  --lf-na-white:#FFFFFF;
  --lf-na-radius:10px;
  --lf-na-radius-sm:7px;
}

/* Base page surface */
body{
  background:var(--lf-na-white);
}

/* ------------------------------------------------------------------
   1) Sitewide dark surfaces: flat, corporate, not glowing.
------------------------------------------------------------------- */

.lf-hero.lf-dark,
.lf-site-v4 .lf-hero.lf-dark,
.lf-dark:not(.lf-hero),
.lf-site-v4 .lf-dark:not(.lf-hero),
.lf-card-band,
.lf-about-products-section,
.lf-portfolio-categories-section,
.lf-contact-dark-section,
.lf-products-hero,
.lf-store-hero,
.lf-portfolio-hero,
.lf-contact-hero,
.lf-specialist-hero,
.lf-article-hero,
.lf-home-products-section,
.lf-home-industries-section,
.lf-editorial-work,
.lf-editorial-dark,
.section-dark,
.lf-convert-hero,
.lf-page-html-conversion-v45 .lf-convert-process,
.lf-page-html-conversion-v45 .lf-convert-quality,
body.lf-page-web-design-services .playground-canvas,
body.lf-page-web-design-services .demo-kinetic,
body.lf-page-web-design-services .galaxy-product-view{
  background:var(--lf-na-navy) !important;
  background-image:none !important;
  color:#fff !important;
}

/* Corporate dark secondary surface */
.lf-cta-band,
.lf-footer-cta,
.lf-footer-cta-compact,
.lf-home-contact-band,
.lf-editorial-final-card,
.lf-about-final-cta,
.lf-convert-final-cta,
.lf-contact-final-section,
.cta,
.cta-card,
body.lf-page-web-design-services .cta-section .cta-card{
  background:var(--lf-na-band) !important;
  background-image:none !important;
  color:#fff !important;
}

/* Remove glow overlays on dark sections */
.lf-hero.lf-dark::after,
.lf-site-v4 .lf-hero.lf-dark::after,
.lf-dark:not(.lf-hero)::before,
.lf-site-v4 .lf-dark:not(.lf-hero)::before,
.lf-home-industries-section::before,
.lf-home-human .lf-human-hero-bg,
.lf-home-human .lf-human-product-proof::before,
.lf-editorial-hero::after,
.lf-convert-hero::after,
.lf-convert-hero::before,
body.lf-page-web-design-services .ambient,
body.lf-page-web-design-services .ambient-a,
body.lf-page-web-design-services .ambient-b,
body.lf-page-web-design-services .phone-glow,
body.lf-page-web-design-services .play-glow{
  display:none !important;
  background:none !important;
  background-image:none !important;
}

/* Keep only a restrained technical grid where already used, without glow. */
.lf-hero.lf-dark::before,
.lf-site-v4 .lf-hero.lf-dark::before,
.lf-home-grid-lines,
body.lf-page-web-design-services .hero::before,
body.lf-page-web-design-services .play-grid,
.lf-convert-grid{
  opacity:.22 !important;
}

/* ------------------------------------------------------------------
   2) Light / soft sections: clean editorial backgrounds.
------------------------------------------------------------------- */

.lf-soft-section,
.section-soft,
.lf-product-home-section,
.lf-home-v40 .lf-home-proof-section,
.lf-wordpress-specialist-section,
.lf-convert-options,
.lf-convert-pricing-section,
.lf-convert-final-cta,
.lf-home-editorial .lf-editorial-intro,
.lf-home-editorial .lf-editorial-portfolio,
body.lf-page-web-design-services .hero,
body.lf-page-web-design-services .comparison,
body.lf-page-web-design-services .process-section,
body.lf-page-web-design-services .lab-section{
  background:var(--lf-na-soft) !important;
  background-image:none !important;
}

.lf-section,
.lf-home-editorial .lf-editorial-method,
.lf-home-editorial .lf-editorial-fit,
body.lf-page-web-design-services .showcase,
body.lf-page-web-design-services .mobile-section,
body.lf-page-web-design-services .motion-section,
body.lf-page-web-design-services .services-section,
body.lf-page-web-design-services .capability-strip{
  background-image:none !important;
}

/* ------------------------------------------------------------------
   3) Cards: lower radius, less shadow, less generated feel.
------------------------------------------------------------------- */

.lf-card,
.lf-service-card,
.lf-service-detail-card,
.lf-package-card,
.lf-portfolio-card,
.lf-blog-card,
.lf-industry-card,
.lf-showcase-card,
.lf-product-proof-card,
.lf-store-card,
.lf-contact-info-card,
.lf-before-submit-card,
.lf-product-card,
.lf-product-map-card,
.lf-editorial-service-item,
.lf-editorial-work-card,
.lf-editorial-process,
.lf-editorial-portfolio-row,
.lf-editorial-fit-card,
.lf-editorial-fit-grid p,
.lf-editorial-hero-card,
.lf-contact-form-card,
.partner-card,
.workway,
.package,
.process,
.step,
body.lf-page-web-design-services .browser-card,
body.lf-page-web-design-services .phone-card,
body.lf-page-web-design-services .motion-card,
body.lf-page-web-design-services .play-card,
body.lf-page-web-design-services .lab-card,
body.lf-page-web-design-services .service-list a,
body.lf-page-html-conversion-v45 .lf-convert-output-card,
body.lf-page-html-conversion-v45 .lf-convert-price-card{
  border-radius:var(--lf-na-radius) !important;
  box-shadow:none !important;
}

/* Dark cards should be solid panels, not gradient panels. */
.lf-card.lf-accent-card,
.lf-product-card.is-public,
.lf-product-proof-card,
.lf-editorial-work-card,
.lf-home-human .lf-human-product-card,
.lf-home-human .lf-human-product-card.is-featured,
.lf-home-human .lf-human-command,
.lf-home-human .lf-human-screen-card,
.lf-site-v4 .lf-hero .lf-dashboard-card,
.lf-dashboard-card,
.lf-proof-book-hero,
.lf-home-v40 .lf-proof-panel,
body.lf-page-web-design-services .screen-wellness,
body.lf-page-web-design-services .demo-kinetic,
body.lf-page-html-conversion-v45 .lf-convert-evidence-stage{
  background:var(--lf-na-navy-2) !important;
  background-image:none !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.14) !important;
}

/* White cards stay white and disciplined. */
.lf-service-card,
.lf-package-card,
.lf-portfolio-card,
.lf-blog-card,
.lf-industry-card,
.lf-store-card,
.lf-contact-info-card,
.lf-showcase-card,
.lf-editorial-service-item,
.lf-editorial-portfolio-row,
.lf-editorial-fit-grid p,
body.lf-page-web-design-services .browser-card,
body.lf-page-web-design-services .phone-card,
body.lf-page-web-design-services .lab-card,
body.lf-page-web-design-services .service-list a,
body.lf-page-html-conversion-v45 .lf-convert-output-card,
body.lf-page-html-conversion-v45 .lf-convert-price-card{
  background:var(--lf-na-white) !important;
  background-image:none !important;
  border-color:var(--lf-na-line) !important;
}

/* Controlled hover only. */
.lf-card:hover,
.lf-service-card:hover,
.lf-package-card:hover,
.lf-portfolio-card:hover,
.lf-blog-card:hover,
.lf-industry-card:hover,
.lf-editorial-service-item:hover,
.lf-editorial-portfolio-row:hover,
body.lf-page-web-design-services .service-list a:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 10px 24px rgba(18,33,61,.07) !important;
}

/* Remove decorative gradient strokes/sheens */
.lf-dashboard-card::before,
.lf-bars span::after,
.lf-site-v4 .lf-hero .lf-dashboard-card::before,
.lf-site-v4 .lf-hero .lf-bars span::after,
.lf-site-v4 .lf-card::after,
.lf-product-map-card::before,
.lf-contact-form-card::before,
.lf-human-track-card::before,
body.lf-page-web-design-services .motion-card::after,
body.lf-page-web-design-services .demo-spotlight::before,
body.lf-page-web-design-services .service-list a::before,
body.lf-page-web-design-services .cta-card::after,
.lf-team-card-photo::after{
  background:var(--lf-na-cyan) !important;
  background-image:none !important;
}

/* Where decorative overlays should disappear completely */
body.lf-page-web-design-services .motion-card::after,
body.lf-page-web-design-services .demo-spotlight::before,
body.lf-page-web-design-services .service-list a::before,
body.lf-page-web-design-services .cta-card::after,
.lf-team-card-photo::after{
  display:none !important;
  content:none !important;
}

/* Mini chart / fake UI elements: flat accent bars */
.lf-system-kpis span,
.lf-system-chart i,
.lf-system-mobile-card,
.lf-proof-thread div,
.lf-proof-books i,
body.lf-page-web-design-services .health-ring,
body.lf-page-web-design-services .book-cover-a,
body.lf-page-web-design-services .book-cover-b{
  background:var(--lf-na-cyan) !important;
  background-image:none !important;
}

/* ------------------------------------------------------------------
   4) Buttons and small UI: more corporate, less pill/glow.
------------------------------------------------------------------- */

.lf-btn,
.lf-btn-primary,
.lf-btn-secondary,
.lf-btn-on-dark,
.lf-nav-cta,
.btn,
.btn-primary,
.btn-secondary,
.btn-dark,
.header-cta,
body.lf-page-web-design-services .btn{
  border-radius:var(--lf-na-radius-sm) !important;
  box-shadow:none !important;
}

.lf-btn-primary,
.lf-nav-cta,
.btn-primary,
body.lf-page-web-design-services .btn-primary{
  background:#2F6FED !important;
  background-image:none !important;
  color:#fff !important;
  border-color:#2F6FED !important;
}

.lf-btn-primary:hover,
.lf-nav-cta:hover,
.btn-primary:hover,
body.lf-page-web-design-services .btn-primary:hover{
  background:#245FCC !important;
  border-color:#245FCC !important;
  transform:translateY(-1px) !important;
}

.lf-btn-on-dark,
.lf-btn-secondary,
.btn-secondary{
  background:transparent !important;
  background-image:none !important;
}

/* Badges and eyebrow labels */
.lf-badge,
.eyebrow,
.lf-editorial-kicker,
body.lf-page-web-design-services .eyebrow{
  color:var(--lf-na-cyan-dark) !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  letter-spacing:.16em !important;
  border-radius:0 !important;
}

.lf-dark .lf-badge,
.lf-hero.lf-dark .lf-badge,
.lf-editorial-dark .lf-badge,
.lf-home-products-section .lf-badge,
.lf-home-industries-section .lf-badge,
.section-dark .eyebrow{
  color:var(--lf-na-cyan) !important;
}

/* ------------------------------------------------------------------
   5) Header / footer consistency.
------------------------------------------------------------------- */

.lf-site-header,
.site-header{
  background:var(--lf-na-band) !important;
  background-image:none !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

.lf-topbar{
  background:var(--lf-na-navy) !important;
  background-image:none !important;
}

.lf-footer,
.footer{
  background:var(--lf-na-navy) !important;
  background-image:none !important;
}

/* Mega menu should feel like designed navigation, not a glowing app panel. */
.lf-mega,
.lf-mega-backdrop,
.lf-mega-intro,
.lf-mega-service-panel,
.lf-mega-service-category,
.lf-mega-solution-grid a,
.lf-mega-portfolio a{
  background-image:none !important;
}

/* ------------------------------------------------------------------
   6) Page-specific cleanup for the special landing pages.
------------------------------------------------------------------- */

body.lf-page-web-design-services .browser-body,
body.lf-page-web-design-services .view-commerce,
body.lf-page-web-design-services .view-brand,
body.lf-page-web-design-services .demo-sort,
body.lf-page-web-design-services .app-health,
body.lf-page-web-design-services .app-travel{
  background:var(--lf-na-soft) !important;
  background-image:none !important;
}

body.lf-page-web-design-services .playground-canvas{
  background:var(--lf-na-navy) !important;
}

body.lf-page-html-conversion-v45 .lf-convert-hero,
body.lf-page-html-conversion-v45 .lf-convert-process,
body.lf-page-html-conversion-v45 .lf-convert-quality{
  background:var(--lf-na-navy) !important;
  background-image:none !important;
}

body.lf-page-html-conversion-v45 .lf-convert-options,
body.lf-page-html-conversion-v45 .lf-convert-pricing-section,
body.lf-page-html-conversion-v45 .lf-convert-final-cta{
  background:var(--lf-na-soft) !important;
  background-image:none !important;
}

/* ------------------------------------------------------------------
   7) Responsive restraint.
------------------------------------------------------------------- */

@media(max-width:760px){
  .lf-hero.lf-dark,
  .lf-site-v4 .lf-hero.lf-dark,
  .lf-editorial-hero,
  body.lf-page-web-design-services .hero,
  .lf-convert-hero{
    min-height:auto !important;
  }

  .lf-card,
  .lf-service-card,
  .lf-package-card,
  .lf-portfolio-card,
  .lf-blog-card,
  .lf-industry-card,
  .lf-contact-form-card,
  .lf-editorial-hero-card,
  .lf-editorial-final-card{
    border-radius:var(--lf-na-radius) !important;
  }
}


/* ------------------------------------------------------------------
   Task 37 — Sitewide Footer CTA Alignment Fix
   Purpose:
   - Homepage footer was already acceptable because homepage uses its own CTA.
   - Other pages use the shared footer CTA from includes/footer.php.
   - This restores the shared CTA as a designed card, not a full-width flat band.
------------------------------------------------------------------- */

.lf-footer-v39,
footer.lf-footer-v39,
.lf-footer{
  background:#0A1628 !important;
  background-image:none !important;
  color:rgba(255,255,255,.70) !important;
}

/* Only add extra top space on pages where the shared footer CTA exists. */
.lf-footer-v39:has(.lf-footer-cta-compact){
  padding-top:64px !important;
}

/* Shared footer CTA card for all inner pages */
.lf-footer-v39 .lf-footer-cta,
.lf-footer-v39 .lf-footer-cta-compact,
footer.lf-footer-v39 .lf-footer-cta,
footer.lf-footer-v39 .lf-footer-cta-compact{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:32px !important;
  width:100% !important;
  margin:0 0 42px !important;
  padding:42px !important;
  border-radius:10px !important;
  background:#1E2A44 !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

/* Footer CTA copy */
.lf-footer-v39 .lf-footer-cta .lf-badge,
.lf-footer-v39 .lf-footer-cta-compact .lf-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 !important;
  margin:0 0 14px !important;
  background:transparent !important;
  border:0 !important;
  color:#59CBD6 !important;
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}

.lf-footer-v39 .lf-footer-cta .lf-badge::before,
.lf-footer-v39 .lf-footer-cta-compact .lf-badge::before{
  content:"" !important;
  display:block !important;
  width:28px !important;
  height:2px !important;
  border-radius:99px !important;
  background:#59CBD6 !important;
}

.lf-footer-v39 .lf-footer-cta h2,
.lf-footer-v39 .lf-footer-cta-compact h2{
  max-width:760px !important;
  margin:0 0 12px !important;
  color:#fff !important;
  font-size:clamp(30px,3vw,46px) !important;
  line-height:1.05 !important;
  letter-spacing:-.045em !important;
}

.lf-footer-v39 .lf-footer-cta p,
.lf-footer-v39 .lf-footer-cta-compact p{
  max-width:760px !important;
  margin:0 !important;
  color:rgba(255,255,255,.68) !important;
  font-size:16px !important;
  line-height:1.72 !important;
}

/* CTA button should align like a designed action, not float awkwardly */
.lf-footer-v39 .lf-footer-cta .lf-btn,
.lf-footer-v39 .lf-footer-cta-compact .lf-btn{
  justify-self:end !important;
  white-space:nowrap !important;
  min-width:190px !important;
  min-height:52px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:7px !important;
  box-shadow:none !important;
  background:#2F6FED !important;
  border-color:#2F6FED !important;
  color:#fff !important;
  font-weight:800 !important;
}

.lf-footer-v39 .lf-footer-cta .lf-btn:hover,
.lf-footer-v39 .lf-footer-cta-compact .lf-btn:hover{
  background:#245FCC !important;
  border-color:#245FCC !important;
  transform:translateY(-1px) !important;
}

/* Footer grid alignment after the CTA card */
.lf-footer-v39 .lf-footer-grid,
.lf-footer-v39 .lf-footer-grid-v39,
.lf-footer-v39 .lf-footer-grid-categories{
  padding-top:0 !important;
  border-top:0 !important;
}

.lf-footer-v39 .lf-footer-brand p{
  color:rgba(255,255,255,.64) !important;
}

.lf-footer-v39 h3{
  color:#fff !important;
}

.lf-footer-v39 ul a,
.lf-footer-v39 .lf-footer-ecosystem a,
.lf-footer-v39 .lf-footer-bottom,
.lf-footer-v39 .lf-footer-bottom a{
  color:rgba(255,255,255,.62) !important;
}

.lf-footer-v39 ul a:hover,
.lf-footer-v39 .lf-footer-ecosystem a:hover,
.lf-footer-v39 .lf-footer-bottom a:hover{
  color:#fff !important;
}

/* Avoid doubled CTA feeling on homepage, where homepage already has its own final CTA */
body.lf-home-editorial .lf-footer-v39{
  padding-top:0 !important;
}

body.lf-home-editorial .lf-footer-v39 .lf-footer-grid,
body.lf-home-editorial .lf-footer-v39 .lf-footer-grid-v39,
body.lf-home-editorial .lf-footer-v39 .lf-footer-grid-categories{
  padding-top:34px !important;
}

/* Tablet and mobile footer CTA */
@media(max-width:900px){
  .lf-footer-v39:has(.lf-footer-cta-compact){
    padding-top:46px !important;
  }

  .lf-footer-v39 .lf-footer-cta,
  .lf-footer-v39 .lf-footer-cta-compact,
  footer.lf-footer-v39 .lf-footer-cta,
  footer.lf-footer-v39 .lf-footer-cta-compact{
    grid-template-columns:1fr !important;
    gap:24px !important;
    padding:34px !important;
  }

  .lf-footer-v39 .lf-footer-cta .lf-btn,
  .lf-footer-v39 .lf-footer-cta-compact .lf-btn{
    justify-self:start !important;
  }
}

@media(max-width:560px){
  .lf-footer-v39:has(.lf-footer-cta-compact){
    padding-top:34px !important;
  }

  .lf-footer-v39 .lf-footer-cta,
  .lf-footer-v39 .lf-footer-cta-compact,
  footer.lf-footer-v39 .lf-footer-cta,
  footer.lf-footer-v39 .lf-footer-cta-compact{
    padding:26px !important;
    margin-bottom:32px !important;
  }

  .lf-footer-v39 .lf-footer-cta h2,
  .lf-footer-v39 .lf-footer-cta-compact h2{
    font-size:30px !important;
  }

  .lf-footer-v39 .lf-footer-cta .lf-btn,
  .lf-footer-v39 .lf-footer-cta-compact .lf-btn{
    width:100% !important;
    min-width:0 !important;
  }

  body.lf-home-editorial .lf-footer-v39 .lf-footer-grid,
  body.lf-home-editorial .lf-footer-v39 .lf-footer-grid-v39,
  body.lf-home-editorial .lf-footer-v39 .lf-footer-grid-categories{
    padding-top:28px !important;
  }
}