.why-ecomas {
    --why-ink: #10152f;
    --why-muted: #555b75;
    --why-line: rgba(30, 35, 78, .13);
    position: relative;
    overflow: hidden;
    background: #fafbfc;
}
.why-ecomas::before, .why-ecomas::after,
.why-ecomas > .container::before { content: none; }
.why-ecomas__eyebrow { position: relative; border-radius: 6px 20px 6px 20px; padding: 10px 18px 10px 29px; background: #10152f; border: 0; color: #fff; letter-spacing: .1em; box-shadow: 7px 7px 0 rgba(83,58,253,.16); }
.why-ecomas__eyebrow::before { content: ''; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; border: 2px solid #a99cff; border-radius: 50%; transform: translateY(-50%); }
.why-ecomas__eyebrow::after { content: ''; position: absolute; right: -19px; top: 50%; width: 18px; border-top: 1px solid rgba(83,58,253,.55); }
.why-ecomas__eyebrow i { display: none; }
.why-ecomas__intro, .why-ecomas__comparison, .why-ecomas__proof { position: relative; z-index: 1; }
.why-ecomas__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.why-ecomas__title { max-width: 720px; margin: 20px auto 0; color: var(--why-ink); font-size: clamp(36px, 4.3vw, 62px); font-weight: 850; line-height: 1.02; letter-spacing: -.055em; }
.why-ecomas__title span { color: var(--color-primary); }
.why-ecomas__lead { max-width: 570px; margin: 20px auto 0; color: var(--why-muted); font-size: 17px; line-height: 1.65; }
.why-ecomas__comparison { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: stretch; max-width: 1080px; margin: 68px auto 0; }
.why-ecomas__panel { position: relative; padding: 34px; border: 1px solid #e4e7ee; background: #fff; box-shadow: 0 16px 40px rgba(16,21,47,.055); }
.why-ecomas__panel--old { border-radius: 26px 8px 8px 26px; }
.why-ecomas__panel--new { border: 2px solid var(--color-primary); border-radius: 8px 26px 26px 8px; background: #fff; box-shadow: 0 20px 48px rgba(83,58,253,.12); }
.why-ecomas__panel--new::before { content: 'Recommended'; position: absolute; top: -14px; right: 28px; padding: 7px 14px; border-radius: 99px; color: white; background: var(--color-primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(83,58,253,.25); }
.why-ecomas__panel-label { margin: 0 0 9px; color: var(--color-primary); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.why-ecomas__panel--old .why-ecomas__panel-label { color: #5e657c; }
.why-ecomas__panel h3 { margin: 0; color: var(--why-ink); font-size: 28px; font-weight: 850; letter-spacing: -.04em; }
.why-ecomas__panel--old h3 { color: #555b75; }
.why-ecomas__panel-intro { min-height: 76px; margin: 10px 0 25px; color: var(--why-muted); font-size: 14px; line-height: 1.55; }
.why-ecomas__metric { display: flex; align-items: end; gap: 12px; padding: 17px 0 21px; border-top: 1px dashed var(--why-line); border-bottom: 1px dashed var(--why-line); }
.why-ecomas__metric strong { color: var(--why-ink); font-size: 52px; line-height: .9; letter-spacing: -.06em; }
.why-ecomas__panel--old .why-ecomas__metric strong { color: #555b75; }
.why-ecomas__metric span { padding-bottom: 3px; color: var(--why-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.why-ecomas__features { display: grid; gap: 12px; margin-top: 25px; }
.why-ecomas__feature { display: flex; align-items: center; gap: 12px; min-height: 45px; padding: 10px 13px; border: 1px solid var(--why-line); border-radius: 13px; color: var(--why-muted); background: rgba(255,255,255,.68); font-size: 13px; font-weight: 700; }
.why-ecomas__feature i { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; font-size: 10px; }
.why-ecomas__feature--no i { color: #b1b4c1; background: #eceef4; }
.why-ecomas__feature--yes { color: var(--why-ink); border-color: rgba(83,58,253,.13); background: rgba(255,255,255,.85); }
.why-ecomas__feature--yes i { color: white; background: #16b981; }
.why-ecomas__versus { position: relative; display: flex; align-items: center; justify-content: center; }
.why-ecomas__versus::before { content: ''; position: absolute; top: 8%; bottom: 8%; left: 50%; border-left: 1px dashed rgba(83,58,253,.35); }
.why-ecomas__versus span { position: relative; display: grid; width: 58px; height: 58px; place-items: center; border: 7px solid #fafbfc; border-radius: 50%; color: white; background: var(--why-ink); font-size: 13px; font-weight: 900; box-shadow: 0 10px 25px rgba(16,21,47,.2); }
.why-ecomas__proof { display: flex; justify-content: center; gap: 42px; max-width: 820px; margin: 55px auto 0; padding-top: 25px; border-top: 1px solid var(--why-line); }
.why-ecomas__proof strong { display: block; color: var(--why-ink); font-size: 24px; letter-spacing: -.04em; }
.why-ecomas__proof span { color: var(--why-muted); font-size: 12px; }
@media (max-width: 767px) {
    .why-ecomas { padding-top: 80px !important; padding-bottom: 80px !important; }
    .why-ecomas__comparison { grid-template-columns: 1fr; gap: 20px; margin-top: 50px; }
    .why-ecomas__panel--old, .why-ecomas__panel--new { border-radius: 22px; }
    .why-ecomas__versus { height: 38px; }
    .why-ecomas__versus::before { top: 50%; right: 10%; bottom: auto; left: 10%; border-top: 1px dashed rgba(83,58,253,.35); border-left: 0; }
    .why-ecomas__versus span { width: 48px; height: 48px; border-width: 5px; }
    .why-ecomas__panel { padding: 25px; }
    .why-ecomas__proof { gap: 18px; flex-wrap: wrap; }
}