/* ============================================================================
 * Odahl — Marketing components
 * Hero variants, testimonials, FAQ, feature grid, CTA blocks, trust marks,
 * pricing-comparison rows. The patterns marketing pages need.
 * Requires tokens.css.
 * ============================================================================ */

/* ── Hero: headline + lede + actions, full-bleed editorial ─────────── */
.odahl-hero {
  padding: var(--gap-xxl) var(--gap-lg) var(--gap-xl);
  max-width: 980px; margin: 0 auto; text-align: center;
}
.odahl-hero-eyebrow {
  font-family: var(--display); font-style: italic; font-size: 1rem;
  color: var(--ink-mute); letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
}
.odahl-hero-headline {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  letter-spacing: -0.03em; line-height: 1.02;
  margin-bottom: 1.5rem; color: var(--ink);
}
.odahl-hero-headline em {
  font-style: italic; font-weight: 300;
  color: var(--aether-deep);
}
.odahl-hero-lede {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--ink-soft); max-width: 60ch;
  margin: 0 auto 2.2rem; line-height: 1.45;
}
.odahl-hero-actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
.odahl-hero-stat-row {
  display: flex; gap: var(--gap-lg); justify-content: center;
  margin-top: var(--gap-xl); flex-wrap: wrap;
  padding-top: var(--gap-lg); border-top: 1px solid var(--seam);
}
.odahl-hero-stat {
  text-align: center; padding: 0 1rem;
}
.odahl-hero-stat-value {
  font-family: var(--mono); font-size: 1.6rem;
  color: var(--ink); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.odahl-hero-stat-label {
  font-family: var(--display); font-style: italic; font-size: 0.85rem;
  color: var(--ink-mute); margin-top: 0.4rem;
}

/* ── Hero variant: split (text left, visual right) ─────────────────── */
.odahl-hero-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl);
  padding: var(--gap-xl) var(--gap-lg);
  max-width: 1200px; margin: 0 auto; align-items: center;
}
.odahl-hero-split .odahl-hero { text-align: left; padding: 0; max-width: none; }
.odahl-hero-split .odahl-hero-actions { justify-content: flex-start; }
.odahl-hero-split-visual {
  border: 1px solid var(--seam); background: var(--bone-warm);
  padding: var(--gap-lg); min-height: 400px;
}
@media (max-width: 768px) {
  .odahl-hero-split { grid-template-columns: 1fr; }
  .odahl-hero-split .odahl-hero { text-align: center; }
  .odahl-hero-split .odahl-hero-actions { justify-content: center; }
}

/* ── Section eyebrow + heading pattern ─────────────────────────────── */
.odahl-section {
  padding: var(--gap-xxl) var(--gap-lg);
  max-width: 1200px; margin: 0 auto;
}
.odahl-section-header { text-align: center; margin-bottom: var(--gap-lg); }
.odahl-section-eyebrow {
  font-family: var(--display); font-style: italic;
  font-size: 0.95rem; color: var(--ink-mute);
  letter-spacing: 0.04em; margin-bottom: 0.6rem;
}
.odahl-section-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -0.025em; line-height: 1.1;
}
.odahl-section-title em { font-style: italic; color: var(--aether-deep); }
.odahl-section-lede {
  font-family: var(--display); font-style: italic;
  font-size: 1.1rem; color: var(--ink-soft);
  max-width: 60ch; margin: 1rem auto 0; line-height: 1.5;
}

/* ── Feature grid (3-col, icon + title + body) ─────────────────────── */
.odahl-features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap-lg); margin-top: var(--gap-lg);
}
.odahl-feature {
  padding: var(--gap); border-top: 1px solid var(--seam);
}
.odahl-feature-icon {
  width: 32px; height: 32px; color: var(--aether-deep);
  margin-bottom: 1rem;
}
.odahl-feature-title {
  font-family: var(--display); font-weight: 500; font-size: 1.2rem;
  letter-spacing: -0.018em; margin-bottom: 0.6rem;
}
.odahl-feature-title em { font-style: italic; color: var(--aether-deep); }
.odahl-feature-body {
  font-family: var(--body); font-size: var(--type-body-sm);
  color: var(--ink-soft); line-height: 1.6;
}

