/* ============================================================
   Unearthed Collective — website page-specific composition
   ------------------------------------------------------------
   Reusable, brand-level patterns (backgrounds/bands, framed
   media, hero/split/grid layout, lead/pull-quote/checklist)
   now live in the DESIGN SYSTEM itself, loaded via styles.css:
     styles/backgrounds.css · media.css · layout.css · prose.css
   Only patterns that are truly SPECIFIC to these five marketing
   pages remain here — the six-week step line, the book excerpt,
   inline mini-testimonials, the buy block, and the reach-her row.
   Build new pages from the system classes; add page-only helpers
   here, never restyle a component.
   ============================================================ */

/* ---- Testimonial placeholder + badge (pending real quotes) ---- */
.mdp-testimonial--placeholder { border-style: dashed; border-color: var(--line-hairline); }
.mdp-testimonial--placeholder .mdp-testimonial__mark, .mdp-testimonial--placeholder .mdp-testimonial__quote, .mdp-testimonial--placeholder .mdp-testimonial__by { opacity: 0.55; }
.mdp-testimonial__badge { position: absolute; top: var(--space-4); right: var(--space-4); font-family: var(--font-ui); font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); background: var(--sand-soft); border: 1px solid var(--line-hairline); border-radius: 999px; padding: 2px 10px; }

/* ============================================================
   Step line — the six-week rhythm, as a connected sequence
   ============================================================ */
.stepline { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); position: relative; }
.step { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; flex: none;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--olive-700);
  background: var(--olive-50); border: 1px solid var(--olive-300);
  border-radius: var(--radius-panel);
}
.step__title { font-family: var(--font-display); font-size: var(--fs-h4); margin: 0; line-height: 1.15; }
.step__text { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
.band--ink .step__num { background: color-mix(in srgb, var(--olive-300) 16%, transparent); border-color: color-mix(in srgb, var(--olive-300) 40%, transparent); color: var(--olive-300); }
.band--ink .step__text { color: var(--brown-200); }

/* mini six-dot progress (home journey teaser) */
.weekdots { display: inline-flex; gap: var(--space-2); align-items: center; }
.weekdots span { width: 12px; height: 12px; border-radius: 4px; background: color-mix(in srgb, var(--olive-300) 30%, transparent); border: 1px solid var(--olive-300); }
.weekdots span:nth-child(-n+2) { background: var(--olive-500); }

/* ============================================================
   Book excerpt (on the olive-wash band)
   ============================================================ */
.excerpt { text-align: center; max-width: 42ch; margin-inline: auto; }
.excerpt__quote { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.34; font-style: italic; color: var(--brown-700); margin: 0 0 var(--space-5); text-wrap: balance; }
.excerpt__quote em { color: var(--olive-700); font-style: italic; }
.excerpt__by { font-family: var(--font-ui); font-size: var(--fs-caption); letter-spacing: 0.04em; color: var(--text-muted); margin: 0; }
.excerpt__title { color: var(--brown-700); font-weight: var(--weight-semibold); }

/* ============================================================
   Mini testimonials (inline, for the book feature)
   ============================================================ */
.minitestimonials { display: flex; flex-direction: column; gap: var(--space-4); }
.minitestimonial { padding-left: var(--space-4); border-left: 2px solid var(--olive-300); }
.minitestimonial p { margin: 0 0 var(--space-1); font-style: italic; font-family: var(--font-body); font-size: var(--fs-small); color: var(--brown-700); line-height: 1.5; }
.minitestimonial cite { font-style: normal; font-family: var(--font-ui); font-size: var(--fs-caption); color: var(--text-muted); }
.spotlight--overlay .minitestimonial { border-left-color: var(--olive-300); }
.spotlight--overlay .minitestimonial p { color: color-mix(in srgb, var(--beige-page) 90%, transparent); }
.spotlight--overlay .minitestimonial cite { color: color-mix(in srgb, var(--beige-page) 62%, transparent); }

/* ============================================================
   Closing CTA band content
   ============================================================ */
.ctaband { text-align: center; max-width: 48rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.ctaband__title { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-h1); margin: 0; }
.ctaband__text { font-size: var(--fs-body-lg); color: var(--text-muted); margin: 0; max-width: 42ch; }

/* ============================================================
   Reach-her contact row
   ============================================================ */
.reach { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.reach__item { display: flex; gap: var(--space-3); align-items: flex-start; }
.reach__icon { color: var(--olive-700); flex: none; width: 1.4rem; height: 1.4rem; margin-top: 2px; }
.reach__label { font-family: var(--font-ui); font-size: var(--fs-caption); color: var(--text-muted); margin: 0 0 2px; }
.reach__value { font-family: var(--font-body); font-size: var(--fs-small); color: var(--text-ink); margin: 0; }

/* ============================================================
   Buy block (The Book) — product/purchase card
   ============================================================ */
.buy-card { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items: center; }
.buy-seg { display: inline-flex; border: 1px solid var(--line-hairline); border-radius: var(--radius-panel); overflow: hidden; width: fit-content; }
.buy-seg__btn { font: inherit; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: var(--weight-semibold); border: 0; background: var(--white); color: var(--text-muted); padding: 10px 16px; cursor: pointer; transition: background var(--dur) var(--ease-gentle), color var(--dur) var(--ease-gentle); }
.buy-seg__btn + .buy-seg__btn { border-left: 1px solid var(--line-hairline); }
.buy-seg__btn.is-active { background: var(--accent); color: var(--btn-primary-text); }
.buy-total { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-ui); font-size: var(--fs-body); color: var(--text-muted); border-top: 1px solid var(--line-hairline); padding-top: var(--space-4); }
.buy-total span:last-child { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--brown-700); }

