/* Opti-Behavior Sales Page — Comparison pages
 * Extends sales-page.css. Loaded only on the /compare/ hub + 10 vs-competitor pages.
 * Reuses base classes (.ob, .ob-btn, .ob-table-wrapper, .ob-faq, .ob-feature-cta, lightbox).
 */

/* ============================================================
   Heading contrast fix (dark-on-dark bug on live themes).
   Base sales-page.css sets color:#fff on some headings
   (.ob-showcase h2, .ob-faq h2, .ob-feature-cta h2, .ob-step h3),
   but the compare-only sections below left their h2/h3 to INHERIT
   .ob's #e5e7eb. Inherited color loses to any theme rule that sets
   a *direct* color on the element (e.g. optiuser.com's theme does
   `h2 { color:#1a1a1a }`), so those headings rendered nearly
   invisible on the dark compare background — while looking fine on
   the local theme (which sets no direct h2 color).
   Explicit, section-scoped color (specificity 0,2,1 + !important)
   beats the theme rule everywhere. gradient-text is untouched: it
   uses -webkit-text-fill-color, which overrides `color` regardless.
   ============================================================ */
.ob .ob-compare-verdict h2,
.ob .ob-mini-compare h2,
.ob .ob-mid-cta-inner h2,
.ob .ob-deep-dive-header h2,
.ob .ob-competitor-strengths h2,
.ob .ob-related h2,
.ob .ob-compare-proof h2 {
  color: #f8fafc !important;
}
/* Broad safety net for any remaining compare headings (hub cards,
   future sections) — lower priority, no !important, so intentional
   accents (e.g. gradient-text) still win. */
.ob h2,
.ob h3,
.ob h4 {
  color: #f8fafc;
}
.ob .ob-compare-card h3 {
  color: #f8fafc;
}

/* --- Hub grid --- */
.ob-compare-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  margin: 40px auto;
  max-width: 1120px;
  padding: 0 20px;
}
.ob-compare-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
}
.ob-compare-card:hover {
  transform: translateY(-4px);
  border-color: rgba(16, 185, 129, 0.5);
}
.ob-compare-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
}
.ob-vs-logo {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px;
  box-sizing: border-box;
}
.ob-vs-logo.ob-vs-ob {
  background: rgba(16, 185, 129, 0.12);
  padding: 3px;
}
.ob-vs-sep {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
}
.ob-compare-card h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  line-height: 1.35;
}
.ob-compare-card p {
  margin: 0 0 16px;
  font-size: 0.92rem;
  opacity: 0.75;
  flex: 1;
}
.ob-compare-card .ob-compare-card-cta {
  font-weight: 600;
  color: #10b981;
}

/* --- Verdict / TL;DR box --- */
.ob-compare-verdict {
  max-width: 900px;
  margin: 44px auto;
  padding: 34px 34px 32px;
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(16, 185, 129, 0.1) 0%, transparent 55%),
    rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(16, 185, 129, 0.22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}
.ob-compare-verdict h2 {
  margin: 0 0 22px;
}
/* Option rows: card look, per-option accent, icon badge. */
.ob-compare-verdict ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.ob-compare-verdict li {
  position: relative;
  margin: 0;
  padding: 15px 18px 15px 56px;
  line-height: 1.55;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid rgba(255, 255, 255, 0.2);
}
.ob-compare-verdict li::before {
  position: absolute;
  left: 15px;
  top: 14px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}
/* 1) Competitor option — amber */
.ob-compare-verdict li:nth-child(1) {
  border-left-color: #f59e0b;
}
.ob-compare-verdict li:nth-child(1)::before {
  content: "\25C6"; /* diamond */
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
}
.ob-compare-verdict li:nth-child(1) strong {
  color: #fbbf24;
}
/* 2) Opti-Behavior — green (recommended, emphasised) */
.ob-compare-verdict li:nth-child(2) {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.07);
  border-color: rgba(16, 185, 129, 0.25);
}
.ob-compare-verdict li:nth-child(2)::before {
  content: "\2713"; /* check */
  color: #34d399;
  background: rgba(16, 185, 129, 0.18);
}
.ob-compare-verdict li:nth-child(2) strong {
  color: #34d399;
}
/* 3) Run both — indigo */
.ob-compare-verdict li:nth-child(3) {
  border-left-color: #6366f1;
}
.ob-compare-verdict li:nth-child(3)::before {
  content: "\002B"; /* plus */
  color: #818cf8;
  background: rgba(99, 102, 241, 0.16);
}
.ob-compare-verdict li:nth-child(3) strong {
  color: #818cf8;
}

