/* ============================================================
   The Linked Bible — Marketing site styles
   Design tokens, layout, and components
   ============================================================ */

:root {
  /* Brand */
  --gold: #D9B14A;
  --gold-soft: #E6C879;
  --gold-tint: #FBEFD2;
  --gold-ink: #A9842B;

  /* Ink + neutrals */
  --ink: #0F1A2E;
  --ink-soft: #1B2742;
  --body: #4F5868;
  --muted: #7B8392;
  --hairline: #E6E3DA;
  --hairline-2: #EFECE3;

  /* Surfaces */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F6F4EF;
  --parchment: #E8DCC0;
  --parchment-deep: #D9C89A;
  --footer: #0C1730;

  /* Category colors (used in icon chips) */
  --green: #3FA876;
  --green-soft: #DDEFE2;
  --blue: #2F6BC4;
  --blue-soft: #DCE7F7;
  --purple: #6E54C9;
  --purple-soft: #E3DCF6;
  --rust: #C95B3A;
  --rust-soft: #F6DDD3;

  /* Type */
  --font-serif: "Newsreader", "Source Serif 4", "Libre Caslon Text", Georgia, serif;
  --font-sans: "Geist", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --container: 1180px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(15, 26, 46, 0.04), 0 8px 28px rgba(15, 26, 46, 0.06);
  --shadow-phone: 0 30px 60px -20px rgba(15, 26, 46, 0.35), 0 10px 20px -10px rgba(15, 26, 46, 0.2);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================================
   Typography
   ============================================================ */
.h-display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: normal;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.04;
  font-size: clamp(48px, 5.6vw, 72px);
  margin: 0;
  font-variation-settings: "opsz" 36;
}
.h-display .accent {
  color: var(--gold);
  font-style: italic;
  font-weight: 600;
}
.h-display .accent-ul {
  position: relative;
  display: inline-block;
}
.h-display .accent-ul::after {
  content: "";
  position: absolute;
  left: -0.02em;
  right: -0.02em;
  bottom: 0.02em;
  height: 0.085em;
  border-radius: 0.06em;
  background-color: #D9B14A;
  animation: ulCycle 11s infinite;
}
@keyframes ulCycle {
  0%, 14%   { background-color: #D9B14A; }
  20%, 34%  { background-color: #3FA876; }
  40%, 54%  { background-color: #8A5CF5; }
  60%, 74%  { background-color: #E74A3B; }
  80%, 94%  { background-color: #0B1220; }
  100%      { background-color: #D9B14A; }
}
@media (prefers-reduced-motion: reduce) {
  .h-display .accent-ul::after { animation: none; }
}
.h-2 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: "opsz" 24;
}
.h-3 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  font-variation-settings: "opsz" 20;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.lede {
  font-size: 16px;
  color: var(--body);
  line-height: 1.62;
  max-width: 44ch;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 6px 14px -6px rgba(217, 177, 74, 0.55);
}
.btn-primary:hover { background: #C49B36; transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: #D9D4C7;
}
.btn-outline:hover { background: #fff; }
.btn-lg {
  padding: 16px 30px;
  font-size: 17px;
  border-radius: 10px;
}
.btn-outline.btn-lg { border-width: 1.5px; }
.btn-amazon {
  background: var(--gold);
  color: #fff;
  padding: 12px 20px;
}
.btn-amazon:hover { background: #C49B36; }

.link-arrow {
  color: var(--gold);
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.link-arrow:hover { color: var(--gold-ink); }
.link-arrow .arr { transition: transform 160ms ease; }
.link-arrow:hover .arr { transform: translateX(3px); }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  padding: 26px 0 14px;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variation-settings: "opsz" 18;
}
.brand-mark {
  width: 34px;
  height: 34px;
  object-fit: contain;
  color: var(--gold);
  flex: none;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: var(--ink-soft);
}
.nav-links a {
  font-weight: 500;
  position: relative;
  padding-bottom: 6px;
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { transform: scaleX(1); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding: 36px 0 0;
  position: relative;
  z-index: 1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
}
.hero-copy { padding-top: 30px; }
.hero-lede { margin: 26px 0 36px; font-size: 17px; line-height: 1.6; max-width: 42ch; }
.hero-ctas { display: flex; gap: 12px; }
.hero-phone-wrap {
  display: flex;
  justify-content: flex-start;
  position: relative;
  padding-left: 8px;
}
.david-callout {
  position: absolute;
  top: 56px;
  left: 256px;
  width: 180px;
  pointer-events: none;
}
.david-arrow {
  width: 132px;
  height: 116px;
  display: block;
}
.david-callout-label {
  display: block;
  margin-top: 4px;
  margin-left: 54px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.25;
  color: var(--green);
  font-variation-settings: "opsz" 14;
}

/* ============================================================
   Phone frame
   ============================================================ */
.phone {
  width: 300px;
  background: #0F1A2E;
  border-radius: 44px;
  padding: 10px;
  box-shadow: var(--shadow-phone);
  position: relative;
}
.phone-screen {
  background: #fff;
  border-radius: 36px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 9 / 19.2;
  display: flex;
  flex-direction: column;
}
.phone-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 22px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
}
.phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 24px;
  background: #0F1A2E;
  border-radius: 16px;
  z-index: 2;
}
.phone-statusbar .ind {
  display: flex;
  gap: 5px;
  align-items: center;
}

/* Hero phone — Reader screen */
.reader {
  padding: 24px 16px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--ink);
  background: #FBFAF6;
}
.reader-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.reader-ref {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.15;
  white-space: nowrap;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 18;
}
.reader-trans {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.reader-more { color: var(--muted); font-size: 18px; line-height: 1; }
.reader-body {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  font-variation-settings: "opsz" 15;
}
.reader-body .vline-a {
  display: block;
  text-align: left;
  text-align-last: right;
}
.reader-body .vline-b { display: block; }
.reader-body .vnum {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  vertical-align: top;
  margin-right: 4px;
  position: relative;
  top: 3px;
}
.reader-body .sc { font-variant: small-caps; letter-spacing: 0.04em; }

/* Multi-color link underlines (each color = a kind of connection) */
.ulink {
  position: relative;
  display: inline-block;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink);
}
.ulink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--ul, var(--green));
}
.ul-green  { --ul: #3FA876; color: #2E7D57; }
.ul-blue   { --ul: #2F6BC4; color: #2A5BA8; }
.ul-purple { --ul: #8A5CF5; color: #6C45C7; }

/* Slide-up evidence sheet */
.sheet {
  margin: 18px -16px -20px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 30px -8px rgba(15, 26, 46, 0.16);
  padding: 9px 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  animation: sheetUp 620ms cubic-bezier(.2,.8,.2,1) 260ms both;
}
@keyframes sheetUp {
  from { transform: translateY(46px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.sheet-handle {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: #D9D4C7;
  margin: 0 auto 12px;
}
.sheet-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.sheet-tab {
  flex: 1;
  border: 1px solid var(--hairline);
  background: #fff;
  border-radius: 999px;
  padding: 6px 4px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  transition: all 140ms ease;
}
.sheet-tab.active.st-green  { color: #fff; background: #3FA876; border-color: #3FA876; }
.sheet-tab.active.st-blue   { color: #fff; background: #2F6BC4; border-color: #2F6BC4; }
.sheet-tab.active.st-purple { color: #fff; background: #8A5CF5; border-color: #8A5CF5; }
.sheet-body { display: flex; flex-direction: column; }
.sheet-body .evidence-img {
  border-radius: 12px;
  margin-bottom: 10px;
}
.evidence-img {
  height: 142px;
  background: #EFE6D2;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.evidence-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.evidence-body { padding: 10px 12px 12px; }
.evidence-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.evidence-title .t {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.evidence-title .k {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.evidence-caption {
  font-size: 11.5px;
  line-height: 1.45;
  color: #5B6471;
  margin: 6px 0 8px;
}
.evidence-more {
  color: var(--green);
  font-size: 11.5px;
  font-weight: 500;
}

/* ============================================================
   Cross-references showcase
   ============================================================ */
.xrefs {
  margin-top: -188px;
  position: relative;
  z-index: 5;
}
.xrefs-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 28px 32px 26px;
  position: relative;
  box-shadow: 0 1px 0 rgba(15, 26, 46, 0.02), 0 24px 60px -28px rgba(15, 26, 46, 0.18);
}
.xrefs-tabs {
  display: flex;
  gap: 36px;
  border-bottom: 1px solid var(--hairline);
  margin: 0 -4px 0;
  padding: 0 4px;
}
.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  position: relative;
  top: 1px;
}
.tab svg { width: 18px; height: 18px; }
.tab.active {
  color: var(--gold-ink);
  border-bottom-color: var(--gold);
}
.tab .tab-ico { color: var(--muted); }
.tab.active .tab-ico { color: var(--gold); }

#arcs {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 286;
}
.arc-testament {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  fill: #A39A85;
}
.arc-label circle { fill: var(--ink); }
.arc-label text {
  font-family: "Geist", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  fill: #5C6573;
}

.xrefs-body {
  position: relative;
  padding-top: 26px;
  min-height: 322px;
}
.xrefs-slide {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 550ms ease;
}
.xrefs-slide.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  top: 0;
}
.xrefs-text .h-3 { margin-bottom: 10px; }
.xrefs-text p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 16px;
  color: var(--body);
}
.xrefs-canvas {
  position: relative;
}
.xrefs-arrows {
  position: absolute;
  top: 50%;
  left: -10px;
  right: -10px;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.xrefs-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  pointer-events: auto;
  box-shadow: 0 4px 10px -4px rgba(15,26,46,0.1);
}
.xrefs-arrow:hover { color: var(--gold); border-color: var(--gold-soft); }

.verse-callout {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.verse-callout .vc-ico {
  color: var(--gold);
  flex: none;
}
.verse-callout p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  font-variation-settings: "opsz" 14;
}
.verse-callout .ref {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-style: normal;
}
.xrefs-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 18px;
}
.xrefs-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D8D2C2;
}
.xrefs-dots span.on { background: var(--gold); }

/* ---- Slide: Evidence ---- */
.ev-featured {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--shadow-card);
}
.ev-featured-img {
  width: 150px;
  height: 116px;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  background: #EFE6D2;
}
.ev-featured-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.ev-featured-body { display: flex; flex-direction: column; }
.ev-tag {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--c, var(--green));
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.ev-ttl {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  font-variation-settings: "opsz" 16;
}
.ev-featured-body p { font-size: 13px; line-height: 1.5; color: var(--body); margin: 0; }
.ev-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.ev-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 11px 12px;
}
.ev-chip-ic {
  width: 32px; height: 32px; flex: none;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.ev-chip b { display: block; font-size: 12px; color: var(--ink); font-weight: 600; line-height: 1.15; }
.ev-chip > div { display: flex; flex-direction: column; gap: 2px; }
.ev-chip i { font-style: normal; font-size: 11px; color: var(--muted); }

/* ---- Slide: Prophecies ---- */
.proph-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}
.proph-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}
.proph-card.fulfilled { border-color: var(--gold-soft); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 26px -16px rgba(217,177,74,0.5); }
.proph-when {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.proph-card.fulfilled .proph-when { color: var(--gold-ink); }
.proph-card p {
  font-family: var(--font-serif);
  font-size: 15px; line-height: 1.45; color: var(--ink); margin: 0 0 8px;
  font-variation-settings: "opsz" 14;
}
.proph-ref { font-size: 12.5px; font-weight: 600; color: var(--gold-ink); }
.proph-link { display: flex; flex-direction: column; align-items: center; }
.proph-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: #fff; background: var(--gold);
  padding: 5px 10px; border-radius: 999px;
  white-space: nowrap;
}
.proph-link::before, .proph-link::after {
  content: ""; width: 1.5px; height: 16px;
  background: repeating-linear-gradient(180deg, var(--gold-soft) 0 3px, transparent 3px 6px);
}

/* ---- Slide: Definitions ---- */
.def-verse {
  font-family: var(--font-serif);
  font-size: 17px; line-height: 1.55; color: var(--ink);
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 14px;
  font-variation-settings: "opsz" 16;
}
.def-hl {
  position: relative; color: #6C45C7; font-weight: 600; cursor: pointer;
}
.def-hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: #8A5CF5;
}
.def-card {
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px;
  box-shadow: var(--shadow-card);
  max-width: 420px;
}
.def-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.def-heb {
  font-size: 30px; color: var(--ink); line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
}
.def-head b { font-size: 16px; color: var(--ink); font-style: italic; font-family: var(--font-serif); }
.def-head i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.def-mean { font-size: 13.5px; line-height: 1.55; color: var(--body); margin: 0 0 10px; }
.def-mean em { font-style: italic; color: var(--ink); }
.def-meta { font-size: 12px; color: var(--muted); border-top: 1px solid var(--hairline-2); padding-top: 10px; }

/* ---- Slide: Audio + Video ---- */
.media-video {
  display: flex; gap: 14px; align-items: center;
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 12px;
  box-shadow: var(--shadow-card); margin-bottom: 14px;
}
.media-thumb {
  width: 150px; height: 92px; flex: none; border-radius: 10px; position: relative;
  background: radial-gradient(120% 120% at 30% 20%, #2F5170 0%, #16263A 70%, #0C1730 100%);
  display: flex; align-items: center; justify-content: center;
}
.media-play {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.92);
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  font-size: 14px; padding-left: 3px;
}
.media-play.sm { width: 30px; height: 30px; font-size: 11px; background: var(--gold); color: #fff; }
.media-vbody { display: flex; flex-direction: column; gap: 3px; }
.media-vbody b { display: block; font-family: var(--font-serif); font-size: 16px; line-height: 1.2; color: var(--ink); font-variation-settings: "opsz" 15; }
.media-vbody span { font-size: 12.5px; color: var(--muted); }
.media-audio {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 16px;
}
.media-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 30px; }
.media-wave span { flex: 1; background: var(--gold-soft); border-radius: 2px; }
.media-dur { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   Churches section
   ============================================================ */
.churches {
  background: var(--surface-2);
  padding: 80px 0;
  margin-top: 56px;
}
.churches-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
}
.church-showcase {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}
.church-showcase .phone { width: 232px; border-radius: 36px; padding: 8px; }
.church-showcase .phone-screen { border-radius: 30px; }
.feature-chips {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.feature-chips.right { align-items: flex-start; }
.feature-chips.left { align-items: flex-end; }
.chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 11px 16px 11px 11px;
  box-shadow: 0 1px 2px rgba(15,26,46,0.04);
  position: relative;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  min-width: 148px;
}
.chip-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #fff;
}
.chip-icon.green { background: var(--green); }
.chip-icon.blue { background: var(--blue); }
.chip-icon.purple { background: var(--purple); }
.chip-icon.rust { background: var(--rust); }

/* Dotted connectors between chips and phone */
.chip.connect-right::after,
.chip.connect-left::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px;
  border-top: 1.5px dashed #C9C3B0;
}
.chip.connect-right::after { right: -34px; }
.chip.connect-left::after { left: -34px; }

.churches-copy {
  padding-left: 0;
}
.churches-copy .h-2 { margin-bottom: 24px; }
.churches-title {
  font-size: clamp(28px, 2.6vw, 34px);
  line-height: 1.14;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  font-size: 15px;
}
.feature-list .check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.churches-fine {
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0 0;
}

/* Churches phone — church-branded screen */
.church-screen {
  background: #F3F1EA;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.church-banner {
  background: #1E5C46;
  color: #fff;
  text-align: center;
  padding: 14px 12px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  position: relative;
}
.church-banner .logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.church-banner .logo svg { width: 14px; }
.church-content { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.church-card {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.church-card .label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 5px;
}
.sermon-tile {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sermon-thumb {
  width: 78px;
  height: 56px;
  border-radius: 6px;
  background: linear-gradient(135deg, #6E8FB2, #3A5470);
  position: relative;
  overflow: hidden;
  flex: none;
}
.sermon-thumb::after {
  /* faux pastor portrait */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, #E8C5A0 0 14%, transparent 15%),
    radial-gradient(ellipse at 50% 78%, #1F2540 0 36%, transparent 37%),
    linear-gradient(180deg, #6E8FB2 0%, #3A5470 100%);
}
.sermon-meta { display: flex; flex-direction: column; gap: 4px; }
.sermon-title { font-size: 11.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.sermon-by { font-size: 9.5px; color: var(--muted); }
.sermon-watch {
  margin-top: 4px;
  background: var(--green);
  color: #fff;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
  font-weight: 600;
}

.event-tile { display: flex; gap: 10px; }
.event-info { flex: 1; }
.event-title { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.event-when { font-size: 9.5px; color: var(--muted); margin-top: 2px; }
.event-where { font-size: 9.5px; color: var(--muted); }
.event-thumb {
  width: 78px;
  height: 50px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #E5B984 0%, #B57841 70%, #7A4923 100%);
  position: relative;
  overflow: hidden;
  flex: none;
}
.event-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 80%, rgba(255,255,255,0.15) 0 30%, transparent 32%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,0.2) 0 24%, transparent 25%),
    linear-gradient(180deg, rgba(255,210,160,0.4) 0%, rgba(122,73,35,0.5) 100%);
}

.church-tab {
  display: flex;
  justify-content: space-around;
  padding: 8px 4px 10px;
  background: #fff;
  border-top: 1px solid #E5E2D8;
  font-size: 9px;
  color: var(--muted);
}
.church-tab .ct {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.church-tab .ct.active { color: var(--green); font-weight: 600; }
.church-tab svg { width: 16px; height: 16px; }

/* ============================================================
   Linked Book Series (parchment band)
   ============================================================ */
.book-series {
  position: relative;
  padding: 78px 0;
  background:
    radial-gradient(120% 60% at 20% 30%, rgba(255,255,255,0.4), transparent 60%),
    linear-gradient(180deg, #ECE0C5 0%, #E2D2AF 100%);
  overflow: hidden;
}
.book-series::before {
  /* paper grain */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(120, 85, 30, 0.06) 0 30%, transparent 31%),
    radial-gradient(circle at 80% 70%, rgba(120, 85, 30, 0.05) 0 25%, transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 0 20%, transparent 21%);
  mix-blend-mode: multiply;
  opacity: 0.7;
  pointer-events: none;
}
.book-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.book-stage {
  display: flex;
  justify-content: center;
  perspective: 1400px;
}
.book {
  width: 230px;
  height: 340px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-22deg) rotateX(2deg);
  filter: drop-shadow(0 30px 30px rgba(60, 35, 0, 0.35));
}
.book-cover, .book-spine, .book-pages {
  position: absolute;
  inset: 0;
  border-radius: 2px 6px 6px 2px;
}
.book-cover {
  background:
    linear-gradient(180deg, #2A1A0B 0%, #3A2614 50%, #2A1A0B 100%);
  padding: 22px 18px 18px;
  color: #E9D9B5;
  display: flex;
  flex-direction: column;
  text-align: center;
  border-radius: 2px 6px 6px 2px;
  box-shadow: inset -2px 0 6px rgba(255,255,255,0.05);
}
.book-cover .series {
  font-family: var(--font-serif);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #C9A86A;
  border-top: 1px solid #74583A;
  border-bottom: 1px solid #74583A;
  padding: 6px 0;
  margin-bottom: 14px;
}
.book-cover .title {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: #E9D9B5;
  margin-bottom: 6px;
  font-variation-settings: "opsz" 24;
}
.book-cover .title em {
  font-style: normal;
  display: block;
  font-size: 30px;
  color: #DBB66B;
  margin: 4px 0 4px;
}
.book-cover .subt {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #C9A86A;
}
.book-cover .art {
  margin: 10px auto 8px;
  width: 150px;
  height: 130px;
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 50% 70%, #6B4623 0%, #3B2410 60%, #1B0F05 100%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
}
.book-cover .art::before {
  /* faux stone tomb arch silhouette */
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 70%;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, #0A0703 0 55%, transparent 56%);
}
.book-cover .art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(220, 180, 110, 0.18) 0 30%, transparent 35%);
}
.book-cover .foot {
  margin-top: auto;
  font-family: var(--font-serif);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: #C9A86A;
  text-transform: uppercase;
  padding-top: 8px;
  border-top: 1px solid #74583A;
}
.book-spine {
  width: 22px;
  background: linear-gradient(90deg, #1B100A 0%, #2D1B0D 100%);
  transform-origin: left center;
  transform: translateX(-22px) rotateY(70deg);
  border-radius: 2px 0 0 2px;
}
.book-pages {
  background: repeating-linear-gradient(180deg, #EFE2C0 0 1px, #E4D6AC 1px 2px);
  transform: translateX(2px) translateZ(-4px);
  z-index: -1;
  right: -4px;
  left: auto;
  width: 6px;
}

.book-content .eyebrow { color: #A07623; }
.book-content .h-2 { color: #2B1D08; margin: 8px 0 14px; }
.book-content p.lede {
  color: #3F311A;
  max-width: 48ch;
  font-size: 15.5px;
}
.fact-card {
  background: rgba(255, 250, 235, 0.75);
  border: 1px solid rgba(160, 118, 35, 0.25);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 22px 0;
  max-width: 530px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
}
.fact-card .bulb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F4E5B8;
  color: var(--gold-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.fact-card .ft-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-ink);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.fact-card .ft-body {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  color: #2B1D08;
  font-variation-settings: "opsz" 14;
}
.fact-card .ft-attr {
  font-family: var(--font-serif);
  font-size: 12.5px;
  color: #7A5A1A;
  font-style: italic;
  margin-top: 8px;
}
.book-ctas {
  display: flex;
  gap: 14px;
  align-items: center;
}
.book-ctas .link-arrow { color: var(--gold-ink); }
.book-waitlist {
  margin-top: 14px;
  font-size: 14px;
  color: #5A4116;
}
.book-waitlist a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Mission + pillars
   ============================================================ */
.mission {
  padding: 92px 0 70px;
  text-align: center;
}
.mission .h-2 {
  max-width: 22ch;
  margin: 0 auto 18px;
}
.mission .lede {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin: 60px auto 40px;
  max-width: 1000px;
}
.pillar {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  text-align: left;
}
.pillar-ico {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pillar-ico.green { color: var(--green); }
.pillar-ico.blue { color: var(--blue); }
.pillar-ico.rust { color: var(--gold-ink); }
.pillar h4 {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 6px;
  font-weight: 600;
  font-variation-settings: "opsz" 16;
}
.pillar p {
  margin: 0;
  font-size: 14px;
  color: var(--body);
  line-height: 1.55;
}

.founders-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: var(--body);
  margin: 0 auto;
  max-width: 720px;
  padding: 16px 0 8px;
  text-align: center;
}
.founders-note .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* ============================================================
   Where to start
   ============================================================ */
.start {
  padding: 30px 0 80px;
  text-align: center;
}
.start .h-2 { margin-bottom: 28px; }
.start-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.start-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 20px 20px 18px;
  text-align: left;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.start-card:hover {
  border-color: var(--gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgba(15, 26, 46, 0.15);
}
.start-card .ico {
  width: 32px;
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.start-card .ico.green { color: var(--green); }
.start-card .ico.blue { color: var(--blue); }
.start-card .ico.gold { color: var(--gold); }
.start-card .ico.purple { color: var(--purple); }
.start-card h5 {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 4px;
  font-weight: 600;
  font-variation-settings: "opsz" 14;
}
.start-card p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--footer);
  color: #C9CEDA;
  padding: 36px 0 28px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr auto;
  gap: 40px;
  align-items: start;
}
.footer .brand { color: #fff; font-size: 18px; }
.footer .brand-mark { color: var(--gold-soft); }
.footer-tag {
  font-size: 12.5px;
  color: #98A1B5;
  margin-top: 10px;
  line-height: 1.5;
}
.footer-col h6 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin: 4px 0 12px;
  letter-spacing: 0.01em;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col a {
  font-size: 13px;
  color: #98A1B5;
}
.footer-col a:hover { color: #fff; }
.footer-social {
  display: flex;
  gap: 14px;
  color: #98A1B5;
}
.footer-social a { color: inherit; }
.footer-social a:hover { color: #fff; }
.footer-meta {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 28px;
  padding-top: 16px;
  font-size: 12px;
  color: #6E7689;
  text-align: right;
}

/* ============================================================
   Responsive tuning (preview-friendly)
   ============================================================ */
@media (max-width: 1024px) {
  .hero-grid, .churches-grid, .book-grid, .xrefs-body { grid-template-columns: 1fr; }
  .start-grid, .pillars { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .chip.connect-right::after, .chip.connect-left::after { display: none; }
  .feature-chips.left, .feature-chips.right { align-items: center; }
  .nav-links { display: none; }
}

/* ===== Waitlist modal ===== */
button.btn{border:0;cursor:pointer;font-family:inherit}
.wl-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(12,23,48,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:wlFade .2s ease}
.wl-overlay[hidden]{display:none}
@keyframes wlFade{from{opacity:0}to{opacity:1}}
.wl-box{position:relative;width:100%;max-width:420px;background:#fff;border-radius:var(--radius-lg,22px);box-shadow:0 30px 80px -20px rgba(15,26,46,.5);padding:42px 32px 34px;text-align:center;animation:wlPop .22s cubic-bezier(.2,.8,.3,1)}
@keyframes wlPop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.wl-close{position:absolute;top:12px;right:14px;border:0;background:none;font-size:26px;line-height:1;color:var(--muted,#7B8392);cursor:pointer;padding:4px 9px;border-radius:8px}
.wl-close:hover{color:var(--ink,#0F1A2E);background:#F2F0EA}
.wl-logo{width:46px;height:46px;object-fit:contain;margin:0 auto 14px;display:block}
.wl-box h3{font-family:Newsreader,Georgia,serif;font-size:26px;font-weight:600;color:var(--ink,#0F1A2E);margin:0 0 6px}
.wl-sub{color:var(--body,#4F5868);font-size:15px;margin:0 0 22px;line-height:1.5}
#wl-form{display:flex;flex-direction:column;gap:12px}
#wl-form input{width:100%;box-sizing:border-box;padding:13px 15px;font-size:16px;font-family:inherit;color:var(--ink,#0F1A2E);background:#fff;border:1.5px solid var(--hairline,#E6E3DA);border-radius:10px;outline:none;transition:border-color .15s,box-shadow .15s}
#wl-form input:focus{border-color:var(--gold,#D9B14A);box-shadow:0 0 0 3px rgba(217,177,74,.18)}
.wl-submit{margin-top:4px;width:100%;justify-content:center}
.wl-submit:disabled{opacity:.7;cursor:default}
.wl-error{color:#C0392B;font-size:14px;margin:2px 0 0}
.wl-error[hidden]{display:none}
.wl-success[hidden]{display:none}
.wl-success .wl-check{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;background:var(--gold,#D9B14A);color:#fff;font-size:28px;line-height:54px;font-weight:700}
.wl-success p{color:var(--body,#4F5868);font-size:15px;margin:6px 0 0;line-height:1.5}
.footer-inner--simple{display:block}

/* ===== Cross-reference verse (centered below graph) ===== */
.xref-verse{text-align:center;max-width:560px;margin:12px auto 0}
.xref-verse-text{font-family:Newsreader,Georgia,serif;font-size:19px;line-height:1.6;color:var(--ink,#0F1A2E);margin:0 0 8px}
.xref-verse .xu{padding-bottom:1px;border-bottom:2.5px solid transparent}
.xref-verse .xu-gold{border-bottom-color:#D9B14A}
.xref-verse .xu-teal{border-bottom-color:#1C97A0}
.xref-verse-ref{font-size:13px;color:var(--muted,#7B8392);margin:0}

/* Per-category active tab color — Evidence = green */
.tab.tab--green.active{color:#2E9B68;border-bottom-color:#3FA876}
.tab.tab--green.active .tab-ico{color:#3FA876}

/* Evidence slide — "David" in-app evidence mockup */
.ev-screen{background:#fff;border:1px solid var(--hairline,#E6E3DA);border-radius:18px;padding:16px;box-shadow:0 1px 2px rgba(15,26,46,.04),0 14px 40px -18px rgba(15,26,46,.16)}
.ev-screen-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.ev-screen-title{font-family:Newsreader,Georgia,serif;font-size:23px;font-weight:600;color:var(--ink,#0F1A2E);line-height:1.05}
.ev-screen-sub{font-size:12.5px;color:var(--muted,#7B8392);margin-top:3px}
.ev-screen-count{flex:none;font-size:12px;font-weight:600;color:#2E9B68;background:#DDEFE2;border-radius:999px;padding:5px 11px;white-space:nowrap}
/* neutralize the featured card's own frame so it sits cleanly inside the screen */
.ev-screen .ev-featured{border:0;box-shadow:none;padding:0;background:none}
.ev-cats{display:flex;gap:18px;flex-wrap:wrap;margin-top:15px;padding-top:13px;border-top:1px solid var(--hairline-2,#EFECE3)}
.ev-cat{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--body,#4F5868)}
.ev-cat .dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}

/* Evidence slide — photo collage with green quote */
.ev-collage{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1472/920;box-shadow:0 14px 40px -18px rgba(15,26,46,.45)}
.ev-collage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ev-collage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,24,16,.42),rgba(7,18,12,.72))}
.ev-collage-quote{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;font-family:Newsreader,Georgia,serif;font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1.12;letter-spacing:-.01em;color:#54D196;text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.6)}

/* Evidence slide — full-width banner with centered title + subtext */
.xrefs-slide--full{display:block}
.ev-collage--wide{aspect-ratio:1840/736;border-radius:18px}
.ev-collage--wide::after{background:radial-gradient(ellipse at center,rgba(6,16,11,.52),rgba(5,14,9,.80))}
.ev-collage-overlay{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 32px}
.ev-collage-title{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.015em;color:#54D196;text-shadow:0 2px 20px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.7);margin:0 0 12px}
.ev-collage-sub{font-family:"Geist",system-ui,sans-serif;font-size:clamp(14px,1.6vw,17px);line-height:1.5;color:#F3F6F2;text-shadow:0 1px 10px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.85);margin:0;max-width:600px}

/* Per-category active tab color — Prophecies = purple */
.tab.tab--purple.active{color:#5B45B0;border-bottom-color:#6E54C9}
.tab.tab--purple.active .tab-ico{color:#6E54C9}

/* Prophecy slide re-skinned purple */
[data-slide="prophecy"] .proph-ref{color:#6E54C9}
[data-slide="prophecy"] .proph-card.fulfilled{border-color:#C9BCF0;box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 26px -16px rgba(110,84,201,.5)}
[data-slide="prophecy"] .proph-card.fulfilled .proph-when{color:#6E54C9}
[data-slide="prophecy"] .proph-badge{background:#6E54C9}
[data-slide="prophecy"] .proph-link::before,[data-slide="prophecy"] .proph-link::after{background:repeating-linear-gradient(180deg,#C9BCF0 0 3px,transparent 3px 6px)}
.proph-gap{font-size:10.5px;font-weight:600;color:#6E54C9;margin-top:7px;white-space:nowrap;text-align:center}

/* Per-category active tab color — Definitions = blue */
.tab.tab--blue.active{color:#2456A8;border-bottom-color:#2F6BC4}
.tab.tab--blue.active .tab-ico{color:#2F6BC4}

/* Definitions slide re-skinned blue + breadth chips */
[data-slide="def"] .def-hl{color:#2456A8}
[data-slide="def"] .def-hl::after{background:#2F6BC4}
.def-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.def-chip{font-size:12px;color:var(--body,#4F5868);background:#fff;border:1px solid var(--hairline,#E6E3DA);border-radius:999px;padding:6px 12px}
.def-chip b{color:#2F6BC4;font-weight:700}

/* Definitions slide — word + real location photo card */
.def-vref{display:inline-block;margin-left:4px;font-size:12.5px;font-weight:600;color:#2456A8;font-family:"Geist",system-ui,sans-serif;white-space:nowrap}
.def-card--photo{padding:0;overflow:hidden;max-width:460px}
.def-photo{position:relative;height:158px}
.def-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.def-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35))}
.def-photo-cap{position:absolute;left:10px;bottom:8px;z-index:1;font-size:11px;font-weight:500;color:#fff;background:rgba(12,20,30,.55);padding:3px 9px;border-radius:6px}
.def-body{padding:15px 18px 16px}

/* Per-category active tab color — Audio + Video = rust */
.tab.tab--rust.active{color:#B14A2C;border-bottom-color:#C95B3A}
.tab.tab--rust.active .tab-ico{color:#C95B3A}

/* Audio + Video slide — phone (video) + audio "now playing" card */
.media-canvas{display:flex;align-items:center;gap:26px}
.media-phone{flex:none}
.media-phone img{display:block;height:336px;width:auto}
.media-listen{flex:1;min-width:0;background:#fff;border:1px solid var(--hairline,#E6E3DA);border-radius:16px;padding:18px;box-shadow:var(--shadow-card)}
.media-listen-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.media-listen-play{flex:none;width:44px;height:44px;border-radius:50%;background:#C95B3A;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;padding-left:2px}
.media-listen-head b{display:block;font-family:Newsreader,Georgia,serif;font-size:16px;color:var(--ink,#0F1A2E);line-height:1.2}
.media-listen-sub{font-size:12px;color:var(--muted,#7B8392)}
.media-listen .media-wave{height:34px;margin-bottom:14px}
.media-listen .media-wave span{background:#E3B6A6}
.media-listen-foot{font-size:12.5px;color:var(--body,#4F5868);border-top:1px solid var(--hairline-2,#EFECE3);padding-top:12px}
@media (max-width:560px){.media-canvas{flex-direction:column;align-items:stretch}.media-phone img{height:auto;width:62%;margin:0 auto}}

/* ===== Words & Places slide ===== */
.wp-canvas{display:flex;flex-direction:column;gap:14px}
.wp-word{position:relative;background:#fff;border:1px solid var(--hairline,#E6E3DA);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-card)}
.wp-audio{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--hairline,#E6E3DA);background:#fff;color:#2F6BC4;display:flex;align-items:center;justify-content:center;cursor:pointer}
.wp-audio:hover{background:#F4F8FE}
.wp-word-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.wp-heb{font-family:Georgia,"Times New Roman",serif;font-size:30px;color:var(--ink,#0F1A2E);line-height:1}
.wp-word-title{display:flex;align-items:center;gap:9px}
.wp-word-title b{font-family:Newsreader,Georgia,serif;font-style:italic;font-size:18px;color:var(--ink,#0F1A2E)}
.wp-pos{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:#2456A8;background:#DCE7F7;border-radius:999px;padding:3px 8px}
.wp-word-meta{font-size:12px;color:var(--muted,#7B8392);margin-top:3px}
.wp-mean{font-size:13.5px;line-height:1.55;color:var(--body,#4F5868);margin:0}
.wp-mean em{font-style:italic;color:var(--ink,#0F1A2E)}
.wp-places{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wp-place{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:16/10;box-shadow:var(--shadow-card)}
.wp-place img{width:100%;height:100%;object-fit:cover;display:block}
.wp-place::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.58))}
.wp-place figcaption{position:absolute;left:10px;bottom:9px;z-index:1;display:flex;align-items:center;gap:5px;color:#fff;font-size:13px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.wp-pin{color:#fff;flex:none}
.wp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wp-stat{background:#F6F4EF;border:1px solid var(--hairline-2,#EFECE3);border-radius:12px;padding:13px;text-align:center}
.wp-stat b{display:block;font-family:Newsreader,Georgia,serif;font-size:21px;color:var(--ink,#0F1A2E);line-height:1.1}
.wp-stat span{font-size:11.5px;color:var(--muted,#7B8392);margin-top:4px;display:block}
@media (max-width:560px){.wp-stats{grid-template-columns:1fr}.wp-stat{display:flex;justify-content:center;gap:8px;align-items:baseline}.wp-stat span{margin-top:0}}

/* Prophecies — three stacked fulfillment pairs on a tinted panel */
.proph-list{display:flex;flex-direction:column;gap:11px;background:linear-gradient(180deg,#FAF8FE,#F4F0FB);border:1px solid #ECE6F8;border-radius:18px;padding:16px}
.proph-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:13px}
.proph-mini{background:#fff;border:1px solid var(--hairline,#E6E3DA);border-radius:12px;padding:11px 13px;box-shadow:0 1px 2px rgba(15,26,46,.04)}
.proph-mini-when{display:block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#7B8392);margin-bottom:5px}
.proph-mini p{font-family:Newsreader,Georgia,serif;font-size:12.5px;line-height:1.4;color:var(--ink,#0F1A2E);margin:0}
.proph-mini.fulfilled{border-color:#C9BCF0;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 20px -16px rgba(110,84,201,.55)}
.proph-mini.fulfilled .proph-mini-when{color:#6E54C9}
.proph-arrow{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.proph-arrow .proph-badge{background:#6E54C9;font-size:9px;padding:4px 8px}
.proph-arrow .proph-gap{margin-top:0;font-size:9px}
@media (max-width:560px){.proph-row{grid-template-columns:1fr;gap:8px}.proph-arrow{flex-direction:row}}

/* ===== Church client mockup — Calvary Hillside app home ===== */
.cc-screen{background:#fff}
.cc-header{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid #EFEDE7}
.cc-logo{height:34px;width:auto;display:block}
.cc-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#cfe3d6,#9ec3ac);flex:none}
.cc-body{flex:1;display:flex;flex-direction:column;gap:9px;padding:11px;overflow:hidden}
.cc-sermon{background:#fff;border:1px solid #ECEAE3;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.cc-sermon-media{position:relative;aspect-ratio:16/9}
.cc-sermon-media img{width:100%;height:100%;object-fit:cover;display:block}
.cc-sermon-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.26))}
.cc-tag{position:absolute;top:7px;left:7px;z-index:1;font-size:7.5px;font-weight:700;letter-spacing:.07em;color:#fff;background:rgba(20,42,32,.72);padding:2px 6px;border-radius:4px}
.cc-play{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);color:#1E5C46;display:flex;align-items:center;justify-content:center;padding-left:2px;box-shadow:0 4px 12px rgba(0,0,0,.28)}
.cc-sermon-info{padding:8px 10px 9px}
.cc-sermon-title{font-family:Newsreader,Georgia,serif;font-size:13px;font-weight:600;color:#1a2233;line-height:1.15}
.cc-sermon-sub{font-size:9.5px;color:#8a8f99;margin-top:2px}
.cc-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.cc-quick-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1px solid #ECEAE3;border-radius:10px;padding:8px 4px;font-size:9px;font-weight:500;color:#3a414e}
.cc-qi{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff}
.cc-qi--g{background:#2E8B6A}.cc-qi--r{background:#C95B3A}.cc-qi--b{background:#2F6BC4}
.cc-event{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #ECEAE3;border-radius:12px;padding:9px 10px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.cc-event-date{flex:none;width:38px;text-align:center;background:#EAF2EE;border-radius:8px;padding:5px 0}
.cc-event-date b{display:block;font-family:Newsreader,Georgia,serif;font-size:16px;color:#1E5C46;line-height:1}
.cc-event-date span{font-size:8px;font-weight:700;letter-spacing:.06em;color:#2E8B6A}
.cc-event-title{font-size:11.5px;font-weight:600;color:#1a2233}
.cc-event-meta{font-size:9px;color:#8a8f99;margin-top:2px}
.cc-nav{display:flex;justify-content:space-around;align-items:center;gap:2px;background:#fff;margin:0 9px 10px;border-radius:18px;padding:9px 6px;box-shadow:0 6px 18px -6px rgba(15,26,46,.22);border:1px solid #F0EEE8}
.cc-nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8.5px;color:#9a9fa8}
.cc-nav-item svg{width:18px;height:18px}
.cc-nav-item.active{color:#16202e;font-weight:700}

/* Church mockup — header with name + events list refinements */
.cc-header{justify-content:flex-start;gap:9px}
.cc-logo{height:30px}
.cc-name{font-family:Newsreader,Georgia,serif;font-size:15px;font-weight:600;color:#1E5C46;letter-spacing:.005em}
.cc-section-title{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9a9fa8;margin:3px 1px 0}
.cc-events{display:flex;flex-direction:column;gap:8px}

/* ===== Book section — facts carousel + launch ===== */
.fact-carousel{display:flex;align-items:stretch;gap:8px;margin:6px 0 9px}
.fact-window{flex:1;overflow:hidden;border-radius:14px}
.fact-rail{display:flex;transition:transform .4s ease}
.fact-rail .ft-slide{flex:0 0 100%;margin:0}
.fact-nav{flex:none;width:32px;border:1px solid #E4D8BE;background:#fff;border-radius:10px;color:var(--gold-ink,#A9842B);font-size:20px;line-height:1;cursor:pointer;transition:background .15s}
.fact-nav:hover{background:#FBEFD2}
.fact-dots{display:flex;gap:6px;justify-content:center;margin-bottom:18px}
.fact-dot{width:6px;height:6px;border-radius:50%;background:#D8CFBC}
.fact-dot.active{background:var(--gold,#D9B14A)}
.book-launch{display:flex;flex-direction:column;gap:13px}
.book-coming{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:12.5px;font-weight:600;color:#8a6a1f;background:#FBEFD2;border:1px solid #EBD9A8;border-radius:999px;padding:6px 13px}
.book-coming-dot{width:7px;height:7px;border-radius:50%;background:#D9B14A}
.book-actions{display:flex;gap:12px}
.book-free{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--body,#4F5868);margin:0}
.book-free svg{color:var(--green,#3FA876);flex:none}
.book-free b{color:var(--ink,#0F1A2E);font-weight:600}

/* Real book cover image (replaces CSS-drawn book) */
.book-cover-img{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;border-radius:6px;box-shadow:0 30px 60px -20px rgba(15,26,46,.5),0 12px 22px -12px rgba(0,0,0,.3);transform:perspective(1300px) rotateY(-13deg);transition:transform .45s ease}
.book-cover-img:hover{transform:perspective(1300px) rotateY(-3deg)}

/* Stabilize carousel height — overlap all slides in ONE grid cell so the white card
   stays the height of the TALLEST slide and never shifts page content */
.xrefs-body{display:grid}
.xrefs-slide{position:static;top:auto;left:auto;right:auto;grid-area:1 / 1}
.xrefs-slide.active{position:static;top:auto;z-index:1}
.xrefs-slide--full{grid-area:1 / 1}

/* Book cover — gentler tilt, opposite direction */
.book-cover-img{transform:perspective(1400px) rotateY(8deg)}
.book-cover-img:hover{transform:perspective(1400px) rotateY(2deg)}

/* Facts carousel — taller box, each slide exactly one window wide (no peek of next) */
.fact-window{overflow:hidden}
.fact-rail .ft-slide{flex:0 0 100%;width:100%;box-sizing:border-box;margin:0;min-height:132px}

/* Fix facts carousel overflow — force the window to exactly one card wide */
.fact-window{flex:1 1 0;min-width:0;overflow:hidden}
.fact-rail{width:100%}
.fact-rail .ft-slide{flex:0 0 100%;width:100%;min-width:0;box-sizing:border-box}

/* Remove the inherited max-width cap so each fact card fills the window exactly */
.fact-rail .ft-slide{max-width:none;margin:0;flex:0 0 100%;width:100%;min-width:0;box-sizing:border-box}

/* ===== Church app (designer component) — Calvary Hillside home screen ===== */
.church-screen{background:#F4F2EB;flex:1;min-height:0;display:flex;flex-direction:column}
.ch-header2{background:linear-gradient(180deg,#1F6149 0%,#1A5440 100%);color:#fff;padding:16px 14px 13px;display:flex;align-items:center;justify-content:center;position:relative}
.ch-wordmark{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:.14em}
.ch-avatar{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#fff}
.ch-feed{flex:1;min-height:0;padding:12px;display:flex;flex-direction:column;gap:12px;background:#ECE9E1;overflow:hidden}
.ch-msg{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 8px -2px rgba(15,26,46,.14);flex:none}
.ch-msg-photo{position:relative;aspect-ratio:16/9;overflow:hidden;background:#20303C}
.ch-msg-photo img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.ch-msg-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.25) 100%)}
.ch-msg-tag{position:absolute;top:9px;left:9px;z-index:2;font-size:8px;font-weight:700;letter-spacing:.12em;color:#fff;background:rgba(0,0,0,.42);padding:3px 8px;border-radius:999px}
.ch-msg-play{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.94);color:#1A5440;display:flex;align-items:center;justify-content:center;padding-left:3px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ch-msg-body{background:#15352A;color:#fff;text-align:center;padding:13px 14px 15px}
.ch-msg-body b{font-family:Newsreader,Georgia,serif;font-size:18px;font-weight:600;display:block}
.ch-msg-rule{width:34px;height:2px;border-radius:2px;background:var(--gold,#D9B14A);margin:8px auto 9px}
.ch-msg-by{font-size:10.5px;color:rgba(255,255,255,.7)}
.ch-msg-cta{display:inline-block;margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#15352A;background:var(--gold,#D9B14A);padding:8px 22px;border-radius:999px;white-space:nowrap}
.ch-card2{background:#fff;border-radius:14px;padding:16px 16px 18px;text-align:center;box-shadow:0 2px 8px -2px rgba(15,26,46,.1);flex:none}
.ch-card2 h6{font-family:Newsreader,Georgia,serif;font-size:16px;font-weight:600;color:var(--ink,#0F1A2E);margin:0}
.ch-card2 p{font-size:11.5px;line-height:1.5;color:var(--body,#4F5868);margin:0 0 12px}
.ch-card2-cta{display:inline-block;font-size:11px;font-weight:700;color:#15352A;background:#E7E2D4;padding:8px 20px;border-radius:999px}
.church-tab .ct.active{color:#1A5440}

/* ===== Slim footer ===== */
.footer.footer--slim{padding:0}
.footer-bar{display:flex;align-items:center;justify-content:center;gap:14px;position:relative;padding:16px 30px;flex-wrap:wrap}
.footer--slim .brand{font-size:16px}
.footer--slim .footer-tag{font-size:13px;color:rgba(255,255,255,.72);margin:0;white-space:nowrap}
.footer--slim .footer-meta{position:absolute;right:30px;top:50%;transform:translateY(-50%);margin:0;padding:0;border:0;font-size:12px;color:rgba(255,255,255,.55)}
@media (max-width:760px){
  .footer--slim .footer-meta{position:static;transform:none;width:100%;text-align:center}
  .footer--slim .footer-tag{white-space:normal;text-align:center}
  .footer-bar{gap:8px}
}

/* Footer bar — logo left, mission centered, copyright right */
.footer-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:16px 30px;position:static}
.footer--slim .brand{justify-self:start}
.footer--slim .footer-tag{justify-self:center;text-align:center;white-space:nowrap}
.footer--slim .footer-meta{position:static;transform:none;justify-self:end;margin:0;padding:0;border:0;font-size:12px;color:rgba(255,255,255,.55)}
@media (max-width:760px){
  .footer-bar{grid-template-columns:1fr;justify-items:center;gap:8px}
  .footer--slim .footer-tag{white-space:normal}
}

/* Hero "free" emphasis line */
.hero-free{display:inline-block;margin-top:10px;font-weight:700;font-size:18px;color:var(--gold-ink,#A9842B)}

/* ===== Mobile polish pass ===== */
@media (max-width:860px){
  .xrefs-tabs{gap:18px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .tab{white-space:nowrap}
  .xrefs-slide{grid-template-columns:1fr;gap:18px}
  .church-showcase{grid-template-columns:1fr;justify-items:center;gap:20px}
  .feature-chips{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .feature-chips.left,.feature-chips.right{align-items:center}
  .hero-phone-wrap{justify-content:center;padding-left:0}
  .david-callout{display:none}
  .pillars{grid-template-columns:1fr}
}

/* ===== Mobile fixes v2 — carousel slides, evidence portrait, book layout ===== */
@media (max-width:860px){
  html,body{overflow-x:hidden}
  /* show only the active carousel slide in normal flow — no overlap, no white gaps */
  .xrefs-body{display:block}
  .xrefs-slide{display:none}
  .xrefs-slide.active{display:block}
  .xrefs-text{margin-bottom:14px}
  /* evidence: portrait crop so the collage is large and the text fits */
  .ev-collage--wide{aspect-ratio:2/3}
  .ev-collage-title{font-size:clamp(26px,8vw,34px)}
  .ev-collage-sub{font-size:13.5px;max-width:92%}
  /* book: force single column, de-tilt cover, keep everything on-screen */
  .book-grid{grid-template-columns:1fr !important}
  .book-cover-img{transform:none;max-width:240px}
  .fact-carousel{max-width:100%}
  .book-coming,.book-free{white-space:normal}
}

/* ===== Mobile fixes v3 — kill book-section overflow definitively ===== */
@media (max-width:860px){
  html,body{overflow-x:clip}
  /* Book section: simplest possible layout + clip anything that tries to overflow */
  .book-series{overflow:hidden}
  .book-grid{display:block !important}
  .book-stage{display:block;perspective:none;margin:0 0 22px}
  .book-cover-img{transform:none !important;width:62%;max-width:220px;margin:0 auto}
  .book-content{max-width:100%}
  .fact-carousel{max-width:100%;gap:6px}
  .fact-window{flex:1 1 0;min-width:0;overflow:hidden}
  .fact-rail .ft-slide{min-width:0;max-width:100%}
  .book-coming,.book-free{white-space:normal;max-width:100%}
}