/* ============================================================
   Page-specific responsive (system modules carry their own).
   ============================================================ */
@media (max-width: 1040px) {
  .stepline { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
@media (max-width: 820px) {
  .pullquote { max-width: none; }
  /* Book hero: keep the cover and copy side by side further down. */
  #top .split { grid-template-columns: 0.82fr 1.18fr; gap: clamp(1.5rem, 1rem + 3vw, 3rem); }
  #top .split__media { order: 0; }
}
@media (max-width: 680px) {
  .buy-card { grid-template-columns: 1fr; }
  .stepline { grid-template-columns: 1fr; gap: var(--space-4); }
  .reach { gap: var(--space-4); flex-direction: column; }
}
@media (max-width: 540px) {
  #top .split { grid-template-columns: 1fr; gap: var(--space-6); }
  #top .split__media { order: -1; }
}

/* ============================================================
   Production additions (2026-07-16 launch)
   ============================================================ */

/* Footer scripture notice — Biblica requires it on each page
   that reproduces NIV text; the shared footer carries it. */
.mdp-footer__scripturenote {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--brown-200) 62%, transparent);
  max-width: 64ch;
  margin: 0 auto;
  padding: var(--space-5) var(--gutter) var(--space-4);
}

/* Two-edition buy block — real product cards, real Stripe links */
.buy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: stretch; }
.buy-offer { display: flex; flex-direction: column; gap: var(--space-4); position: relative; }
.buy-offer .mdp-figure { margin: 0; }
.buy-offer__name { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.2; margin: 0; color: var(--brown-700); }
.buy-offer__price { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--olive-700); margin: 0; }
.buy-offer__text { margin: 0; color: var(--text-muted); font-size: var(--fs-small); flex: 1; }
.buy-offer__flag {
  position: absolute; top: var(--space-4); right: var(--space-4); z-index: 1;
  font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); background: var(--lavender-700);
  border-radius: 999px; padding: 4px 12px;
}
.buy-offer--featured { border: 1px solid var(--olive-300); }
@media (max-width: 680px) {
  .buy-grid { grid-template-columns: 1fr; }
}

