/* ============================================================
   PRODUCTS & SERVICES — DIRECTORY / HUB PAGE
   Additive stylesheet only. Reuses tokens + components already
   defined in style.css (colors, .btn, .container, .ps-hero,
   .ps-section, .section-divider, .mkt-feature-card, .mkt-service-card,
   .consult-card patterns, .cta-band, .final-cta, .check-list, etc).
   Nothing here redefines those selectors — only new, page-scoped
   classes are introduced below to avoid any cascade conflicts.
   ============================================================ */

/* ---------- hero (built on existing .mkt-hero, centered pattern) ---------- */
.mkt-hero .hero-actions{justify-content:center;margin-bottom:8px;}
.mkt-hero .btn-outline{border-color:#222;}

/* ---------- generic centered section head (page-scoped) ---------- */
.section-head{text-align:center;max-width:640px;margin:0 auto 44px;}
.section-head .eyebrow{display:inline-flex;justify-content:center;}
.section-head h2{font-size:30px;font-weight:800;margin:8px 0 12px;letter-spacing:-.3px;}
.section-head p{font-size:14.5px;color:var(--gray);line-height:1.7;}

/* ---------- digital products grid ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.prod-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;box-shadow:0 6px 16px rgba(0,0,0,.04);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.prod-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.1);border-color:#dcd0bd;}
.prod-icon{width:56px;height:56px;border-radius:15px;background:linear-gradient(135deg,#1AA05D,#12793F);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;box-shadow:0 10px 22px rgba(26,160,93,.28);flex-shrink:0;}
.prod-card h3{font-size:16.5px;font-weight:800;margin:0 0 10px;line-height:1.3;}
.prod-card > p{font-size:13px;color:var(--gray);line-height:1.65;margin:0 0 16px;flex:1;}
.prod-benefits{list-style:none;margin:0 0 22px;padding:0;}
.prod-benefits li{font-size:12.5px;color:#3a3a3a;margin-bottom:8px;display:flex;gap:8px;align-items:flex-start;}
.prod-benefits li i{color:#1AA05D;margin-top:2px;font-size:11px;flex-shrink:0;}
.prod-card .btn{width:100%;justify-content:center;font-size:13px;padding:12px 18px;margin-top:auto;}

/* ---------- professional services grid (wraps existing .mkt-service-card) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.svc-grid .mkt-service-card{height:100%;display:flex;flex-direction:column;}
.svc-grid .mkt-service-body{margin-top:auto;}

/* ---------- feature-card middle content (solar / consultation / training) ---------- */
.mkt-feature-mid{padding:0 28px 14px;}
.mkt-feature-mid > p{font-size:13px;color:var(--gray);line-height:1.65;margin:0 0 14px;}
.solar-cats,.train-list{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 24px;}
.consult-list{display:grid;grid-template-columns:1fr;gap:2px;max-width:340px;}

/* ---------- investment teaser band ---------- */
.invest-band-wrap{max-width:880px;margin:0 auto;}
.invest-band-wrap .invest-disclaimer{border-top:none;margin-top:22px;padding-top:0;}

/* ---------- official product catalogue (16 products, 6 divisions) ---------- */
.division-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.division-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px 26px;}
.division-card h4{font-size:14px;font-weight:800;margin:0 0 14px;display:flex;align-items:center;gap:10px;color:var(--black);}
.division-card h4 i{color:var(--orange);font-size:15px;}
.division-card .check-list li{font-size:12.5px;}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .division-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .prod-grid{grid-template-columns:1fr;}
  .svc-grid{grid-template-columns:1fr;}
  .solar-cats,.train-list{grid-template-columns:1fr;}
  .mkt-hero h1{font-size:32px;}
  .division-grid{grid-template-columns:1fr;}
}