/* Born Compass Homepage — All Sections */
.bc-page { font-family: 'Playfair Display', 'Abhaya Libre', serif; color: #2D2A26; }
.bc-page * { box-sizing: border-box; }

/* Hero */
.bc-hero { position: relative; min-height: 100vh; overflow: hidden; background: #EEEDE8; }
.bc-hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.bc-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(238,237,232,0.85), rgba(238,237,232,0.4), transparent); }
.bc-hero-grid { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; max-width: 1800px; margin: 0 auto; }
.bc-hero-left { display: flex; flex-direction: column; justify-content: center; padding: 0 80px; }
.bc-hero-right { display: flex; align-items: center; justify-content: center; }
.bc-eyebrow { margin-bottom: 32px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; color: #8a7355; }
.bc-title { font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; color: #2D2A26; margin: 0; }
.bc-title em { color: #8a7355; }
.bc-sub { margin-top: 40px; max-width: 420px; font-size: 18px; line-height: 1.7; color: #6B6560; font-family: sans-serif; }
.bc-ctas { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.bc-btn-primary { display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; background: #8a7355; color: #FFFFFF; padding: 16px 32px; font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.3s; }
.bc-btn-primary:hover { background: #2D2A26; }
.bc-btn-secondary { font-size: 14px; font-weight: 500; color: #2D2A26; text-decoration: none; }

/* Free Preview */
.bc-free { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.bc-free img { width: 100%; border-radius: 16px; object-fit: cover; aspect-ratio: 4/3; }
.bc-free h2 { font-size: 36px; font-weight: 400; margin: 0 0 8px; }
.bc-free h2 em { color: #8a7355; }
.bc-form { background: white; border: 1px solid #d4cec2; border-radius: 8px; padding: 32px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
.bc-form label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #7a756d; margin-bottom: 6px; }
.bc-form input, .bc-form select { width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid #d4cec2; border-radius: 4px; outline: none; margin-bottom: 16px; background: white; }
.bc-form-btn { width: 100%; padding: 16px; background: #1a1815; color: #EEEDE8; font-size: 17px; letter-spacing: 2px; text-transform: uppercase; border: none; cursor: pointer; border-radius: 4px; }
.bc-form-btn:hover { background: #8a7355; }

/* Content Showcase */
.bc-content { max-width: 1200px; margin: 0 auto; }
.bc-phase { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 80px; }
.bc-phase.reverse { direction: rtl; }
.bc-phase.reverse > * { direction: ltr; }
.bc-phase img { width: 100%; border-radius: 24px; object-fit: cover; aspect-ratio: 4/3; }
.bc-phase-num { font-size: 48px; font-weight: 300; color: #8a7355; margin: 0 0 8px; opacity: 0.5; }
.bc-phase-label { font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #8a7355; margin-bottom: 12px; }
.bc-phase h3 { font-size: 28px; font-weight: 400; margin: 0 0 16px; }
.bc-phase p { font-size: 16px; color: #4a4540; line-height: 1.8; margin-bottom: 24px; }
.bc-tag { font-size: 11px; font-weight: 600; letter-spacing: 1px; color: #8a7355; background: rgba(138,115,85,0.08); padding: 6px 12px; border-radius: 4px; display: inline-block; margin-right: 8px; margin-bottom: 8px; }

/* Trust */
.bc-trust { max-width: 1200px; margin: 0 auto; }
.bc-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.bc-trust-card { background: white; padding: 36px 28px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.04); }
.bc-trust-card .num { font-size: 32px; font-weight: 700; color: #8a7355; margin: 0 0 6px; }
.bc-trust-card h4 { font-size: 18px; font-weight: 500; margin: 0 0 10px; }
.bc-trust-card p { font-size: 15px; color: #4a4540; line-height: 1.7; margin: 0; }

/* Reviews */
.bc-reviews { max-width: 1200px; margin: 0 auto; text-align: center; }
.bc-reviews h2 em { color: #8a7355; }
.bc-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; margin-top: 48px; }
.bc-review { background: white; padding: 28px 24px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.04); }
.bc-review .stars { color: #b89a6a; font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.bc-review blockquote { font-size: 15px; color: #4a4540; line-height: 1.7; margin: 0 0 14px; }
.bc-review cite { font-size: 11px; font-weight: 500; color: #7a756d; font-style: normal; }

/* Purchase */
.bc-purchase { max-width: 900px; margin: 0 auto; }
.bc-purchase-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.bc-card { border-radius: 24px; padding: 40px; display: flex; flex-direction: column; }
.bc-card-note { background: #FAFAF9; border: 1px solid #D8D6D1; }
.bc-card-full { background: #FFFFFF; border: 2px solid #8a7355; position: relative; }
.bc-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: #8a7355; color: #FFF; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 16px; border-radius: 999px; white-space: nowrap; }
.bc-price-old { font-size: 1.875rem; text-decoration: line-through; color: #B0A99F; }
.bc-price-new { font-size: 3.75rem; font-weight: 600; color: #2D2A26; }
.bc-card-btn { display: block; margin-top: 32px; padding: 16px; border-radius: 12px; font-size: 16px; font-weight: 500; text-align: center; text-decoration: none; }
.bc-card-btn-dark { background: #2D2A26; color: #FFF; }
.bc-card-btn-gold { background: #8a7355; color: #FFF; }

/* Compass container */
.bc-compass { position: relative; }

/* Mobile responsive */
@media (max-width: 768px) {
  /* Hero — compass on top, text below */
  .bc-hero-grid { grid-template-columns: 1fr !important; }
  .bc-hero-right { display: flex !important; justify-content: center !important; padding: 80px 24px 24px !important; order: -1 !important; }
  .bc-hero-right .bc-compass { width: 280px !important; height: 280px !important; }
  .bc-hero-left { padding: 24px 24px 60px !important; order: 1 !important; }

  /* Free Preview — single column, image on top, form below */
  .bc-free-grid { grid-template-columns: 1fr !important; }
  .bc-free-img { min-height: 280px !important; }
  .bc-free-img > div[style*="bottom"] > div { padding: 10px 14px !important; border-radius: 10px !important; }
  .bc-free-img > div[style*="bottom"] > div > p:first-child { font-size: 1.5rem !important; }
  .bc-free-img > div[style*="bottom"] > div > p:last-child { font-size: 11px !important; margin-top: 2px !important; }
  .bc-free-img > div[style*="bottom"] { gap: 10px !important; bottom: 16px !important; left: 16px !important; flex-wrap: wrap !important; }
  .bc-free-form { padding: 32px 20px !important; }
  .bc-free-form > div { max-width: 100% !important; width: 100% !important; }

  /* Content Showcase — single column, image always on top */
  .bc-phase-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .bc-phase-grid > div:has(img) { order: -1 !important; }
  .bc-phase-grid div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* Trust — single column */
  .bc-trust-layout { grid-template-columns: 1fr !important; gap: 40px !important; }
  .bc-three-col { grid-template-columns: 1fr !important; }

  /* Reviews — 2 columns on mobile for compact look */
  .bc-reviews-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .bc-review { padding: 20px 16px !important; }
  .bc-review blockquote { font-size: 13px !important; }

  /* Purchase */
  .bc-purchase-grid { grid-template-columns: 1fr !important; }
  .bc-purchase-cards { grid-template-columns: 1fr !important; }
  .bc-card { padding: 28px 24px !important; }

  /* Reading preview — single column, image on top */
  .bc-reading-preview { grid-template-columns: 1fr !important; }
  .bc-reading-preview > div:first-child { min-height: 240px !important; }
  .bc-reading-preview > div:last-child { padding: 32px 24px !important; }

  /* Trust floating quote — reposition */
  .bc-trust-layout div[style*="position:absolute"][style*="bottom:-32px"] { position: relative !important; bottom: auto !important; right: auto !important; margin-top: 24px !important; max-width: 100% !important; }

  /* Trust stat cards — tighter on mobile */
  .bc-trust-layout div[style*="flex-direction:column"][style*="gap:24px"] > div { padding: 16px !important; gap: 16px !important; }

  /* Hide decorative elements on mobile */
  .bc-trust-layout div[style*="width:256px"][style*="border-radius:50%"] { display: none !important; }
  .bc-phase-grid div[style*="bottom:-24px"][style*="z-index:-1"] { display: none !important; }

  /* Price text size on mobile */
  .bc-price-new { font-size: 3rem; }

  /* Section padding reduction on mobile */
  .bc-page section { padding-left: 16px !important; padding-right: 16px !important; }
  .bc-page section[style*="padding:128px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  .bc-page section[style*="padding:100px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  .bc-page section[style*="padding:80px"] { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Phase spacing reduction */
  .bc-phase-grid[style*="margin-bottom:128px"] { margin-bottom: 56px !important; }

  /* Fix iOS date/time inputs stretching tall */
  input[type="date"], input[type="time"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: 0 !important;
    max-height: 48px !important;
    line-height: 48px !important;
  }
}

/* Small phones */
@media (max-width: 375px) {
  .bc-reviews-grid { grid-template-columns: 1fr !important; }
  .bc-hero-right .bc-compass { width: 240px !important; height: 240px !important; }
  .bc-free-img > div[style*="bottom"] > div > p:first-child { font-size: 1.25rem !important; }
}