/* ============================================================
   OSW Difference — verbatim from source .band / .compare-table.
   Q10: mobile layout is a control ([3-column|stacked]); 3-column
   (verbatim source behaviour — 3 cols at .8rem below 560px, since
   the source has no narrower override) is the default.
   ============================================================ */

.ovs-band{background:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(196,131,90,.14),transparent 60%),var(--ovs-bg2);text-align:center;border-top:1px solid var(--ovs-line);border-bottom:1px solid var(--ovs-line)}
.ovs-band-h{font-family:var(--ovs-display);font-weight:400;text-transform:uppercase;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:.015em}
.ovs-band-h .ovs-hl{color:var(--ovs-champ)}
.ovs-band-p{margin:1.3rem auto 0;max-width:58ch;color:var(--ovs-muted);font-size:1.02rem;line-height:1.65}

.ovs-compare-table{margin:3rem auto 0;max-width:880px;overflow:hidden;text-align:left}
.ovs-compare-header,.ovs-compare-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1rem;padding:.95rem 1.4rem;align-items:center}
.ovs-compare-header{background:rgba(255,250,240,.03);font-family:var(--ovs-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ovs-muted)}
.ovs-compare-header div:last-child{color:var(--ovs-champ)}
.ovs-compare-row{border-top:1px solid var(--ovs-line);font-size:.9rem}
.ovs-compare-row .ovs-no{color:var(--ovs-muted)}
.ovs-compare-row .ovs-yes{color:var(--ovs-pine);font-weight:600}

.ovs-band-cta{margin-top:2.4rem;display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap}

/* Source breakpoint — verbatim (this is also the value that persists below
   560px, since the source has no narrower override for the compare table) */
@media(max-width:880px){
  .ovs-compare-header,.ovs-compare-row{grid-template-columns:1.2fr .9fr .9fr;padding:.85rem .9rem;font-size:.8rem}
}

/* Q10 "stacked" mobile-layout option — no source rule, adaptation policy
   applied only when the user explicitly opts in (default stays 3-column). */
@media(max-width:560px){
  .ovs-difference.ovs-mobile-stacked .ovs-compare-header{display:none}
  .ovs-difference.ovs-mobile-stacked .ovs-compare-row{grid-template-columns:1fr;gap:.3rem;padding:.9rem 1rem}
  .ovs-difference.ovs-mobile-stacked .ovs-compare-row > div::before{content:attr(data-label);display:block;font-family:var(--ovs-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ovs-muted);margin-bottom:.15rem}
  .ovs-difference.ovs-mobile-stacked .ovs-compare-row > div:first-child::before{content:none}

  /* Full-width-on-mobile CTA switcher — no source rule (source's .band-cta
     is a wrap-flex row already tight enough on mobile); adaptation policy
     applied only when the control is switched on. */
  .ovs-difference.ovs-cta-full-mobile .ovs-band-cta{flex-direction:column}
  .ovs-difference.ovs-cta-full-mobile .ovs-band-cta .ovs-btn{width:100%;justify-content:center}
}