/* =========================================================
   B2B Commerce Platform Comparison — page 22550
   Extracted from velocity-content.medshift.com/b2b-commerce-platform-comparison
   on 2026-08-29.

   Loaded on page 22550 (Comparison Guide) via velocity_page_css()
   in functions.php. The markup and the vanilla-JS IIFE that builds
   the table live in the page's Elementor HTML widget; this file is
   the styling only.

   Scope: every selector here sits inside #vc-app. The source page's
   global reset (*, html, body, headings, form controls) and its
   unrelated sections (.site-header, .hero, .stats, .subscribe-form,
   .site-footer) are deliberately NOT included — the Sierra theme
   owns those, and importing them would restyle the whole page.

   Custom properties are scoped to #vc-app rather than :root so they
   cannot leak into the theme. The six bridged to --vel-* inherit
   from assets/velocity.css; the rest have no theme equivalent and
   stay literal.

   Standalone reference copy: comparison-guide.html at the project root.
   ========================================================= */

#vc-app {
  max-width: 1180px;
  margin: 0 auto;
}

#vc-app {
  /* --------------------------------------------------------
     Bridged to the Velocity theme (assets/velocity.css :root).
     Values match --vel-* exactly today; the fallback after the
     comma keeps this working standalone, where --vel-* is absent.
     -------------------------------------------------------- */
  --font: var(--vel-font, 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --navy: var(--vel-navy, #0E2037);
  --text: var(--vel-navy, #0E2037);
  --widget-text: var(--vel-navy, #0E2037);
  --commerce-orange: var(--vel-orange, #F8A581);
  --widget-host: var(--vel-orange, #F8A581);

  /* --------------------------------------------------------
     No theme equivalent — the status palette (built in /
     partial / not a focus) and the widget's own tints are
     specific to this table. Nearest --vel-* tokens were
     checked and are visibly different colours, so these stay
     literal rather than being forced onto the brand ramp.
     -------------------------------------------------------- */
  --page-max: 1180px;
  --text-muted: #5B6B80;
  --border: rgba(14, 32, 55, 0.11);
  --commerce-orange-dark: #E88B66;
  --yes: #15915E;
  --yes-bg: #E7F4EE;
  --part: #B67A12;
  --part-bg: #FBF2E1;
  --no: #93A0B0;
  --no-bg: #F1F3F7;
  --widget-host-dark: #D97854;
  --widget-host-tint: #FFF5F1;
  --widget-host-tint-soft: #FFFAF8;
  --widget-line: rgba(14, 32, 55, 0.10);
  --widget-muted: #5B6B80;
}

#vc-app {
      --widget-text: #0E2037;
      --widget-muted: #5B6B80;

      --widget-line: rgba(14, 32, 55, 0.10);

      --widget-surface: #FFFFFF;

      --widget-host: #F8A581;
      --widget-host-dark: #D97854;

      /* Very subtle Velocity Commerce highlight */
      --widget-host-tint: #FFF5F1;
      --widget-host-tint-soft: #FFFAF8;

      /* COOL gray, not tan */
      --widget-section: #F7F8FA;

      --yes: #15915E;
      --yes-bg: #E7F4EE;

      --part: #B67A12;
      --part-bg: #FBF2E1;

      --no: #93A0B0;
      --no-bg: #F1F3F7;

      width: 100%;

      padding: 26px;

      color: var(--widget-text);

      font-family: var(--font) !important;

      line-height: 1.4;

      border: 1px solid var(--widget-line);

      border-radius: 22px;

      background: #FFFFFF;

      box-shadow:
        0 20px 50px
        rgba(14, 32, 55, 0.045);
    }

#vc-app * {
      box-sizing: border-box;

      font-family: var(--font) !important;
    }

#vc-app .panel {
      margin-bottom: 14px;

      padding: 17px 18px;

      border: 1px solid var(--widget-line);

      border-radius: 14px;

      background: #FFFFFF;
    }

#vc-app .panel h4 {
      margin: 0 0 11px;

      color: var(--widget-muted);

      font-size: 11px;
      font-weight: 700;

      letter-spacing: .09em;

      text-transform: uppercase;
    }

#vc-app .chips {
      display: flex;
      flex-wrap: wrap;

      gap: 8px;
    }

