/* Nozomi Sales Page Visual Enhancements
   Medium-style readability + sales page polish
   ============================================= */

/* =============================================
   GOOGLE FONT IMPORT — Serif for body prose
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&display=swap');

/* =============================================
   0. LIGHT MODE — clean whites and true blacks
   ============================================= */
[data-theme="light"] {
  --bg-primary: #fff !important;
  --bg-secondary: #f9f9f9 !important;
  --bg-card: #fff !important;
  --text-secondary: rgba(0,0,0,0.84) !important;
  --text-tertiary: rgba(0,0,0,0.54) !important;
  --border-subtle: rgba(0,0,0,0.08) !important;
  --border-medium: rgba(0,0,0,0.15) !important;
}
[data-theme="light"] .prose p {
  color: rgba(0,0,0,0.84) !important;
}
[data-theme="light"] .prose p.dim {
  color: rgba(0,0,0,0.54) !important;
}
[data-theme="light"] .prose p.highlight {
  color: #000 !important;
}
[data-theme="light"] .prose p strong {
  color: #000 !important;
}
[data-theme="light"] .deliverable-card-v2 p,
[data-theme="light"] .deliverable-card p,
[data-theme="light"] .example-block p,
[data-theme="light"] .timeline-card p,
[data-theme="light"] .cost-timeline .month p,
[data-theme="light"] .faq-a p,
[data-theme="light"] .for-card li,
[data-theme="light"] .pricing-box li {
  color: rgba(0,0,0,0.84) !important;
}
[data-theme="light"] .section-label {
  color: rgba(0,0,0,0.54) !important;
}
[data-theme="light"] .gtm-hero .subtitle,
[data-theme="light"] .final-cta p {
  color: rgba(0,0,0,0.68) !important;
}
[data-theme="light"] .section-heading {
  color: #000 !important;
}
[data-theme="light"] .pull-quote {
  color: #000 !important;
}

/* Dark mode prose — also bump readability */
[data-theme="dark"] .prose p {
  color: rgba(255,255,255,0.75) !important;
}
[data-theme="dark"] .prose p.highlight {
  color: #fff !important;
}

/* =============================================
   1. TYPOGRAPHY — Serif body, Medium-style sizing
   ============================================= */

/* Serif font for all long-form prose */
.prose p,
.prose .list-item,
.example-block p,
.faq-a p {
  font-family: 'Source Serif 4', 'Georgia', 'Times New Roman', serif !important;
}

/* Larger body text — 20px like Medium */
.prose p {
  font-size: 20px !important;
  line-height: 1.8 !important;
  margin-bottom: 28px !important;
  letter-spacing: -0.003em;
  word-spacing: 0.01em;
}

/* Highlight text — bolder, slightly larger */
.prose p.highlight {
  font-size: 22px !important;
  line-height: 1.52 !important;
  margin-top: 4px;
  margin-bottom: 32px;
  letter-spacing: -0.01em;
  font-weight: 700;
  font-family: var(--font-display) !important;
}

/* Dim text */
.prose p.dim {
  font-size: 18px !important;
}

/* List items — match prose sizing */
.prose .list-item {
  font-size: 20px !important;
  line-height: 1.8 !important;
  margin-bottom: 28px !important;
}

/* Strong text inside prose */
.prose p strong {
  font-weight: 700;
}

/* =============================================
   2. CONTAINER — Narrower for reading (680px)
   ============================================= */
.container {
  max-width: 680px !important;
}

/* Keep wide container for cards, grids, logos */
.container-wide {
  max-width: 1100px;
}

/* =============================================
   3. CONTENT FRAME — Remove dashed borders on prose,
      keep only on card/grid sections
   ============================================= */
.container {
  border-left: none !important;
  border-right: none !important;
}
.container-wide {
  border-left: 1px dashed var(--border-subtle);
  border-right: 1px dashed var(--border-subtle);
}
/* Always remove on these */
.gtm-hero .container,
.gtm-hero .container-wide,
.hero-carousel,
.final-cta .container,
.final-cta .container-wide,
.footer-mini .container,
.nav .nav-inner {
  border-left: none !important;
  border-right: none !important;
}

/* =============================================
   4. SECTION SPACING
   ============================================= */
.lf-section {
  padding: 64px 0 !important;
}
.lf-section + .lf-section {
  border-top: none;
}

