/* styles-modern.css — OIC Landing Page 2026 modernisation overrides */
/* Used by index2.html only. Loaded after styles.css. Do not modify styles.css. */
/* v057: deeper modernisation — bigger radius, layered shadows, zebra sections, */
/*       tighter headlines, stronger CTA glow, frosted nav, hover lifts. */
/* v058: darker background ink (#080808) for nav/footer/dark sections. */
/*       text-ink (font colour) stays at #1A1A18. */

/* ─────────────────────────────────────────────────────────────
   v058 — Dark background override
   Tailwind .bg-ink uses #1A1A18. We deepen it to #080808 for nav,
   footer, authority section, and any solid black panels.
   .text-ink (font colour) is NOT affected.
   ───────────────────────────────────────────────────────────── */
.bg-ink {
  background-color: #080808 !important;
}

/* ─────────────────────────────────────────────────────────────
   v060 — VSL video tile: rounded corners + clip child media.
   When a real <video>, <iframe> (YouTube/Vimeo/Wistia/etc.) is
   embedded inside .vsl-tile, the parent's overflow:hidden + radius
   clips it to the same corner radius as other cards on the page.
   ───────────────────────────────────────────────────────────── */
.vsl-tile {
  border-radius: 12px;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   1. Cards — bigger radius (12px) + layered shadow
   ───────────────────────────────────────────────────────────── */
.bg-white.border.border-rule {
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(26,26,24,0.04),
    0 12px 32px -8px rgba(26,26,24,0.08);
  border-color: rgba(212,208,200,0.5) !important;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bg-white.border.border-rule:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(26,26,24,0.05),
    0 18px 40px -10px rgba(26,26,24,0.12);
}

/* Linen-background border cards (narrative cards, bio panels): radius only */
.bg-linen.border.border-rule {
  border-radius: 12px;
}

/* Lens cards (border-t-4 variant): radius + shadow + hover */
.bg-white.border-t-4.border-oicred {
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(26,26,24,0.04),
    0 8px 24px -6px rgba(26,26,24,0.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bg-white.border-t-4.border-oicred:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(26,26,24,0.05),
    0 14px 32px -8px rgba(26,26,24,0.12);
}

/* Pain narrative cards */
#pain-narratives .border.border-rule {
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(26,26,24,0.04),
    0 8px 24px -6px rgba(26,26,24,0.08);
}

/* Case study outer box */
#case-study .border-dashed {
  border-radius: 12px;
}

/* Authority image frame */
#authority .aspect-\[4\/5\] {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Lead magnet ebook cover */
#playbook .aspect-\[3\/4\] {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
}

/* Modals — slightly larger radius than cards */
#booking-modal .relative.bg-linen.border.border-rule,
#playbook-modal .relative.bg-linen.border.border-rule {
  border-radius: 16px;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   2. Section rhythm — alternate cream linen and pure white
   Cream (unchanged): hero, is-this-for-you, how-it-works, case-study, playbook
   Pure white:        pain-stack, pain-narratives, founders, faq
   Natural breaks:    authority (bg-ink), final-cta (bg-oicred)
   ───────────────────────────────────────────────────────────── */
#pain-stack,
#pain-narratives,
#founders,
#faq {
  background-color: #FFFFFF !important;
}

/* ─────────────────────────────────────────────────────────────
   3. Typography — tighter, more intentional headline tracking
   ───────────────────────────────────────────────────────────── */
h1, h2 {
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h3 {
  letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────────────────────────
   4. Section heading dividers — gradient fade
   ───────────────────────────────────────────────────────────── */
.w-16.h-1.bg-oicred {
  background: linear-gradient(to right, #007c41, rgba(0,124,65,0)) !important;
  height: 3px !important;
}

/* ─────────────────────────────────────────────────────────────
   5. Pain-stack blockquotes — wash + accent left border
   ───────────────────────────────────────────────────────────── */
#pain-stack blockquote {
  background: linear-gradient(to right, rgba(0,124,65,0.05), rgba(0,124,65,0.01)) !important;
  border-left: 3px solid #007c41 !important;
  border-radius: 0 8px 8px 0;
}

/* ─────────────────────────────────────────────────────────────
   6. CTA buttons — stronger green glow, inner highlight, hover lift
   ───────────────────────────────────────────────────────────── */
.cta-btn {
  box-shadow: 0 4px 14px rgba(0,124,65,0.25) !important;
  transition: all 0.2s ease !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.05)) !important;
}
.cta-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 28px rgba(0,124,65,0.35) !important;
}
.cta-btn:active {
  transform: scale(0.98) translateY(0) !important;
  box-shadow: 0 2px 6px rgba(0,124,65,0.18) !important;
}