/* MailerLite embed, dressed to match the footer capture */
.mdp-footer__capture .ml-embedded { width: 100%; }
.mdp-footer__capture .ml-embedded .ml-form-embedContainer,
.mdp-footer__capture .ml-embedded .ml-form-embedWrapper,
.mdp-footer__capture .ml-embedded .ml-form-embedBody,
.mdp-footer__capture .ml-embedded .ml-form-embedContent {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: left !important;
}
.mdp-footer__capture .ml-embedded .ml-form-embedContent h4,
.mdp-footer__capture .ml-embedded .ml-form-embedContent p { display: none !important; }
.mdp-footer__capture .ml-embedded input[type="email"],
.mdp-footer__capture .ml-embedded input[type="text"] {
  font-family: var(--font-body) !important;
  font-size: var(--fs-small) !important;
  color: var(--text-ink) !important;
  background: var(--white) !important;
  border: 1px solid var(--brown-200) !important;
  border-radius: var(--radius-input) !important;
  padding: 0.72rem 0.9rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.mdp-footer__capture .ml-embedded input[type="email"]:hover,
.mdp-footer__capture .ml-embedded input[type="text"]:hover {
  border-color: var(--accent-soft) !important;
}
.mdp-footer__capture .ml-embedded input[type="email"]:focus,
.mdp-footer__capture .ml-embedded input[type="text"]:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-focus) !important;
}
.mdp-footer__capture .ml-embedded button[type="submit"],
.mdp-footer__capture .ml-embedded button {
  font-family: var(--font-ui) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--btn-primary-text) !important;
  background: var(--btn-primary-bg) !important;
  border: 1.5px solid var(--btn-primary-bg) !important;
  border-radius: var(--radius-button) !important;
  padding: 0.55rem 0.95rem !important;
  cursor: pointer !important;
  margin-top: var(--space-2) !important;
  width: auto !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.mdp-footer__capture .ml-embedded button[type="submit"]:hover,
.mdp-footer__capture .ml-embedded button:hover {
  background: var(--btn-primary-bg-hover) !important;
  border-color: var(--btn-primary-bg-hover) !important;
  color: var(--btn-primary-text-hover) !important;
}
.mdp-footer__capture .ml-embedded input[type="checkbox"] { accent-color: var(--accent) !important; }
.mdp-footer__capture .ml-embedded label,
.mdp-footer__capture .ml-embedded .ml-form-checkboxRow,
.mdp-footer__capture .ml-embedded .ml-form-embedFieldRow span {
  font-family: var(--font-ui) !important;
  font-size: var(--fs-caption) !important;
  color: var(--olive-300) !important;
}
.mdp-footer__capture .ml-embedded .ml-form-successBody,
.mdp-footer__capture .ml-embedded .ml-form-successContent p {
  color: var(--olive-300) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--fs-small) !important;
  background: transparent !important;
}
.mdp-footer__capture .ml-embedded .ml-form-successContent h1,
.mdp-footer__capture .ml-embedded .ml-form-successContent h2,
.mdp-footer__capture .ml-embedded .ml-form-successContent h3,
.mdp-footer__capture .ml-embedded .ml-form-successContent h4 {
  font-family: var(--font-display) !important;
  font-size: var(--fs-h4) !important;
  color: var(--white) !important;
  margin: 0 0 0.25rem !important;
}

/* Long hero eyebrow (the full Isaiah 61:11) needs room to breathe */
.hero .mdp-eyebrow { max-width: 58ch; line-height: 1.7; }

/* BACK TO TOP — same pattern as the Parade of Homes site */
.totop {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 60;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.15s ease;
  cursor: pointer;
}
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-text-hover); }
.totop svg { width: 24px; height: 24px; }

/* Narrow-phone nav: brand + Book a Call + toggle must fit 390px
   (the design system's smallest nav breakpoint stopped at 880px) */
@media (max-width: 520px) {
  .mdp-nav__inner { gap: var(--space-3); }
  .mdp-nav__logo { width: 30px; height: 30px; }
  .mdp-nav__brandname { font-size: 1rem; letter-spacing: 0; }
  .mdp-nav__actions { gap: var(--space-2); }
  .mdp-nav__actions .mdp-btn--sm { padding: 9px 12px; font-size: 0.78rem; }
}
@media (max-width: 350px) {
  .mdp-nav__brandname { display: none; }
}
/* Safety net: no band background or floated ornament may create
   sideways scroll on phones */
html, body { overflow-x: clip; }