/* Extracted internal CSS from ecommerce-seo.php */
    /* ============================================================
       ECOMMERCE SEO -Creative Visual Animation System (ecm- prefix)
       Visual height = content height via items-stretch grid.
    ============================================================ */
    @keyframes ecmFloatA   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-10px)} }
    @keyframes ecmFloatB   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-14px)} }
    @keyframes ecmCountBar { from{transform:scaleX(0)} to{transform:scaleX(1)} }
    @keyframes ecmBlink    { 0%,100%{opacity:1} 50%{opacity:.3} }
    @keyframes ecmRise     { 0%{transform:translateY(16px);opacity:0} 100%{transform:translateY(0);opacity:1} }
    @keyframes ecmRingSweep{ from{stroke-dashoffset:283} to{stroke-dashoffset:var(--ecm-off,60)} }
    @keyframes ecmRingPulse{ 0%,100%{stroke-dashoffset:var(--ecm-off,60)} 50%{stroke-dashoffset:calc(var(--ecm-off,60) - 6)} }
    @keyframes ecmGlow     { 0%{background-position:-150% 0} 100%{background-position:250% 0} }
    @keyframes ecmSlideIn  { 0%{opacity:0;transform:translateX(14px)} 100%{opacity:1;transform:translateX(0)} }
    @keyframes ecmCartPop   { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }
    @keyframes ecmTypeCursor{ 0%,100%{opacity:1} 50%{opacity:0} }
    @keyframes ecmPhoneScan { 0%{top:8%} 100%{top:88%} }

    /* ---- shells ---- */
    .ecm-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:ecmFloatA 6s ease-in-out infinite;
      min-width:0; box-sizing:border-box;
    }
    .ecm-frame * { box-sizing:border-box; }
    .ecm-frame-bar {
      display:flex; align-items:center; gap:.5rem;
      padding:.85rem 1.1rem; background:#F7F8FC;
      border-bottom:1px solid #ECEFF6; min-width:0;
    }
    .ecm-dot { width:10px; height:10px; border-radius:9999px; flex-shrink:0; }
    .ecm-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;
    }
    .ecm-frame-tag {
      margin-left:auto; display:flex; align-items:center; gap:.35rem;
      font:800 10px/1 'Inter',monospace; color:#6A58E4; letter-spacing:.05em;
    }
    .ecm-live-dot { width:7px; height:7px; border-radius:9999px; background:#6A58E4; animation:ecmBlink 1.4s ease-in-out infinite; }
    .ecm-frame-body { padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3vw,1.9rem) clamp(1.5rem,3.5vw,2.1rem); }

    .ecm-terminal {
      width:100%; max-width:560px; max-height:100%; border-radius:1.1rem;
      background:#0A0E17; border:1px solid rgba(255,255,255,.08);
      box-shadow:0 12px 30px -14px rgba(0,0,0,.35);
      overflow:hidden; animation:ecmFloatB 7s ease-in-out infinite;
      min-width:0; box-sizing:border-box;
    }
    .ecm-terminal * { box-sizing:border-box; }
    .ecm-terminal-bar { display:flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.07); }
    .ecm-terminal-title { font:600 12px/1 'Inter',monospace; color:#94A3B8; margin-left:.35rem; }
    .ecm-terminal-live {
      margin-left:auto; display:inline-flex; align-items:center; gap:.35rem;
      padding:.25rem .6rem; border-radius:9999px;
      border:1px solid rgba(52,211,153,.35); background:rgba(52,211,153,.08);
      font:800 10px/1 'Inter',monospace; color:#6A58E4; letter-spacing:.05em;
    }
    .ecm-terminal-body { padding:1.1rem 1.2rem 1.3rem; }

    /* ---- bars ---- */
    .ecm-bar-row  { display:flex; align-items:center; gap:.7rem; padding:.5rem 0; min-width:0; }
    .ecm-bar-label{ flex-shrink:0; width:120px; font:700 11px/1.25 'Inter',monospace; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ecm-bar-track{ flex:1; min-width:0; height:6px; border-radius:9999px; background:#EEF1F8; overflow:hidden; position:relative; }
    .ecm-bar-fill {
      position:absolute; inset:0; border-radius:9999px;
      background:linear-gradient(90deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4);
      background-size:250% 100%; transform-origin:left;
      animation:ecmCountBar 1.1s cubic-bezier(.2,.8,.2,1) both, ecmGlow 3.2s linear infinite 1.1s;
    }
    .ecm-bar-val { flex-shrink:0; width:40px; text-align:right; font:800 13px/1 'Inter',monospace; color:#6A58E4; }

    .ecm-t-bar-row   { display:flex; align-items:center; gap:.7rem; padding:.5rem 0; min-width:0; }
    .ecm-t-bar-label { flex-shrink:0; width:130px; font:700 12px/1.2 'Inter',monospace; color:#94A3B8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ecm-t-bar-track { flex:1; min-width:0; height:6px; border-radius:9999px; background:rgba(255,255,255,.08); overflow:hidden; position:relative; }
    .ecm-t-bar-fill  {
      position:absolute; inset:0; border-radius:9999px;
      background:linear-gradient(135deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4);
      background-size:250% 100%; transform-origin:left;
      animation:ecmCountBar 1.1s cubic-bezier(.2,.8,.2,1) both, ecmGlow 3.2s linear infinite 1.1s;
    }
    .ecm-t-bar-val { flex-shrink:0; width:38px; text-align:right; font:800 12px/1 'Inter',monospace; color:#6A58E4; }

    /* ---- footers ---- */
    .ecm-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);
    }
    .ecm-frame-footer b { font:700 13px/1 'Inter',sans-serif; color:#111827; }
    .ecm-t-footer {
      margin-top:1.1rem; display:flex; align-items:center; justify-content:space-between;
      padding:.9rem 1rem; border-radius:.9rem;
      background:rgba(52,211,153,.07); border:1px solid rgba(52,211,153,.22);
    }
    .ecm-t-footer b { font:700 12px/1 'Inter',sans-serif; color:#fff; }
    .ecm-pill-violet {
      padding:.4rem .85rem; border-radius:9999px;
      background:linear-gradient(135deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4);
      background-size:250% 100%; color:#fff; font:800 11px/1 'Inter',monospace;
      animation:ecmGlow 3.6s linear infinite;
    }
    .ecm-pill-green {
      padding:.35rem .8rem; border-radius:9999px;
      background:linear-gradient(135deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4);
      background-size:250% 100%; animation:ecmGlow 3.6s linear infinite;
      color:#04140D; font:800 10px/1 'Inter',monospace;
    }

    /* ---- stat tiles ---- */
    .ecm-stat-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
    .ecm-stat-tile  { text-align:center; padding:.85rem .5rem; border-radius:.85rem; background:#FAFBFF; border:1px solid #ECEFF6; }
    .ecm-stat-tile b{ display:block; font:800 17px/1.1 'Inter',sans-serif; color:#111827; }
    .ecm-stat-tile span{ display:block; margin-top:.35rem; font:700 12px/1.2 'Inter',monospace; color:#475569; letter-spacing:.04em; text-transform:uppercase; }

    /* ---- product card (ecommerce listing) ---- */
    .ecm-product-card { display:flex; gap:.9rem; padding:.9rem; border-radius:1rem; background:#FAFBFF; border:1px solid #ECEFF6; align-items:center; animation:ecmRise .5s ease-out both; }
    .ecm-product-thumb { flex-shrink:0; width:52px; height:52px; border-radius:.75rem; background:linear-gradient(135deg,#EDEBFF,#DDE7FF); display:flex; align-items:center; justify-content:center; color:#6A58E4; animation:ecmCartPop .5s ease-out both; }
    .ecm-product-name { font:700 13px/1.3 'Inter',sans-serif; color:#111827; }
    .ecm-product-meta { font:600 11px/1.3 'Inter',sans-serif; color:#475569; margin-top:.2rem; }
    .ecm-stars { color:#F59E0B; font-size:11px; letter-spacing:1px; }

    /* ---- ring cards ---- */
    .ecm-ring-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; width:100%; }
    .ecm-ring-card {
      background:#FAFBFF; border:1px solid #ECEFF6; border-radius:1rem;
      padding:1rem .8rem; text-align:center; display:flex;
      flex-direction:column; align-items:center; justify-content:center;
      gap:.5rem; animation:ecmRise .55s ease-out both;
    }
    .ecm-ring-svg  { transform:rotate(-90deg); width:clamp(48px,7vw,60px); height:clamp(48px,7vw,60px); flex-shrink:0; }
    .ecm-ring-svg .track { fill:none; stroke:#EDEFF6; stroke-width:6; }
    .ecm-ring-svg .fill  { fill:none; stroke-width:6; stroke-linecap:round; stroke-dasharray:283; animation:ecmRingSweep 1.3s cubic-bezier(.2,.8,.2,1) both, ecmRingPulse 2.6s ease-in-out infinite 1.3s; }
    .ecm-ring-card-num   { font:800 20px/1 'Inter',sans-serif; color:#111827; }
    .ecm-ring-card-label { font:700 11px/1 'Inter',monospace; color:#475569; text-transform:uppercase; letter-spacing:.03em; }

    /* ---- checklist rows ---- */
    .ecm-check-row  { display:flex; align-items:center; gap:.7rem; animation:ecmRise .5s ease-out both; }
    .ecm-check-icon { flex-shrink:0; width:24px; height:24px; border-radius:.55rem; background:rgba(16,185,129,.12); color:#059669; display:flex; align-items:center; justify-content:center; }
    .ecm-check-text { font:600 13px/1.3 'Inter',sans-serif; color:#1E293B; }

    /* ---- funnel steps ---- */
    .ecm-funnel { display:flex; flex-direction:column; gap:.5rem; width:100%; }
    .ecm-funnel-step { display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; border-radius:.9rem; background:#FAFBFF; border:1px solid #ECEFF6; animation:ecmRise .5s ease-out both; }
    .ecm-funnel-num { flex-shrink:0; width:30px; height:30px; border-radius:.65rem; display:flex; align-items:center; justify-content:center; font:800 13px/1 'Inter',monospace; color:#fff; background:linear-gradient(135deg,#6A58E4,#4A86F5); }
    .ecm-funnel-title { font:700 13px/1.2 'Inter',sans-serif; color:#1E293B; }
    .ecm-funnel-sub   { font:600 11px/1.3 'Inter',sans-serif; color:#475569; margin-top:.15rem; }

    /* ---- phone mockup (mobile optimization) ---- */
    .ecm-phone {
      position:relative; width:132px; height:230px; border-radius:1.4rem;
      background:#0A0E17; border:5px solid #1E293B; box-shadow:0 14px 34px -14px rgba(0,0,0,.4);
      overflow:hidden; flex-shrink:0; animation:ecmFloatA 5s ease-in-out infinite;
    }
    .ecm-phone-screen { position:absolute; inset:0; background:linear-gradient(160deg,#111827,#0A0E17); padding:.6rem; }
    .ecm-phone-scan { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,#6A58E4,transparent); animation:ecmPhoneScan 2.6s linear infinite; }

    /* ---- outer visual wrapper ---- */
    .ecm-visual { position:relative; width:100%; height:100%; min-height:280px; display:flex; align-items:center; justify-content:center; overflow:hidden; box-sizing:border-box; }

    .grid > * { min-width:0; }
    .ecm-frame, .ecm-terminal { min-width:0; box-sizing:border-box; }

    @media (max-width:640px) {
      .ecm-visual { min-height:240px; padding:.75rem; }
      .ecm-frame-body, .ecm-terminal-body { padding:.9rem 1rem 1.1rem; }
      .ecm-bar-label, .ecm-t-bar-label { width:82px; font-size:10px; }
      .ecm-stat-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }
      .ecm-ring-grid  { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    @media (max-width:400px) {
      .ecm-bar-label, .ecm-t-bar-label { width:76px; font-size:10px; }
    }
    @media (prefers-reduced-motion:reduce) {
      .ecm-visual * { animation-duration:.001ms !important; animation-iteration-count:1 !important; }
    }
  


/* ==========================================================
   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) {
  .ecm-stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
  .ecm-stat-tiles > *:nth-child(3) { display: none !important; }
}