/* OIC Landing Page — v007 (two-layer skim/depth restructure) */

html { scroll-behavior: smooth; }

.cta-btn { border-radius: 9999px; }
.cta-btn:active { transform: scale(0.98); }

.narrative-anchor {
  pointer-events: none;
  z-index: 0;
  line-height: 1;
}

.step-card {
  border-top: 2px solid #D4D0C8;
  padding-top: 1.5rem;
}

.faq-answer { overflow: hidden; }

.accordion-panel { overflow: hidden; }
.accordion-trigger { cursor: pointer; }

/* Booking modal */
body.booking-open { overflow: hidden; }
.booking-modal__dialog { -webkit-overflow-scrolling: touch; }
@media (min-width: 768px) {
  .booking-modal__dialog { padding-top: 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pulse-dot { animation: pulse 2s ease-in-out infinite; }

a:focus-visible, button:focus-visible {
  outline: 2px solid #007c41;
  outline-offset: 3px;
}

.price-strike {
  text-decoration: line-through;
  text-decoration-color: #DC2626;
  text-decoration-thickness: 0.12em;
}

/* Width override — max-w-3xl widened to 66rem so inner paragraphs keep a
   comfortable reading-line length inside 72rem section containers.
   !important is required because Tailwind CDN injects its utility styles
   after styles.css loads, so its 48rem default would otherwise win.
   (v045 removed the max-w-4xl override: all section containers now use
   max-w-6xl, so max-w-4xl is no longer used anywhere on the page.) */
.max-w-3xl { max-width: 66rem !important; }

/* Video/VSL tile — fixed 16:9 aspect ratio */
.vsl-tile {
  aspect-ratio: 16 / 9;
  min-height: 120px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse-dot { animation: none; }
  .cta-btn:active { transform: none; }
}

/* v085 — Hero V5: vertical green accent bar above each proof stat */
.hero-stat-bar {
  width: 4px;
  height: 32px;
  background: #007c41;
  border-radius: 2px;
  margin: 0 auto 32px;
}
@media (max-width: 640px) {
  .hero-stat-bar { height: 24px; margin-bottom: 16px; }
}

/* v085 — Hero V5: labelled body-copy cards */
.hero-copy-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #ECEAE4;
}