/* ── Testimonial card ──────────────────────────────────────────────── */
.odahl-testimonial {
  background: var(--bone-warm); border: 1px solid var(--seam);
  padding: var(--gap-lg);
  display: flex; flex-direction: column; gap: 1.2rem;
}
.odahl-testimonial-quote {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: 1.3rem; line-height: 1.4; color: var(--ink);
}
.odahl-testimonial-quote::before { content: '— '; color: var(--aether-deep); }
.odahl-testimonial-cite {
  display: flex; align-items: center; gap: 0.8rem;
  padding-top: 1rem; border-top: 1px solid var(--seam);
}
.odahl-testimonial-name {
  font-family: var(--display); font-style: italic;
  font-size: 0.95rem; color: var(--ink); line-height: 1.2;
}
.odahl-testimonial-role {
  font-family: var(--body); font-size: 0.78rem;
  color: var(--ink-mute);
}

/* ── FAQ accordion (uses .odahl-detail from media.css with extra style) */
.odahl-faq {
  max-width: 760px; margin: 0 auto;
}
.odahl-faq details {
  border: 0; border-bottom: 1px solid var(--seam);
  background: transparent; margin-bottom: 0;
}
.odahl-faq details:last-child { border-bottom: 0; }
.odahl-faq summary {
  padding: var(--gap) 0;
  font-family: var(--display); font-size: 1.2rem;
  font-weight: 500; color: var(--ink);
}
.odahl-faq summary:hover { background: transparent; color: var(--aether-deep); }
.odahl-faq-body {
  padding-bottom: var(--gap); border-top: 0;
  font-family: var(--body); font-size: var(--type-body);
  color: var(--ink-soft); line-height: 1.65;
}

/* ── CTA block: large prompt to act ────────────────────────────────── */
.odahl-cta {
  background: var(--ink); color: var(--bone);
  padding: var(--gap-xl) var(--gap-lg);
  text-align: center;
}
.odahl-cta-heading {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.025em; line-height: 1.1;
  margin-bottom: 1rem;
}
.odahl-cta-heading em { font-style: italic; color: var(--aether); }
.odahl-cta-lede {
  font-family: var(--display); font-style: italic;
  font-size: 1.15rem; color: var(--bone-deep); opacity: 0.85;
  max-width: 50ch; margin: 0 auto 2rem; line-height: 1.45;
}
.odahl-cta .odahl-btn-primary {
  background: var(--bone); color: var(--ink); border-color: var(--bone);
}
.odahl-cta .odahl-btn-primary:hover { background: var(--bone-warm); border-color: var(--bone-warm); }

/* ── Trust strip: logos / mentions row ─────────────────────────────── */
.odahl-trust-strip {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: var(--gap-lg);
  padding: var(--gap-lg) 0;
  opacity: 0.65;
}
.odahl-trust-strip-eyebrow {
  font-family: var(--display); font-style: italic;
  font-size: 0.85rem; color: var(--ink-mute);
  letter-spacing: 0.04em; width: 100%; text-align: center;
  margin-bottom: 0.5rem;
}
.odahl-trust-strip img, .odahl-trust-strip svg {
  height: 24px; opacity: 0.7;
}

/* ── Pricing compare row (full feature comparison table) ────────────── */
.odahl-pricing-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--body); font-size: var(--type-body-sm);
}
.odahl-pricing-table th, .odahl-pricing-table td {
  padding: 0.8rem 1rem; text-align: left;
  border-bottom: 1px solid var(--seam);
}
.odahl-pricing-table thead th {
  font-family: var(--display); font-style: italic;
  font-size: 1rem; color: var(--ink); font-weight: 500;
  letter-spacing: -0.018em; padding-bottom: 1.2rem;
  border-bottom: 1.5px solid var(--aether-deep);
}
.odahl-pricing-table thead th[data-tier="featured"] {
  background: var(--aether-trace);
}
.odahl-pricing-table tbody th {
  font-family: var(--display); font-style: italic; font-weight: 400;
  color: var(--ink-soft);
}
.odahl-pricing-table .check { color: var(--ash-deep); font-weight: 500; }
.odahl-pricing-table .miss  { color: var(--ink-mute); opacity: 0.5; }
.odahl-pricing-table .featured-col { background: var(--aether-trace); }

/* ── Newsletter signup (inline form variant) ───────────────────────── */
.odahl-newsletter {
  display: flex; gap: 0; max-width: 480px; margin: 0 auto;
}
.odahl-newsletter input {
  flex: 1; padding: 0.8rem 1rem;
  border: 1px solid var(--seam); border-right: 0;
  background: var(--bone); font-family: var(--body); font-size: 0.95rem;
  color: var(--ink); outline: none;
}
.odahl-newsletter input:focus { border-color: var(--aether-deep); background: var(--bone-warm); }
.odahl-newsletter button {
  padding: 0.8rem 1.4rem; border: 1px solid var(--ink);
  background: var(--ink); color: var(--bone); cursor: pointer;
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: 0.95rem;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .odahl-feature, .odahl-testimonial, .odahl-newsletter input { transition: none; }
}