/* Alternating backgrounds — very subtle */
.lf-section:nth-child(even of .lf-section) {
  background: var(--bg-secondary);
}
.section-alt {
  background: var(--bg-secondary);
}

/* =============================================
   5. SECTION HEADINGS
   ============================================= */
.section-heading {
  font-size: clamp(26px, 3.5vw, 38px) !important;
  margin-bottom: 40px !important;
}
.section-label {
  font-size: 12px !important;
  letter-spacing: 4px !important;
  margin-bottom: 12px !important;
  opacity: 0.7;
}

/* =============================================
   6. PULL QUOTES — Serif, dramatic
   ============================================= */
.pull-quote {
  font-family: 'Source Serif 4', 'Georgia', serif !important;
  font-size: clamp(24px, 3.5vw, 36px) !important;
  font-weight: 600;
  font-style: italic;
  margin: 56px auto !important;
  padding: 48px 0 !important;
  line-height: 1.35 !important;
}
.pull-quote::before,
.pull-quote::after {
  width: 60px !important;
  height: 1px;
  background: var(--border-medium) !important;
}

/* =============================================
   7. DOT DIVIDERS
   ============================================= */
.dot-divider {
  padding: 20px 0 !important;
  font-size: 20px !important;
  letter-spacing: 20px !important;
}

/* =============================================
   8. SPACERS — thin rules
   ============================================= */
.prose .spacer {
  height: 1px !important;
  margin: 36px 0 !important;
  background: var(--border-subtle);
}

/* =============================================
   9. CARDS — cleaner, less aggressive hover
   ============================================= */
.deliverable-card-v2,
.example-block,
.cost-item,
.pricing-box,
.for-card,
.timeline-card,
.cost-timeline .month {
  border-color: var(--border-medium) !important;
}
.deliverable-card-v2:hover,
.example-block:hover,
.cost-item:hover,
.timeline-card:hover,
.cost-timeline .month:hover {
  border-color: var(--text-tertiary) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
  transform: translateY(-3px);
}
[data-theme="light"] .deliverable-card-v2:hover,
[data-theme="light"] .example-block:hover,
[data-theme="light"] .cost-item:hover,
[data-theme="light"] .timeline-card:hover,
[data-theme="light"] .cost-timeline .month:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
}

/* Card body text — serif */
.deliverable-card-v2 p,
.deliverable-card p,
.example-block p,
.timeline-card p,
.cost-timeline .month p {
  font-family: 'Source Serif 4', 'Georgia', serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* =============================================
   10. MID-CTA
   ============================================= */
.mid-cta {
  padding: 44px 0 !important;
  margin: 12px 0 !important;
}

/* =============================================
   11. PRICING BOX
   ============================================= */
.pricing-box {
  border-width: 2px !important;
  padding: 64px 48px !important;
}
.pricing-box h3 {
  font-size: 30px !important;
}
.pricing-box li {
  font-family: 'Source Serif 4', 'Georgia', serif !important;
}

/* =============================================
   12. TEAM PHOTOS
   ============================================= */
.team-photos {
  margin: 48px 0 40px !important;
}

/* =============================================
   13. FAQ — serif answers
   ============================================= */
.faq-q {
  padding: 22px 0 !important;
}
.faq-q h4 {
  font-size: 16px !important;
}
.faq-a p {
  font-size: 17px !important;
  line-height: 1.75 !important;
}

/* =============================================
   14. IMAGE PLACEHOLDERS
   ============================================= */
.img-placeholder {
  margin: 40px auto !important;
  border-radius: 12px;
}

/* =============================================
   15. FINAL CTA
   ============================================= */
.final-cta {
  padding: 100px 0 !important;
}
.final-cta h2 {
  font-size: clamp(28px, 4vw, 44px) !important;
  margin-bottom: 24px !important;
}
.final-cta p {
  font-family: 'Source Serif 4', 'Georgia', serif !important;
  font-size: 18px !important;
}

/* =============================================
   16. MOBILE
   ============================================= */
@media (max-width: 768px) {
  .container, .container-wide {
    border-left: none !important;
    border-right: none !important;
  }
  .lf-section {
    padding: 48px 0 !important;
  }
  .prose p {
    font-size: 18px !important;
  }
  .prose p.highlight {
    font-size: 20px !important;
  }
  .pricing-box {
    padding: 40px 24px !important;
  }
  .container {
    max-width: 100% !important;
  }
}