#vc-app .chip {
      display: inline-flex;
      align-items: center;

      gap: 7px;

      padding: 8px 13px;

      border: 1px solid rgba(14, 32, 55, 0.13);

      border-radius: 999px;

      background: #FFFFFF;

      color: var(--navy);

      font-family: var(--font) !important;

      font-size: 12.5px;
      font-weight: 600;

      line-height: 1.25;

      cursor: pointer;

      transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
    }

#vc-app .chip:hover {
      border-color: var(--widget-host);

      background: var(--widget-host-tint-soft);
    }

#vc-app .chip[aria-pressed="true"] {
      border-color: var(--widget-host);

      background: var(--widget-host-tint);

      color: var(--navy);
    }

#vc-app .chip .dotk {
      flex: 0 0 8px;

      width: 8px;
      height: 8px;

      border-radius: 50%;

      background: #CAD2DC;
    }

#vc-app .chip[aria-pressed="true"] .dotk {
      background: var(--widget-host);
    }

#vc-app .toggle[aria-pressed="false"] {
      opacity: .48;

      text-decoration: line-through;
    }

#vc-app .reset {
      margin: 5px 0 0;

      padding: 7px 3px 0;

      border: 0;

      background: transparent;

      color: var(--widget-muted);

      font-family: var(--font) !important;

      font-size: 12px;
      font-weight: 600;

      text-decoration: underline;

      cursor: pointer;
    }

#vc-app .reset:hover {
      color: var(--navy);
    }

#vc-app .legend {
      display: flex;
      flex-wrap: wrap;

      gap: 16px;

      color: var(--widget-muted);

      font-size: 12px;
    }

#vc-app .legend span {
      display: inline-flex;
      align-items: center;

      gap: 6px;
    }

#vc-app .mk {
      flex: 0 0 17px;

      width: 17px;
      height: 17px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      border-radius: 5px;

      font-size: 11px;
      font-weight: 800;
    }

#vc-app .mk.y {
      background: var(--yes-bg);
      color: var(--yes);
    }

#vc-app .mk.p {
      background: var(--part-bg);
      color: var(--part);
    }

#vc-app .mk.n {
      background: var(--no-bg);
      color: var(--no);
    }

#vc-app .tablewrap {
      width: 100%;

      overflow-x: auto;

      -webkit-overflow-scrolling: touch;

      border: 1px solid var(--widget-line);

      border-radius: 14px;

      background: #FFFFFF;
    }

#vc-app table {
      width: 100%;

      min-width: 820px;

      border-collapse: collapse;
    }

#vc-app th,
    #vc-app td {
      padding: 13px 14px;

      vertical-align: top;

      border-bottom: 1px solid var(--widget-line);

      text-align: left;
    }

#vc-app thead th {
      position: sticky;

      top: 0;

      z-index: 3;

      background: #FFFFFF;
    }

#vc-app .cap-col {
      position: sticky;

      left: 0;

      z-index: 2;

      min-width: 230px;

      background: #FFFFFF;
    }

#vc-app thead .cap-col {
      z-index: 4;
    }

#vc-app th.plat {
      min-width: 160px;
    }

#vc-app .platname {
      color: var(--navy);

      font-size: 13.5px;
      font-weight: 700;

      line-height: 1.3;

      letter-spacing: -0.01em;
    }

#vc-app th.host {
      background: var(--widget-host-tint);
    }

#vc-app th.host .platname {
      color: var(--navy);
    }

