/* ============================================================
   OROCUBE POS Compare — v2.0.0 — Sleek Professional Design
   ============================================================ */

/* ── TOKENS — aligned to oropos theme design system ─────── */
:root {
  /* Brand colours — exact match to oropos theme bundle.css */
  --oc-blue:        #4c88da;
  --oc-blue-lt:     #6ba3e8;
  --oc-blue-dk:     #2b72d2;
  --oc-gold:        #f4bb40;
  --oc-dark:        #1f2937;   /* theme hero/dark bg */
  --oc-navy:        #0d1b2e;   /* deepest navy for table headers */
  --oc-text:        #1f2937;   /* theme body text */
  --oc-muted:       #6b7280;   /* theme muted text */
  --oc-subtle:      #9f9f9f;   /* theme subtitle colour */
  --oc-border:      rgba(0,0,0,0.08);       /* theme card border */
  --oc-border-blue: rgba(76,136,218,0.15);
  --oc-bg:          #f8fafd;
  --oc-bg-blue:     #eef4fc;   /* theme light-blue section bg */
  --oc-surface:     #ffffff;
  --oc-win:         #f4bb40;   /* gold = ORO wins — the only positive accent */
  --oc-neutral-pos: #9ca3af;  /* competitor ✓ — acknowledged, not celebrated */
  --oc-green:       #10b981;  /* DEPRECATED — use --oc-win or --oc-neutral-pos */
  --oc-red:         #ef4444;

  /* Shadows — match theme's rgba(0,0,0) + rgba(blue) style */
  --oc-shadow-xs:   0 2px 8px rgba(0,0,0,0.05);
  --oc-shadow-sm:   0 2px 12px rgba(0,0,0,0.05);
  --oc-shadow-md:   0 4px 20px rgba(0,0,0,0.07);
  --oc-shadow-blue: 0 8px 32px rgba(76,136,218,0.10);
  --oc-glow-focus:  0 0 0 3px rgba(76,136,218,0.22);

  /* Radii — theme cards use 16px, buttons 6px, icons 9px */
  --oc-r:     16px;
  --oc-r-sm:  10px;
  --oc-r-xs:  6px;
  --oc-r-pill:50px;

  /* Easing — theme uses Material cubic-bezier(.4,0,.2,1) */
  --oc-ease:   cubic-bezier(.4, 0, .2, 1);  /* standard Material */
  --oc-spring: cubic-bezier(.4, 0, .2, 1);  /* no overshoot — matches theme */
  --oc-out:    cubic-bezier(0,  0, .2, 1);
  --oc-dur:    200ms;   /* theme uses .2s / .15s */
}

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.oc-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s var(--oc-ease), transform 0.55s var(--oc-ease);
}
.oc-reveal.oc-visible {
  opacity: 1;
  transform: none;
}
.oc-reveal:nth-child(2) { transition-delay: 60ms; }
.oc-reveal:nth-child(3) { transition-delay: 120ms; }
.oc-reveal:nth-child(4) { transition-delay: 180ms; }
.oc-reveal:nth-child(5) { transition-delay: 240ms; }
.oc-reveal:nth-child(6) { transition-delay: 300ms; }

/* ── SECTION BASELINE ────────────────────────────────────── */
.oro-compare__hero,
.oro-compare__filter-section,
.oro-compare__paths-section,
.oro-compare__products,
.oro-compare__tool-section,
.oro-compare__family-strip,
.oro-compare__competitors-section,
.oro-compare__cta-section,
.oro-compare__overview-strip,
.oro-compare__bestfit-section,
.oro-compare__family-table-section,
.oro-compare__upgrade-section,
.oro-compare__quick-answer,
.oro-compare__table-section,
.oro-compare__by-business,
.oc-pricing-spotlight,
.oc-verdict,
.oro-compare__related { padding: 72px 0; }

/* Section eyebrow label — matches theme's section__eyebrow pattern */
.oc-section-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--oc-blue);
  margin-bottom: 12px;
}

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.oro-compare__hero {
  background: var(--oc-dark);
  color: #fff;
  text-align: center;
  padding: 96px 0 80px;
}

.oro-compare__hero-inner {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}

.oro-compare__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--oc-gold);
  margin-bottom: 16px;
}

.oro-compare__hero .title {
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.oro-compare__hero .subtitle {
  color: rgba(255,255,255,0.70); /* match theme hero subtitle opacity */
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

.oro-compare__hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Competitor hero — product panels */
.oro-compare__hero-product {
  padding: 24px 28px;
  border-radius: var(--oc-r);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  text-align: center;
}
.oro-compare__hero-product .title { color: #fff; margin-bottom: 8px; }
.oro-compare__hero-product--a {
  border-color: rgba(244,187,64,0.30);
  background: rgba(76,136,218,0.12);
}
.oc-hero-product-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--oc-gold);
  color: #1a1a1a;
  padding: 3px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  white-space: nowrap;
}
.oc-hero-product-tag {
  opacity: 0.70;
  margin: 0 0 14px !important;
  font-size: 0.78rem !important;
}

/* Bullet lists inside hero product panels */
.oc-hero-product-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  text-align: left;
}
.oc-hero-product-bullets li {
  font-size: 0.80rem;
  padding: 5px 0 5px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
  line-height: 1.5;
}
.oc-hero-product-bullets li:last-child { border-bottom: none; }

/* ORO side — green check bullets */
.oc-hero-product-bullets--a li {
  color: rgba(255,255,255,0.88);
}
.oc-hero-product-bullets--a li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--oc-gold);
  font-weight: 700;
  font-size: 0.72rem;
}

/* Competitor side — neutral / warning bullets */
.oc-hero-product-bullets--b li {
  color: rgba(255,255,255,0.55);
}
.oc-hero-product-bullets--b li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: rgba(255,255,255,0.30);
  font-size: 0.80rem;
}

/* ─────────────────────────────────────────
   BUSINESS TYPE FILTER
───────────────────────────────────────── */
/* ── Comparison Paths (hub two-card nav) ─────────────────── */
.oro-compare__paths-section {
  background: var(--oc-surface);
  padding: 48px 0;
  border-bottom: 1px solid var(--oc-border);
}
.oro-compare__paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 640px) {
  .oro-compare__paths-grid { grid-template-columns: 1fr; }
}
.oro-compare__path-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  border-radius: 12px;
  border: 2px solid var(--oc-border);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.oro-compare__path-card:hover {
  border-color: var(--oc-blue);
  box-shadow: 0 4px 20px rgba(76,136,218,.12);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}
.oro-compare__path-card--competitors:hover { border-color: #f4bb40; box-shadow: 0 4px 20px rgba(244,187,64,.15); }
.oro-compare__path-icon { font-size: 2.2rem; flex-shrink: 0; }
.oro-compare__path-card h3 { margin: 0 0 6px; font-size: 1rem; }
.oro-compare__path-card p  { margin: 0; font-size: 0.85rem; color: var(--oc-muted); }
.oro-compare__path-arrow   { margin-left: auto; font-size: 1.4rem; color: var(--oc-blue); flex-shrink: 0; opacity: .6; transition: opacity .2s, transform .2s; }
.oro-compare__path-card:hover .oro-compare__path-arrow { opacity: 1; transform: translateX(4px); }

.oro-compare__filter-section {
  background: var(--oc-surface);
  padding: 48px 0;
  border-bottom: 1px solid var(--oc-border);
}
.oro-compare__filter-section > .uk-container > .subtitle {
  margin-bottom: 24px;
  font-size: 0.92rem;
  color: var(--oc-muted);
}
.oro-compare__filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.oro-filter-tag {
  font-family: 'Poppins', sans-serif;
  font-size: 0.80rem;
  font-weight: 500;
  padding: 7px 18px;
  border-radius: var(--oc-r-pill);
  border: 1px solid var(--oc-border);
  background: var(--oc-surface);
  color: var(--oc-muted);
  cursor: pointer;
  transition:
    background   var(--oc-dur) var(--oc-ease),
    border-color var(--oc-dur) var(--oc-ease),
    color        var(--oc-dur) var(--oc-ease);
}
.oro-filter-tag:hover {
  border-color: var(--oc-blue);
  color: var(--oc-blue);
}
.oro-filter-tag.active {
  background: var(--oc-blue);
  border-color: var(--oc-blue);
  color: #fff;
}

/* ─────────────────────────────────────────
   PRODUCT CARDS
───────────────────────────────────────── */
.oro-compare__products { background: var(--oc-bg); }
.oro-compare__products > .uk-container > .subtitle { color: var(--oc-muted); }

.oro-compare__product-card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-r);
  padding: 32px 24px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--oc-shadow-xs);
  transition:
    box-shadow   var(--oc-dur) var(--oc-ease),
    transform    var(--oc-dur) var(--oc-ease),
    border-color var(--oc-dur) var(--oc-ease);
}

