/* DS Compare 0.4.0-dev.3 — scoped component CSS, no JavaScript dependency.
   Elementor-generated selector rules can override each token without !important. */
.dsc-shell {
  min-width: 0;
  max-width: 100%;
  container: dsc-layout / inline-size;
}
.dsc {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(16px, 2.5vw, 42px);
  font-family: inherit;
  --dsc-panel-spacing: clamp(24px, 3vw, 42px);
  --dsc-header-spacing: 22px;
  --dsc-steps-spacing: 14px;
  --dsc-card-spacing: 18px;
  --dsc-list-spacing: 12px;
}
.dsc--density-compact {
  --dsc-panel-spacing: clamp(16px, 2vw, 27px);
  --dsc-header-spacing: 14px;
  --dsc-steps-spacing: 8px;
  --dsc-card-spacing: 12px;
  --dsc-list-spacing: 7px;
}
.dsc--density-spacious {
  --dsc-panel-spacing: clamp(30px, 4vw, 54px);
  --dsc-header-spacing: 30px;
  --dsc-steps-spacing: 22px;
  --dsc-card-spacing: 24px;
  --dsc-list-spacing: 16px;
}
.dsc *, .dsc *::before, .dsc *::after { box-sizing: border-box; }
.dsc--layout-split { grid-template-columns: var(--dsc-columns-ratio, minmax(0, 1fr) minmax(0, 1fr)); }
.dsc--layout-stack { grid-template-columns: minmax(0, 1fr); }
.dsc__panel {
  --dsc-accent: #ff5e73;
  --dsc-accent-soft: rgba(255, 94, 115, .14);
  --dsc-marker-size: 31px;
  --dsc-panel-bg: #111729;
  --dsc-card-bg: transparent;
  --dsc-border: rgba(255, 94, 115, .42);
  --dsc-copy: #ebf0fb;
  background: var(--dsc-panel-bg);
  color: var(--dsc-copy);
  border: 1px solid var(--dsc-border);
  border-radius: 30px;
  padding: var(--dsc-panel-spacing);
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
}
.dsc__panel--right {
  --dsc-accent: #19dab0;
  --dsc-accent-soft: rgba(25, 218, 176, .15);
  --dsc-border: #03d6a7;
  --dsc-panel-bg: #061822;
  --dsc-card-bg: #071021;
  --dsc-marker-size: 48px;
}
.dsc--light .dsc__panel {
  --dsc-panel-bg: #fff8f8;
  --dsc-card-bg: #fff;
  --dsc-border: #f6bcc1;
  --dsc-copy: #263247;
}
.dsc--light .dsc__panel--right {
  --dsc-panel-bg: #eefcf7;
  --dsc-card-bg: #fff;
  --dsc-border: #74dbc1;
}
.dsc--neutral .dsc__panel {
  --dsc-accent: #6b82a7;
  --dsc-accent-soft: rgba(107, 130, 167, .15);
  --dsc-panel-bg: #f5f7fa;
  --dsc-card-bg: #fff;
  --dsc-border: #bcc8d8;
  --dsc-copy: #1b2a40;
}
.dsc--neutral .dsc__panel--right {
  --dsc-accent: #2563eb;
  --dsc-accent-soft: rgba(37, 99, 235, .12);
  --dsc-border: #719ef0;
  --dsc-panel-bg: #eff5ff;
  --dsc-card-bg: #fff;
}
.dsc__header { margin: 0 0 var(--dsc-header-spacing); }
.dsc__badge {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(11px, .9vw, 14px);
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
  color: var(--dsc-accent);
  background: var(--dsc-accent-soft);
  background: color-mix(in srgb, var(--dsc-accent) 15%, transparent);
  border: 1px solid var(--dsc-border);
  border-radius: 100px;
  padding: 7px 16px;
}
.dsc__title {
  color: inherit;
  font-size: clamp(20px, 1.9vw, 29px);
  font-weight: 700;
  line-height: 1.25;
  margin: 18px 0 0;
  overflow-wrap: anywhere;
}
.dsc__subtitle { margin: 10px 0 0; font-size: 16px; line-height: 1.55; opacity: .86; overflow-wrap: anywhere; }
.dsc__steps { list-style: none; min-height: 0; margin: 0 0 28px; padding: 0; display: grid; align-content: start; gap: var(--dsc-steps-spacing); }
.dsc__step {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  min-width: 0;
  margin: 0;
  padding: var(--dsc-list-spacing) 0;
  color: inherit;
  background-color: var(--dsc-card-bg);
  overflow-wrap: anywhere;
}
/* Presentation styles are independent for each side (list or cards). */
.dsc__panel--cards .dsc__step {
  padding: var(--dsc-card-spacing);
  border: 1px solid var(--dsc-border);
  border-radius: 20px;
}
.dsc__panel--list .dsc__step {
  padding: var(--dsc-list-spacing) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.dsc__marker {
  display: inline-flex;
  flex: 0 0 var(--dsc-marker-size);
  align-items: center;
  justify-content: center;
  min-width: var(--dsc-marker-size);
  height: var(--dsc-marker-size);
  color: var(--dsc-accent);
  background: var(--dsc-accent-soft);
  background: color-mix(in srgb, var(--dsc-accent) 15%, transparent);
  font-size: 14px;
  font-weight: 750;
  border-radius: 50%;
}
.dsc__panel--right .dsc__marker { border-radius: 13px; font-size: 22px; }
.dsc__marker svg, .dsc__marker i { width: 1.15em; height: 1.15em; line-height: 1; }
.dsc__step-content { min-width: 0; flex: 1 1 auto; }
.dsc__step-title { color: inherit; margin: 0; font-size: clamp(16px, 1.25vw, 20px); font-weight: 650; line-height: 1.4; }
.dsc__step-description { margin: 5px 0 0; font-size: clamp(14px, 1vw, 16px); line-height: 1.55; opacity: .90; }
.dsc__footer {
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in srgb, var(--dsc-copy) 15%, transparent);
  padding-top: 20px;
  margin-top: auto;
}
.dsc__outcome { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; align-items: center; }
.dsc__result, .dsc__metric { color: var(--dsc-accent); font-size: 16px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.dsc__cta {
  align-self: flex-start;
  max-width: 100%;
  margin-top: 18px;
  padding: 11px 20px;
  border: 1px solid var(--dsc-accent);
  background-color: transparent;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dsc-accent);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.5;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dsc__cta:hover, .dsc__cta:focus-visible {
  color: var(--dsc-copy);
  background-color: var(--dsc-accent-soft);
  text-decoration: none;
}
.dsc__cta:focus-visible { outline: 3px solid var(--dsc-accent); outline-offset: 3px; }
/* Container-aware layout: respects narrow Elementor columns even on wide screens. */
@container dsc-layout (max-width: 720px) {
  .dsc--layout-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dsc__panel { border-radius: 22px; }
  .dsc--reverse-mobile .dsc__panel--right { order: -1; }
}
/* Viewport fallback for browsers without CSS container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 767px) {
    .dsc--layout-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .dsc--reverse-mobile .dsc__panel--right { order: -1; }
  }
}
@media (prefers-reduced-motion: reduce) { .dsc__cta { transition: none; } }