/* Google-style SaaS section base styles (minimal starter) */
.saas-hero__title{font-family: 'Google Sans', Roboto, Arial, sans-serif; font-size:48px; font-weight:500; color:var(--saas-title,#202124);}
.saas-hero__subtitle{font-size:18px; color:var(--saas-sub,#5f6368); margin-bottom:20px}
.saas-hero__ctas .btn{margin-right:10px}
.saas-hero__trust img{max-height:32px; margin-right:12px}

.saas-pricing__card{background:var(--card-bg,#fff); border:1px solid var(--card-border,#e8eaed); padding:24px; border-radius:8px; box-shadow:0 1px 3px rgba(60,64,67,0.08)}
.saas-pricing__title{font-size:20px; margin-bottom:8px}
.saas-pricing__price{font-size:22px; font-weight:600; margin-bottom:12px}
.saas-pricing__features{list-style:none; padding-left:0}
.saas-pricing__features li{padding:4px 0}
.saas-pricing__qty{margin:10px 0}

.integration-card{padding:16px; border-radius:8px; background:var(--card-bg,#fff); border:1px solid var(--card-border,#e8eaed); text-align:center}
.integration-card img{max-height:40px; margin-bottom:8px}
.integration-title{font-weight:600}
.integration-tagline{color:var(--saas-sub,#5f6368); font-size:14px}

/* Mobile tweaks */
@media (max-width:767px){
    .saas-hero__title{font-size:32px}
}

/* Professional variants and utilities */
.saas-hero{padding:64px 0}
.saas-hero--split{display:flex;gap:24px;align-items:center}
.saas-hero__media{flex:1}
.saas-hero__content{flex:1}

.badge-pill{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--saas-accent,#34a853);color:#fff;font-weight:600;font-size:13px}

.saas-pricing__grid{display:flex;gap:20px;flex-wrap:wrap}
.saas-pricing__card{flex:1 1 260px;min-width:220px}
.saas-pricing__card--popular{border-color:var(--saas-primary,#1a73e8);box-shadow:0 12px 30px rgba(26,115,232,0.12);transform:translateY(-6px)}

.price-billing{color:var(--saas-sub);font-size:13px}
.price-amount{font-size:28px;font-weight:700;color:var(--saas-primary)}

.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.feature-item{display:flex;gap:8px;align-items:flex-start}
.feature-item .icon{width:36px;height:36px;flex-shrink:0;border-radius:8px;background:linear-gradient(135deg,var(--saas-primary),var(--saas-accent));display:flex;align-items:center;justify-content:center;color:#fff}

.integration-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.integration-card{padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center}

.case-card{background:linear-gradient(180deg,rgba(255,255,255,0.9),#fff);border-radius:10px;padding:18px;border:1px solid rgba(60,64,67,0.06)}

.shadow-soft{box-shadow:0 6px 20px rgba(60,64,67,0.08)}

.cta-collection .btn{margin-right:8px}

/* Creative helper classes */
.muted{color:var(--saas-sub)}
.uppercase{text-transform:uppercase;letter-spacing:0.06em}
.lead{font-size:18px;color:var(--saas-sub)}

/* Dark theme adjustments when theme provides dark class */
.lagom-dark-mode .saas-hero__title{color:#fff}
.lagom-dark-mode .saas-pricing__card{background:#111; border-color:rgba(255,255,255,0.06); color:#e8eaed}
.lagom-dark-mode .feature-item .icon{background:linear-gradient(135deg,#2b6fb3,#1a73e8)}

@media (max-width:767px){
  .saas-hero{padding:36px 0}
  .saas-hero--split{flex-direction:column}
  .saas-pricing__grid{flex-direction:column}
}

/* Cart preview & toast */
#lagom-cart-preview{box-shadow:0 10px 40px rgba(15,23,42,0.15);}
.lagom-cart-toast{box-shadow:0 8px 30px rgba(15,23,42,0.12);}
.lagom-cart-preview .muted{color:var(--saas-sub)}

/* Section scoped base rules to ensure consistent spacing and backgrounds */
.site-section.saas-hero{background:linear-gradient(180deg,rgba(250,250,251,0.6),transparent);padding:64px 0}
.site-section.saas-hero .saas-hero__title{font-size:44px;margin-bottom:12px}
.site-section.saas-hero .saas-hero__subtitle{font-size:18px;margin-bottom:20px}
.site-section.saas-hero .saas-hero__ctas .btn{border-radius:8px;padding:10px 18px}
.site-section.saas-hero .saas-hero__trust{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.site-section.saas-hero .saas-hero__media img, .site-section.saas-hero .saas-hero__media svg{max-width:100%;height:auto;border-radius:8px}

/* Pricing section layout */
.site-section.saas-pricing{padding:48px 0}
.site-section.saas-pricing .saas-pricing__card{display:flex;flex-direction:column;justify-content:space-between;height:100%}
.site-section.saas-pricing .saas-pricing__card .saas-pricing__title{font-size:18px}
.site-section.saas-pricing .saas-pricing__price{font-size:26px;font-weight:700;color:var(--saas-primary)}
.site-section.saas-pricing .saas-pricing__features{margin:14px 0 16px;padding-left:0}
.site-section.saas-pricing .saas-pricing__qty{display:flex;align-items:center;gap:8px}
.site-section.saas-pricing .saas-add-form{margin-top:auto}
.site-section.saas-pricing .saas-qty-input,.site-section.saas-pricing input[name="quantity"]{width:90px}

/* Strong defaults to avoid theme overrides and ensure contrast */
.site-section.saas-pricing, .site-section.saas-hosting-plans, .site-section.saas-features, .site-section.saas-case-studies{
  background-color: transparent; /* keep page background, cards hold their own backgrounds */
}
.site-section.saas-pricing .saas-pricing__card,
.site-section.saas-hosting-plans .product-card,
.site-section.saas-features .feature-item,
.site-section.saas-case-studies .case-card{
  background: var(--saas-card-bg, #ffffff) !important;
  color: var(--saas-title, #202124) !important;
  border: 1px solid var(--saas-card-border, #e8eaed) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,0.04) !important;
}
.site-section.saas-pricing .saas-pricing__card .saas-pricing__title,
.site-section.saas-pricing .saas-pricing__card .saas-pricing__price,
.site-section.saas-pricing .saas-pricing__card p,
.site-section.saas-pricing .saas-pricing__card li{
  color: var(--saas-title, #202124) !important;
}

/* Ensure CTA buttons stand out on any background */
.site-section .btn.btn-primary{background:var(--saas-primary,#1a73e8) !important;border-color:var(--saas-primary,#1a73e8) !important;color:#fff !important}
.site-section .btn.btn-outline-secondary{color:var(--saas-primary,#1a73e8) !important;border-color:rgba(26,115,232,0.15) !important}

/* If the theme applies a dark system band, ensure sections inside keep readable cards */
.lagom-dark-mode .site-section.saas-pricing .saas-pricing__card,
.lagom-dark-mode .site-section.saas-features .feature-item{
  background: #1a1a1a !important;
  color: #e8eaed !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Feature groups */
.site-section.saas-features{padding:44px 0}
.site-section.saas-features .feature-group{margin-bottom:28px}
.site-section.saas-features .feature-item{background:var(--saas-card-bg,#fff);padding:16px;border-radius:10px;border:1px solid var(--saas-card-border,#e8eaed)}

/* Integrations */
.site-section.saas-integrations{padding:40px 0}
.site-section.saas-integrations .integration-card{transition:transform .18s ease,box-shadow .18s ease}
.site-section.saas-integrations .integration-card:hover{transform:translateY(-6px);box-shadow:0 10px 30px rgba(15,23,42,0.06)}

/* Testimonials */
.site-section.saas-testimonials{padding:40px 0}
.site-section.saas-testimonials .testimonial{padding:18px;border-radius:8px;background:var(--saas-card-bg,#fff);border:1px solid var(--saas-card-border,#e8eaed);margin-bottom:12px}
.site-section.saas-testimonials .testimonial blockquote{font-style:italic;margin:0 0 8px 0}

/* FAQ */
.site-section.saas-faq{padding:36px 0}
.site-section.saas-faq .faq-item{border-bottom:1px solid rgba(60,64,67,0.06);padding:12px 0}
.site-section.saas-faq .faq-q{display:block;width:100%;text-align:left;font-weight:600;background:none;border:0;padding:0;color:var(--saas-title)}
.site-section.saas-faq .faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;color:var(--saas-sub);padding-top:8px}
.site-section.saas-faq .faq-q.open{color:var(--saas-primary)}

/* Utility: ensure images inside section graphics scale */
.site-section img{max-width:100%;height:auto}

@media (max-width:991px){
  .site-section.saas-hero{padding:36px 0}
  .site-section.saas-pricing .saas-pricing__card{padding:18px}
}

/* Contrast helper: when admins choose background/text colors that may clash,
   prefer readable text by forcing a high-contrast fallback on small text elements.
   Uses CSS variables set inline by the Smarty templates (background_color,text_color).
*/
.site-section[style] {
  /* compute fallback variables if missing */
  --saas-card-bg: var(--saas-card-bg, rgba(255,255,255,1));
  --saas-card-border: var(--saas-card-border, rgba(232,234,237,1));
}
.site-section[style] .saas-hero__subtitle,
.site-section[style] .saas-pricing__card p,
.site-section[style] .saas-pricing__card li,
.site-section[style] .muted {
  /* force readable color unless author overrides with strong contrast */
  color: var(--saas-text-contrast, rgba(32,33,36,0.88)) !important;
}