.oro-compare__product-card:hover {
  box-shadow: var(--oc-shadow-blue);
  transform: translateY(-4px);
  border-color: var(--oc-border-blue);
}

.oro-compare__product-card--featured {
  border-color: var(--oc-border-blue);
}

/* Badge */
.oro-compare__product-card-badge {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--oc-blue);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--oc-r-xs);
}

/* Icon */
.oro-compare__product-icon {
  width: 50px; height: 50px;
  border-radius: 9px;
  background: var(--oc-bg-blue);
  border: 1px solid var(--oc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.oro-compare__product-card h3.title {
  margin-bottom: 4px;
  font-size: 1.05rem;
}
.oro-compare__product-tagline {
  color: var(--oc-muted);
  font-size: 0.78rem;
  margin: 0 0 18px;
}

/* Specs list */
.oro-compare__product-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
  border-top: 1px solid var(--oc-border);
  padding-top: 14px;
}
.oro-compare__product-specs li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.oro-compare__product-specs li:last-child { border-bottom: none; }
.oro-spec-label {
  color: var(--oc-subtle);
  font-weight: 500;
  flex-shrink: 0;
}
.oro-spec-value {
  color: var(--oc-text);
  font-weight: 600;
  text-align: right;
  font-size: 0.76rem;
}

/* Card actions */
.oro-compare__product-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oro-compare__product-card-actions .button {
  width: 100%;
  justify-content: center;
  font-size: 0.78rem;
  padding: 9px 16px;
}

/* Dimmed */
.oro-compare__product-card--dimmed {
  opacity: 0.18;
  pointer-events: none;
  filter: grayscale(0.5);
  transform: scale(0.97);
  transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}

/* ─────────────────────────────────────────
   COMPARE TOOL
───────────────────────────────────────── */
.oro-compare__tool-section { background: var(--oc-bg); }

.oro-compare__selectors {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-r);
  padding: 36px 40px;
  box-shadow: var(--oc-shadow-sm);
}

.oro-compare__selector-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 210px;
  max-width: 300px;
}
.oro-compare__selector-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--oc-subtle);
}

.oro-compare__select {
  width: 100%;
  padding: 12px 38px 12px 14px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: var(--oc-r-sm);
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--oc-text);
  background: var(--oc-bg);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  transition: border-color var(--oc-dur) var(--oc-ease), box-shadow var(--oc-dur) var(--oc-ease);
}
.oro-compare__select:hover { border-color: var(--oc-blue); background-color: var(--oc-surface); }
.oro-compare__select:focus { outline: none; border-color: var(--oc-blue); background-color: var(--oc-surface); box-shadow: var(--oc-glow-focus); }

.oro-compare__vs-badge {
  flex-shrink: 0;
  padding-bottom: 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--oc-subtle);
}

.oro-compare__hint {
  color: var(--oc-red);
  font-size: 0.78rem;
  margin-top: 10px;
}

/* Compare result */
.oro-compare__result {
  margin-top: 48px;
  border-radius: var(--oc-r);
  overflow: hidden;
  border: 1px solid var(--oc-border);
  box-shadow: var(--oc-shadow-md);
  animation: ocSlideUp 0.35s var(--oc-out);
}

@keyframes ocSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.oro-compare__result-header {
  display: grid;
  grid-template-columns: 210px 1fr 1fr;
  background: var(--oc-dark);
}
.oro-compare__result-header .orr-col {
  padding: 18px 22px;
  font-weight: 600;
  font-size: 0.86rem;
  color: #fff;
}
.oro-compare__result-header .orr-col:not(:first-child) {
  text-align: center;
  border-left: 1px solid rgba(255,255,255,0.06);
}

.oro-compare__result-row {
  display: grid;
  grid-template-columns: 210px 1fr 1fr;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background 120ms var(--oc-ease);
}
.oro-compare__result-row:nth-child(even) { background: var(--oc-bg); }
.oro-compare__result-row:hover { background: var(--oc-bg-blue); }
.oro-compare__result-row.oc-row-in {
  animation: ocRowFade 0.22s ease forwards;
}
@keyframes ocRowFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.oro-compare__result-row .orr-col {
  padding: 12px 22px;
  font-size: 0.82rem;
  border-right: 1px solid rgba(0,0,0,0.05);
}
.oro-compare__result-row .orr-col:last-child { border-right: none; }
.oro-compare__result-row .orr-col:not(:first-child) { text-align: center; }

.orr-label   { color: var(--oc-text); font-weight: 600; font-size: 0.80rem; }
.orr-positive { color: var(--oc-win); font-weight: 600; }
.orr-negative { color: var(--oc-subtle); font-weight: 400; }
.orr-neutral  { color: var(--oc-muted); }

.oro-compare__result-ctas {
  display: grid;
  grid-template-columns: 210px 1fr 1fr;
  background: var(--oc-bg);
  border-top: 2px solid var(--oc-border);
  padding: 16px 0;
}
.oro-compare__result-ctas div { padding: 0 22px; text-align: center; }

/* ─────────────────────────────────────────
   CHECK / CROSS CELL VALUES (applied by JS)
───────────────────────────────────────── */
.oc-badge-yes {
  color: var(--oc-win);
  font-weight: 600;
}
.oc-badge-no {
  color: var(--oc-subtle);
}
.oc-badge-plain {
  color: var(--oc-muted);
}

/* ─────────────────────────────────────────
   PRODUCT FAMILY STRIP
───────────────────────────────────────── */
.oro-compare__family-strip {
  background: var(--oc-surface);
  border-top: 1px solid var(--oc-border);
  border-bottom: 1px solid var(--oc-border);
}

.oro-compare__family-card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-r);
  padding: 30px 24px;
  height: 100%;
  text-align: center;
  box-shadow: var(--oc-shadow-xs);
  transition:
    box-shadow  var(--oc-dur) var(--oc-ease),
    border-color var(--oc-dur) var(--oc-ease),
    transform   var(--oc-dur) var(--oc-spring);
}
.oro-compare__family-card:hover {
  box-shadow: var(--oc-shadow-blue);
  border-color: var(--oc-border-blue);
  transform: translateY(-5px);
}

.oro-compare__family-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 9px;
  background: var(--oc-bg-blue);
  border: 1px solid rgba(76,136,218,0.12);
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.oro-compare__family-logo {
  display: block;
  width: 36px; height: 36px;
  object-fit: contain;
  background: transparent;
  margin-bottom: 16px;
}
.oro-compare__family-card .title { margin-bottom: 10px; font-size: 0.95rem; }
.oro-compare__family-card .paragraph,
.oro-compare__family-card .paragraph--small {
  font-size: 0.80rem;
  color: var(--oc-muted);
  line-height: 1.65;
  margin: 0;
}
.oro-compare__family-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--oc-blue);
  font-size: 0.80rem;
  font-weight: 600;
  margin-top: 16px;
  text-decoration: none;
  transition: opacity var(--oc-dur);
}
.oro-compare__family-link:hover { opacity: 0.75; }

/* ─────────────────────────────────────────
   COMPETITOR CARDS
───────────────────────────────────────── */
.oro-compare__competitors-section { background: var(--oc-bg); }

.oro-compare__competitor-card {
  display: flex;
  flex-direction: column;
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-top: 3px solid var(--oc-blue);
  border-radius: var(--oc-r);
  padding: 26px;
  text-decoration: none;
  color: var(--oc-text);
  height: 100%;
  box-shadow: var(--oc-shadow-xs);
  transition:
    box-shadow   var(--oc-dur) var(--oc-ease),
    border-color var(--oc-dur) var(--oc-ease),
    transform    var(--oc-dur) var(--oc-ease);
}
.oro-compare__competitor-card:hover {
  box-shadow: var(--oc-shadow-blue);
  border-top-color: var(--oc-blue-dk);
  color: var(--oc-text);
  transform: translateY(-3px);
}

.oro-compare__competitor-tag {
  display: inline-block;
  background: var(--oc-bg-blue);
  color: var(--oc-blue);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: var(--oc-r-pill);
  margin-bottom: 14px;
}
.oro-compare__competitor-card .title {
  margin-bottom: 8px;
  font-size: 0.95rem;
  transition: color var(--oc-dur);
}
.oro-compare__competitor-card:hover .title { color: var(--oc-blue); }
.oro-compare__competitor-card .paragraph,
.oro-compare__competitor-card .paragraph--small {
  font-size: 0.79rem;
  color: var(--oc-muted);
  flex: 1;
  line-height: 1.58;
}
.oro-compare__competitor-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--oc-blue);
  font-size: 0.79rem;
  font-weight: 600;
  margin-top: 16px;
}

