/* ═══════════════════════════════════════════════════════
   V8 OVERRIDES AND NEW SECTIONS
═══════════════════════════════════════════════════════ */

/* A Personal Offering on Sand */
.section-sand .why-made-text p,
.section-sand .why-made-text li { color: var(--indigo); }
.point-names-indigo span { color: var(--indigo) !important; border-color: rgba(29,36,56,0.25) !important; }
.emphasis-indigo { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--indigo); margin-top: 1.5rem; }
.signature-indigo { color: var(--indigo) !important; opacity: 0.75; }

/* Sarah Powers Quote standalone indigo */
.sarah-quote-section { position: relative; overflow: hidden; }
.sarah-quote-inner { max-width: 760px; margin: 0 auto; text-align: center; padding: 1rem 0; }
.sarah-quote { margin: 0; padding: 0; }
.sarah-quote p { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.7; color: var(--sand); margin-bottom: 1.5rem; }
.sarah-quote cite { font-family: var(--font-sc); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--gold); font-style: normal; }

/* What Makes This Different on Sand */
.section-sand .different-text p,
.section-sand .different-text li { color: var(--indigo); }
.different-taoist-quote-indigo { color: var(--indigo) !important; opacity: 0.8; font-style: italic; }

/* Option A — Taoist quote gold visual treatment */
.different-a .different-taoist-quote {
  color: var(--gold) !important;
  opacity: 1 !important;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.75;
  border-left: 2px solid var(--gold);
  padding-left: 1.25rem;
  margin: 1.75rem 0 2.5rem;
}
.different-system-line-indigo { color: var(--indigo) !important; font-weight: 600; }

/* Testimonials Section */
.testimonials-section { position: relative; overflow: hidden; }
.testimonials-inner { text-align: center; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; }
.testimonial-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.2); border-radius: 4px; padding: 2rem 1.75rem; text-align: left; display: flex; flex-direction: column; gap: 1rem; }
.testimonial-stars { font-size: 0.7rem; letter-spacing: 0.3em; color: var(--gold); }
.testimonial-card blockquote { margin: 0; padding: 0; }
.testimonial-card blockquote p { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; line-height: 1.75; color: var(--sand); margin: 0; }
.testimonial-card cite { font-family: var(--font-sc); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--gold); font-style: normal; opacity: 0.85; }
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }

/* Each Card Is a World on Sand */
.see-deck-intro-indigo { color: var(--indigo) !important; opacity: 0.8; }
.section-sand .see-deck-cta { margin-top: 3rem; text-align: center; }

/* What's Inside on Indigo */
.section-indigo .inside-title { color: var(--sand); }
.section-indigo .inside-desc { color: rgba(243,233,216,0.8); }
.section-indigo .inside-num { color: var(--gold); border-color: rgba(212,175,55,0.4); }

/* Closing Lines from Suzanne */
.suzanne-closing { position: relative; overflow: hidden; }
.suzanne-closing-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.suzanne-closing-text { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.85; color: var(--sand); margin-bottom: 1.75rem; }
.suzanne-closing-sig { font-family: var(--font-sc); font-size: 0.85rem; letter-spacing: 0.12em; color: var(--gold); margin-top: 0.5rem; margin-bottom: 2rem; }

/* Draw a Card on Sand */
.section-sand .draw-intro { color: var(--indigo); opacity: 0.8; }
.section-sand .fan-instruction { color: var(--indigo); opacity: 0.75; }
.section-sand .draw-form-heading { color: var(--indigo); }
.section-sand .draw-form-sub { color: var(--indigo); opacity: 0.75; }
.section-sand .draw-input { background: rgba(255,255,255,0.7); border-color: rgba(29,36,56,0.3); color: var(--indigo); }
.section-sand .draw-privacy { color: var(--indigo); opacity: 0.6; }
.section-sand .confirm-heading, .section-sand .confirm-sub { color: var(--indigo); }


/* ═══════════════════════════════════════════
   A PERSONAL OFFERING — v8 layout
   Text left · Sticky guidebook image right
═══════════════════════════════════════════ */

/* Override the v7 indigo background — this section is sand */
.section-sand.why-made {
  background-color: var(--sand);
}