/* --- Honest competitor strengths --- */
.ob-competitor-strengths {
  max-width: 900px;
  margin: 36px auto;
  padding: 24px 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ob-competitor-strengths h2 {
  margin-top: 0;
}
.ob-competitor-strengths ul {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
}
.ob-competitor-strengths li {
  margin: 7px 0;
  line-height: 1.5;
}

/* --- Pricing disclaimer --- */
.ob-compare-disclaimer {
  max-width: 900px;
  margin: 18px auto 0;
  padding: 0 20px;
  font-size: 0.82rem;
  opacity: 0.6;
  text-align: center;
  font-style: italic;
}

/* --- Related comparisons --- */
.ob-related {
  max-width: 1000px;
  margin: 48px auto;
  padding: 0 20px;
  text-align: center;
}
.ob-related h2 {
  margin-bottom: 20px;
}
.ob-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.ob-related-links a {
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  font-size: 0.9rem;
  transition: border-color 0.18s ease;
}
.ob-related-links a:hover {
  border-color: rgba(16, 185, 129, 0.5);
}

/* --- Screenshot proof grid --- */
.ob-compare-proof {
  max-width: 1080px;
  margin: 40px auto;
  padding: 0 20px;
}
/* 4 items -> balanced 2x2 (no orphan card). Larger, readable screenshots. */
.ob-compare-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  max-width: 900px;
  margin: 28px auto 0;
}
.ob-compare-proof-item {
  display: flex;
  flex-direction: column;
  margin: 0;
}
/* Uniform framing box: fixed aspect ratio, consistent border + shadow + hover lift/zoom. */
.ob-compare-proof-item .ob-lb-trigger {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ob-compare-proof-item .ob-lb-trigger:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.4);
}
.ob-compare-proof-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border: 0;
  border-radius: 0;
  transition: transform 0.5s ease;
}
.ob-compare-proof-item .ob-lb-trigger:hover img {
  transform: scale(1.05);
}
.ob-compare-proof-item figcaption {
  margin-top: 14px;
  font-size: 0.9rem;
  opacity: 0.78;
  text-align: center;
  line-height: 1.5;
}
.ob-compare-proof-item figcaption strong {
  color: #fff;
  opacity: 1;
}
@media (max-width: 760px) {
  .ob-compare-proof-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* --- Feature-comparison table polish (compare pages only) --- */
.ob-mini-compare .ob-table-wrapper {
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.3);
}
/* Highlight the Opti-Behavior column as a green band down the whole table. */
.ob-mini-compare th.ob-col-highlight,
.ob-mini-compare td.ob-col-highlight {
  background: rgba(16, 185, 129, 0.08) !important;
  border-left: 1px solid rgba(16, 185, 129, 0.22) !important;
  border-right: 1px solid rgba(16, 185, 129, 0.22) !important;
  color: #34d399 !important;
  font-weight: 600 !important;
}
.ob-mini-compare thead th.ob-col-highlight {
  background: rgba(16, 185, 129, 0.14) !important;
}
/* Paid / caveat values read as amber; free-price cell green. */
.ob-mini-compare td.ob-val-paid {
  color: #fbbf24 !important;
}
.ob-mini-compare td.ob-price-zero,
.ob-mini-compare .ob-price-zero strong {
  color: #34d399 !important;
}
/* Row hover keeps the highlight column distinct. */
.ob-mini-compare tbody tr:hover td {
  background: rgba(255, 255, 255, 0.045) !important;
}
.ob-mini-compare tbody tr:hover td.ob-col-highlight {
  background: rgba(16, 185, 129, 0.14) !important;
}
.ob-mini-compare tbody tr.ob-row-bold td {
  font-weight: 700 !important;
}