/* ─────────────────────────────────────────
   CTA SECTION
───────────────────────────────────────── */
.oro-compare__cta-section {
  background: var(--oc-dark);
  text-align: center;
}
.oro-compare__cta-inner { max-width: 580px; margin: 0 auto; }
.oro-compare__cta-section .title { color: #fff; }
.oro-compare__cta-section .subtitle { color: rgba(255,255,255,0.60); line-height: 1.70; }
.oro-compare__cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* ─────────────────────────────────────────
   FAMILY PAGE — OVERVIEW STRIP
───────────────────────────────────────── */
.oro-compare__overview-strip {
  background: var(--oc-bg);
  padding: 40px 0;
  border-bottom: 1px solid var(--oc-border);
}
.oro-overview-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--oc-r-sm);
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-left: 3px solid var(--oc-blue);
  box-shadow: var(--oc-shadow-xs);
  height: 100%;
  transition: box-shadow var(--oc-dur) var(--oc-ease), transform var(--oc-dur) var(--oc-spring);
}
.oro-overview-pill:hover { box-shadow: var(--oc-shadow-md); transform: translateY(-2px); }
.oro-overview-pill--oropos   { border-left-color: var(--oc-blue); }
.oro-overview-pill--floreant { border-left-color: var(--oc-blue); }
.oro-overview-pill--siiopa   { border-left-color: var(--oc-gold); }
.oro-overview-pill--webpos   { border-left-color: var(--oc-purple); }

.oro-overview-pill__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.oro-overview-pill__logo {
  width: 28px; height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
}
.oro-overview-pill__name { font-weight: 700; font-size: 0.88rem; color: var(--oc-text); line-height: 1.2; }
.oro-overview-pill__type { font-size: 0.72rem; color: var(--oc-muted); margin-top: 2px; }

/* ─────────────────────────────────────────
   BEST FIT CARDS
───────────────────────────────────────── */
.oro-compare__bestfit-section { background: var(--oc-surface); }

.oro-bestfit-logo {
  display: block;
  width: 36px; height: 36px;
  object-fit: contain;
  background: transparent;
  margin-bottom: 12px;
}
.oro-ft-col-logo {
  display: inline-block;
  width: 20px; height: 20px;
  object-fit: contain;
  background: transparent;
  vertical-align: middle;
  margin-right: 6px;
}
.oro-bestfit-card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-r);
  padding: 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--oc-shadow-xs);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--oc-dur) var(--oc-ease), transform var(--oc-dur) var(--oc-spring);
}
/* Product colour accent at top */
.oro-bestfit-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
}
.oro-bestfit-card--oropos::before   { background: var(--oc-blue); }
.oro-bestfit-card--floreant::before { background: var(--oc-blue); }
.oro-bestfit-card--siiopa::before   { background: var(--oc-gold); }
.oro-bestfit-card--webpos::before   { background: #8b5cf6; }

.oro-bestfit-card:hover { box-shadow: var(--oc-shadow-md); transform: translateY(-4px); }

.oro-bestfit-card .title { margin-bottom: 8px; font-size: 0.92rem; }
.oro-bestfit-list {
  list-style: none;
  padding: 0; margin: 14px 0 22px;
  flex: 1;
}
.oro-bestfit-list li {
  font-size: 0.80rem;
  padding: 6px 0 6px 18px;
  color: var(--oc-muted);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  position: relative;
  transition: color var(--oc-dur);
}
.oro-bestfit-list li:last-child { border-bottom: none; }
.oro-bestfit-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--oc-subtle);
  font-size: 0.70rem;
  top: 7px;
}

.oro-bestfit-card .button {
  width: 100%; justify-content: center; margin-top: auto;
}

/* ─────────────────────────────────────────
   COMPARISON TABLES
───────────────────────────────────────── */
.oro-compare__family-table-section,
.oro-compare__table-section { background: var(--oc-bg); }

.oro-compare__table-wrapper {
  overflow-x: auto;
  margin-top: 36px;
  border-radius: var(--oc-r);
  box-shadow: var(--oc-shadow-md);
  border: 1px solid var(--oc-border);
  /* Fade right edge on scroll */
  position: relative;
}

.oro-compare__family-table,
.oro-compare__competitor-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Poppins', sans-serif;
  font-size: 0.84rem;
}

/* THEAD */
.oro-compare__family-table thead th,
.oro-compare__competitor-table thead th {
  padding: 16px 20px;
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
  text-align: left;
  letter-spacing: 0.01em;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* TBODY cells */
.oro-compare__family-table td,
.oro-compare__competitor-table td {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  vertical-align: middle;
  color: var(--oc-muted);
  transition: background 110ms var(--oc-ease);
}

/* Row hover */
.oro-compare__family-table tbody tr:hover td,
.oro-compare__competitor-table tbody tr:hover td { background: var(--oc-bg-blue) !important; }

/* ── Family table column headers ── */
.oro-ft-col-label   { background: var(--oc-dark); color: rgba(255,255,255,0.9); min-width: 170px; position: sticky; left: 0; z-index: 3; }
.oro-ft-col-oropos  { background: #1a3560; color: rgba(255,255,255,0.92); text-align: center; }
.oro-ft-col-floreant{ background: #0f2d4a; color: rgba(255,255,255,0.88); text-align: center; }
.oro-ft-col-siiopa  { background: #7c3410; color: rgba(255,255,255,0.92); text-align: center; }
.oro-ft-col-webpos  { background: #3b0764; color: rgba(255,255,255,0.92); text-align: center; }

tbody td.oro-ft-col-label {
  background: var(--oc-surface);
  color: var(--oc-text);
  font-weight: 600;
  font-size: 0.80rem;
  border-right: 1px solid var(--oc-border);
  position: sticky;
  left: 0;
  z-index: 1;
}
tbody .oro-ft-col-oropos,
tbody .oro-ft-col-floreant,
tbody .oro-ft-col-siiopa,
tbody .oro-ft-col-webpos { background: transparent; color: var(--oc-muted); text-align: center; }

.oro-ft-row-alt td { background: var(--oc-bg); }
tbody .oro-ft-row-alt td.oro-ft-col-label { background: var(--oc-bg); }

/* Section divider rows */
.oro-ft-section-row td,
.oro-ct-section-row td {
  background: var(--oc-dark) !important;
  color: rgba(255,255,255,0.50);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 9px 20px;
  border-bottom: none;
}

/* ── Competitor table column headers ── */
.oro-ct-col-label { background: var(--oc-dark); color: rgba(255,255,255,0.90); min-width: 190px; position: sticky; left: 0; z-index: 3; }
.oro-ct-col-a { background: #1a3560; color: rgba(255,255,255,0.92); text-align: center; }
.oro-ct-col-b { background: #2d3748; color: rgba(255,255,255,0.90); text-align: center; }

tbody .oro-ct-col-label {
  background: var(--oc-surface);
  color: var(--oc-text);
  font-weight: 600;
  font-size: 0.80rem;
  border-right: 1px solid var(--oc-border);
  position: sticky;
  left: 0;
  z-index: 1;
}
tbody .oro-ct-col-a,
tbody .oro-ct-col-b { background: transparent; color: var(--oc-muted); text-align: center; }
.oro-ct-row-alt td { background: var(--oc-bg); }
tbody .oro-ct-row-alt td.oro-ct-col-label { background: var(--oc-bg); }

/* Tfoot CTAs */
.oro-compare__competitor-table tfoot td {
  padding: 16px 20px;
  border-top: 2px solid var(--oc-border);
  background: var(--oc-bg);
  border-bottom: none;
}
.oro-compare__competitor-table tfoot .oro-ct-col-a,
.oro-compare__competitor-table tfoot .oro-ct-col-b { text-align: center; vertical-align: middle; }

/* Cell value states — competitor ✓ is neutral, not celebrated */
.oro-cell-positive { color: var(--oc-neutral-pos) !important; font-weight: 500 !important; }
.oro-cell-negative { color: var(--oc-subtle) !important; }
/* ORO column wins — gold emphasis */
.oro-cell-win {
  color: var(--oc-gold) !important;
  font-weight: 700 !important;
}
/* ORO column header gold underline = winner signal */
.oro-ct-col-a { border-bottom: 2px solid var(--oc-gold) !important; }
.oro-ft-col-oropos { border-bottom: 2px solid var(--oc-gold) !important; }

/* ─────────────────────────────────────────
   UPGRADE PATH CARDS
───────────────────────────────────────── */
.oro-compare__upgrade-section { background: var(--oc-surface); }

.oro-upgrade-card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-r);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--oc-shadow-xs);
  height: 100%;
  transition: box-shadow var(--oc-dur) var(--oc-ease), transform var(--oc-dur) var(--oc-spring);
}
.oro-upgrade-card:hover { box-shadow: var(--oc-shadow-md); transform: translateY(-3px); }

.oro-upgrade-card__flow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oro-upgrade-arrow { font-size: 1rem; color: var(--oc-subtle); flex-shrink: 0; font-weight: 300; }

.oro-upgrade-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--oc-r-pill);
  font-weight: 600;
  font-size: 0.76rem;
  white-space: nowrap;
}
.oro-upgrade-badge--oropos   { background: var(--oc-bg-blue);     color: var(--oc-blue); }
.oro-upgrade-badge--floreant { background: var(--oc-bg-blue);     color: var(--oc-blue); }
.oro-upgrade-badge--siiopa   { background: #FEF3C7;               color: #92400E; }
.oro-upgrade-badge--webpos   { background: #EDE9FE;               color: #5B21B6; }

.oro-upgrade-card .paragraph,
.oro-upgrade-card .paragraph--small {
  font-size: 0.79rem;
  color: var(--oc-muted);
  margin: 0;
  line-height: 1.66;
}

/* ─────────────────────────────────────────
   QUICK ANSWER BOX
───────────────────────────────────────── */
.oro-compare__quick-answer { background: var(--oc-bg); }

.oro-compare__qa-box {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-r);
  padding: 44px;
  box-shadow: var(--oc-shadow-sm);
}

.oro-qa-choice {
  padding: 24px;
  border-radius: var(--oc-r-sm);
  height: 100%;
}
.oro-qa-choice strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--oc-text);
}
.oro-qa-choice ul { list-style: none; padding: 0; margin: 0; }
.oro-qa-choice ul li {
  font-size: 0.81rem;
  padding: 5px 0 5px 20px;
  color: var(--oc-muted);
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.oro-qa-choice ul li:last-child { border-bottom: none; }
/* Default bullet: gold ✓ (used by ORO side) */
.oro-qa-choice ul li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 6px;
  color: var(--oc-win);
  font-size: 0.72rem;
  font-weight: 700;
}
/* Competitor side: neutral dash — not a win, just a condition */
.oro-qa-choice--b ul li::before {
  content: '–';
  color: var(--oc-neutral-pos);
  font-weight: 400;
  font-size: 0.85rem;
  top: 5px;
}
.oro-qa-choice--a {
  background: var(--oc-bg-blue);
  border-left: 4px solid var(--oc-blue);
  box-shadow: var(--oc-shadow-sm);
}
.oro-qa-choice--b {
  background: var(--oc-bg);
  border-left: 4px solid rgba(0,0,0,0.10);
  opacity: 0.85;
}
.oro-qa-choice strong {
  font-size: 0.92rem;
}
.oro-qa-choice--a strong {
  color: var(--oc-blue);
}
.oro-qa-choice ul li {
  font-size: 0.84rem;
  padding: 7px 0 7px 22px;
}

/* ─────────────────────────────────────────
   BEST BY BUSINESS TYPE
───────────────────────────────────────── */
.oro-compare__by-business { background: var(--oc-surface); }

.oro-biz-card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-r-sm);
  padding: 22px;
  height: 100%;
  box-shadow: var(--oc-shadow-xs);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--oc-dur) var(--oc-ease), transform var(--oc-dur) var(--oc-spring);
}
.oro-biz-card:hover { box-shadow: var(--oc-shadow-md); transform: translateY(-3px); }

