/* Conversion Rate Optimization -page visual CSS
   Structurally identical to the site's proven pattern
   (see assets/css/google-ranking-service.css / local-seo-service.css),
   renamed to the cro- namespace. Same values, same behavior -this
   page must look and feel like every other redesigned service page. */

/* ---- shared keyframes ---- */
@keyframes croFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes croFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes croCountBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes croBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes croRise{0%{transform:translateY(16px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes croPop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes croDraw{to{stroke-dashoffset:0}}
@keyframes croDotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.35}}
@keyframes croHeat{0%,100%{opacity:.55}50%{opacity:1}}

/* ---- generic browser-chrome frame (light) ---- */
.cro-frame{width:100%;max-width:560px;max-height:100%;border-radius:1.1rem;background:#fff;border:1px solid #E6ECF5;
  box-shadow:0 12px 30px -14px rgba(17,24,39,.12);overflow:hidden;animation:croFloatA 6s ease-in-out infinite;}
.cro-frame-bar{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.1rem;background:#F7F8FC;border-bottom:1px solid #ECEFF6;min-width:0;}
.cro-dot{width:10px;height:10px;border-radius:9999px;flex-shrink:0;}
.cro-frame-url{flex:1;min-width:0;margin-left:.5rem;height:24px;border-radius:9999px;background:#EEF1F8;display:flex;align-items:center;
  padding:0 .75rem;font:600 11px/1 'Inter',monospace;color:#475569;gap:.35rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.cro-frame-tag{margin-left:auto;display:flex;align-items:center;gap:.35rem;font:800 10px/1 'Inter',monospace;color:#6A58E4;letter-spacing:.05em;}
.cro-frame-tag .cro-live-dot{width:7px;height:7px;border-radius:9999px;background:#6A58E4;animation:croBlink 1.4s ease-in-out infinite;}
.cro-frame-body{padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3vw,1.9rem) clamp(1.5rem,3.5vw,2.1rem);}

/* ---- ranking bar row (light frame dashboard) ---- */
.cro-frame-bar-row{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;min-width:0;}
.cro-bar-label{flex-shrink:0;width:110px;font:700 12px/1.2 'Inter',monospace;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cro-frame-bar-track{flex:1;min-width:0;height:6px;border-radius:9999px;background:#EEF1F8;overflow:hidden;position:relative;}
.cro-frame-bar-fill{position:absolute;inset:0;border-radius:9999px;background:linear-gradient(90deg,#6A58E4,#4A86F5);transform-origin:left;
  animation:croCountBar 1.3s cubic-bezier(.2,.8,.2,1) both;}
.cro-frame-bar-val{flex-shrink:0;width:40px;text-align:right;font:800 13px/1 'Inter',monospace;color:#6A58E4;}
.cro-frame-footer{margin-top:1.2rem;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem;
  border-radius:.95rem;background:rgba(106,88,228,.06);border:1px solid rgba(106,88,228,.18);}
.cro-frame-footer b{font:700 13px/1 'Inter',sans-serif;color:#111827;}
.cro-pill-violet{padding:.4rem .85rem;border-radius:9999px;background:linear-gradient(135deg,#6A58E4,#4A86F5);color:#fff;font:800 11px/1 'Inter',monospace;}

/* ---- conversion funnel bars (hero) ---- */
.cro-funnel{display:flex;flex-direction:column;gap:.65rem;margin-bottom:1.2rem;}
.cro-funnel-row{display:flex;flex-direction:column;gap:.3rem;animation:croRise .5s ease-out both;}
.cro-funnel-bar{display:block;height:13px;border-radius:9999px;width:var(--cro-w,50%);
  background:linear-gradient(90deg,#6A58E4,#4A86F5);transform-origin:left;animation:croCountBar 1s cubic-bezier(.2,.8,.2,1) both;}
.cro-funnel-row.is-final .cro-funnel-bar{background:linear-gradient(90deg,#10B981,#6A58E4);}
.cro-funnel-label{font:700 14px/1.2 'Inter',sans-serif;color:#475569;}
.cro-funnel-label b{color:#111827;font-weight:800;}

.cro-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;padding-top:1rem;border-top:1px dashed #E6ECF5;}
.cro-mini-stat{text-align:center;animation:croRise .5s ease-out both;}
.cro-mini-num{display:block;font:800 17px/1.1 'Inter',sans-serif;color:#111827;}
.cro-mini-label{display:block;margin-top:.3rem;font:700 12px/1.2 'Inter',monospace;color:#475569;text-transform:uppercase;letter-spacing:.03em;}

/* ---- A/B split test comparison ---- */
.cro-ab-intro{display:flex;align-items:center;gap:.6rem;padding:.75rem .9rem;border-radius:.85rem;background:#FAFBFF;border:1px solid #ECEFF6;margin-bottom:1rem;}
.cro-ab-intro-ic{flex-shrink:0;width:26px;height:26px;border-radius:.6rem;background:rgba(106,88,228,.1);color:#6A58E4;display:flex;align-items:center;justify-content:center;}
.cro-ab-intro span:last-child{font:600 12px/1.4 'Inter',sans-serif;color:#374151;}
.cro-ab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;}
.cro-ab-card{background:#FAFBFF;border:1px solid #ECEFF6;border-radius:1rem;padding:1rem;animation:croRise .5s ease-out both;}
.cro-ab-card.is-winner{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.25);}
.cro-ab-head{display:flex;align-items:center;gap:.4rem;font:800 12px/1 'Inter',sans-serif;color:#374151;margin-bottom:.7rem;}
.cro-ab-badge{padding:.2rem .5rem;border-radius:9999px;background:#10B981;color:#fff;font:800 10px/1 'Inter',monospace;text-transform:uppercase;letter-spacing:.03em;}
.cro-ab-bar-track{height:8px;border-radius:9999px;background:#EEF1F8;overflow:hidden;}
.cro-ab-bar-fill{height:100%;border-radius:9999px;background:linear-gradient(90deg,#6A58E4,#4A86F5);transform-origin:left;animation:croCountBar 1.2s cubic-bezier(.2,.8,.2,1) both;}
.cro-ab-val{margin-top:.6rem;font:800 18px/1 'Inter',sans-serif;color:#111827;}

/* ---- engagement heatmap ---- */
/* ---- engagement heatmap ---- */
.cro-heat-page{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;margin-bottom:.6rem;}
.cro-heat-page span{text-align:center;font:700 10px/1 'Inter',monospace;color:#8E97A8;text-transform:uppercase;letter-spacing:.03em;}
.cro-heatmap{display:flex;flex-direction:column;gap:.4rem;}
.cro-heat-row{display:flex;gap:.4rem;}
.cro-heat-cell{
  flex:1;height:clamp(28px,5vw,38px);border-radius:.5rem;
  background:rgba(239,68,68,var(--h,.3));
  background-image:linear-gradient(135deg, rgba(239,68,68,var(--h,.3)), rgba(245,158,11,calc(var(--h,.3) * .8)));
  animation:croHeat 2.4s ease-in-out infinite;
}
.cro-heat-legend{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.8rem;}
.cro-heat-legend span:not(.cro-heat-swatch){font:700 10px/1 'Inter',monospace;color:#475569;text-transform:uppercase;letter-spacing:.03em;}
.cro-heat-swatch{width:60px;height:8px;border-radius:9999px;background:linear-gradient(90deg, rgba(239,68,68,.15), rgba(239,68,68,.95));}

/* ---- journey / touchpoint map ---- */
.cro-journey{display:flex;flex-direction:column;gap:0;width:100%;max-width:420px;}
.cro-journey-node{
  display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid #E6ECF5;border-radius:1rem;
  padding:.9rem 1.1rem;box-shadow:0 10px 26px -14px rgba(17,24,39,.14);animation:croRise .5s ease-out both;
}
.cro-journey-node.is-final{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.28);}
.cro-journey-ic{flex-shrink:0;width:34px;height:34px;border-radius:.7rem;background:rgba(106,88,228,.1);color:#6A58E4;display:flex;align-items:center;justify-content:center;}
.cro-journey-node.is-final .cro-journey-ic{background:rgba(16,185,129,.14);color:#059669;}
.cro-journey-label{flex:1;font:700 12.5px/1.2 'Inter',sans-serif;color:#374151;}
.cro-journey-val{font:800 13px/1 'Inter',monospace;color:#6A58E4;flex-shrink:0;}
.cro-journey-node.is-final .cro-journey-val{color:#059669;}
.cro-journey-line{width:2px;height:16px;margin-left:2.3rem;background:linear-gradient(to bottom, rgba(106,88,228,.35), rgba(106,88,228,.05));}

/* ---- ROI performance chart (rich gradient-area linegraph) ---- */
.cro-linegraph{position:relative;flex:0 0 auto;width:100%;border-radius:1rem;padding:1rem 1.05rem .9rem;
  background:linear-gradient(180deg,rgba(106,88,228,.045),rgba(74,134,245,.02));border:1px solid #ECEFF6;overflow:hidden;}
.cro-linegraph-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;}
.cro-lg-label{display:inline-flex;align-items:center;gap:.4rem;font:700 11px/1 'Inter',sans-serif;color:#374151;}
.cro-lg-label .dot{width:7px;height:7px;border-radius:9999px;background:#6A58E4;flex-shrink:0;}
.cro-linegraph-peak{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .6rem;border-radius:9999px;
  background:rgba(106,88,228,.1);color:#6A58E4;font:800 10px/1 'Inter',monospace;white-space:nowrap;}
.cro-linegraph svg{display:block;width:100%;height:auto;overflow:visible;}
.cro-lg-grid line{stroke:#E6ECF5;stroke-width:1;stroke-dasharray:3 4;}
.cro-lg-area{opacity:0;animation:croPop .7s ease-out both .9s;}
.cro-lg-path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 6px rgba(106,88,228,.35));
  stroke-dasharray:400;stroke-dashoffset:400;animation:croDraw 1.7s cubic-bezier(.3,.7,.2,1) forwards .15s;}
.cro-lg-dot{opacity:0;animation:croPop .45s ease-out both;}
.cro-lg-dot-ring{animation:croDotPulse 1.8s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
.cro-lg-xlabels{display:flex;justify-content:space-between;margin-top:.5rem;}
.cro-lg-xlabels span{font:700 10px/1 'Inter',monospace;color:#8E97A8;text-transform:uppercase;letter-spacing:.03em;}

/* ---- checklist (turn visitors into loyal customers) ---- */
.cro-check-list{display:flex;flex-direction:column;gap:.9rem;list-style:none;margin:0;padding:0;}
.cro-check-list li{display:flex;align-items:flex-start;gap:.8rem;}
.cro-check-list li span:last-child{font:500 15px/1.55 'Inter',sans-serif;color:#5B6475;}
.cro-check-ic{flex-shrink:0;width:26px;height:26px;margin-top:.15rem;border-radius:.6rem;background:rgba(106,88,228,.1);color:#6A58E4;display:flex;align-items:center;justify-content:center;}

/* ---- timeline (maximize ROI ordered steps) ---- */
.cro-timeline-item:last-child .cro-timeline-line{display:none;}

/* ---- ring stat cluster (ROI section) ---- */
.cro-ring-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;}
.cro-ring-card{background:#FAFBFF;border:1px solid #ECEFF6;border-radius:.9rem;padding:.8rem .5rem;text-align:center;
  animation:croRise .55s ease-out both;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;}
.cro-ring-svg{transform:rotate(-90deg);width:clamp(40px,6vw,50px);height:clamp(40px,6vw,50px);flex-shrink:0;}
.cro-ring-card-num{font:800 16px/1 'Inter',sans-serif;color:#111827;}
.cro-ring-card-label{font:700 10px/1 'Inter',monospace;color:#475569;text-transform:uppercase;letter-spacing:.02em;}
.cro-ring-svg .track{fill:none;stroke:#EDEFF6;stroke-width:6;}
/* Ring fill: driven by JS (see page script) setting stroke-dashoffset directly,
   matching the site's proven hud-score-ring pattern. Transition is the fallback. */
.cro-ring-svg .fill{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;
  transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1);}

/* ---- shared visual outer wrapper: NO box, NO background -just a full-height flex container ---- */
.cro-visual{position:relative;width:100%;max-width:100%;height:100%;min-height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;}
.cro-glow{position:absolute;border-radius:9999px;filter:blur(60px);pointer-events:none;z-index:0;}

/* ---- responsive ---- */
@media (max-width:480px){
  .cro-visual{min-height:240px;padding:.85rem;}
  .cro-frame-body{padding:.9rem 1rem 1.1rem;}
  .cro-bar-label{width:84px;font-size:10px;}
}
@media (prefers-reduced-motion: reduce){
  .cro-visual *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
}

/* ---- overflow safety net ---- */
.grid > *{min-width:0;}
.cro-frame{min-width:0;box-sizing:border-box;}
.cro-frame *{box-sizing:border-box;}

/* ==========================================================
   Additions for the full-content rebuild
   ----------------------------------------------------------
   Everything below reuses the croRise/croPop keyframes and
   the existing color system above - no new engine, just the
   handful of rules the newly-added sections need.
   ========================================================== */

/* ---- stat callout ("Avg. Conversion Lift +35% in 45 days" from the source's .stat block) ---- */
.cro-stat-callout{display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;border-radius:1rem;
  background:linear-gradient(135deg,rgba(106,88,228,.08),rgba(74,134,245,.04));border:1px solid rgba(106,88,228,.16);
  animation:croPop .6s ease-out both;}
.cro-stat-ic{flex-shrink:0;width:34px;height:34px;border-radius:.8rem;background:linear-gradient(135deg,#6A58E4,#4A86F5);
  color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -8px rgba(106,88,228,.5);}
.cro-stat-body{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.cro-stat-label{font:700 10px/1 'Inter',monospace;color:#475569;text-transform:uppercase;letter-spacing:.04em;}
.cro-stat-value{font:800 18px/1.15 'Inter',sans-serif;color:#059669;}
.cro-stat-value em{font-style:normal;font:600 11px/1 'Inter',sans-serif;color:#5B6475;margin-left:.25rem;}

/* ---- equal-height split rows: make sure the visual side (no
   explicit height of its own) fills the row completely instead
   of collapsing to its content, matching every other rebuilt
   service page (off-page-seo.php, shopify-seo.php, etc.) ---- */
[data-rail="Turn Visitors Into Customers"] .split-row,
[data-rail="A/B Testing"] .zigzag-row,
[data-rail="Design Improvements"] .split-row,
[data-rail="Trusted CRO Experts"] .split-row,
[data-rail="CRO Solutions"] .zigzag-row,
[data-rail="Maximize ROI With CRO"] .split-row {
  align-items: center;
}
[data-rail="Turn Visitors Into Customers"] .cro-visual,
[data-rail="A/B Testing"] .cro-visual,
[data-rail="Design Improvements"] .cro-visual,
[data-rail="Trusted CRO Experts"] .cro-visual,
[data-rail="CRO Solutions"] .cro-visual,
[data-rail="Maximize ROI With CRO"] .cro-visual {
  height: 100%;
  min-height: 360px;
}

/* ---- keep the 4-card "Data Driven CRO" grid and 3-card "Why
   Choose CRO" grid visually anchored to the same baseline
   height inside their row ---- */
[data-rail="Data Driven CRO"] .cards-row > *,
[data-rail="Why Choose CRO"] .cards-row > * {
  display: flex;
}
[data-rail="Data Driven CRO"] .service-card,
[data-rail="Why Choose CRO"] .service-card {
  width: 100%;
}

/* ---- CTA band: keep the copy and form columns visually
   balanced at equal height ---- */
[data-rail="Get Started"] .cta-copy,
[data-rail="Get Started"] .cta-form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ==========================================================
   MOBILE 2-UP FIX -- fixed 3-item metric/stat strips show only
   2 tiles per row on small phones (3 tiles in a row was either
   cramped/clipped, or stacking all 3 full-width made the card
   too tall). The 3rd tile is hidden rather than wrapped to its
   own half-empty row, and the CTA nothing else references it.
   ========================================================== */
@media (max-width: 480px) {
  .cro-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
  .cro-mini-grid > *:nth-child(3) { display: none !important; }
  .cro-ring-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
  .cro-ring-grid > *:nth-child(3) { display: none !important; }
}