.elementor-192 .elementor-element.elementor-element-d1e270c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-2786cee *//* ═══════ PAGE: USE CASE E-COMMERCE ═══════ */
.ec-hero{padding:5rem 0 3rem}
.ec-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.ec-hero h1{font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);font-weight:400;color:var(--ink);letter-spacing:-0.03em;line-height:1.08;margin-bottom:1rem}
.ec-hero h1 em{font-style:italic;color:var(--electric)}
.ec-hero-p{font-size:1rem;color:var(--t500);line-height:1.65;max-width:500px;margin-bottom:1.5rem}
.ec-hero-stats{display:flex;gap:1.5rem;margin-bottom:2rem}
.ec-hero-stat{text-align:center}
.ec-hero-stat-val{font-family:var(--serif);font-size:2rem;color:var(--ink);line-height:1}
.ec-hero-stat-label{font-size:0.68rem;color:var(--t400);margin-top:0.15rem}
.ec-hero-mock{background:var(--warm);border:1px solid var(--sand);border-radius:16px;padding:1.5rem;min-height:340px}
.ec-hero-mock-topbar{display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:1px solid var(--sand)}
.ec-hero-mock-dot{width:8px;height:8px;border-radius:50%;background:var(--sand)}
.ec-hero-mock-url{font-family:var(--mono);font-size:0.6rem;color:var(--t400);margin-left:0.5rem}
.ec-mock-row{display:flex;align-items:center;gap:0.5rem;padding:0.55rem 0.75rem;border-radius:6px;font-size:0.7rem;font-family:var(--sans);margin-bottom:0.35rem}
.ec-mock-row.crit{background:rgba(255,92,92,0.06);color:var(--coral,#FF5C5C)}
.ec-mock-row.warn{background:rgba(255,180,0,0.06);color:#B8860B}
.ec-mock-row.pass{background:rgba(0,212,170,0.06);color:var(--mint,#00D4AA)}
.ec-mock-sev{font-weight:700;text-transform:uppercase;font-size:0.58rem;width:55px;flex-shrink:0}
.ec-mock-rule{flex:1;color:var(--t500)}
.ec-mock-page{font-family:var(--mono);font-size:0.58rem;color:var(--t300)}

/* Problems by page type */
.ec-problems{padding:5rem 0;background:var(--warm)}
.ec-prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
.ec-prob{padding:2rem;background:#fff;border:1px solid var(--sand);border-radius:14px;transition:0.3s}
.ec-prob:hover{border-color:var(--electric);box-shadow:0 4px 16px var(--elec-glow)}
.ec-prob-tag{font-family:var(--mono);font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--electric);margin-bottom:0.5rem}
.ec-prob h3{font-size:0.95rem;font-weight:700;color:var(--t900);margin-bottom:0.5rem}
.ec-prob-list{display:flex;flex-direction:column;gap:0.35rem}
.ec-prob-item{display:flex;gap:0.4rem;font-size:0.78rem;color:var(--t500);line-height:1.4}
.ec-prob-item svg{width:12px;height:12px;stroke:var(--coral,#FF5C5C);fill:none;stroke-width:2.5;flex-shrink:0;margin-top:2px}

/* What WCAG Guard scans */
.ec-scans{padding:5rem 0}
.ec-scan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:2.5rem}
.ec-scan{padding:2rem;border:1px solid var(--sand);border-radius:14px;background:#fff;display:flex;gap:1rem;align-items:flex-start;transition:0.3s}
.ec-scan:hover{border-color:var(--electric);box-shadow:0 4px 16px var(--elec-glow)}
.ec-scan-ico{width:40px;height:40px;border-radius:10px;background:var(--elec-glow);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ec-scan-ico svg{width:20px;height:20px;stroke:var(--electric);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ec-scan h3{font-size:0.92rem;font-weight:700;color:var(--t900);margin-bottom:0.25rem}
.ec-scan p{font-size:0.82rem;color:var(--t500);line-height:1.6}

/* Platform comparison */
.ec-platforms{padding:4rem 0;background:var(--ink)}
.ec-plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:860px;margin:2rem auto 0}
.ec-plat{padding:2rem;background:var(--ink2);border:1px solid rgba(255,255,255,0.06);border-radius:14px;text-align:center;transition:0.3s}
.ec-plat:hover{border-color:rgba(255,255,255,0.12)}
.ec-plat strong{display:block;font-size:1rem;color:#fff;margin-bottom:0.2rem}
.ec-plat-price{font-family:var(--serif);font-size:1.6rem;color:#fff;margin-bottom:0.2rem}
.ec-plat span{font-size:0.75rem;color:var(--t400);line-height:1.5}

/* Cost of not complying */
.ec-cost{padding:5rem 0;background:var(--warm)}
.ec-cost-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem}
.ec-cost-card{padding:1.5rem;background:#fff;border:1px solid var(--sand);border-radius:14px;text-align:center}
.ec-cost-val{font-family:var(--serif);font-size:2rem;color:var(--coral,#FF5C5C);line-height:1;margin-bottom:0.3rem}
.ec-cost-card p{font-size:0.78rem;color:var(--t500);line-height:1.4}

/* SEO */
.ec-seo{padding:5rem 0}
.ec-seo-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:3rem}
.ec-seo-block{padding:2rem;background:var(--warm);border-radius:14px;border:1px solid var(--sand)}
.ec-seo-block .mono-label{font-family:var(--mono);font-size:0.62rem;font-weight:500;color:var(--electric);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.6rem}
.ec-seo-block h3{font-family:var(--serif);font-size:1.3rem;color:var(--ink);margin-bottom:0.75rem;line-height:1.25}
.ec-seo-block p{font-size:0.86rem;color:var(--t500);line-height:1.75}
.ec-seo-block p strong{color:var(--t700)}

.ec-final{padding:4rem 0 5rem;text-align:center}
.ec-final h2{font-family:var(--serif);font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:400;color:var(--ink);letter-spacing:-0.02em;margin-bottom:0.6rem}
.ec-final p{font-size:0.92rem;color:var(--t500);max-width:460px;margin:0 auto 1.5rem;line-height:1.6}

@media(max-width:900px){
  .ec-hero-grid{grid-template-columns:1fr}
  .ec-hero-mock{display:none}
  .ec-prob-grid,.ec-scan-grid{grid-template-columns:1fr}
  .ec-plat-grid{grid-template-columns:1fr;max-width:320px}
  .ec-cost-grid{grid-template-columns:1fr 1fr}
  .ec-seo-grid{grid-template-columns:1fr}
}
@media(max-width:600px){.ec-cost-grid{grid-template-columns:1fr}}/* End custom CSS */