.oro-biz-card .title { margin-bottom: 10px; font-size: 0.85rem; }
.oro-biz-winner {
  display: inline-block;
  background: var(--oc-bg-blue);
  color: var(--oc-blue);
  font-size: 0.70rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--oc-r-pill);
  margin-bottom: 10px;
}
.oro-biz-card .paragraph,
.oro-biz-card .paragraph--small {
  font-size: 0.77rem;
  color: var(--oc-muted);
  margin: 0;
  line-height: 1.58;
}

/* ─────────────────────────────────────────
   RELATED LINKS
───────────────────────────────────────── */
.oro-compare__related { background: var(--oc-bg); padding: 44px 0; border-top: 1px solid var(--oc-border); }
.oro-compare__related-links {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
.oro-compare__related-links a {
  color: var(--oc-blue);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--oc-dur), opacity var(--oc-dur);
}
.oro-compare__related-links a:hover { border-bottom-color: var(--oc-blue); opacity: 0.78; }

/* ─────────────────────────────────────────
   DISCLAIMER
───────────────────────────────────────── */
.oro-compare__disclaimer {
  background: var(--oc-bg);
  border-top: 1px solid var(--oc-border);
  padding: 16px 0;
}
.oro-compare__disclaimer p {
  font-family: 'Poppins', sans-serif;
  font-size: 0.66rem;
  color: #B0BEC5;
  line-height: 1.65;
  margin: 0;
  text-align: center;
}

/* ─────────────────────────────────────────
   HERO PROOF STRIP — big 3-column proof
───────────────────────────────────────── */
.oc-hero-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 680px;
  margin: 0 auto 44px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  overflow: hidden;
}
.oc-hero-proof__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px;
  border-right: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.oc-hero-proof__col:last-child { border-right: none; }
.oc-hero-proof__label {
  font-size: 0.60rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}
.oc-hero-proof__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--oc-gold);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.oc-hero-proof__sub {
  font-size: 0.60rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.45;
}

/* ─────────────────────────────────────────
   SAVINGS CALLOUT — under pricing cards
───────────────────────────────────────── */
.oc-savings-callout {
  background: var(--oc-dark);
  border: 1px solid rgba(244,187,64,0.20);
  border-left: 4px solid var(--oc-gold);
  border-radius: var(--oc-r-sm);
  padding: 20px 28px;
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.oc-savings-callout__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.oc-savings-callout__text {
  flex: 1;
}
.oc-savings-callout__headline {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--oc-gold);
  display: block;
  margin-bottom: 3px;
}
.oc-savings-callout__body {
  font-size: 0.80rem;
  color: rgba(255,255,255,0.60);
  line-height: 1.55;
}

/* ─────────────────────────────────────────
   VERDICT SECTION — before bottom CTA
───────────────────────────────────────── */
.oc-verdict {
  background: var(--oc-navy);
  color: #fff;
}
.oc-verdict__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--oc-gold);
  margin-bottom: 14px;
  text-align: center;
}
.oc-verdict__headline {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  text-align: center;
}
.oc-verdict__lead {
  color: rgba(255,255,255,0.60);
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 600px;
  margin: 0 auto 48px;
  text-align: center;
}
.oc-verdict__wins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.oc-verdict__win {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--oc-gold);
  border-radius: var(--oc-r-sm);
  padding: 22px 20px;
}
.oc-verdict__win-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 7px;
}
.oc-verdict__win-body {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
}
.oc-verdict__cta {
  text-align: center;
  margin-top: 40px;
}

/* ─────────────────────────────────────────
   KEY DIFFERENTIATOR TABLE ROWS
   Highlights rows where ORO wins + competitor loses.
───────────────────────────────────────── */
.oro-ct-row-key td {
  background: rgba(244,187,64,0.05) !important;
}
.oro-ct-row-key td.oro-ct-col-label {
  background: rgba(244,187,64,0.07) !important;
  border-left: 3px solid var(--oc-gold);
  padding-left: 17px;
}
.oro-ct-row-key td.oro-ct-col-label::before {
  /* no pseudo element — just left border accent */
}

/* ─────────────────────────────────────────
   YEAR-OVER-YEAR COST TABLE
───────────────────────────────────────── */
.oc-cost-years {
  margin-top: 40px;
  border-radius: var(--oc-r);
  overflow: hidden;
  border: 1px solid var(--oc-border);
  box-shadow: var(--oc-shadow-sm);
}
.oc-cost-years__table {
  width: 100%;
}
.oc-cost-years__header,
.oc-cost-years__row {
  display: grid;
  grid-template-columns: 100px 1fr 1fr;
}
.oc-cost-years__header {
  background: var(--oc-dark);
  color: rgba(255,255,255,0.85);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}
.oc-cost-years__header > div {
  padding: 14px 20px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.oc-cost-years__header > div:last-child { border-right: none; }
.oc-cost-years__a-col { color: var(--oc-gold); }
.oc-cost-years__row {
  border-bottom: 1px solid var(--oc-border);
  transition: background var(--oc-dur) var(--oc-ease);
}
.oc-cost-years__row:last-child { border-bottom: none; }
.oc-cost-years__row:hover { background: var(--oc-bg-blue); }
.oc-cost-years__row > div {
  padding: 14px 20px;
  font-size: 0.82rem;
  border-right: 1px solid var(--oc-border);
  vertical-align: middle;
}
.oc-cost-years__row > div:last-child { border-right: none; }
.oc-cost-years__period {
  font-weight: 700;
  color: var(--oc-text);
  font-size: 0.78rem;
  background: var(--oc-bg);
}
.oc-cost-years__a {
  color: var(--oc-win);
  font-weight: 600;
  text-align: center;
}
.oc-cost-years__b {
  color: var(--oc-muted);
  text-align: center;
}

/* ─────────────────────────────────────────
   HYBRID BUSINESS SECTION
───────────────────────────────────────── */
.oc-hybrid-section {
  background: var(--oc-bg);
  padding: 72px 0;
}
.oc-hybrid-section .title { margin-bottom: 14px; }
.oc-hybrid-section .subtitle { max-width: 560px; margin-bottom: 44px; }

.oc-hybrid-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.oc-hybrid-card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-top: 3px solid var(--oc-blue);
  border-radius: var(--oc-r);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--oc-shadow-xs);
  transition:
    box-shadow  var(--oc-dur) var(--oc-ease),
    transform   var(--oc-dur) var(--oc-ease),
    border-color var(--oc-dur) var(--oc-ease);
}
.oc-hybrid-card:hover {
  box-shadow: var(--oc-shadow-blue);
  border-top-color: var(--oc-gold);
  transform: translateY(-4px);
}
.oc-hybrid-card__icon {
  font-size: 1.6rem;
  line-height: 1;
}
.oc-hybrid-card__title {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--oc-text);
  line-height: 1.3;
}
.oc-hybrid-card p {
  font-size: 0.79rem;
  color: var(--oc-muted);
  line-height: 1.60;
  margin: 0;
}