#vc-app .hosttag {
      display: inline-block;

      margin-top: 6px;

      padding: 2px 7px;

      border: 1px solid var(--widget-host);

      border-radius: 999px;

      background: #FFFFFF;

      color: var(--navy);

      font-size: 9px;
      font-weight: 700;

      line-height: 1.35;

      letter-spacing: .06em;

      text-transform: uppercase;
    }

#vc-app .matchpill {
      display: none;

      margin-top: 7px;

      color: var(--widget-muted);

      font-size: 11px;
      font-weight: 700;
    }

#vc-app .matchpill.on {
      display: block;
    }

#vc-app th.leader .matchpill {
      color: var(--widget-host-dark);
    }

#vc-app .leadribbon {
      display: none;

      margin-top: 5px;

      color: var(--widget-host-dark);

      font-size: 9px;
      font-weight: 800;

      letter-spacing: .05em;

      text-transform: uppercase;
    }

#vc-app th.leader .leadribbon {
      display: block;
    }

#vc-app .grouprow td {
      padding: 9px 14px;

      background: #F7F8FA;

      color: var(--widget-muted);

      font-size: 10px;
      font-weight: 700;

      letter-spacing: .09em;

      text-transform: uppercase;
    }

#vc-app .grouprow .cap-col {
      background: #F7F8FA;
    }

#vc-app tbody tr.caprow {
      transition: opacity .15s ease;
    }

#vc-app tbody tr.caprow.dim {
      opacity: .30;
    }

#vc-app tbody tr.caprow.hl .cap-col {
      box-shadow:
        inset 3px 0 0
        var(--widget-host);
    }

#vc-app .capname {
      color: var(--navy);

      font-size: 12.5px;
      font-weight: 600;

      line-height: 1.45;
    }

#vc-app .cell {
      display: flex;
      align-items: flex-start;

      gap: 9px;
    }

#vc-app .cell .note {
      color: var(--widget-muted);

      font-size: 11.5px;
      font-weight: 400;

      line-height: 1.45;
    }

#vc-app td.host {
      background: #FFFAF8;
    }

#vc-app .bestforrow td {
      border-top: 2px solid var(--widget-line);

      background: #FAFBFC;
    }

#vc-app .bestforrow .cap-col {
      background: #FAFBFC;
    }

#vc-app .bestforrow td.host {
      background: #FFF5F1;
    }

#vc-app .bestforrow .bf {
      color: var(--navy);

      font-size: 12px;
      font-weight: 600;

      line-height: 1.45;
    }

#vc-app .foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      gap: 18px;

      margin-top: 18px;
    }

#vc-app .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      padding: 13px 20px;

      border: 0;

      border-radius: 9px;

      background: var(--commerce-orange);

      color: var(--navy);

      font-size: 13px;
      font-weight: 700;

      line-height: 1.2;

      cursor: pointer;

      transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
    }

#vc-app .cta:hover {
      transform: translateY(-1px);

      background: var(--commerce-orange-dark);

      box-shadow:
        0 9px 22px
        rgba(248, 165, 129, .30);
    }

#vc-app .fineprint {
      max-width: 53ch;

      margin: 0;

      color: var(--widget-muted);

      font-size: 10.5px;

      line-height: 1.55;
    }

#vc-app .hidden {
      display: none !important;
    }

@media (max-width: 760px) {
  #vc-app {
        padding: 18px;
        border-radius: 18px;
  }
  #vc-app .panel {
        padding: 15px;
  }
  #vc-app .foot {
        align-items: flex-start;
  }
  #vc-app .cta {
        width: 100%;
  }
  #vc-app .fineprint {
        max-width: none;
  }
}

@media (max-width: 480px) {
  #vc-app {
        padding: 14px;
  }
  #vc-app .chip {
        padding: 7px 10px;
        font-size: 11.5px;
  }
}

.velp-ca .vel-stats + .vel-cta {
    padding-top: clamp(64px, 6vw, 80px);
}

.vel-cta {
    padding: 64px 0 64px;
}