/* ── HERO GRID ────────────────────────────────────────────────── */
.page-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero-showcase{background:rgba(255,255,255,0.04);border:1px solid var(--hero-border);padding:1.5rem}
.hero-showcase-label{font-size:0.65rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--hero-muted);margin-bottom:1.25rem}
.showcase-metrics{display:flex;flex-direction:column;gap:1px;background:var(--hero-border)}
.metric{display:flex;justify-content:space-between;align-items:center;padding:0.875rem 1rem;background:var(--hero-bg)}
.metric-name{font-size:0.8rem;color:var(--hero-muted)}
.metric-val{font-family:Georgia,serif;font-size:1.25rem;font-weight:400;letter-spacing:-0.02em;color:var(--hero-text)}
.metric-val .up{color:#4ade80;font-size:0.7rem;letter-spacing:0.04em;text-transform:uppercase;margin-left:0.4rem}

/* ── SERVICES GRID ────────────────────────────────────────────── */
.services-header{display:grid;grid-template-columns:1fr 1fr;gap:2rem 4rem;align-items:end;margin-bottom:3.5rem}
.ec-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border)}
.ec-card{background:var(--surface);padding:2.25rem 2rem;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background 0.2s}
.ec-card:nth-child(3n){border-right:none}
.ec-card:nth-last-child(-n+3){border-bottom:none}
.ec-card:hover{background:var(--card-hover)}
.ec-cat{font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-2);margin-bottom:1.5rem;font-family:Georgia,serif;transition:color 0.2s}
.ec-card:hover .ec-cat{color:var(--accent)}
.ec-name{font-size:1rem;font-weight:600;letter-spacing:-0.01em;color:var(--text);margin-bottom:0.5rem}
.ec-desc{font-size:0.84rem;color:var(--text-2);line-height:1.65}

/* ── WHY SHOPIFY (DARK) ───────────────────────────────────────── */
.why-dark{background:var(--hero-bg)}
.why-dark .section-eyebrow{color:rgba(240,77,24,0.85)}
.why-dark .section-eyebrow::before{background:rgba(240,77,24,0.85)}
.why-dark .section-title{color:var(--hero-text)}
.why-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;margin-top:3rem}
.why-left p{font-size:0.9375rem;color:var(--hero-muted);line-height:1.78;margin-bottom:1.1rem}
.why-points{display:flex;flex-direction:column;gap:0}
.why-point{display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--hero-border)}
.why-point:last-child{border-bottom:none}
.why-dot{width:8px;height:8px;min-width:8px;border-radius:50%;background:var(--accent);margin-top:0.45rem}
.why-text strong{display:block;font-size:0.9rem;font-weight:600;color:var(--hero-text);margin-bottom:0.2rem}
.why-text p{font-size:0.82rem;color:var(--hero-muted);line-height:1.6}

/* ── INCLUDES ─────────────────────────────────────────────────── */
.includes-band{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.includes-2col{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.incl-group{margin-bottom:2rem}
.incl-group:last-child{margin-bottom:0}
.incl-group-title{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:1rem;padding-bottom:0.625rem;border-bottom:1px solid var(--border)}
.incl-item{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0;border-bottom:1px solid var(--border)}
.incl-item:last-child{border-bottom:none}
.incl-check{color:var(--accent);font-size:0.9rem;flex-shrink:0}
.incl-name{font-size:0.875rem;color:var(--text)}

/* ── PLATFORMS ────────────────────────────────────────────────── */
.platforms{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:3rem}
.platform{background:var(--surface);padding:2rem;transition:background 0.2s}
.platform:hover{background:var(--card-hover)}
.platform-name{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:0.5rem;letter-spacing:-0.01em}
.platform-badge{display:inline-block;padding:0.2rem 0.5rem;border:1px solid var(--accent);border-radius:2px;font-size:0.65rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.platform-desc{font-size:0.84rem;color:var(--text-2);line-height:1.65}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media(max-width:960px){
  .page-hero-inner{grid-template-columns:1fr}
  .hero-showcase{display:none}
  .services-header{grid-template-columns:1fr}
  .ec-grid{grid-template-columns:repeat(2,1fr)}
  .ec-card:nth-child(3n){border-right:1px solid var(--border)}
  .ec-card:nth-child(2n){border-right:none}
  .ec-card:nth-last-child(-n+3){border-bottom:1px solid var(--border)}
  .ec-card:nth-last-child(-n+2){border-bottom:none}
  .why-grid-2{grid-template-columns:1fr;gap:2.5rem}
  .includes-2col{grid-template-columns:1fr}
}
@media(max-width:640px){
  .ec-grid{grid-template-columns:1fr}
  .ec-card{border-right:none}
  .ec-card:nth-last-child(-n+2){border-bottom:1px solid var(--border)}
  .ec-card:last-child{border-bottom:none}
  .platforms{grid-template-columns:1fr}
}