/* --- Honest competitor-strengths list: amber accent markers --- */
.ob-competitor-strengths ul {
  list-style: none;
  padding-left: 0;
}
.ob-competitor-strengths li {
  position: relative;
  padding-left: 26px;
}
.ob-competitor-strengths li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #fbbf24;
  font-weight: 700;
}

/* --- Related-comparison pills: subtle lift on hover --- */
.ob-related-links a {
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.ob-related-links a:hover {
  transform: translateY(-2px);
  background: rgba(16, 185, 129, 0.06);
}

/* ============================================================
   Comparison-table header + yes/no polish (compare pages only).
   Generic — every compare table benefits.
   ============================================================ */

/* Balanced columns: roomy FEATURE col, even brand cols centered. */
.ob-mini-compare th:first-child,
.ob-mini-compare td:first-child {
  width: 44%;
  min-width: 190px;
  text-align: left !important;
}
.ob-mini-compare th:nth-child(2),
.ob-mini-compare td:nth-child(2),
.ob-mini-compare th:nth-child(3),
.ob-mini-compare td:nth-child(3) {
  width: 28%;
  text-align: center !important;
}

/* Never break the "Opti-Behavior" brand across two lines (was OPTI- / BEHAVIOR). */
.ob-mini-compare thead th.ob-col-highlight {
  white-space: nowrap;
}
/* Tighten header letter-spacing so long competitor names still fit one line. */
.ob-mini-compare thead th {
  letter-spacing: 0.02em !important;
  vertical-align: middle !important;
}
.ob-mini-compare td {
  vertical-align: middle !important;
}

/* --- Brand logos in comparison-table column headers (generic) ---
   Each compare template puts its own competitor logo + the Opti icon in the
   <thead> via .ob-th-brand / .ob-th-logo, so every page shows the right pair. */
.ob-mini-compare thead th .ob-th-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* Keep every column-header brand (Opti + competitor) on one line at all
   breakpoints; long competitor names (e.g. "Independent Analytics") otherwise
   wrap under the logo. The header sits in the .ob-table-wrapper scroll region,
   so an over-long name scrolls horizontally instead of wrapping. */
.ob-mini-compare thead th .ob-th-brand {
  white-space: nowrap;
}
.ob-mini-compare thead th .ob-th-logo {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 5px;
  /* Light plate so dark/mono competitor marks stay legible on the dark header. */
  background: rgba(255, 255, 255, 0.92);
  padding: 2px;
  box-sizing: border-box;
}
/* Opti's own icon: green-tinted plate to blend with the highlighted column. */
.ob-mini-compare thead th .ob-th-logo-ob {
  background: rgba(16, 185, 129, 0.16);
  padding: 1px;
}
/* Mobile: shrink logos + gap so headers stay compact and labels readable. */
@media (max-width: 600px) {
  .ob-mini-compare thead th .ob-th-logo {
    width: 18px;
    height: 18px;
  }
  .ob-mini-compare thead th .ob-th-brand {
    gap: 5px;
  }
}

/* Styled yes / no indicators — replace bare "✓" / "✗" text with badges. */
.ob-mini-compare .ob-yes,
.ob-mini-compare .ob-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 8px;
  font-size: 0.82em;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  margin-right: 3px;
}
.ob-mini-compare .ob-yes {
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.38);
}
.ob-mini-compare .ob-no {
  color: #f87171;
  background: rgba(239, 68, 68, 0.13);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.34);
}

/* Narrow mobile: shrink header + keep brand on one line via horizontal scroll. */
@media (max-width: 600px) {
  .ob-mini-compare thead th {
    font-size: 0.8125rem !important;
    padding: 14px 12px !important;
  }
  .ob-mini-compare thead th.ob-col-highlight {
    font-size: 0.85rem !important;
  }
}

/* Row-header cells (<th scope="row">) must read like the old first-column <td>:
   left aligned, normal case, high-contrast body text — not the gray uppercase
   look inherited from column headers. */