/* ─────────────────────────────────────────────────────────────
   7. Value callout box — diagonal gradient (still OIC green)
   ───────────────────────────────────────────────────────────── */
.border-2.border-oicred.bg-oicred {
  background: linear-gradient(145deg, #007c41 0%, #005d30 60%, #004020 100%) !important;
  border: none !important;
  border-radius: 12px;
}

/* ─────────────────────────────────────────────────────────────
   8. Sticky nav — solid background
   ───────────────────────────────────────────────────────────── */
#site-nav {
  background-color: #080808 !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.4);
}

/* ─────────────────────────────────────────────────────────────
   9. Accordion + FAQ icons — enclosed in a circle
   (kept as text "+" because script.js sets textContent on toggle)
   ───────────────────────────────────────────────────────────── */
.accordion-icon,
.faq-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid currentColor !important;
  font-size: 15px !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.accordion-item {
  border-radius: 8px;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   10. "Is This For You" panel tints
   ───────────────────────────────────────────────────────────── */
.not-for-you-panel { background-color: rgba(220,38,38,0.025) !important; }
.is-for-you-panel  { background-color: rgba(0,124,65,0.025) !important; }

/* ─────────────────────────────────────────────────────────────
   11. FAQ trigger hover
   ───────────────────────────────────────────────────────────── */
.faq-trigger:hover > span:first-child {
  color: #007c41;
  transition: color 0.15s;
}

/* ─────────────────────────────────────────────────────────────
   12. Final CTA — radial highlight
   ───────────────────────────────────────────────────────────── */
#final-cta {
  background: radial-gradient(ellipse at 50% 0%, #008a49 0%, #007c41 55%);
}

/* ─────────────────────────────────────────────────────────────
   13. Scroll-margin so sticky nav doesn't cover anchor jumps
   ───────────────────────────────────────────────────────────── */
section[id] {
  scroll-margin-top: 80px;
}


/* ═════════════════════════════════════════════════════════════
   v071 — Design modernisation pass (Bräunig-inspired premium feel)
   Brand colours unchanged. Typography unchanged. Layout/copy unchanged.
   Surface treatment only: sentence-case CTAs/labels, calmer shadows,
   borderless white cards, pruned accent bars, premium comparison
   sections with circular ✓/× markers and backdrop tints, cleaner
   proof bar. All rules below are additive and independently revertable.
   ═════════════════════════════════════════════════════════════ */

/* v071-A1, A2 — CTA tone: sentence case, calmer shadow ----------- */
.cta-btn {
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 9999px;
  box-shadow:
    0 1px 2px rgba(26,26,24,0.06),
    0 8px 20px -8px rgba(0,124,65,0.18) !important;
  background-image: none !important;
}
.cta-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 2px 4px rgba(26,26,24,0.08),
    0 14px 28px -10px rgba(0,124,65,0.30) !important;
}
.cta-btn:active {
  transform: scale(0.98) translateY(0) !important;
  box-shadow:
    0 1px 2px rgba(26,26,24,0.06),
    0 4px 10px -4px rgba(0,124,65,0.18) !important;
}

/* v071-B1 — Sentence-case eyebrow, accordion, FAQ, label rails ---- */
.accordion-trigger > span,
.faq-trigger > span:first-child,
.accordion-item .font-display.font-semibold,
.accordion-item .font-display.font-bold {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Section 3B comparison rails */
#self-guided-vs-clovia .uppercase,
#self-guided-vs-clovia .tracking-widest {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Section 3A column labels */
#is-this-for-you .not-for-you-panel .uppercase,
#is-this-for-you .is-for-you-panel .uppercase {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Lens cards "Site / Constraints / Opportunity / Pricing / Buyer" */
#how-it-works .border-t-4.border-oicred .uppercase {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 0.85rem;
  color: #007c41;
}
/* Founder role labels */
#founders .uppercase.tracking-widest {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Keep UPPERCASE on the case-study eyebrow only — earns its tag role */
#case-study .uppercase.tracking-widest {
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
}

/* v071-B2 — Borderless white cards ------------------------------- */
.bg-white.border.border-rule {
  border-color: transparent !important;
}

/* v071-B3 — Prune the green underline bars ----------------------- */
#self-guided-vs-clovia .w-16.h-1.bg-oicred,
#is-this-for-you .w-16.h-1.bg-oicred,
#how-it-works .w-16.h-1.bg-oicred,
#founders .w-16.h-1.bg-oicred,
#case-study .w-16.h-1.bg-oicred,
#faq .w-16.h-1.bg-oicred {
  display: none !important;
}