.oc-hybrid-cta {
  margin-top: 44px;
  text-align: center;
  padding: 32px 40px;
  background: var(--oc-dark);
  border-radius: var(--oc-r);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.oc-hybrid-cta p {
  margin: 0;
  font-size: 1.0rem;
  font-weight: 700;
  color: #fff;
  text-align: left;
  flex: 1;
  min-width: 200px;
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 960px) {
  .oro-compare__hero,
  .oro-compare__products,
  .oro-compare__tool-section,
  .oro-compare__family-strip,
  .oro-compare__competitors-section,
  .oro-compare__cta-section,
  .oro-compare__bestfit-section,
  .oro-compare__family-table-section,
  .oro-compare__upgrade-section,
  .oro-compare__quick-answer,
  .oro-compare__table-section,
  .oc-pricing-spotlight,
  .oc-verdict,
  .oc-hybrid-section,
  .oro-compare__by-business { padding: 52px 0; }
  .oc-verdict__wins { grid-template-columns: 1fr 1fr; }
  .oc-hybrid-grid { grid-template-columns: 1fr 1fr; }

  .oro-compare__selectors { padding: 28px 24px; }
  .oro-compare__qa-box { padding: 28px 22px; }
  .oc-cost-years__header,
  .oc-cost-years__row { grid-template-columns: 90px 1fr 1fr; }
}

@media (max-width: 640px) {
  .oro-compare__hero-ctas,
  .oro-compare__cta-actions { flex-direction: column; align-items: center; }

  .oro-compare__selectors { flex-direction: column; align-items: stretch; padding: 20px 16px; gap: 16px; }
  .oro-compare__selector-group { max-width: 100%; }
  .oro-compare__vs-badge { text-align: center; padding-bottom: 0; }

  .oro-compare__result-header,
  .oro-compare__result-row,
  .oro-compare__result-ctas { grid-template-columns: 100px 1fr 1fr; }
  .oro-compare__result-header .orr-col,
  .oro-compare__result-row .orr-col { padding: 10px; font-size: 0.72rem; }

  .oro-compare__qa-box { padding: 20px 14px; }
  .oro-qa-choice--a { margin-bottom: 14px; }
  .oc-hero-proof { max-width: 100%; }
  .oc-hero-proof__col { padding: 16px 10px; }
  .oc-hero-proof__value { font-size: 1.15rem; }
  .oc-verdict__wins { grid-template-columns: 1fr; }
  .oc-hybrid-grid { grid-template-columns: 1fr; }
  .oc-hybrid-cta { flex-direction: column; text-align: center; }
  .oc-hybrid-cta p { text-align: center; }
  .oc-cost-years__header,
  .oc-cost-years__row { grid-template-columns: 70px 1fr 1fr; }
  .oc-cost-years__row > div { padding: 10px 12px; font-size: 0.74rem; }

  /* On mobile, un-sticky table columns */
  tbody td.oro-ft-col-label,
  tbody .oro-ct-col-label,
  .oro-compare__family-table thead th.oro-ft-col-label,
  .oro-compare__competitor-table thead th.oro-ct-col-label { position: static; }
}

/* ─────────────────────────────────────────
   STATS BAR — horizontal proof strip
───────────────────────────────────────── */
.oc-stats-bar {
  background: var(--oc-surface);
  border-top: 1px solid var(--oc-border);
  border-bottom: 1px solid var(--oc-border);
  padding: 0;
}

.oc-stats-bar__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.oc-stats-bar__list::-webkit-scrollbar { display: none; }

.oc-stats-bar__item {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 28px;
  border-right: 1px solid var(--oc-border);
  min-width: 200px;
  position: relative;
  transition: background var(--oc-dur) var(--oc-ease);
}
.oc-stats-bar__item:last-child { border-right: none; }
.oc-stats-bar__item:hover { background: var(--oc-bg-blue); }

.oc-stats-bar__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--oc-text);
  line-height: 1.2;
}

.oc-stats-bar__value {
  font-size: 0.75rem;
  color: var(--oc-muted);
  line-height: 1.45;
}

/* ─────────────────────────────────────────
   HERO PRICE DISPLAY
───────────────────────────────────────── */
.oc-hero-price {
  display: inline-block;
  margin-top: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--oc-gold);
  background: rgba(244,187,64,0.10);
  border: 1px solid rgba(244,187,64,0.22);
  padding: 6px 16px;
  border-radius: var(--oc-r-pill);
  letter-spacing: 0.01em;
}
.oc-hero-price--b {
  color: rgba(255,255,255,0.70);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}

/* ─────────────────────────────────────────
   PRICING SPOTLIGHT SECTION
───────────────────────────────────────── */
.oc-pricing-spotlight {
  background: var(--oc-bg);
  text-align: center;
}
.oc-pricing-spotlight .oc-section-label { justify-content: center; }
.oc-pricing-spotlight .title  { margin-bottom: 12px; }
.oc-pricing-spotlight .subtitle { margin-bottom: 0; }

.oc-price-card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-r);
  padding: 36px 32px;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--oc-shadow-sm);
  transition: box-shadow var(--oc-dur) var(--oc-ease), transform var(--oc-dur) var(--oc-ease);
}
.oc-price-card:hover {
  box-shadow: var(--oc-shadow-md);
  transform: translateY(-3px);
}

.oc-price-card--a {
  background: #ffffff;
  border-color: var(--oc-border-blue);
  border-top: 3px solid var(--oc-blue);
  box-shadow: var(--oc-shadow-blue);
}
.oc-price-card--b {
  background: #ffffff;
  border-top: 3px solid #e5e7eb;
}

.oc-price-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--oc-blue);
  background: var(--oc-bg-blue);
  border: 1px solid rgba(76,136,218,0.18);
  padding: 4px 12px;
  border-radius: var(--oc-r-pill);
  margin-bottom: 16px;
}
.oc-price-card__badge::before {
  content: '★';
  font-size: 0.7rem;
}

.oc-price-card__product {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--oc-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.oc-price-card__price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--oc-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.oc-price-card--a .oc-price-card__price { color: var(--oc-blue-dk); }

.oc-price-card__note {
  font-size: 0.78rem;
  color: var(--oc-muted);
  line-height: 1.6;
  max-width: 260px;
}

/* ─────────────────────────────────────────
   HERO — outline-light button variant
───────────────────────────────────────── */
.button--outline-light {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.88);
}
.button--outline-light:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.50);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
  .oc-reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   DESIGN DISCIPLINE — v2.1
   Type scale  : 56 / 40 / 24 / 16 / 13px
   Line heights: 1.12 (headings) / 1.65 (body)
   Spacing grid: strict 8px multiples
   Text max-w  : 680px
   Gold accent : wins only — not decorative
   ============================================================ */

/* ── Type scale ──────────────────────────────────────────── */

/* H1 display — 56px, tight */
.oro-compare__hero .title--xlarge {
  font-size: 3.5rem;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* H2 section headings — 40px */
#oro-compare-competitor .title--large {
  font-size: 2.5rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: 16px;
}

/* H3 card / panel headings — 24px */
#oro-compare-competitor .title--medium {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

/* Hero panel headings — 22px (slightly smaller in a tight panel) */
.oro-compare__hero-product .title--medium {
  font-size: 1.375rem;
  line-height: 1.2;
  margin-bottom: 8px;
}

/* Verdict headline matches H2 scale */
.oc-verdict__headline {
  font-size: 2.5rem;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

/* Body / subtitle — 16px, 1.65 */
#oro-compare-competitor .subtitle,
#oro-compare-competitor .subtitle--large {
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 0;
}

/* Verdict lead matches body */
.oc-verdict__lead {
  font-size: 1rem;
  line-height: 1.65;
}