.ob-mini-compare tbody th[scope="row"] {
  text-align: left !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #e5e7eb !important;
  padding: 14px 20px !important;
  vertical-align: middle !important;
}
.ob-mini-compare tbody tr:hover th[scope="row"] {
  background: rgba(255, 255, 255, 0.045) !important;
}

/* Visually-hidden helper for accessible <caption>/labels (kept in the a11y tree). */
.ob-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard-focusable scroll region for the responsive table. */
.ob-mini-compare .ob-table-wrapper:focus-visible {
  outline: 2px solid rgba(16, 185, 129, 0.6);
  outline-offset: 2px;
}

/* Hero lead sentence — GEO/AI answer-extraction line directly under the H1. */
.ob-feature-hero .ob-hero-lead {
  max-width: 760px;
  margin: 0 auto 18px;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #e5e7eb;
}
.ob-feature-hero .ob-hero-lead strong {
  color: #34d399;
}

/* Trust strip directly under the hero CTAs. */
.ob-compare-trust {
  margin: 0;
}

/* Clarifying lead sentence above the comparison table. */
.ob-mini-compare .ob-compare-lead {
  max-width: 760px;
  margin: 0 auto 22px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: #cbd5e1;
}

/* Mid-page CTA block after the comparison table. */
.ob-mid-cta {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}
.ob-mid-cta-inner {
  padding: 34px 30px;
  border-radius: 20px;
  text-align: center;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 55%),
    rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
.ob-mid-cta-inner h2 {
  margin: 0 0 10px;
}
.ob-mid-cta-inner p {
  margin: 0 auto 22px;
  max-width: 620px;
  color: #cbd5e1;
  line-height: 1.6;
}
.ob-mid-cta-inner .ob-cta-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   Feature-showcase rows (split text + screenshot) — compare pages.
   Fixes 3 problems seen on the vs-competitor pages:
     1) screenshots rendered at raw natural size -> huge, wildly
        inconsistent heights (tall portraits dwarfed wide ones);
     2) empty text column beside a giant media column -> whitespace
        imbalance and ugly vertical gaps;
     3) no uniform framing -> every screenshot a different size.
   Generic: applies to EVERY .ob-showcase on EVERY compare page,
   because compare-page.css only loads on the /compare/ pages.
   ============================================================ */

/* Real 2-col grid. Text ~46%, media ~54%. `align-items:center`
   vertically centers the copy against the framed screenshot, so a
   short text block no longer leaves a tall empty column. */
.ob-showcase .ob-showcase-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}

/* Alternation: reversed rows put the screenshot on the LEFT.
   (Overrides the base flex `row-reverse`, which is inert once the
   inner is a grid.) */
.ob-showcase-reverse .ob-showcase-inner {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}
.ob-showcase-reverse .ob-showcase-media {
  order: -1;
}

/* Premium, uniform browser-mockup frame around the screenshot. */
.ob-showcase .ob-showcase-media .ob-browser-frame {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

/* Fixed-ratio media window: every screenshot renders at the SAME
   size regardless of its source dimensions. 16/9 keeps wide
   dashboards nearly full-width while portrait captures (Smart
   Insights, Scheduled Reports) are top-anchored so their titles and
   key metrics stay visible instead of towering over the row.
   aspect-ratio + object-fit keeps layout stable (no CLS). */
.ob-showcase .ob-showcase-media .ob-browser-frame .ob-lb-trigger {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d1117;
}
.ob-showcase .ob-showcase-media .ob-browser-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 0;
}

/* Tablet: tighten the gutter, slightly shorter media window. */
@media (max-width: 1024px) {
  .ob-showcase .ob-showcase-inner,
  .ob-showcase-reverse .ob-showcase-inner {
    gap: 40px;
  }
}

/* Mobile: stack to a single column with the screenshot BELOW its
   copy (good reading order), and cancel the left/right alternation. */
@media (max-width: 768px) {
  .ob-showcase .ob-showcase-inner,
  .ob-showcase-reverse .ob-showcase-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ob-showcase-reverse .ob-showcase-media {
    order: 0;
  }
}