/* Two-column grid: text left, image right */
.why-made-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Text column — sand section colour overrides */
.section-sand .why-made-text p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--indigo);
  margin-bottom: 1.25rem;
}
.section-sand .why-made-text .section-title {
  margin-bottom: 1.5rem;
}

/* Signature row: circular portrait + name inline */
.why-made-signature {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2.25rem;
}
.signature-portrait {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 15%;
  border: 2px solid rgba(180, 140, 60, 0.45);
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.why-made-signature .signature {
  margin: 0;
  line-height: 1.3;
}

/* Image column — centered with subtle scroll drift */
.why-made-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-made-image-sticky {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Guidebook cover — slightly larger than v7's 320px */
.guidebook-cover-img {
  max-width: 380px;
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35), 0 0 40px rgba(199,162,90,0.08);
  display: block;
  margin: 0 auto;
}

/* Mobile: stack vertically */
@media (max-width: 860px) {
  .why-made-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .why-made-image-sticky {
    position: static;
  }
  .guidebook-cover-img {
    max-width: 280px;
  }
}

/* ═══════════════════════════════════════════
   WHAT MAKES THIS DIFFERENT — Option A: Editorial
   Full-width title header, then two-column body
═══════════════════════════════════════════ */

.different-a { border-top: 1px solid rgba(29,36,56,0.1); }

.different-a-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Editorial header: eyebrow + oversized title spanning full width */
.different-a-header {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(29,36,56,0.12);
  margin-bottom: 3rem;
}
.different-a-title {
  font-size: clamp(2rem, 3.8vw, 3rem) !important;
  line-height: 1.15 !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
  color: var(--indigo) !important;
}
.different-a .section-eyebrow-muted {
  color: var(--indigo) !important;
  opacity: 0.6;
}

/* Two-column body below the header */
.different-a-body {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 5rem;
  align-items: center;
}
.different-a-text p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--indigo);
  margin-bottom: 1.25rem;
}
.different-a-card {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════
   WHAT MAKES THIS DIFFERENT — Option C: Image Left
   Card on left (~38%), wider text column on right (~62%)
═══════════════════════════════════════════ */

.different-c { border-top: 1px solid rgba(29,36,56,0.1); }

.different-c-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 5rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}
.different-c-card {
  display: flex;
  align-items: center;
  justify-content: center;
}
.different-c-text p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--indigo);
  margin-bottom: 1.25rem;
}
.different-c-text .section-title {
  margin-bottom: 1.5rem;
}

/* Shared: option label badge */
.different-option-label {
  display: inline-block;
  font-family: var(--font-sc);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--gold);
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 3px;
  padding: 0.2em 0.6em;
  margin-bottom: 1.25rem;
}

/* Mobile stacking for both options */
@media (max-width: 860px) {
  .different-a-body,
  .different-c-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .different-a-title {
    font-size: clamp(2rem, 7vw, 2.8rem) !important;
  }
}

/* ── Book spread verse / poem paragraphs ── */
.gb-verse {
  font-style: italic;
  line-height: 1.9;
  color: var(--indigo);
  margin-bottom: 1rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--gold);
}

/* ── Offer section additions ── */
.offer-tagline {
  font-size: 1rem;
  color: rgba(243,233,216,0.9);
  font-style: italic;
  margin-bottom: 1.5rem;
}

.offer-price-cta {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold);
  margin-top: 0.75rem;
  letter-spacing: 0.04em;
}

.offer-price-regular {
  font-weight: 400;
  opacity: 0.65;
  font-size: 0.85rem;
  text-decoration: line-through;
}

.offer-summary {
  font-size: 0.75rem;
  color: rgba(243,233,216,0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 1.25rem;
  line-height: 1.7;
}

/* ── Hero price note (below CTA button) ── */
.hero-price-note {
  font-size: 0.82rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  margin-top: 0.6rem;
  margin-bottom: 0.4rem;
  line-height: 1.7;
}

.hero-price-regular {
  font-size: 0.75rem;
  opacity: 0.65;
  text-decoration: line-through;
  color: var(--gold);
}

/* ── Offer CTA button — taller (offer section only) ── */
.btn-cta-tall {
  padding-top: 1.1rem !important;
  padding-bottom: 1.1rem !important;
}

/* ── Clean price (no strikethrough) ── */
.offer-price-clean .price-current {
  font-size: 2.8rem;
}