@media (max-width:1100px){.plans .plan{flex:0 0 48% !important;max-width:48% !important}}@media (max-width:560px){.plans .plan{flex:0 0 100% !important;max-width:100% !important;width:100% !important}}.wpg-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}@media (max-width:768px){.wpg-split{grid-template-columns:1fr !important;gap:28px !important}.wpg-split > div:last-child{display:none !important}}.wpg-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:60px}@media (max-width:960px){.wpg-feat-grid{grid-template-columns:repeat(2,1fr) !important;gap:20px !important}}@media (max-width:560px){.wpg-feat-grid{grid-template-columns:1fr !important;gap:16px !important;margin-bottom:32px !important}}.wpg-purple-card{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}@media (max-width:768px){.wpg-purple-card{grid-template-columns:1fr !important;gap:24px !important;padding:32px 24px !important}}.wpg-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media (max-width:400px){.wpg-stats-grid{grid-template-columns:1fr 1fr !important;gap:10px !important}}@media (max-width:1100px){.plans .plan{flex:0 0 48% !important;max-width:48% !important}}@media (max-width:560px){.plans .plan{flex:0 0 100% !important;max-width:100% !important;width:100% !important}}.litespeed-plans .plan{flex:0 0 31.5% !important;max-width:31.5% !important}@media (max-width:991px){.litespeed-plans .plan{flex:0 0 47% !important;max-width:47% !important}}@media (max-width:560px){.litespeed-plans .plan{flex:0 0 100% !important;max-width:100% !important;width:100% !important}}.cloud-plans .plan{flex:0 0 31.5% !important;max-width:31.5% !important}@media (max-width:991px){.cloud-plans .plan{flex:0 0 47% !important;max-width:47% !important}}@media (max-width:560px){.cloud-plans .plan{flex:0 0 100% !important;max-width:100% !important;width:100% !important}}.vps-plans .plan{flex:0 0 31.5% !important;max-width:31.5% !important}@media (max-width:991px){.vps-plans .plan{flex:0 0 47% !important;max-width:47% !important}}@media (max-width:560px){.vps-plans .plan{flex:0 0 100% !important;max-width:100% !important;width:100% !important}}.laravel-plans .plan{flex:0 0 31.5% !important;max-width:31.5% !important}@media (max-width:991px){.laravel-plans .plan{flex:0 0 47% !important;max-width:47% !important}}@media (max-width:560px){.laravel-plans .plan{flex:0 0 100% !important;max-width:100% !important;width:100% !important}}.reseller-plans .plan{flex:0 0 31.5% !important;max-width:31.5% !important}@media(max-width:991px){.reseller-plans .plan{flex:0 0 47% !important;max-width:47% !important}}@media(max-width:560px){.reseller-plans .plan{flex:0 0 100% !important;max-width:100% !important;width:100% !important}}.rs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}@media(max-width:768px){.rs-steps{grid-template-columns:1fr}}.rs-rev-table{width:100%;border-collapse:collapse;font-size:.9rem}.rs-rev-table th{background:#0f766e;color:#fff;padding:13px 16px;text-align:left;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}.rs-rev-table th:not(:first-child){text-align:center}.rs-rev-table td{padding:12px 16px;border-bottom:1px solid #f1f5f9;color:#374151}.rs-rev-table td:not(:first-child){text-align:center;font-weight:600}.rs-rev-table tr:last-child td{border-bottom:none;font-weight:700;background:#f0fdfa;color:#0f766e}.rs-rev-table tr:nth-child(even) td:first-child{background:#f8fafc}@media(max-width:640px){.rs-rev-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}.supabase-plans .plan{flex:0 0 31.5% !important;max-width:31.5% !important}@media (max-width:991px){.supabase-plans .plan{flex:0 0 47% !important;max-width:47% !important}}@media (max-width:560px){.supabase-plans .plan{flex:0 0 100% !important;max-width:100% !important;width:100% !important}}.dedicated-plans .plan{flex:0 0 31.5% !important;max-width:31.5% !important}@media (max-width:991px){.dedicated-plans .plan{flex:0 0 47% !important;max-width:47% !important}}@media (max-width:560px){.dedicated-plans .plan{flex:0 0 100% !important;max-width:100% !important;width:100% !important}}.ec-hero{background:linear-gradient(135deg,#0a0f1e 0%,#14532d 45%,#15803d 100%);padding:80px 0 88px;position:relative;overflow:hidden}.ec-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:52px 52px}.ec-hero::after{content:'';position:absolute;bottom:-80px;right:-60px;width:400px;height:400px;background:radial-gradient(circle,rgba(245,114,0,.16) 0%,transparent 65%);pointer-events:none}.ec-hero-glow{position:absolute;top:-100px;left:-80px;width:500px;height:500px;background:radial-gradient(circle,rgba(34,197,94,.18) 0%,transparent 65%);pointer-events:none;z-index:1}.ec-hero-inner{position:relative;z-index:2}.ec-hero-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}@media(max-width:940px){.ec-hero-split{grid-template-columns:1fr}.ec-hero-right{display:none}}.ec-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#bbf7d0;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:100px;padding:6px 16px;margin-bottom:22px}.ec-hero h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:900;color:#fff !important;line-height:1.1;margin:0 0 16px;text-shadow:0 2px 20px rgba(0,0,0,.25)}.ec-hero-desc{font-size:1rem;color:rgba(255,255,255,.82);max-width:520px;margin:0 0 24px;line-height:1.8}.ec-hero-checks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:28px}.ec-hero-checks span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:rgba(255,255,255,.9)}.ec-hero-checks span::before{content:'';width:16px;height:16px;background:rgba(34,197,94,.15);border:1.5px solid #22c55e;border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:9px;background-repeat:no-repeat;background-position:center;flex-shrink:0}.ec-hero-ctas{display:flex;flex-wrap:wrap;gap:12px}.ec-btn-primary{display:inline-flex;align-items:center;gap:8px;background:#f57200;color:#fff;font-weight:800;font-size:15px;padding:14px 28px;border-radius:9px;text-decoration:none;transition:background .18s,transform .18s}.ec-btn-primary:hover{background:#d96500;color:#fff;transform:translateY(-2px);box-shadow:0 8px 28px rgba(245,114,0,.35)}.ec-btn-ghost{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.25);color:#fff;font-weight:700;font-size:14px;padding:13px 24px;border-radius:9px;text-decoration:none;transition:background .18s,border-color .18s}.ec-btn-ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff}.ec-hero-right{position:relative;height:460px;display:flex;align-items:center;justify-content:center}.ec-orbit-ring{position:absolute;border-radius:50%;border:1px solid rgba(34,197,94,.2);animation:ecSpin 22s linear infinite}.ec-orbit-ring.r1{width:320px;height:320px}.ec-orbit-ring.r2{width:440px;height:440px;border-color:rgba(245,114,0,.14);animation-duration:30s;animation-direction:reverse}@keyframes ecSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.ec-cart-center{width:92px;height:92px;background:linear-gradient(135deg,#16a34a,#22c55e);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 14px rgba(22,163,74,.15),0 0 0 28px rgba(22,163,74,.07);z-index:3;position:relative;animation:ecPulse 3s ease-in-out infinite}@keyframes ecPulse{0%,100%{box-shadow:0 0 0 14px rgba(22,163,74,.15),0 0 0 28px rgba(22,163,74,.07)}50%{box-shadow:0 0 0 22px rgba(22,163,74,.1),0 0 0 42px rgba(22,163,74,.04)}}.ec-store-card{position:absolute;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:10px;white-space:nowrap;z-index:4;transition:transform .22s}.ec-store-card:hover{transform:scale(1.06)}.ec-sc-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.ec-sc-info{display:flex;flex-direction:column}.ec-sc-name{font-size:11px;font-weight:600;color:rgba(255,255,255,.55)}.ec-sc-status{font-size:13px;font-weight:800;color:#fff}.ec-sc-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:ecBlink 2s ease-in-out infinite;flex-shrink:0}@keyframes ecBlink{0%,100%{opacity:1}50%{opacity:.3}}@keyframes ecF1{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes ecF2{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}@keyframes ecF3{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes ecF4{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}@keyframes ecF5{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}.ec-mpesa-badge{position:absolute;bottom:16px;right:0;background:linear-gradient(135deg,#00a651,#16a34a);color:#fff;border-radius:12px;padding:10px 16px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;box-shadow:0 8px 24px rgba(0,166,81,.4);z-index:5;animation:ecF3 4s ease-in-out infinite;animation-delay:1.2s}.ec-plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}@media(max-width:860px){.ec-plans-grid{grid-template-columns:1fr}}.ec-plan-card{background:#fff;border:2px solid #e5e7eb;border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .22s,transform .22s}.ec-plan-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.1)}.ec-plan-card.featured{border-color:#f57200;box-shadow:0 0 0 3px rgba(245,114,0,.12)}.ec-plan-badge{position:absolute;top:0;right:0;background:#f57200;color:#fff;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:5px 16px;border-bottom-left-radius:12px}.ec-plan-name{font-size:1.15rem;font-weight:900;color:#111;margin:0 0 4px}.ec-plan-tagline{font-size:13px;color:#6b7280;margin:0 0 20px}.ec-plan-price-wrap{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}.ec-plan-old{font-size:13px;color:#9ca3af;text-decoration:line-through}.ec-plan-price{font-size:2.4rem;font-weight:900;color:#111;line-height:1}.ec-plan-period{font-size:13px;color:#9ca3af}.ec-plan-features{list-style:none;padding:0;margin:20px 0 24px;display:flex;flex-direction:column;gap:10px;flex:1}.ec-plan-features li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:#374151}.ec-plan-features li::before{content:'';width:16px;height:16px;flex-shrink:0;margin-top:1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}.ec-plan-btn{display:block;text-align:center;padding:13px;border-radius:9px;font-size:14px;font-weight:800;text-decoration:none;transition:background .18s,transform .18s}.ec-plan-btn.primary{background:#f57200;color:#fff}.ec-plan-btn.primary:hover{background:#d96500;color:#fff;transform:translateY(-1px)}.ec-plan-btn.outline{background:transparent;border:2px solid #e5e7eb;color:#374151}.ec-plan-btn.outline:hover{border-color:#f57200;color:#f57200}.ec-platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:760px){.ec-platform-grid{grid-template-columns:1fr 1fr}}.ec-platform-card{background:#fff;border:1.5px solid #e5e7eb;border-radius:16px;padding:24px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:border-color .22s,transform .22s;text-decoration:none;color:inherit}.ec-platform-card:hover{border-color:rgba(245,114,0,.4);transform:translateY(-3px);box-shadow:0 8px 24px rgba(245,114,0,.08)}.ec-platform-icon{width:64px;height:64px;border-radius:16px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;font-size:30px}.ec-feat-card{background:#fff;border:1.5px solid #e5e7eb;border-radius:18px;padding:28px 24px;transition:border-color .22s,transform .22s}.ec-feat-card:hover{border-color:rgba(22,163,74,.3);box-shadow:0 8px 28px rgba(22,163,74,.08);transform:translateY(-3px)}.ec-feat-icon{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}.ec-perf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}@media(max-width:800px){.ec-perf-grid{grid-template-columns:1fr 1fr}}.ec-perf-card{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);border-radius:18px;padding:28px 20px;text-align:center;transition:background .22s,border-color .22s}.ec-perf-card:hover{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3)}.ec-perf-num{font-size:2.2rem;font-weight:900;color:#4ade80;line-height:1;margin-bottom:6px}.ec-perf-lbl{font-size:13px;color:rgba(255,255,255,.75);line-height:1.4}@media(max-width:767px){.ec-hero-right{display:none !important}}@media(max-width:767px){.ec-feat-card,.ec-perf-card,.ec-platform-card{padding:14px 12px !important;border-radius:12px !important}}@media(max-width:767px){.ec-feat-icon,.ec-platform-icon{width:38px !important;height:38px !important;font-size:20px !important;margin-bottom:8px !important;border-radius:10px !important}}@media(max-width:767px){.ec-platform-icon{width:40px !important;height:40px !important;font-size:20px !important;margin-bottom:8px !important}.ec-platform-card{padding:12px 10px !important}.ec-platform-grid{gap:10px !important}}@media(max-width:400px){.ec-platform-grid{grid-template-columns:1fr !important}}.n8n-hero-wrap{background:linear-gradient(180deg,#0a0a0f 0%,#0f0f1a 60%,#0a0a0f 100%);position:relative;overflow:hidden;padding:0}.n8n-plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media(max-width:1024px){.n8n-plans-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.n8n-plans-grid{grid-template-columns:1fr}}.n8n-cases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}@media(max-width:900px){.n8n-cases-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.n8n-cases-grid{grid-template-columns:1fr}}.n8n-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:768px){.n8n-why-grid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.n8n-why-grid{grid-template-columns:1fr}}.n8n-vs-row{display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center}.n8n-vs-row + .n8n-vs-row{border-top:1px solid #1e2038}.n8n-vs-cell{padding:12px 16px;font-size:13px}.n8n-integ-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media(max-width:768px){.n8n-integ-grid{grid-template-columns:repeat(2,1fr)}}.wh-hero{background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 60%,#1d4ed8 100%);padding:80px 0 72px;position:relative;overflow:hidden;text-align:center}.wh-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:36px 36px}.wh-hero-eyebrow{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#bfdbfe;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:100px;padding:5px 16px;margin-bottom:20px}.wh-hero h1{font-size:clamp(2rem,4.5vw,3rem);font-weight:900;color:#fff !important;line-height:1.15;margin:0 0 18px;text-shadow:0 2px 16px rgba(0,0,0,.3)}.wh-hero-desc{font-size:1.05rem;color:rgba(255,255,255,.82);max-width:600px;margin:0 auto 36px;line-height:1.7}.wh-hero-checks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin-bottom:36px}.wh-hero-checks span{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9)}.wh-hero-checks span::before{content:'';width:16px;height:16px;background:rgba(34,197,94,.2);border:1.5px solid #22c55e;border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:10px;background-repeat:no-repeat;background-position:center;flex-shrink:0}.wh-stat-bar{background:#fff;border-bottom:1px solid #e5e7eb;padding:0}.wh-stat-bar-inner{display:flex;justify-content:center;flex-wrap:wrap}.wh-stat{flex:1;min-width:160px;padding:24px 20px;text-align:center;border-right:1px solid #e5e7eb}.wh-stat:last-child{border-right:none}.wh-stat-num{font-size:1.9rem;font-weight:900;color:#1d4ed8;line-height:1;margin-bottom:4px}.wh-stat-lbl{font-size:12.5px;color:#6b7280;font-weight:500}.wh-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}@media(max-width:1024px){.wh-cards-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.wh-cards-grid{grid-template-columns:1fr}}.wh-card{background:#fff;border-radius:16px;border:1.5px solid #e5e7eb;padding:32px 28px;display:flex;flex-direction:column;gap:0;transition:border-color .2s,box-shadow .2s,transform .2s;text-decoration:none;color:inherit;position:relative;overflow:hidden}.wh-card:hover{border-color:var(--card-color);box-shadow:0 12px 40px rgba(0,0,0,.1);transform:translateY(-3px)}.wh-card-popular{position:absolute;top:0;right:0;background:var(--card-color);color:#fff;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:5px 14px;border-bottom-left-radius:10px}.wh-card-icon{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:var(--card-bg);color:var(--card-color);flex-shrink:0}.wh-card h3{font-size:1.15rem;font-weight:800;color:#111;margin:0 0 8px}.wh-card-desc{font-size:.88rem;color:#6b7280;line-height:1.6;margin-bottom:18px;flex:1}.wh-card-feats{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:6px}.wh-card-feats li{font-size:.82rem;color:#374151;display:flex;align-items:center;gap:7px}.wh-card-feats li::before{content:'';width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;flex-shrink:0}.wh-card-from{font-size:.78rem;color:#9ca3af;margin-bottom:6px;font-weight:500}.wh-card-price{font-size:1.5rem;font-weight:900;color:#111;margin-bottom:16px;line-height:1}.wh-card-price span{font-size:.85rem;font-weight:500;color:#9ca3af}.wh-card-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:11px 20px;border-radius:8px;font-size:.88rem;font-weight:700;text-decoration:none;text-align:center;border:2px solid var(--card-color);color:var(--card-color);background:transparent;transition:background .18s,color .18s}.wh-card-btn:hover{background:var(--card-color);color:#fff}.wh-compare-wrap{overflow-x:auto}.wh-compare{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}.wh-compare th{padding:14px 18px;text-align:center;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;border-right:1px solid rgba(255,255,255,.1)}.wh-compare th:first-child{text-align:left;background:#1e293b}.wh-compare th.th-shared{background:#2563eb}.wh-compare th.th-wp{background:#1a7ec8}.wh-compare th.th-vps{background:#7c3aed}.wh-compare th.th-cloud{background:#0891b2}.wh-compare th.th-ded{background:#c2410c}.wh-compare td{padding:12px 18px;border-bottom:1px solid #f1f5f9;vertical-align:middle;text-align:center;color:#374151}.wh-compare td:first-child{text-align:left;font-weight:600;color:#111;background:#f8fafc;border-right:1px solid #e5e7eb}.wh-compare tr:last-child td{border-bottom:none}.wh-compare .yes{color:#16a34a;font-weight:700}.wh-compare .no{color:#9ca3af}.wh-compare .partial{color:#f57200;font-weight:600}.wh-audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}@media(max-width:768px){.wh-audience-grid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.wh-audience-grid{grid-template-columns:1fr}}
/* ── Comparison table (hg-card-2col / hg-col-* / hg-ct-*) ──────────────────
   Used in hosting pages for feature comparison tables.                        */
.hg-card-2col{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid #e5e7eb;border-radius:16px;overflow:hidden}
.hg-col-feat{background:#f9fafb;font-size:13px;font-weight:600;color:#374151;padding:13px 18px;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.hg-col-us{background:#fff;font-size:13px;font-weight:700;color:#0d1117;padding:13px 18px;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;text-align:center}
.hg-col-other{background:#fafafa;font-size:13px;color:#6b7280;padding:13px 18px;border-bottom:1px solid #e5e7eb;text-align:center}
.hg-col-feat:last-child,.hg-col-us:last-child,.hg-col-other:last-child{border-bottom:none}
.hg-ct-yes{color:#16a34a;font-weight:700}
.hg-ct-no{color:#dc2626;font-weight:700}
.hg-ct-part{color:#d97706;font-weight:700}
@media(max-width:600px){
  .hg-card-2col{grid-template-columns:1fr}
  .hg-col-feat{border-right:none;border-bottom:1px solid #e5e7eb;font-weight:800;background:#f3f4f6}
  .hg-col-us,.hg-col-other{border-right:none}
}

/* ── Stat strip (hg-stat-strip) ─────────────────────────────────────────────
   Used in page-hosting-linux.php                                              */
.hg-stat-strip{background:linear-gradient(135deg,#f57200,#d96500);padding:32px 0}
.hg-stat-strip-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:0}
.hg-stat-item{flex:1;min-width:130px;padding:16px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.25)}
.hg-stat-item:last-child{border-right:none}
.hg-stat-num{font-size:1.8rem;font-weight:900;color:#fff;line-height:1;margin-bottom:4px}
.hg-stat-label{font-size:12.5px;color:rgba(255,255,255,.85);font-weight:600}
@media(max-width:600px){
  .hg-stat-item{min-width:120px;padding:12px 14px}
  .hg-stat-num{font-size:1.4rem}
}

   Full FAQ accordion styles for hosting page CSS files.                       */
.faq-arrow{transition:transform .22s;display:inline-block}


/* ══════════════════════════════════════════════════════════════════
   hgl-* NEW PRICING CARDS — Linux Shared Hosting
   All classes prefixed hgl- to avoid cascade conflicts.
   Rollback: set $use_new_plans = false in page-hosting-linux.php
   ══════════════════════════════════════════════════════════════════ */

/* Billing toggle */

/* Cards grid */



@media(max-width:1100px){.hgl-grid{grid-template-columns:repeat(2,1fr)}.hgl-grid-3col{grid-template-columns:repeat(2,1fr)}.hgl-grid-4col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hgl-grid,.hgl-grid-3col{grid-template-columns:1fr}}

/* Individual card */


/* Badge (Most Popular / Best Value / Ecommerce) */





/* Plan name + tagline */

/* Domain offer pill */
.hgl-domain{display:flex;align-items:center;gap:7px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:8px 12px;margin-bottom:18px;font-size:11.5px;font-weight:700;color:#15803d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hgl-domain-annual{display:none}/* hidden until Annual billing selected — JS overrides to flex */
.hgl-domain-teaser{display:flex;align-items:center;gap:7px;border:1px dashed #fed7aa;border-radius:8px;padding:7px 12px;margin-bottom:18px;font-size:11.5px;font-weight:600;color:#c2410c;cursor:pointer;background:#fff7ed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .18s,color .18s}
.hgl-domain-teaser:hover{border-color:#f97316;color:#ea580c}
.hgl-domain-add{background:#fff7ed;border-color:#fed7aa;color:#c2410c}
.hgl-domain svg{flex-shrink:0}

/* Price block */

/* Divider */

/* Feature rows — RESOURCES (change per plan) */




/* Feature rows — STACK (same across all plans, grouped) */



/* Support badge */



/* See full specs link */
.hgl-specs-link{font-size:11.5px;color:#9ca3af;text-decoration:none;text-align:center;display:block;margin-bottom:16px;transition:color .18s}
.hgl-specs-link:hover{color:#f57200}

/* CTA button */





/* Full specs table (hidden by default, shown on toggle) */
.hgl-specs-table{display:none;margin-top:40px;overflow-x:auto}
.hgl-specs-table.open{display:block}









/* ── hgl-* MOBILE RESPONSIVE ──────────────────────────────────────────────── */

/* Tablet: 2-col grid already set. Tighten gap + card padding */
@media(max-width:1100px){

}

/* Phablet: billing toggle may get tight — make it scrollable */
@media(max-width:767px){

}

/* Mobile single-column */
@media(max-width:600px){
  /* Toggle: scroll sideways, all 4 options still reachable */

  /* Cards */

  /* Specs toggle button */

  /* Specs table: allow horizontal scroll, freeze feature column width */
  .hgl-specs-table{border-radius:0;margin-left:-16px;margin-right:-16px;width:calc(100% + 32px)}



}

/* Small phones */
@media(max-width:400px){

  .hgl-save-badge{display:none} /* recovers toggle width on very small screens */

}



@media(max-width:1200px){ .hgl-grid-4col,.hgl-grid-5col { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){  .hgl-grid-4col,.hgl-grid-5col { grid-template-columns:1fr; } }


/* Badge — minimal top-right pill */





/* Name & tagline */

/* Price */

/* Divider */

/* Resource rows — clean key/value table */

/* Features checklist — clean, no colour overrides */




/* CTA button */





/* Period toggle */

/* Support label */


/* Plans-note footer */

/* ═══════════════════════════════════════════════════════════
   HGL PRICING CARDS — Clean, lightweight, consistent
   Applies to: hosting, VPS, dedicated, OpenClaw, DeepSeek,
               Cloud VDS, n8n, ecommerce, reseller pages
   ═══════════════════════════════════════════════════════════ */

/* Grid */
.hgl-grid                 { display:grid; gap:18px; grid-template-columns:repeat(4,1fr); }
.hgl-grid-4col            { grid-template-columns:repeat(4,1fr); }
.hgl-grid-5col            { grid-template-columns:repeat(5,1fr); }
.hgl-grid-3col            { grid-template-columns:repeat(3,1fr); }
@media(max-width:1200px)  { .hgl-grid-4col,.hgl-grid-5col { grid-template-columns:repeat(2,1fr); } }
@media(max-width:1100px)  { .hgl-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:900px)   { .hgl-grid-3col { grid-template-columns:1fr; } }
@media(max-width:640px)   { .hgl-grid-4col,.hgl-grid-5col,.hgl-grid-3col { grid-template-columns:1fr; } }
@media(max-width:600px)   { .hgl-grid { grid-template-columns:1fr; } }


/* Card base */
.hgl-card {
  background:#fff;
  border:1.5px solid #e5e7eb;
  border-radius:16px;
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .18s;
}
.hgl-card:hover {
  border-color:#d1d5db;
  box-shadow:0 8px 24px rgba(0,0,0,.07);
  transform:translateY(-2px);
}
.hgl-card.hgl-featured {
  border-color:#f57200;
  box-shadow:0 0 0 3px rgba(245,114,0,.08);
}
.hgl-card.hgl-featured:hover {
  box-shadow:0 8px 28px rgba(245,114,0,.14);
}

/* Badge — small pill top-right */
.hgl-badge {
  position:absolute; top:14px; right:14px;
  font-size:9.5px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
  padding:4px 11px; border-radius:100px; color:#fff;
  line-height:1.4;
}
.hgl-badge.orange  { background:#f57200; }
.hgl-badge.green   { background:#16a34a; }
.hgl-badge.blue    { background:#2563eb; }
.hgl-badge.purple  { background:#7c3aed; }
.hgl-badge.teal    { background:#0d9488; }
.hgl-badge.cyan    { background:#0891b2; }
.hgl-badge.indigo  { background:#4f46e5; }

/* Plan name & tagline */
.hgl-name {
  font-size:.97rem; font-weight:800; color:#111827;
  margin:0 0 4px; padding-right:70px; line-height:1.3;
}
.hgl-tagline {
  font-size:12px; color:#6b7280;
  margin:0 0 14px; line-height:1.5;
}

/* Price block */
.hgl-price-block  { margin-bottom:14px; }
.hgl-price        { font-size:1.95rem; font-weight:900; color:#111827; line-height:1; letter-spacing:-.02em; }
.hgl-price sub    { font-size:12px; font-weight:500; color:#9ca3af; vertical-align:baseline; letter-spacing:0; }
.hgl-billing-note { font-size:11px; color:#9ca3af; margin-top:4px; }
.hgl-price-data   { display:none; }

/* Divider */
.hgl-divider { border:none; border-top:1px solid #f3f4f6; margin:0 0 12px; }

/* Resource rows — clean key/value */
.hgl-resources   { display:flex; flex-direction:column; margin-bottom:12px; }
.hgl-res-row     { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid #f9fafb; font-size:12.5px; }
.hgl-res-row:last-child { border-bottom:none; }
.hgl-res-label   { color:#6b7280; font-weight:500; }
.hgl-res-value   { color:#111827; font-weight:700; }
.hgl-unlimited   { color:#16a34a !important; font-weight:700; }

/* Feature checklist — uniform, no colour overrides */
.hgl-stack       { display:flex; flex-direction:column; gap:5px; margin-bottom:18px; flex:1; }
.hgl-stack-row   { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.45; }
.hgl-stack-row svg  { flex-shrink:0; margin-top:1px; color:#16a34a; }
.hgl-stack-row span { flex:1; color:#374151 !important; font-weight:500 !important; font-style:normal !important; }

/* CTA button */
.hgl-cta {
  display:block; text-align:center;
  padding:11px 16px; border-radius:9px;
  font-size:13.5px; font-weight:700;
  text-decoration:none;
  transition:background .18s, transform .15s, box-shadow .15s;
  margin-top:auto;
}
.hgl-cta.primary             { background:#f57200; color:#fff !important; border:1.5px solid #f57200; }
.hgl-cta.primary:hover       { background:#d96000; border-color:#d96000; transform:translateY(-1px); box-shadow:0 4px 12px rgba(245,114,0,.25); }
.hgl-cta.outline             { background:#fff; color:#374151 !important; border:1.5px solid #e5e7eb; }
.hgl-cta.outline:hover       { border-color:#f57200; color:#f57200 !important; }

/* Period toggle (monthly/annual) */
.hgl-toggle-wrap   { display:inline-flex; background:#f3f4f6; border-radius:100px; padding:3px; gap:3px; margin-bottom:24px; }
.hgl-period-btn    { background:transparent; border:none; border-radius:100px; padding:7px 20px; font-size:13px; font-weight:600; color:#6b7280; cursor:pointer; transition:background .15s,color .15s; }
.hgl-period-btn.active { background:#fff; color:#111827; box-shadow:0 1px 4px rgba(0,0,0,.10); }
.hgl-save-badge    { background:#dcfce7; color:#166534; font-size:10px; font-weight:700; padding:2px 7px; border-radius:100px; margin-left:6px; }

/* Support label — hide (removed from PHP, kept for safety) */
.hgl-support { display:none; }

/* Specs expand toggle */
.hgl-toggle-specs {
  background:transparent; border:1.5px solid #e5e7eb; border-radius:8px;
  padding:8px 20px; font-size:13px; font-weight:600; color:#6b7280;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  margin-top:16px; transition:border-color .15s, color .15s;
}
.hgl-toggle-specs:hover { border-color:#f57200; color:#f57200; }

/* Specs table */
.hgl-specs-table { display:none; margin-top:20px; overflow-x:auto; }
.hgl-specs-table.visible { display:block; }
.hgl-table { width:100%; border-collapse:collapse; font-size:13px; }
.hgl-table th,.hgl-table td { padding:9px 12px; border:1px solid #f1f5f9; text-align:left; }
.hgl-table th { background:#f8fafc; font-weight:700; color:#374151; }
.hgl-table .hgl-yes { color:#16a34a; font-weight:700; text-align:center; }
.hgl-table .hgl-no  { color:#9ca3af; text-align:center; }
.hgl-unlimited      { color:#16a34a; font-weight:700; }

/* Plans footer note */
.hgl-plans-note { text-align:center; margin-top:18px; font-size:12px; color:#9ca3af; line-height:1.7; }

/* Responsive */
@media(max-width:480px) {
  .hgl-card   { padding:20px 16px; border-radius:14px; }
  .hgl-price  { font-size:1.75rem; }
  .hgl-name   { font-size:.93rem; padding-right:60px; }
  .hgl-badge  { font-size:9px; padding:3px 9px; }
}
/* ===============================================================
   MOBILE FIXES � Audited June 2026
   =============================================================== */
/* P8: n8n vs comparison row � 1-col on mobile */
@media (max-width: 640px) { .n8n-vs-row { grid-template-columns: 1fr !important; } }
/* M13: ecommerce hero � mobile padding reduction */
@media (max-width: 767px) { .ec-hero { padding: 52px 0 60px; } }
/* M14: hgl pricing grid � 1-col on tablets for readability */
@media (max-width: 768px) { .hgl-grid { grid-template-columns: 1fr !important; } }