/* v071-C — Hero proof bar spacing (v085: rule removed — spacing now
   controlled by sub-section padding in index.html) */

/* v071-D — Comparison section showpiece (Section 3A + 3B) -------- */

/* Circular markers (used in both 3A and 3B) */
.marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 9999px;
}
.marker svg { width: 14px; height: 14px; }
/* Filled green ✓ */
.marker-check {
  background-color: #007c41;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0,124,65,0.25);
}
/* Outlined red × (Section 3A "not for you") */
.marker-x--red {
  background-color: rgba(220,38,38,0.10);
  color: #DC2626;
  border: 1.5px solid rgba(220,38,38,0.45);
}
/* Outlined slate × (Section 3B "alone" — calmer, not alarmist) */
.marker-x--slate {
  background-color: rgba(107,107,101,0.12);
  color: #4B4B47;
  border: 1.5px solid rgba(107,107,101,0.35);
}

/* Section 3A — bump the panel tints so they actually read */
.not-for-you-panel { background-color: rgba(220,38,38,0.05) !important; }
.is-for-you-panel  { background-color: rgba(0,124,65,0.05)  !important; }

/* Section 3B + 3A — comparison cards with backdrop tints.
   v072 — flex column so the .compare-result block aligns to the
   bottom of each card across the row regardless of content height. */
.compare-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(26,26,24,0.04),
    0 12px 32px -8px rgba(26,26,24,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.compare-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(26,26,24,0.05),
    0 18px 40px -10px rgba(26,26,24,0.12);
}
.compare-card--alone {
  background-color: #F5F4F0;
}
/* v075 — Right "preferred path" card: black panel with white text.
   Different from the brand-green CTA directly below the section so
   the two saturated blocks don't compete. Brand-green threads
   through via the markers, label, and gives the card OIC's accent
   without colour-clashing with the CTA. */
.compare-card--clovia {
  background-color: #080808;
  border: none !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.10),
    0 18px 44px -10px rgba(0,0,0,0.30) !important;
}
.compare-card--clovia:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.14),
    0 24px 52px -10px rgba(0,0,0,0.40) !important;
}
.compare-card--clovia,
.compare-card--clovia p,
.compare-card--clovia span,
.compare-card--clovia li {
  color: #FFFFFF !important;
}
.compare-card--clovia .text-oicred {
  color: #007c41 !important;
}

/* v072 — Result block: pushed to the bottom by mt-auto, separated
   by a hairline rule, larger conclusion text. Aligns across both
   cards because both cards stretch to the same grid row height. */
.compare-result {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(26,26,24,0.10);
}
.compare-card--clovia .compare-result {
  border-top-color: rgba(255,255,255,0.18) !important;
}

/* v075 — Big "=" operator that replaces the "Result" eyebrow on
   both cards. Reframes the comparison as a formula: behaviours = outcome. */
.compare-result__equals {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 900;
  font-size: 3.25rem;
  line-height: 0.9;
  margin-bottom: 0.5rem;
  letter-spacing: -0.04em;
}
@media (min-width: 768px) {
  .compare-result__equals { font-size: 4rem; }
}
.compare-card--alone .compare-result__equals { color: #6B6B65; }
.compare-card--clovia .compare-result__equals { color: #FFFFFF; }

/* v071-E — Step-card icon removal handled in markup; rebalance */
#how-it-works .grid > .bg-white.border.border-rule {
  /* nothing to add — the markup change already cleans the layout */
}

/* v071 — Soften FAQ row borders to match the lighter card surface */
#faq .faq-item {
  border-color: rgba(212,208,200,0.55);
}

/* v071 — Dark CTA button (Final CTA + Lead Magnet) keeps neutral shadow */
#final-cta .cta-btn,
#playbook .cta-btn {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.15),
    0 8px 20px -8px rgba(0,0,0,0.30) !important;
}
#final-cta .cta-btn:hover,
#playbook .cta-btn:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.18),
    0 14px 28px -10px rgba(0,0,0,0.40) !important;
}

/* v071 — Section 6 value card: keep its loud green look but match
   the new calmer button shadow on its inverted CTA */
.border-2.border-oicred.bg-oicred .cta-btn,
[style*="linear-gradient(145deg"] .cta-btn {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.10),
    0 8px 20px -8px rgba(0,0,0,0.20) !important;
}