/* Migrated from template-parts/cross-sell-band.php style block 1 */
/* â”€â”€ Ecosystem Cross-Sell Band Styles â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */

/* Journey Bar */
.hg-journey-bar{background:#0f172a;padding:18px 0;border-bottom:1px solid #1e293b;}
.hg-journey-label{font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.06em;text-align:center;margin-bottom:14px;}
.hg-journey-steps{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;gap:4px;}
.hg-journey-step{display:flex;flex-direction:column;align-items:center;text-decoration:none;padding:10px 20px;border-radius:10px;transition:background 0.15s;gap:2px;}
.hg-journey-step:hover{background:rgba(245,114,0,0.12);}
.hg-journey-icon{font-size:20px;}
.hg-journey-step-name{font-size:13px;font-weight:800;color:#fff;}
.hg-journey-step-desc{font-size:10.5px;color:#6b7280;white-space:nowrap;}
.hg-journey-arrow{font-size:20px;color:#374151;padding:0 4px;}

/* Hero Ecosystem Banner */
.hg-ecosystem-hero{background:#0f172a;}
.hg-ecosystem-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:60px 0;}
.hg-ecosystem-eyebrow{font-size:12px;font-weight:800;color:#f57200;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:14px;}
.hg-ecosystem-headline{font-size:38px;font-weight:900;color:#fff;line-height:1.15;margin-bottom:16px;}
.hg-ecosystem-headline .hg-orange{color:#f57200;}
.hg-ecosystem-subtext{font-size:15px;color:#94a3b8;line-height:1.65;margin-bottom:24px;}
.hg-ecosystem-ctas{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.hg-ecosystem-trust-row{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:#6b7280;}
.hg-ecosystem-hero-media{position:relative;}
.hg-ecosystem-hero-img{width:100%;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,0.4);}
.hg-eco-badge{position:absolute;background:rgba(255,255,255,0.06);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.12);border-radius:100px;padding:8px 14px;font-size:12px;font-weight:700;color:#fff;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.hg-eco-badge-1{top:-16px;left:10%;}
.hg-eco-badge-2{top:40%;right:-20px;}
.hg-eco-badge-3{bottom:-16px;left:30%;}
.hg-eco-badge-icon{font-size:16px;}

/* Cross-sell grid */
.hg-crosssell-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.hg-crosssell-card{background:#fff;border:1.5px solid #e5e7eb;border-radius:16px;padding:24px;transition:border-color 0.2s,box-shadow 0.2s;display:flex;flex-direction:column;}
.hg-crosssell-card:hover{border-color:#f57200;box-shadow:0 8px 32px rgba(245,114,0,0.10);}
.hg-csc-icon-wrap{width:56px;height:56px;border-radius:14px;background:#f9fafb;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.hg-csc-icon-wrap img{width:36px;height:36px;object-fit:contain;}
.hg-csc-banner-wrap{margin:-24px -24px 16px;border-radius:14px 14px 0 0;overflow:hidden;}
.hg-csc-banner-img{width:100%;height:180px;object-fit:cover;display:block;}
.hg-csc-tag{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:100px;background:#f3f4f6;color:#6b7280;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:10px;}
.hg-csc-tag-orange{background:#fff7ed;color:#f57200;}
.hg-csc-tag-purple{background:#ede9fe;color:#7c3aed;}
.hg-csc-tag-navy{background:#eff6ff;color:#1d4ed8;}
.hg-csc-title{font-size:18px;font-weight:800;color:#111827;margin-bottom:10px;}
.hg-csc-desc{font-size:13.5px;color:#6b7280;line-height:1.6;margin-bottom:14px;flex:1;}
.hg-csc-features{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.hg-csc-features li{font-size:12.5px;color:#374151;padding:3px 0;}
.hg-csc-features li::before{content:'\2713 ';color:#16a34a;font-weight:700;}
.hg-csc-btn{display:block;background:#111827;color:#fff;border-radius:8px;padding:11px 16px;text-align:center;text-decoration:none;font-size:13.5px;font-weight:700;transition:background 0.15s;margin-top:auto;}
.hg-csc-btn:hover{background:#1f2937;color:#fff;}
.hg-csc-btn-orange{background:#f57200;}
.hg-csc-btn-orange:hover{background:#ea580c;}
.hg-csc-btn-purple{background:#7c3aed;}
.hg-csc-btn-purple:hover{background:#6d28d9;}
.hg-csc-btn-navy{background:#1d4ed8;}
.hg-csc-btn-navy:hover{background:#1e40af;}

/* Wide banner */
.hg-wide-banner{padding:0;}
.hg-wide-banner-sitejet{background:linear-gradient(135deg,#f57200,#ea580c);}
.hg-wide-banner-planmyposts{background:linear-gradient(135deg,#1e1b4b,#312e81);}
.hg-wide-banner-inner{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding:48px 0;}
.hg-wide-banner-text h2{font-size:30px;font-weight:900;color:#fff;margin-bottom:12px;line-height:1.2;}
.hg-wide-banner-text p{font-size:14px;color:rgba(255,255,255,0.8);margin-bottom:20px;line-height:1.6;}
.hg-orange-text{color:#fcd34d;}
.hg-wide-banner-ctas{display:flex;gap:12px;flex-wrap:wrap;}
.hg-btn-white{background:#fff;color:#f57200 !important;font-weight:800;}
.hg-btn-white:hover{background:#f9fafb;}
.hg-btn-orange{background:#f57200;color:#fff !important;font-weight:800;border:none;}
.hg-btn-orange:hover{background:#ea580c;}
.hg-btn-outline-white{background:transparent;color:#fff !important;border:2px solid rgba(255,255,255,0.5);font-weight:700;}
.hg-btn-outline-white:hover{border-color:#fff;background:rgba(255,255,255,0.08);}
.hg-badge-white{background:rgba(255,255,255,0.2);color:#fff;}
.hg-badge-orange{background:#f57200;color:#fff;}
.hg-wide-banner-media img{width:100%;border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,0.25);}

/* Responsive */
@media(max-width:900px){
  .hg-crosssell-grid{grid-template-columns:1fr;}
  .hg-ecosystem-hero-inner,.hg-wide-banner-inner{grid-template-columns:1fr;gap:24px;}
  .hg-ecosystem-headline{font-size:28px;}
  .hg-eco-badge{display:none;}
  .hg-journey-arrow{display:none;}
  .hg-journey-steps{gap:8px;}
  .hg-journey-step{padding:8px 12px;}
}
@media(max-width:600px){
  .hg-crosssell-grid{grid-template-columns:1fr;}
  .hg-csc-features{grid-template-columns:1fr;}
  .hg-wide-banner-text h2{font-size:24px;}
}

