/* ============================================================
   Shopify CRO Service — Page-Specific Overrides
   Shared base: shopify-seo-service_Version1.css
============================================================ */

/* ── Hero Mockup — CRO Funnel Dashboard ── */
.cro-dashboard { padding: 20px; }
.cro-db-title  { font-size: 0.72rem; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.cro-db-title i { color: var(--cta); }

/* Funnel steps */
.cro-funnel { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cro-step   { display: flex; align-items: center; gap: 10px; }
.cro-step-bar-wrap { flex: 1; }
.cro-step-label    { font-size: 0.72rem; font-weight: 700; color: var(--heading); min-width: 80px; }
.cro-step-bar      { height: 20px; border-radius: 6px; display: flex; align-items: center; padding: 0 8px; font-size: 0.68rem; font-weight: 900; color: #fff; transition: width 1s ease; }
.cro-step-bar.step1 { background: linear-gradient(90deg, var(--heading), #0a6e4a); width: 100%; }
.cro-step-bar.step2 { background: linear-gradient(90deg, var(--cta), #00a070);   width: 68%; }
.cro-step-bar.step3 { background: linear-gradient(90deg, #16a34a, #22c55e);     width: 42%; }
.cro-step-bar.step4 { background: linear-gradient(90deg, #4ade80, #86efac);     width: 18%; color: var(--heading); }
.cro-step-val       { font-size: 0.72rem; font-weight: 900; color: var(--heading); min-width: 36px; text-align: right; }

/* Before / After comparison row */
.cro-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.cro-col     { border-radius: var(--radius); padding: 10px 12px; }
.cro-col.before { background: #fee2e2; }
.cro-col.after  { background: #dcfce7; }
.cro-col-label  { font-size: 0.64rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.cro-col.before .cro-col-label { color: #ef4444; }
.cro-col.after  .cro-col-label { color: #16a34a; }
.cro-col-cvr    { font-size: 1.3rem; font-weight: 900; line-height: 1; }
.cro-col.before .cro-col-cvr { color: #b91c1c; }
.cro-col.after  .cro-col-cvr { color: #15803d; }
.cro-col-sub    { font-size: 0.68rem; color: var(--muted); margin-top: 2px; }

/* Lift badge */
.cro-lift-badge { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--lime); color: var(--heading); border-radius: 8px; padding: 7px 10px; font-size: 0.78rem; font-weight: 900; }

/* ── Hero Stats Bar ── */
.hero-stats-bar { background: var(--heading); padding: 24px 0; }
.hsb-grid        { display: flex; align-items: center; justify-content: space-around; }
.hsb-item        { text-align: center; flex: 1; padding: 8px 16px; }
.hsb-num         { display: block; font-size: 1.8rem; font-weight: 900; color: var(--lime); line-height: 1; letter-spacing: -0.02em; }
.hsb-label       { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.72); margin-top: 5px; font-weight: 600; }
.hsb-divider     { width: 1px; height: 44px; background: rgba(255,255,255,0.15); flex-shrink: 0; }

/* ── Service Tab active colour override ── */
.svc-tab.active { background: var(--cta); color: #fff; }

/* ── Pain Icon Circles ── */
.pain-icon       { width: 40px; height: 40px; border-radius: 10px; background: rgba(220,38,38,0.10); color: #dc2626; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.88rem; }
.pain-text h4    { display: flex; align-items: center; gap: 7px; font-size: 0.90rem; font-weight: 800; color: var(--heading); margin-bottom: 4px; }
.pain-text h4 i  { color: #dc2626; font-size: 0.80rem; flex-shrink: 0; }

/* ── Results — stars stack below industry tag, metrics stay on one row ── */
.rc-top           { flex-direction: column; gap: 4px; }
.rc-metrics       { flex-wrap: nowrap !important; }
.rc-metric        { flex: 1; min-width: 0; }