/* Small text — 13px */
.oc-stats-bar__label        { font-size: 0.875rem;  line-height: 1.3; }
.oc-stats-bar__value        { font-size: 0.8125rem; line-height: 1.5; }
.oc-hero-product-bullets li { font-size: 0.8125rem; }
.oro-qa-choice ul li        { font-size: 0.8125rem; }
.oc-hybrid-card p           { font-size: 0.8125rem; line-height: 1.6; }
.oc-verdict__win-body       { font-size: 0.8125rem; line-height: 1.6; }
.oc-cost-years__a,
.oc-cost-years__b           { font-size: 0.8125rem; }

/* ── Text max-width 680px ─────────────────────────────────── */
.oro-compare__hero-inner .subtitle,
.oro-compare__hero-inner .subtitle--large {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.oc-verdict__lead { max-width: 640px; }
#oro-compare-competitor .oc-pricing-spotlight .subtitle,
#oro-compare-competitor .oro-compare__table-section .subtitle,
#oro-compare-competitor .oro-compare__quick-answer .subtitle,
#oro-compare-competitor .oc-hybrid-section .subtitle {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ── 8px spacing grid corrections ────────────────────────── */

/* Hero */
.oro-compare__hero--competitor { padding: 88px 0 80px; }
.oro-compare__hero-inner       { padding: 0; }

/* Proof strip columns */
.oc-hero-proof__col { padding: 24px 16px; }

/* Product panels */
.oro-compare__hero-product { padding: 24px; }

/* Stats bar */
.oc-stats-bar__item { padding: 24px 32px; }

/* Quick-answer box */
.oro-compare__qa-box { padding: 48px; }

/* Verdict win cards */
.oc-verdict__win { padding: 24px; }
.oc-verdict__wins { gap: 24px; margin-bottom: 0; }
.oc-verdict__cta { margin-top: 48px; }
.oc-verdict__lead { margin-bottom: 48px; }

/* Hybrid section */
.oc-hybrid-grid       { gap: 24px; }
.oc-hybrid-card       { padding: 24px; gap: 8px; }
.oc-hybrid-cta        { padding: 32px 40px; margin-top: 48px; }

/* Cost years rows */
.oc-cost-years__row > div    { padding: 16px 24px; }
.oc-cost-years__header > div { padding: 14px 24px; }

/* Section vertical rhythm */
#oro-compare-competitor .oc-section-label { margin-bottom: 16px; }

/* ── Table: breathing room ────────────────────────────────── */
.oro-compare__family-table td,
.oro-compare__competitor-table td {
  padding: 14px 24px;
  font-size: 0.875rem;
}

.oro-compare__family-table thead th,
.oro-compare__competitor-table thead th {
  padding: 18px 24px;
}

.oro-ft-section-row td,
.oro-ct-section-row td {
  padding: 10px 24px;
}

/* ── Button hierarchy ─────────────────────────────────────── */
.button--big {
  padding: 14px 36px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

#oro-compare-competitor .button--primary { font-weight: 700 !important; }

/* ── Proof strip: bigger values ───────────────────────────── */
.oc-hero-proof__value { font-size: 1.625rem; }
.oc-hero-proof { max-width: 700px; }

/* ── Section spacing consistency ──────────────────────────── */
.oro-compare__hero,
.oro-compare__products,
.oro-compare__tool-section,
.oro-compare__family-strip,
.oro-compare__competitors-section,
.oro-compare__cta-section,
.oro-compare__bestfit-section,
.oro-compare__family-table-section,
.oro-compare__upgrade-section,
.oro-compare__quick-answer,
.oro-compare__table-section,
.oc-pricing-spotlight,
.oc-verdict,
.oc-hybrid-section,
.oro-compare__by-business,
.oro-compare__related { padding: 80px 0; }

.oro-compare__hero--competitor { padding: 96px 0 88px; }
.oc-stats-bar { padding: 0; }

/* ── Responsive discipline ────────────────────────────────── */
@media (max-width: 960px) {
  .oro-compare__hero .title--xlarge    { font-size: 2.75rem; }
  #oro-compare-competitor .title--large { font-size: 2rem; }
  .oc-verdict__headline                { font-size: 2rem; }
  .oro-compare__qa-box                 { padding: 32px 24px; }
  .oc-stats-bar__item                  { padding: 20px 24px; }
  .oc-hybrid-cta                       { padding: 32px 24px; }
}

@media (max-width: 640px) {
  .oro-compare__hero .title--xlarge    { font-size: 2.125rem; letter-spacing: -0.02em; }
  #oro-compare-competitor .title--large { font-size: 1.75rem; }
  .oc-verdict__headline                { font-size: 1.75rem; }
  .oc-hero-proof                       { max-width: 100%; }
  .oc-hero-proof__col                  { padding: 16px 12px; }
  .oc-hero-proof__value                { font-size: 1.25rem; }
  .button--big                         { padding: 13px 28px !important; font-size: 0.875rem !important; }
  .oro-compare__hero--competitor       { padding: 64px 0 56px; }
}

/* ── Contrast: headings vs body ───────────────────────────── */
/* Headings: full dark weight */
#oro-compare-competitor .title--large,
#oro-compare-competitor .title--medium {
  color: var(--oc-text);
}
/* Hero headings stay white */
.oro-compare__hero .title--large,
.oro-compare__hero .title--medium,
.oro-compare__hero .title--xlarge { color: #fff; }

/* Body: muted grey — clear contrast from headings */
#oro-compare-competitor .subtitle,
#oro-compare-competitor .subtitle--large {
  color: var(--oc-muted);
}
/* Hero subtitle slightly lighter */
.oro-compare__hero .subtitle,
.oro-compare__hero .subtitle--large {
  color: rgba(255,255,255,0.68);
}

/* ============================================================
   APPLE-LEVEL REFINEMENT — v2.2
   Principles:
   • Space IS the design — generous section padding
   • Typography carries weight — remove box borders
   • Anti-aliasing on the container
   • Section rows in table: subtle not heavy
   • Alternating rows: barely visible
   • Card borders: none — shadow only
   • One dominant element per section
   ============================================================ */

/* ── Font rendering ───────────────────────────────────────── */
#oro-compare-competitor {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography — push H1 to 64px, tighten tracking ──────── */
.oro-compare__hero .title--xlarge {
  font-size: 4rem;          /* 64px */
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 800;
}

#oro-compare-competitor .title--large {
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 20px;
}

/* Subtitles: lighter weight, more breathing room below them */
#oro-compare-competitor .subtitle,
#oro-compare-competitor .subtitle--large {
  font-weight: 400;
  line-height: 1.75;
  margin-bottom: 0;
  color: #6b7280;
}

.oro-compare__hero .subtitle,
.oro-compare__hero .subtitle--large {
  color: rgba(255,255,255,0.62);
  font-weight: 400;
}

/* Section eyebrow — quieter, less uppercase shouting */
.oc-section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--oc-blue);
  margin-bottom: 14px;
  opacity: 0.85;
}
.oro-compare__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 0.80;
}

/* ── Space IS the design ──────────────────────────────────── */
/* Section padding: 120px (generous, Apple-scale) */
.oro-compare__hero,
.oro-compare__products,
.oro-compare__tool-section,
.oro-compare__family-strip,
.oro-compare__competitors-section,
.oro-compare__cta-section,
.oro-compare__bestfit-section,
.oro-compare__family-table-section,
.oro-compare__upgrade-section,
.oro-compare__quick-answer,
.oro-compare__table-section,
.oc-pricing-spotlight,
.oc-verdict,
.oc-hybrid-section,
.oro-compare__by-business { padding: 120px 0; }

/* Hero: generous top space lets the headline float */
.oro-compare__hero--competitor { padding: 128px 0 104px; }

/* CTA section: slightly tighter since it's terminal */
.oro-compare__cta-section { padding: 96px 0; }

/* Related links: compact, it's an afterthought */
.oro-compare__related { padding: 48px 0; }

/* Space between eyebrow → headline → body */
#oro-compare-competitor .oc-section-label { margin-bottom: 18px; }
#oro-compare-competitor section .title--large { margin-bottom: 20px; }
#oro-compare-competitor section .subtitle    { margin-bottom: 0; }

/* Hero inner spacing */
.oro-compare__hero .title--xlarge { margin-bottom: 22px; }
.oro-compare__hero .subtitle      { margin-bottom: 44px; }

/* Space above content within sections */
.oc-pricing-spotlight .uk-grid { margin-top: 48px; }
.oc-cost-years { margin-top: 48px; }
.oc-savings-callout { margin-top: 32px; }
.oro-compare__table-wrapper { margin-top: 48px; }
.oro-compare__qa-box { margin-top: 48px; }
.oc-hybrid-grid { margin-top: 48px; }

/* ── Remove card border-top color accents ─────────────────── */
/* Cards should be clean white / shadow only */
.oc-hybrid-card {
  border: 1px solid rgba(0,0,0,0.06);
  border-top: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
  transition: box-shadow var(--oc-dur) var(--oc-ease), transform var(--oc-dur) var(--oc-ease);
}
.oc-hybrid-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 16px 48px rgba(0,0,0,0.06);
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.08);
}

/* Stats bar: remove item hover color — too noisy */
.oc-stats-bar__item:hover { background: transparent; }
.oc-stats-bar__item { border-right-color: rgba(0,0,0,0.06); }

/* ── Table: silence the noise ─────────────────────────────── */

/* More row height */
.oro-compare__family-table td,
.oro-compare__competitor-table td {
  padding: 15px 28px;
  border-bottom: 1px solid rgba(0,0,0,0.04);  /* was 0.05 */
}

/* Alternating rows: barely visible */
.oro-ct-row-alt td { background: rgba(0,0,0,0.015) !important; }
tbody .oro-ct-row-alt td.oro-ct-col-label { background: rgba(0,0,0,0.015) !important; }

/* Section divider rows: light grey, not heavy dark navy */
.oro-ft-section-row td,
.oro-ct-section-row td {
  background: #f3f4f6 !important;
  color: #9ca3af;
  font-size: 0.625rem;      /* 10px */
  letter-spacing: 0.14em;
  padding: 10px 28px;
}

/* Table thead: slightly tighter */
.oro-compare__family-table thead th,
.oro-compare__competitor-table thead th {
  padding: 18px 28px;
  font-size: 0.8125rem;
}

/* Competitor table column headers: slightly softer backgrounds */
.oro-ct-col-a { background: #162d55; }
.oro-ct-col-b { background: #232f3e; }

/* ── Choice section: remove heavy left borders ────────────── */
.oro-qa-choice--a {
  border-left: none;
  background: var(--oc-bg-blue);
  border-radius: var(--oc-r-sm);
  box-shadow: none;
}
.oro-qa-choice--b {
  border-left: none;
  background: rgba(0,0,0,0.02);
  opacity: 1;  /* was 0.85 — restore full opacity, let styling do the work */
  border-radius: var(--oc-r-sm);
}
.oro-qa-choice { padding: 28px 24px; }
.oro-qa-choice strong {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}
.oro-qa-choice ul li {
  border-bottom-color: rgba(0,0,0,0.04);
  padding: 7px 0 7px 20px;
  color: #6b7280;
}

/* ── Hero proof strip: bigger values, more float ──────────── */
.oc-hero-proof {
  max-width: 640px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
}
.oc-hero-proof__col { padding: 28px 20px; }
.oc-hero-proof__value {
  font-size: 2rem;          /* 32px — large and confident */
  font-weight: 800;
  letter-spacing: -0.03em;
}
.oc-hero-proof__label {
  font-size: 0.625rem;      /* 10px */
  letter-spacing: 0.12em;
  opacity: 0.55;
  margin-bottom: 10px;
}
.oc-hero-proof__sub {
  font-size: 0.625rem;
  opacity: 0.38;
  margin-top: 8px;
}

/* ── Hero product panels: cleaner ────────────────────────── */
.oro-compare__hero-product {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  padding: 28px 24px;
}
.oro-compare__hero-product--a {
  border-color: rgba(244,187,64,0.22);
  background: rgba(76,136,218,0.10);
}

/* Hero product bullet separators: even quieter */
.oc-hero-product-bullets li {
  border-bottom-color: rgba(255,255,255,0.05);
  padding: 6px 0 6px 20px;
}

/* ── Price cards: cleaner ─────────────────────────────────── */
.oc-price-card {
  padding: 40px 36px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.07);
}
.oc-price-card--a {
  border-color: rgba(76,136,218,0.18);
  border-top: 3px solid var(--oc-blue);
  box-shadow: 0 2px 8px rgba(76,136,218,0.08), 0 16px 48px rgba(76,136,218,0.08);
}

/* ── Verdict section: more space ──────────────────────────── */
.oc-verdict__wins { margin-top: 0; gap: 24px; }
.oc-verdict__lead { margin-bottom: 56px; opacity: 0.75; }

/* Win cards: slightly higher contrast text */
.oc-verdict__win-title { font-size: 0.875rem; }
.oc-verdict__win-body  { opacity: 0.65; }

/* ── Savings callout: quieter ─────────────────────────────── */
.oc-savings-callout {
  border-left-width: 3px;
  background: var(--oc-dark);
  border-color: rgba(244,187,64,0.15);
}

/* ── Hybrid CTA bar: cleaner ──────────────────────────────── */
.oc-hybrid-cta {
  background: var(--oc-dark);
  border-radius: var(--oc-r);
  padding: 36px 48px;
}

/* ── Stats bar: tighter, cleaner ─────────────────────────── */
.oc-stats-bar__label { font-weight: 600; color: var(--oc-text); }
.oc-stats-bar__value { color: #9ca3af; font-size: 0.8125rem; }
.oc-stats-bar__item  { min-width: 180px; }

/* ── Responsive: scale down gracefully ────────────────────── */
@media (max-width: 960px) {
  .oro-compare__hero .title--xlarge { font-size: 3rem; letter-spacing: -0.03em; }
  #oro-compare-competitor .title--large { font-size: 2.125rem; letter-spacing: -0.025em; }
  .oc-verdict__headline { font-size: 2.125rem; }

  .oro-compare__hero--competitor { padding: 96px 0 80px; }
  .oro-compare__hero,
  .oro-compare__products,
  .oro-compare__tool-section,
  .oro-compare__family-strip,
  .oro-compare__competitors-section,
  .oro-compare__cta-section,
  .oro-compare__bestfit-section,
  .oro-compare__family-table-section,
  .oro-compare__upgrade-section,
  .oro-compare__quick-answer,
  .oro-compare__table-section,
  .oc-pricing-spotlight,
  .oc-verdict,
  .oc-hybrid-section,
  .oro-compare__by-business { padding: 80px 0; }

  .oc-hybrid-grid { gap: 16px; }
}

@media (max-width: 640px) {
  .oro-compare__hero .title--xlarge { font-size: 2.25rem; letter-spacing: -0.025em; line-height: 1.1; }
  #oro-compare-competitor .title--large { font-size: 1.875rem; }
  .oc-verdict__headline { font-size: 1.875rem; }

  .oro-compare__hero--competitor { padding: 72px 0 64px; }
  .oro-compare__hero,
  .oro-compare__quick-answer,
  .oro-compare__table-section,
  .oc-pricing-spotlight,
  .oc-verdict,
  .oc-hybrid-section { padding: 64px 0; }

  .oc-hero-proof__col  { padding: 20px 12px; }
  .oc-hero-proof__value { font-size: 1.5rem; }
  .oc-hybrid-cta { padding: 28px 24px; }
  .oc-price-card { padding: 32px 24px; }
  .oro-compare__qa-box { padding: 0; background: transparent; border: none; box-shadow: none; }
  .oro-qa-choice--a { margin-bottom: 12px; }

  /* Table: full-width at small sizes */
  .oro-compare__family-table td,
  .oro-compare__competitor-table td { padding: 12px 16px; }
}

/* ============================================================
   PREMIUM REFINEMENT — v2.3
   Target: effortless, smooth, elite
   Four levers: space +18%, text contrast up, table open,
                gold leads hierarchy
   ============================================================ */

/* ── 1. SPACE EVERYWHERE +18% ─────────────────────────────── */

/* Sections: 120px → 144px */
.oro-compare__hero,
.oro-compare__products,
.oro-compare__tool-section,
.oro-compare__family-strip,
.oro-compare__competitors-section,
.oro-compare__cta-section,
.oro-compare__bestfit-section,
.oro-compare__family-table-section,
.oro-compare__upgrade-section,
.oro-compare__quick-answer,
.oro-compare__table-section,
.oc-pricing-spotlight,
.oc-verdict,
.oc-hybrid-section,
.oro-compare__by-business { padding: 144px 0; }

.oro-compare__hero--competitor { padding: 152px 0 128px; }
.oro-compare__cta-section      { padding: 112px 0; }
.oro-compare__related          { padding: 56px 0; }

/* ── 2. HERO — breathing, contrast, smoothness ────────────── */

/* Headline: slightly more open, less compressed */
.oro-compare__hero .title--xlarge {
  line-height:     1.10;
  margin-bottom:   28px;
}

/* Subtitle: much more readable — was nearly invisible */
.oro-compare__hero .subtitle,
.oro-compare__hero .subtitle--large {
  color:           rgba(255,255,255,0.82);
  font-size:       1.0625rem;   /* 17px — slightly up from 16px */
  line-height:     1.78;
  max-width:       580px;
  margin-bottom:   52px;
}

/* More air between subtitle and proof strip */
.oc-hero-proof     { margin-bottom: 52px; }

/* Proof strip: larger numbers, more pad */
.oc-hero-proof__col   { padding: 32px 24px; }
.oc-hero-proof__value {
  font-size:      2.25rem;      /* 36px */
  margin-bottom:  8px;
}
.oc-hero-proof__label { margin-bottom: 10px; }

/* More space between proof strip and CTAs */
.oro-compare__hero-ctas { margin-bottom: 56px !important; }

/* Product panel internal spacing */
.oro-compare__hero-product { padding: 32px 28px; }

/* ── 3. COST SECTION — premium, decisive ─────────────────── */

/* Price number: commanding presence */
.oc-price-card__price {
  font-size:      2.5rem;       /* was 2rem */
  margin-bottom:  16px;
}

.oc-price-card { padding: 44px 40px; }

/* Cost timeline: much more readable */
.oc-cost-years__row > div    { padding: 20px 28px; }
.oc-cost-years__header > div { padding: 16px 28px; }
.oc-cost-years__a,
.oc-cost-years__b  { font-size: 0.9rem; line-height: 1.5; }
.oc-cost-years__period { font-size: 0.875rem; font-weight: 700; }

/* ── 4. CHOICE SECTION — contrast restored ───────────────── */

/* Was fading into background — restore full readability */
.oro-qa-choice ul li {
  color:      #374151;          /* was #6b7280 — much darker */
  font-size:  0.9rem;           /* was 0.8125rem */
  padding:    8px 0 8px 22px;
}

.oro-qa-choice strong {
  font-size:     0.9375rem;     /* 15px */
  margin-bottom: 18px;
}

/* ORO side: assertive, not background blue */
.oro-qa-choice--a {
  background: rgba(76,136,218,0.07);
  border: 1px solid rgba(76,136,218,0.12);
}

/* Competitor side: distinct but clearly secondary */
.oro-qa-choice--b {
  background: rgba(0,0,0,0.025);
  border: 1px solid rgba(0,0,0,0.06);
}
.oro-qa-choice--b ul li { color: #6b7280; }

/* ── 5. TABLE — open it up aggressively ──────────────────── */

/* Row height: the single biggest UX improvement */
.oro-compare__family-table td,
.oro-compare__competitor-table td {
  padding:   18px 32px;         /* was 15px 28px — more vertical space */
  font-size: 0.9rem;            /* was 0.875rem */
  line-height: 1.5;
}

.oro-compare__family-table thead th,
.oro-compare__competitor-table thead th {
  padding:   20px 32px;         /* was 18px 28px */
  font-size: 0.875rem;
  font-weight: 700;
}

.oro-ft-section-row td,
.oro-ct-section-row td {
  padding: 12px 32px;           /* was 10px 24px */
  letter-spacing: 0.15em;
}

/* Key differentiator rows: clearly elevated, not equal to others */
.oro-ct-row-key td {
  background: rgba(244,187,64,0.07) !important;
}
.oro-ct-row-key td.oro-ct-col-label {
  border-left:  4px solid var(--oc-gold);
  padding-left: 28px;           /* compensate for border */
  color:        var(--oc-text) !important;
  font-weight:  700 !important;
  font-size:    0.9rem;
}

/* ORO wins: gold stands taller — slightly larger than surrounding text */
.oro-cell-win {
  font-size:   0.9375rem !important;  /* one step above body — commands attention */
  font-weight: 700 !important;
  color:       var(--oc-gold) !important;
  letter-spacing: -0.01em;
}

/* Competitor negative: clearly out — not harsh, just recessed */
.oro-cell-negative {
  color:       #9ca3af !important;
  font-weight: 400 !important;
}

/* ── 6. HYBRID CARDS — elevated ──────────────────────────── */

.oc-hybrid-card        { padding: 32px; gap: 10px; }
.oc-hybrid-card__title { font-size: 1rem; letter-spacing: -0.01em; }
.oc-hybrid-card__icon  { font-size: 1.75rem; }

/* ── 7. VERDICT — emotional punch ────────────────────────── */

.oc-verdict__wins { gap: 28px; }
.oc-verdict__win  { padding: 32px 28px; }

.oc-verdict__win-title {
  font-size:     1rem;          /* was 0.875rem */
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.oc-verdict__win-body {
  font-size:   0.875rem;        /* was 0.8125rem */
  line-height: 1.65;
  opacity:     0.72;            /* slight fade — secondary to title */
}

/* First win card: singular emphasis — the kill shot */
.oc-verdict__wins .oc-verdict__win:first-child {
  border-top-width: 4px;
}
.oc-verdict__wins .oc-verdict__win:first-child .oc-verdict__win-title {
  font-size: 1.125rem;
  color: var(--oc-gold);
}

/* ── 8. STATS BAR — contrast restored ────────────────────── */

.oc-stats-bar__label { font-size: 0.9rem; }
.oc-stats-bar__value { color: #6b7280; font-size: 0.8125rem; }  /* was #9ca3af */

/* ── 9. RESPONSIVE — scale down gracefully ───────────────── */

@media (max-width: 960px) {
  .oro-compare__hero,
  .oro-compare__products,
  .oro-compare__tool-section,
  .oro-compare__family-strip,
  .oro-compare__competitors-section,
  .oro-compare__cta-section,
  .oro-compare__bestfit-section,
  .oro-compare__family-table-section,
  .oro-compare__upgrade-section,
  .oro-compare__quick-answer,
  .oro-compare__table-section,
  .oc-pricing-spotlight,
  .oc-verdict,
  .oc-hybrid-section,
  .oro-compare__by-business { padding: 96px 0; }

  .oro-compare__hero--competitor { padding: 104px 0 88px; }
  .oc-price-card { padding: 36px 28px; }
  .oc-hybrid-card { padding: 28px 24px; }
  .oc-verdict__win { padding: 28px 24px; }
}

@media (max-width: 640px) {
  .oro-compare__hero,
  .oro-compare__quick-answer,
  .oro-compare__table-section,
  .oc-pricing-spotlight,
  .oc-verdict,
  .oc-hybrid-section { padding: 72px 0; }

  .oro-compare__hero--competitor { padding: 80px 0 64px; }
  .oro-compare__hero .subtitle   { font-size: 1rem; }
  .oc-hero-proof__col  { padding: 20px 14px; }
  .oc-hero-proof__value { font-size: 1.625rem; }
  .oc-price-card { padding: 28px 20px; }
  .oc-price-card__price { font-size: 2rem; }
  .oc-verdict__wins { grid-template-columns: 1fr; gap: 16px; }
  .oc-hybrid-card  { padding: 24px; }
  .oro-compare__family-table td,
  .oro-compare__competitor-table td { padding: 14px 18px; font-size: 0.84rem; }
  .oro-compare__family-table thead th,
  .oro-compare__competitor-table thead th { padding: 14px 18px; }
}

/* ─────────────────────────────────────────
   STORE COST CALCULATOR
   Shows real fee math for a given volume.
───────────────────────────────────────── */
.oc-store-calc {
  margin-top: 48px;
  background: var(--oc-dark);
  border-radius: var(--oc-r);
  padding: 48px 56px;
  color: #fff;
}

.oc-store-calc__header {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.60);
  margin-bottom: 36px;
  font-weight: 400;
  line-height: 1.5;
}
.oc-store-calc__header strong {
  color: #fff;
  font-weight: 700;
}

/* The equation row */
.oc-store-calc__equation {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.oc-store-calc__term {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Big fee numbers */
.oc-store-calc__num {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.88);
}

/* The result total — gold */
.oc-store-calc__num--result {
  color: var(--oc-gold);
  font-size: 3rem;
}

.oc-store-calc__desc {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.42);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  max-width: 140px;
}

.oc-store-calc__term--result .oc-store-calc__desc {
  color: rgba(255,255,255,0.55);
}

.oc-store-calc__op {
  font-size: 1.75rem;
  font-weight: 300;
  color: rgba(255,255,255,0.22);
  line-height: 1;
  flex-shrink: 0;
  padding-bottom: 20px; /* align with number baseline */
}

/* Annual total line */
.oc-store-calc__annual {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.60);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  margin-bottom: 20px;
  line-height: 1.6;
}
.oc-store-calc__annual strong {
  color: var(--oc-gold);
  font-weight: 700;
}
.oc-store-calc__annual em {
  font-style: normal;
  color: rgba(255,255,255,0.42);
}

/* ORO POS footer line */
.oc-store-calc__oro {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  gap: 10px;
}
.oc-store-calc__oro-label {
  display: inline-block;
  background: rgba(76,136,218,0.20);
  color: var(--oc-blue-lt);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 960px) {
  .oc-store-calc { padding: 40px 36px; }
  .oc-store-calc__num { font-size: 2.25rem; }
  .oc-store-calc__num--result { font-size: 2.5rem; }
  .oc-store-calc__equation { gap: 16px; }
}

@media (max-width: 640px) {
  .oc-store-calc { padding: 32px 24px; }
  .oc-store-calc__equation {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .oc-store-calc__op {
    padding-bottom: 0;
    font-size: 1.25rem;
  }
  .oc-store-calc__num { font-size: 2rem; }
  .oc-store-calc__num--result { font-size: 2.25rem; }
  .oc-store-calc__desc { max-width: 100%; }
}
