* {
  box-sizing: border-box;
}

:root {
  --ink: #181612;
  --cream: #f4eedf;
  --paper: #efe5d0;
  --gold: #d9b867;
  --gold-soft: #f0d796;
  --night: #070816;
  --night-2: #10152d;
  --blue: #0a1f3a;
  --muted: #766d61;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #03040c;
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.experience,
.book-shell,
.book {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 540px;
}

.experience {
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(84, 45, 159, 0.18), transparent 35%),
    radial-gradient(circle at 85% 70%, rgba(20, 108, 152, 0.16), transparent 38%),
    #03040c;
}

.ambient {
  position: fixed;
  width: 45vmax;
  height: 45vmax;
  border-radius: 999px;
  filter: blur(80px);
  opacity: 0.18;
  pointer-events: none;
}

.ambient-a {
  top: -20vmax;
  left: -15vmax;
  background: #6730b2;
}

.ambient-b {
  right: -18vmax;
  bottom: -20vmax;
  background: #146b95;
}

.book-shell {
  perspective: 2600px;
}

.book {
  transform-style: preserve-3d;
  isolation: isolate;
}

.page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, filter;
  transition:
    transform 950ms cubic-bezier(0.645, 0.045, 0.355, 1),
    filter 800ms ease,
    opacity 300ms ease;
  box-shadow:
    inset 22px 0 40px rgba(0, 0, 0, 0.12),
    0 25px 80px rgba(0, 0, 0, 0.3);
}

.page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 650ms ease;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.28),
    rgba(255, 255, 255, 0.04) 16%,
    transparent 45%,
    rgba(0, 0, 0, 0.1)
  );
}

.page.turning::after {
  opacity: 1;
}

.page.flipped {
  transform: rotateY(-180deg);
  pointer-events: none;
  filter: brightness(0.72);
}

.page.active {
  transform: rotateY(0deg);
  filter: brightness(1);
}

.page-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 16vw;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 450ms ease;
  background: linear-gradient(90deg, rgba(0,0,0,.34), transparent);
}

.book-shell.is-turning .page-shadow {
  opacity: 0.5;
}

.page-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: clamp(34px, 5vw, 78px) clamp(28px, 7vw, 120px) clamp(28px, 4vw, 58px);
  display: flex;
  flex-direction: column;
}

.page-header,
.page-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.69rem;
  font-weight: 600;
  color: #6f665b;
}

.page-header .ornament {
  color: var(--gold);
}

.reference-top,
.page-footer span:last-child {
  justify-self: end;
}

.page-footer {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid rgba(75, 60, 42, 0.18);
}

.page-footer span:first-child {
  grid-column: 1 / 3;
}

.page-footer-dark {
  color: rgba(255,255,255,.52);
  border-color: rgba(255,255,255,.12);
}

.paper-texture {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.88), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(180, 152, 106, 0.12), transparent 44%),
    repeating-linear-gradient(
      0deg,
      rgba(72, 58, 38, 0.025) 0,
      rgba(72, 58, 38, 0.025) 1px,
      transparent 1px,
      transparent 4px
    ),
    #f1e8d7;
}

.scripture-page {
  background: var(--paper);
}

.warm-page .paper-texture {
  background:
    radial-gradient(circle at 70% 18%, rgba(255,255,255,.78), transparent 34%),
    radial-gradient(circle at 25% 78%, rgba(198,145,86,.15), transparent 38%),
    #f2e3cb;
}

.verse-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(90px, 0.45fr) minmax(0, 1.8fr);
  gap: clamp(26px, 7vw, 90px);
  align-items: center;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}

.verse-number {
  font-family: "Cinzel", serif;
  font-size: clamp(5.4rem, 14vw, 12rem);
  line-height: 0.8;
  color: rgba(98, 77, 50, 0.12);
  user-select: none;
}

.small-kicker {
  margin: 0 0 24px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 700;
  color: #8a7654;
}

.verse-content blockquote,
.hero-verse blockquote,
.psalm-layout blockquote,
.dark-centerpiece blockquote,
.final-content blockquote {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
}

.verse-content blockquote {
  font-size: clamp(1.65rem, 4vw, 4.3rem);
  line-height: 1.26;
  letter-spacing: -0.035em;
}

.reference {
  margin: 28px 0 0;
  font-family: "Cinzel", serif;
  color: #8a693b;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.reflection {
  max-width: 860px;
  margin: 0 auto 5vh;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 26px;
  border-left: 2px solid rgba(160, 119, 62, 0.55);
  background: rgba(255, 255, 255, 0.24);
}

.reflection-label {
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: #8a7654;
  font-size: 0.7rem;
  font-weight: 700;
}

.reflection p {
  margin: 0;
  line-height: 1.7;
  color: #4d473f;
}

.cover-page {
  color: #fff;
  background:
    radial-gradient(circle at 50% 40%, rgba(89, 68, 181, 0.2), transparent 30%),
    linear-gradient(135deg, #04040d 0%, #0a0d24 50%, #02030a 100%);
}

.cosmos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nebula,
.cover-vignette,
.final-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nebula {
  background:
    radial-gradient(ellipse at 30% 55%, rgba(84, 56, 170, 0.44), transparent 25%),
    radial-gradient(ellipse at 70% 32%, rgba(22, 103, 167, 0.32), transparent 27%),
    radial-gradient(ellipse at 55% 75%, rgba(182, 80, 130, 0.15), transparent 28%);
  filter: blur(8px);
  animation: nebulaMove 12s ease-in-out infinite alternate;
}

.cover-vignette {
  background:
    radial-gradient(circle at 50% 45%, transparent 0 34%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.78) 100%),
    linear-gradient(90deg, rgba(0,0,0,.62), transparent 14%, transparent 86%, rgba(0,0,0,.42));
}

@keyframes nebulaMove {
  from { transform: scale(1) translate3d(-1%, 0, 0); }
  to { transform: scale(1.08) translate3d(2%, -1.5%, 0); }
}

.cover-content {
  position: relative;
  z-index: 4;
  width: min(880px, 86vw);
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 0 100px;
}

.cross-mark {
  position: relative;
  width: 54px;
  height: 82px;
  margin-bottom: 38px;
  flex: 0 0 82px;
  filter: drop-shadow(0 0 18px rgba(236, 205, 128, 0.45));
}

.cross-vertical,
.cross-horizontal {
  position: absolute;
  display: block;
  background: linear-gradient(#fff7db, #c7a454);
  border-radius: 999px;
}

.cross-vertical {
  width: 4px;
  height: 82px;
  left: 25px;
  top: 0;
}

.cross-horizontal {
  height: 4px;
  width: 54px;
  left: 0;
  top: 28px;
}

.eyebrow {
  position: relative;
  z-index: 2;
  margin: 0 0 18px;
  color: var(--gold-soft);
  font-size: clamp(0.68rem, 1.1vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.cover-content h1,
.final-content h2 {
  margin: 0;
  font-family: "Cinzel", serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cover-content h1 {
  font-size: clamp(3.3rem, 8.8vw, 8rem);
  line-height: 0.95;
  text-shadow: 0 8px 50px rgba(0,0,0,.55);
}

.cover-subtitle {
  max-width: 670px;
  margin: 24px auto 0;
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  line-height: 1.7;
  color: rgba(255,255,255,.74);
  font-size: clamp(0.96rem, 2vw, 1.16rem);
}

.cover-verse {
  max-width: 720px;
  margin: clamp(28px, 5vh, 52px) 0 0;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.7;
  color: rgba(255,255,255,.88);
}

.cover-verse cite,
.final-content cite {
  display: block;
  margin-top: 12px;
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  color: var(--gold-soft);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .68rem;
  font-weight: 700;
}

.enter-book,
.ghost-button {
  border: 1px solid rgba(238, 211, 145, 0.48);
  color: #fff;
  cursor: pointer;
  transition: transform 220ms ease, background 220ms ease, border 220ms ease;
}

.enter-book {
  margin-top: clamp(28px, 5vh, 46px);
  padding: 13px 16px 13px 22px;
  min-width: 190px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 700;
}

.enter-arrow {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e9cf8b, #b88f3f);
  color: #17120a;
}

.enter-book:hover,
.ghost-button:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.13);
  border-color: rgba(238, 211, 145, 0.8);
}

.cover-footer,
.final-footer {
  position: absolute;
  left: clamp(24px, 5vw, 68px);
  right: clamp(24px, 5vw, 68px);
  bottom: 25px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.46);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .65rem;
}

.dark-scripture-page {
  color: #f7f2e8;
  background:
    radial-gradient(circle at 50% 38%, rgba(66, 72, 131, 0.35), transparent 26%),
    radial-gradient(circle at 80% 90%, rgba(47, 105, 129, 0.15), transparent 32%),
    #0b0d19;
}

.dark-scripture-page::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 12% 20%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 15%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 64% 62%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 24% 78%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 90% 82%, #fff 0 1px, transparent 1.5px);
  background-size: 210px 210px, 280px 280px, 320px 320px, 250px 250px, 300px 300px;
}

.constellation-lines {
  position: absolute;
  inset: 0;
  opacity: .18;
  background:
    linear-gradient(32deg, transparent 0 49.8%, rgba(230,215,172,.55) 50%, transparent 50.2%) 10% 20% / 220px 140px no-repeat,
    linear-gradient(145deg, transparent 0 49.8%, rgba(230,215,172,.4) 50%, transparent 50.2%) 75% 58% / 280px 180px no-repeat;
}

.page-header-dark {
  color: rgba(255,255,255,.54);
}

.gold {
  color: var(--gold-soft);
}

.dark-centerpiece {
  width: min(1080px, 100%);
  margin: auto;
  text-align: center;
}

.dark-centerpiece blockquote {
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(1.8rem, 4.6vw, 4.9rem);
  line-height: 1.23;
  letter-spacing: -.04em;
}

.promise-grid {
  width: min(980px, 100%);
  margin: 5vh auto 4vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(235, 212, 155, .18);
  border-bottom: 1px solid rgba(235, 212, 155, .18);
}

.promise-grid div {
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: center;
  border-right: 1px solid rgba(235, 212, 155, .14);
}

.promise-grid div:last-child {
  border-right: 0;
}

.promise-grid strong {
  font-family: "Libre Baskerville", serif;
  font-size: .95rem;
  font-weight: 400;
}

.promise-grid span {
  color: rgba(255,255,255,.42);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .6rem;
}

.hero-verse {
  flex: 1;
  width: min(1120px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-verse-words {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  margin: 0 0 32px;
  font-family: "Cinzel", serif;
  font-size: clamp(2rem, 6vw, 5.7rem);
  line-height: .95;
  color: #332718;
}

.hero-verse-words .script-word {
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: #aa7939;
  font-size: .82em;
}

.hero-verse blockquote {
  max-width: 900px;
  font-size: clamp(1.22rem, 2.8vw, 2.35rem);
  line-height: 1.55;
  color: #4b3c2b;
}

.gospel-note {
  width: min(980px, 100%);
  margin: 0 auto 4vh;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid rgba(126, 88, 45, .18);
  background: rgba(255,255,255,.22);
}

.gospel-icon {
  font-size: 2.2rem;
  color: #9d713d;
}

.gospel-note p {
  margin: 0;
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  line-height: 1.6;
  color: #5d4c39;
}

.blue-page {
  color: #ecf6ff;
  background:
    linear-gradient(rgba(4, 20, 37, .12), rgba(4, 20, 37, .45)),
    radial-gradient(circle at 60% 50%, rgba(90, 180, 200, .18), transparent 28%),
    linear-gradient(145deg, #071729, #0e3650 48%, #061521);
}

.blue-page::before {
  content: "";
  position: absolute;
  inset: auto -5% -28% -5%;
  height: 58%;
  filter: blur(2px);
  opacity: .35;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(104, 201, 223, .35), transparent 55%);
  transform: rotate(-2deg);
}

.water-glow {
  position: absolute;
  inset: 0;
  opacity: .26;
  background:
    repeating-radial-gradient(ellipse at 50% 90%, transparent 0 28px, rgba(160,226,239,.11) 29px 31px);
  mask-image: linear-gradient(to top, black, transparent 60%);
}

.psalm-layout {
  flex: 1;
  width: min(1050px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.65fr 2fr;
  gap: clamp(28px, 7vw, 88px);
  align-items: center;
}

.psalm-title {
  display: flex;
  flex-direction: column;
  color: rgba(255,255,255,.38);
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.psalm-title strong {
  font-size: clamp(5.5rem, 16vw, 12rem);
  line-height: .78;
  letter-spacing: -.06em;
  color: rgba(255,255,255,.11);
}

.psalm-layout blockquote {
  font-size: clamp(1.65rem, 4vw, 4.2rem);
  line-height: 1.3;
  letter-spacing: -.035em;
}

.pale {
  color: #aadbe5;
}

.quiet-line {
  width: min(1000px, 100%);
  margin: 0 auto 4vh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  text-align: center;
  color: rgba(255,255,255,.58);
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  font-size: .9rem;
}

.quiet-line span {
  height: 1px;
  background: rgba(255,255,255,.17);
}

.quiet-line p {
  margin: 0;
}

.final-page {
  color: white;
  background: #050712;
}

.final-glow {
  background:
    radial-gradient(circle at 50% 55%, rgba(221, 183, 91, 0.16), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(54, 74, 145, 0.25), transparent 44%),
    radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,.55) 100%);
}

.final-content {
  position: relative;
  z-index: 4;
  width: min(900px, 84vw);
  height: 100%;
  margin: 0 auto;
  padding-bottom: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.final-content h2 {
  font-size: clamp(2.8rem, 7vw, 6.7rem);
  line-height: 1;
  max-width: 850px;
}

.final-content blockquote {
  margin-top: 36px;
  max-width: 760px;
  font-size: clamp(1.15rem, 2.5vw, 1.75rem);
  line-height: 1.7;
  color: rgba(255,255,255,.78);
}

.final-actions {
  margin-top: 38px;
}

.ghost-button {
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .68rem;
  font-weight: 700;
}

.book-controls {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(8, 9, 17, 0.5);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}

.nav-button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  background: rgba(255,255,255,.08);
  transition: background 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.nav-button:hover:not(:disabled) {
  background: rgba(255,255,255,.16);
  transform: scale(1.04);
}

.nav-button:disabled {
  opacity: .26;
  cursor: not-allowed;
}

.progress-wrap {
  width: clamp(110px, 18vw, 200px);
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-track {
  height: 2px;
  flex: 1;
  background: rgba(255,255,255,.18);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 16.666%;
  background: var(--gold-soft);
  transition: width 650ms cubic-bezier(.22,.61,.36,1);
}

.progress-text {
  color: rgba(255,255,255,.68);
  font-size: .65rem;
  font-weight: 700;
  white-space: nowrap;
}

.swipe-hint {
  position: fixed;
  z-index: 119;
  right: 22px;
  top: 22px;
  padding: 9px 13px;
  border-radius: 999px;
  color: rgba(255,255,255,.6);
  background: rgba(8,9,17,.35);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: opacity 350ms ease;
}

.swipe-hint.hide {
  opacity: 0;
}

@media (max-width: 800px) {
  .experience,
  .book-shell,
  .book {
    min-height: 560px;
  }

  .page-inner {
    padding: 34px 24px 88px;
  }

  .page-header {
    font-size: .58rem;
  }

  .verse-layout,
  .psalm-layout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
  }

  .verse-number {
    position: absolute;
    top: 16%;
    left: 4%;
    font-size: 8rem;
  }

  .verse-content {
    position: relative;
    z-index: 2;
  }

  .verse-content blockquote {
    font-size: clamp(1.5rem, 7vw, 2.65rem);
  }

  .reflection {
    margin-bottom: 0;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }

  .reflection p {
    font-size: .83rem;
  }

  .dark-centerpiece blockquote {
    font-size: clamp(1.45rem, 6.5vw, 2.7rem);
  }

  .promise-grid {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 0;
  }

  .promise-grid div:nth-child(2) {
    border-right: 0;
  }

  .promise-grid div:nth-child(-n+2) {
    border-bottom: 1px solid rgba(235, 212, 155, .14);
  }

  .hero-verse {
    justify-content: center;
  }

  .hero-verse-words {
    font-size: clamp(2rem, 10vw, 3.8rem);
  }

  .hero-verse blockquote {
    font-size: 1.08rem;
  }

  .gospel-note {
    display: none;
  }

  .psalm-title {
    align-self: flex-start;
  }

  .psalm-title strong {
    font-size: 7rem;
  }

  .psalm-layout blockquote {
    font-size: clamp(1.45rem, 6.6vw, 2.6rem);
  }

  .quiet-line {
    display: none;
  }

  .cover-content {
    width: 88vw;
    padding-bottom: 110px;
  }

  .cover-content h1 {
    font-size: clamp(3.1rem, 16vw, 5.6rem);
  }

  .cross-mark {
    margin-bottom: 32px;
    transform: scale(.88);
    transform-origin: center bottom;
  }

  .cover-verse {
    font-size: .92rem;
  }

  .swipe-hint {
    top: 14px;
    right: 14px;
    font-size: .55rem;
  }

  .book-controls {
    bottom: max(14px, env(safe-area-inset-bottom));
  }

  .cover-footer,
  .final-footer {
    display: none;
  }
}

@media (max-height: 670px) and (min-width: 700px) {
  .page-inner {
    padding-top: 28px;
    padding-bottom: 80px;
  }

  .cover-content {
    transform: scale(.88);
  }

  .reflection,
  .promise-grid,
  .gospel-note,
  .quiet-line {
    margin-bottom: 0;
  }

  .verse-content blockquote,
  .dark-centerpiece blockquote,
  .psalm-layout blockquote {
    font-size: clamp(1.4rem, 3.3vw, 2.7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


.book-shell.on-cover .book-controls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(14px);
}

.book-controls {
  transition:
    opacity 280ms ease,
    visibility 280ms ease,
    transform 280ms ease;
}


/* =========================================================
   Gospel flyer-inspired chapters
   ========================================================= */
.gospel-guide-page,
.hotline-page {
  background: #fbfaf6;
  color: #17223a;
}

.gospel-guide-page {
  background:
    radial-gradient(circle at 90% 8%, rgba(99, 174, 230, .12), transparent 22%),
    radial-gradient(circle at 8% 92%, rgba(90, 150, 210, .10), transparent 22%),
    linear-gradient(180deg, #fffefd 0%, #f7fbff 100%);
}

.gospel-guide-page-two {
  background:
    radial-gradient(circle at 8% 8%, rgba(99, 174, 230, .11), transparent 22%),
    radial-gradient(circle at 92% 90%, rgba(90, 150, 210, .09), transparent 22%),
    linear-gradient(180deg, #fffefd 0%, #f8fbff 100%);
}

.gospel-page-inner,
.hotline-page-inner {
  padding-bottom: 88px;
}

.gospel-page-header,
.hotline-header {
  color: #244e87;
  border-bottom: 1px solid rgba(68, 139, 203, .25);
  padding-bottom: 14px;
}

.gospel-title-block {
  max-width: 1120px;
  width: 100%;
  margin: clamp(22px, 4vh, 42px) auto clamp(18px, 3vh, 28px);
  text-align: center;
}

.gospel-title-block h2,
.hotline-title h2 {
  margin: 0;
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  color: #123f7b;
  letter-spacing: .025em;
}

.gospel-title-block h2 {
  font-size: clamp(2rem, 5vw, 4.8rem);
}

.compact-title {
  margin-bottom: 18px;
}

.gospel-rescue-grid,
.savior-grid {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: clamp(24px, 5vw, 62px);
  align-items: center;
}

.gospel-copy,
.savior-copy {
  position: relative;
  padding-left: 62px;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(.94rem, 1.55vw, 1.12rem);
  line-height: 1.72;
  color: #293242;
}

.gospel-copy p,
.savior-copy p {
  margin: 0 0 14px;
}

.step-pill {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #2d78c4, #0c4f9d);
  color: #fff;
  font-family: "Cinzel", serif;
  font-size: 1.35rem;
  box-shadow: 0 8px 24px rgba(28, 91, 158, .22);
}

.gospel-scripture-card {
  position: relative;
  margin: 0;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid rgba(54, 131, 205, .46);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(235,246,255,.92), rgba(251,253,255,.95));
  box-shadow: 0 15px 45px rgba(31, 88, 148, .08);
  font-family: "Libre Baskerville", serif;
  font-size: clamp(1.08rem, 2.3vw, 1.7rem);
  line-height: 1.6;
  font-style: italic;
  color: #123d78;
  text-align: center;
}

.gospel-scripture-card cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-weight: 700;
  font-family: "Cinzel", serif;
  font-size: .78em;
}

.quote-mark {
  position: absolute;
  left: 14px;
  top: -10px;
  font-size: 4.6rem;
  line-height: 1;
  color: rgba(48, 125, 200, .28);
}

.gospel-need-section,
.how-saved-card {
  width: min(1120px, 100%);
  margin: clamp(20px, 3vh, 32px) auto 0;
  border: 1px solid rgba(58, 132, 200, .38);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  overflow: hidden;
}

.section-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: min(520px, 92%);
  padding: 9px 22px 9px 10px;
  background: linear-gradient(90deg, #195cab, #0e4a91);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: "Cinzel", serif;
  font-size: clamp(.88rem, 1.6vw, 1.16rem);
  font-weight: 700;
  clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%);
}

.section-ribbon span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.38);
}

.gospel-need-grid {
  display: grid;
  grid-template-columns: .95fr 1.25fr;
  gap: 28px;
  padding: 18px 24px 22px;
}

.gospel-need-grid > p,
.how-saved-card > p {
  margin: 0;
  font-family: "Libre Baskerville", serif;
  line-height: 1.65;
  color: #303745;
}

.scripture-bullets {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-family: "Libre Baskerville", serif;
  line-height: 1.45;
  color: #1f2b3c;
}

.scripture-bullets em {
  color: #1b5798;
  white-space: nowrap;
}

.savior-grid {
  margin-top: 6px;
}

.savior-verses {
  padding: 22px 24px 22px 42px;
  border-left: 2px solid rgba(48, 119, 190, .28);
  background: rgba(235,246,255,.45);
}

.how-saved-card > p {
  padding: 22px 26px 16px;
  font-size: clamp(.95rem, 1.5vw, 1.08rem);
}

.salvation-response {
  margin: 0 24px 22px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-top: 1px solid rgba(61, 128, 190, .2);
  color: #0d4a91;
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  font-size: clamp(1.18rem, 2.4vw, 1.7rem);
  text-align: center;
}

.small-cross {
  color: #4d8dca;
  font-style: normal;
}

.gospel-footer,
.hotline-footer {
  color: #456a91;
  border-color: rgba(64, 131, 193, .18);
}

/* =========================================================
   Bible Hotline flyer-inspired chapters
   ========================================================= */
.hotline-page {
  background:
    radial-gradient(circle at 0% 0%, rgba(133, 93, 188, .10), transparent 24%),
    radial-gradient(circle at 100% 100%, rgba(133, 93, 188, .10), transparent 24%),
    linear-gradient(180deg, #fffdf9 0%, #fdfaff 100%);
}

.hotline-page-two {
  background:
    radial-gradient(circle at 100% 0%, rgba(133, 93, 188, .11), transparent 24%),
    radial-gradient(circle at 0% 100%, rgba(133, 93, 188, .11), transparent 24%),
    linear-gradient(180deg, #fffdf9 0%, #fdfaff 100%);
}

.hotline-header {
  color: #4d317c;
  border-color: rgba(121, 84, 174, .24);
}

.hotline-title {
  width: min(1040px, 100%);
  margin: clamp(22px, 4vh, 42px) auto clamp(16px, 2.5vh, 28px);
  text-align: center;
}

.hotline-title h2 {
  color: #3d246e;
  font-size: clamp(2.4rem, 6.5vw, 6rem);
  line-height: .95;
}

.hotline-title p:last-child {
  margin: 12px 0 0;
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  color: #6b5791;
  font-size: clamp(.92rem, 1.8vw, 1.18rem);
}

.hotline-title-small h2 {
  font-size: clamp(2rem, 4.8vw, 4.3rem);
}

.hotline-kicker {
  color: #7855a8;
}

.hotline-list {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 8px 28px;
  border: 1px solid rgba(120, 84, 172, .23);
  border-radius: 22px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 18px 55px rgba(87, 60, 124, .06);
}

.hotline-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: 30px auto minmax(30px, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(108, 77, 152, .15);
  color: #3d2a6a;
}

.hotline-row:last-child {
  border-bottom: 0;
}

.hotline-row strong {
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: clamp(.78rem, 1.45vw, 1.03rem);
}

.hotline-row em {
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #482d7b;
  font-size: clamp(.74rem, 1.35vw, .98rem);
  white-space: nowrap;
}

.hotline-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #654293;
  font-size: 1rem;
}

.dots {
  height: 1px;
  align-self: center;
  background-image: radial-gradient(circle, rgba(104, 69, 151, .4) 1px, transparent 1.3px);
  background-size: 8px 2px;
  background-repeat: repeat-x;
}

.hotline-callout,
.hotline-ending {
  width: min(900px, 100%);
  margin: clamp(18px, 3vh, 28px) auto 0;
  padding: 16px 22px;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  border: 1px solid rgba(126, 88, 176, .26);
  background: rgba(255,255,255,.72);
  color: #4b3178;
  text-align: center;
}

.hotline-callout strong,
.hotline-ending strong {
  display: block;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.hotline-callout span:last-child {
  display: block;
  margin-top: 5px;
  color: #76658f;
  font-size: .84rem;
}

.hotline-book-icon {
  color: #72509d;
  font-size: 2rem;
}

.hotline-ending {
  margin-top: 28px;
}

.hotline-ending p {
  margin: 5px 0 0;
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  color: #76658f;
}



.floral-corner {
  position: absolute;
  width: clamp(100px, 18vw, 220px);
  height: clamp(100px, 18vw, 220px);
  z-index: 1;
  pointer-events: none;
  opacity: .62;
}

.floral-corner::before,
.floral-corner::after {
  content: "";
  position: absolute;
  border-radius: 62% 38% 64% 36% / 65% 45% 55% 35%;
  transform: rotate(35deg);
}

.floral-corner::before {
  width: 64%;
  height: 36%;
  top: 12%;
  left: 5%;
  background:
    radial-gradient(circle at 35% 45%, rgba(255,255,255,.8) 0 8%, transparent 9%),
    radial-gradient(circle at 45% 50%, currentColor 0 21%, transparent 22%),
    radial-gradient(circle at 25% 72%, currentColor 0 15%, transparent 16%),
    radial-gradient(circle at 72% 30%, currentColor 0 17%, transparent 18%);
  filter: blur(.2px);
}

.floral-corner::after {
  width: 72%;
  height: 8px;
  left: 8%;
  top: 48%;
  border-radius: 999px;
  background: currentColor;
  opacity: .32;
  transform: rotate(48deg);
  box-shadow:
    32px -22px 0 -1px currentColor,
    62px -42px 0 -2px currentColor,
    22px 26px 0 -2px currentColor;
}

.floral-blue { color: #78aadd; }
.floral-purple { color: #9a77c5; }
.floral-top-left { top: -24px; left: -18px; }
.floral-top-right { top: -24px; right: -18px; transform: scaleX(-1); }
.floral-bottom-left { bottom: -34px; left: -18px; transform: scaleY(-1); }
.floral-bottom-right { bottom: -34px; right: -18px; transform: scale(-1); }

@media (max-width: 800px) {
  .gospel-page-inner,
  .hotline-page-inner {
    padding: 30px 20px 82px;
  }

  .gospel-title-block {
    margin: 18px auto 12px;
  }

  .gospel-title-block h2 {
    font-size: clamp(1.75rem, 8vw, 2.6rem);
  }

  .gospel-rescue-grid,
  .savior-grid,
  .gospel-need-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .gospel-copy,
  .savior-copy {
    padding-left: 48px;
    font-size: .78rem;
    line-height: 1.55;
  }

  .gospel-copy p {
    margin-bottom: 8px;
  }

  .step-pill {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }

  .gospel-scripture-card {
    padding: 16px 18px;
    font-size: .9rem;
    line-height: 1.5;
  }

  .gospel-need-section,
  .how-saved-card {
    margin-top: 14px;
  }

  .section-ribbon {
    min-width: 88%;
    padding-block: 7px;
    font-size: .72rem;
  }

  .section-ribbon span {
    width: 28px;
    height: 28px;
  }

  .gospel-need-grid {
    padding: 12px 16px 16px;
  }

  .gospel-need-grid > p,
  .how-saved-card > p,
  .scripture-bullets {
    font-size: .72rem;
    line-height: 1.4;
  }

  .scripture-bullets {
    gap: 5px;
  }

  .savior-verses {
    padding: 12px 14px 12px 30px;
  }

  .salvation-response {
    margin: 0 14px 14px;
    padding: 12px 8px;
    font-size: .92rem;
  }

  .hotline-title {
    margin: 18px auto 14px;
  }

  .hotline-title h2 {
    font-size: clamp(2.3rem, 11vw, 3.9rem);
  }

  .hotline-title-small h2 {
    font-size: clamp(1.65rem, 7.8vw, 2.7rem);
  }

  .hotline-list {
    padding: 6px 12px;
    border-radius: 16px;
  }

  .hotline-row {
    min-height: 38px;
    grid-template-columns: 24px auto minmax(10px, 1fr) auto;
    gap: 7px;
  }

  .hotline-row strong,
  .hotline-row em {
    font-size: .64rem;
  }

  .hotline-callout,
  .hotline-ending {
    margin-top: 14px;
    padding: 11px 14px;
  }

  .hotline-callout strong,
  .hotline-ending strong {
    font-size: .9rem;
  }

  .hotline-callout span:last-child,
  .hotline-ending p {
    font-size: .67rem;
  }

  .floral-corner {
    opacity: .35;
  }
}

@media (max-height: 680px) and (min-width: 801px) {
  .gospel-page-inner,
  .hotline-page-inner {
    padding-top: 24px;
    padding-bottom: 72px;
  }

  .gospel-title-block,
  .hotline-title {
    margin-top: 16px;
    margin-bottom: 12px;
  }

  .gospel-copy,
  .savior-copy,
  .gospel-need-grid > p,
  .scripture-bullets {
    font-size: .82rem;
  }

  .hotline-row {
    min-height: 34px;
  }

  .hotline-callout,
  .hotline-ending {
    margin-top: 12px;
  }
}


/* =========================================================
   Fixes: page 5 overflow + page 8 open-bible icon
   ========================================================= */
.gospel-guide-page[data-page="5"] .page-inner {
  padding-top: clamp(26px, 3.2vh, 42px);
  padding-bottom: 74px;
}

.gospel-guide-page[data-page="5"] .gospel-title-block {
  margin-top: 16px;
  margin-bottom: 14px;
}

.gospel-guide-page[data-page="5"] .gospel-title-block h2 {
  font-size: clamp(1.75rem, 4.2vw, 3.8rem);
}

.gospel-guide-page[data-page="5"] .gospel-rescue-grid {
  gap: clamp(18px, 3.2vw, 34px);
}

.gospel-guide-page[data-page="5"] .gospel-copy {
  font-size: clamp(.88rem, 1.32vw, 1rem);
  line-height: 1.58;
}

.gospel-guide-page[data-page="5"] .gospel-copy p {
  margin-bottom: 9px;
}

.gospel-guide-page[data-page="5"] .gospel-scripture-card {
  padding: clamp(18px, 2.6vw, 28px);
  font-size: clamp(.98rem, 1.85vw, 1.42rem);
  line-height: 1.48;
}

.gospel-guide-page[data-page="5"] .quote-mark {
  top: -4px;
  font-size: 3.8rem;
}

.gospel-guide-page[data-page="5"] .gospel-need-section {
  margin-top: 14px;
}

.gospel-guide-page[data-page="5"] .section-ribbon {
  padding-top: 7px;
  padding-bottom: 7px;
}

.gospel-guide-page[data-page="5"] .gospel-need-grid {
  gap: 18px;
  padding: 14px 18px 18px;
}

.gospel-guide-page[data-page="5"] .gospel-need-grid > p,
.gospel-guide-page[data-page="5"] .scripture-bullets {
  font-size: clamp(.85rem, 1.24vw, .98rem);
  line-height: 1.45;
}

.gospel-guide-page[data-page="5"] .scripture-bullets {
  gap: 6px;
}

.open-bible-symbol {
  position: relative;
  width: 86px;
  height: 68px;
  flex: 0 0 86px;
  color: #654492;
}

.open-bible-symbol .mini-cross {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.45rem;
  line-height: 1;
  color: #654492;
}

.open-bible-symbol .book-left,
.open-bible-symbol .book-right {
  position: absolute;
  bottom: 8px;
  width: 30px;
  height: 22px;
  border: 3px solid currentColor;
  background: rgba(255,255,255,.55);
}

.open-bible-symbol .book-left {
  left: 10px;
  border-right-width: 2px;
  border-radius: 5px 16px 8px 8px;
  transform: skewY(5deg);
}

.open-bible-symbol .book-right {
  right: 10px;
  border-left-width: 2px;
  border-radius: 16px 5px 8px 8px;
  transform: skewY(-5deg);
}

.open-bible-symbol .book-center {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 2px;
  height: 21px;
  background: currentColor;
  transform: translateX(-50%);
  opacity: .85;
}

.open-bible-symbol .book-rays {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 64px;
  height: 22px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, transparent 0 10%, currentColor 10% 11%, transparent 11% 50%, currentColor 50% 51%, transparent 51% 90%, currentColor 90% 91%, transparent 91% 100%),
    linear-gradient(70deg, transparent 0 32%, currentColor 32% 33%, transparent 33% 100%),
    linear-gradient(110deg, transparent 0 67%, currentColor 67% 68%, transparent 68% 100%);
  opacity: .28;
}

@media (max-width: 800px) {
  .gospel-guide-page[data-page="5"] .page-inner {
    padding-top: 24px;
    padding-bottom: 80px;
  }

  .gospel-guide-page[data-page="5"] .gospel-title-block {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .gospel-guide-page[data-page="5"] .gospel-title-block h2 {
    font-size: clamp(1.52rem, 6.9vw, 2.25rem);
  }

  .gospel-guide-page[data-page="5"] .gospel-rescue-grid {
    gap: 10px;
  }

  .gospel-guide-page[data-page="5"] .gospel-copy {
    font-size: .72rem;
    line-height: 1.42;
  }

  .gospel-guide-page[data-page="5"] .gospel-copy p {
    margin-bottom: 6px;
  }

  .gospel-guide-page[data-page="5"] .gospel-scripture-card {
    padding: 12px 14px;
    font-size: .82rem;
    line-height: 1.42;
  }

  .gospel-guide-page[data-page="5"] .quote-mark {
    left: 10px;
    top: 0;
    font-size: 2.7rem;
  }

  .gospel-guide-page[data-page="5"] .gospel-need-section {
    margin-top: 10px;
  }

  .gospel-guide-page[data-page="5"] .gospel-need-grid {
    gap: 10px;
    padding: 10px 13px 14px;
  }

  .gospel-guide-page[data-page="5"] .gospel-need-grid > p,
  .gospel-guide-page[data-page="5"] .scripture-bullets {
    font-size: .69rem;
    line-height: 1.34;
  }

  .open-bible-symbol {
    width: 72px;
    height: 58px;
    flex-basis: 72px;
  }

  .open-bible-symbol .mini-cross {
    font-size: 1.2rem;
  }

  .open-bible-symbol .book-left,
  .open-bible-symbol .book-right {
    bottom: 7px;
    width: 24px;
    height: 18px;
    border-width: 2.5px;
  }

  .open-bible-symbol .book-left { left: 9px; }
  .open-bible-symbol .book-right { right: 9px; }

  .open-bible-symbol .book-center {
    bottom: 9px;
    height: 17px;
  }

  .open-bible-symbol .book-rays {
    width: 52px;
    top: 16px;
  }
}

@media (max-height: 680px) and (min-width: 801px) {
  .gospel-guide-page[data-page="5"] .page-inner {
    padding-top: 22px;
    padding-bottom: 70px;
  }

  .gospel-guide-page[data-page="5"] .gospel-copy {
    font-size: .82rem;
    line-height: 1.46;
  }

  .gospel-guide-page[data-page="5"] .gospel-scripture-card {
    font-size: .95rem;
  }

  .gospel-guide-page[data-page="5"] .gospel-need-grid > p,
  .gospel-guide-page[data-page="5"] .scripture-bullets {
    font-size: .8rem;
    line-height: 1.38;
  }
}


/* =========================================================
   Comprehensive responsive pass
   ========================================================= */
html { height: 100%; height: 100dvh; }
body { min-height: 100%; min-height: 100dvh; overscroll-behavior: none; }
.experience, .book-shell, .book { width: 100%; height: 100vh; height: 100dvh; min-height: 0; }
.book-shell { overflow: hidden; touch-action: pan-y; }
.page { width: 100%; height: 100%; min-height: 0; overscroll-behavior: contain; }
.page-inner { min-width: 0; min-height: 0; }
img, svg, canvas { max-width: 100%; }

@media (max-width: 1100px) {
  .page-inner { padding-left: clamp(28px, 5vw, 62px); padding-right: clamp(28px, 5vw, 62px); }
  .verse-layout, .psalm-layout, .gospel-rescue-grid, .savior-grid { gap: clamp(22px, 4vw, 48px); }
  .dark-centerpiece blockquote { font-size: clamp(1.65rem, 4.1vw, 3.8rem); }
  .promise-grid strong { font-size: .86rem; }
}

@media (max-width: 900px) {
  .page-header, .page-footer { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .page-header .ornament { display: none; }
  .reference-top { justify-self: end; text-align: right; }
  .page-footer span:first-child { grid-column: auto; }
  .verse-layout, .psalm-layout { grid-template-columns: minmax(72px, .35fr) minmax(0, 1.65fr); }
  .verse-number { font-size: clamp(4.7rem, 12vw, 8rem); }
  .promise-grid { grid-template-columns: repeat(2, 1fr); }
  .promise-grid div:nth-child(2) { border-right: 0; }
  .promise-grid div:nth-child(-n+2) { border-bottom: 1px solid rgba(235,212,155,.14); }
  .hero-verse-words { font-size: clamp(2rem, 7.2vw, 4.7rem); }
  .gospel-rescue-grid, .savior-grid { grid-template-columns: 1fr; align-items: start; }
  .gospel-scripture-card { max-width: 760px; width: 100%; margin-inline: auto; }
  .gospel-need-grid { grid-template-columns: 1fr; }
  .hotline-list { width: min(760px, 100%); }
}

@media (max-width: 800px) {
  body { overflow: hidden; }
  .page:not(.cover-page):not(.final-page) {
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page:not(.cover-page):not(.final-page)::-webkit-scrollbar { display: none; }
  .page-inner {
    min-height: 100%; height: auto;
    padding: max(26px, env(safe-area-inset-top)) 20px calc(92px + env(safe-area-inset-bottom));
  }
  .cover-page, .final-page { overflow: hidden; }
  .page-header { font-size: .55rem; line-height: 1.35; }
  .page-footer { font-size: .54rem; line-height: 1.35; }
  .verse-layout, .psalm-layout {
    display: flex; flex-direction: column; align-items: stretch; justify-content: center;
    min-height: calc(100dvh - 190px); gap: 20px;
  }
  .verse-number { position: static; align-self: flex-start; margin-bottom: -8px; font-size: clamp(4.7rem,24vw,7.5rem); }
  .verse-content blockquote, .psalm-layout blockquote { font-size: clamp(1.35rem,6.5vw,2.45rem); line-height: 1.34; }
  .reference { margin-top: 20px; }
  .reflection { width: 100%; margin: 18px 0 0; padding: 16px 17px; }
  .dark-centerpiece { margin: 44px auto 26px; }
  .dark-centerpiece blockquote { font-size: clamp(1.28rem,6vw,2.35rem); line-height: 1.36; }
  .promise-grid { width: 100%; margin: 24px auto 0; }
  .promise-grid div { min-width: 0; padding: 14px 8px; }
  .promise-grid strong { font-size: .74rem; line-height: 1.35; }
  .hero-verse { min-height: calc(100dvh - 190px); padding-block: 24px; }
  .hero-verse-words { gap: 8px 12px; font-size: clamp(1.85rem,10vw,3.5rem); }
  .hero-verse blockquote { font-size: clamp(1rem,4.9vw,1.4rem); line-height: 1.58; }
  .gospel-page-inner, .hotline-page-inner {
    min-height: 100%;
    padding: max(24px,env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom));
  }
  .gospel-title-block, .hotline-title, .gospel-rescue-grid, .savior-grid, .gospel-need-grid { width: 100%; }
  .gospel-copy, .savior-copy { padding-left: 46px; }
  .gospel-scripture-card, .gospel-need-section, .how-saved-card, .hotline-list, .hotline-callout, .hotline-ending { width: 100%; }
  .section-ribbon { min-width: 0; width: 100%; clip-path: none; border-radius: 0; }
  .hotline-row { grid-template-columns: 24px minmax(82px,auto) minmax(8px,1fr) auto; }
  .hotline-row strong, .hotline-row em { white-space: normal; overflow-wrap: anywhere; }
  .hotline-row em { text-align: right; }
  .book-controls { width: min(calc(100vw - 28px),370px); justify-content: center; gap: 10px; padding: 7px; }
  .progress-wrap { min-width: 0; width: auto; flex: 1; }
  .swipe-hint { max-width: calc(100vw - 28px); white-space: normal; text-align: center; }
}

@media (max-width: 560px) {
  .page-inner { padding-left: 16px; padding-right: 16px; }
  .page-header, .page-footer { letter-spacing: .10em; }
  .page-header { grid-template-columns: minmax(0,1fr) minmax(0,auto); }
  .chapter-label, .reference-top { overflow-wrap: anywhere; }
  .cover-content {
    width: min(90vw,560px);
    padding: max(52px,env(safe-area-inset-top)) 0 calc(110px + env(safe-area-inset-bottom));
    justify-content: center;
  }
  .cross-mark { width: 42px; height: 64px; flex-basis: 64px; margin-bottom: 24px; }
  .cross-vertical { width: 3px; height: 64px; left: 19.5px; }
  .cross-horizontal { width: 42px; height: 3px; top: 22px; }
  .cover-content h1 { font-size: clamp(2.75rem,15vw,4.45rem); }
  .cover-subtitle { margin-top: 18px; font-size: .88rem; line-height: 1.55; }
  .cover-verse { margin-top: 24px; font-size: .84rem; line-height: 1.55; }
  .enter-book { margin-top: 22px; min-width: 176px; padding: 11px 13px 11px 18px; }
  .verse-content blockquote, .psalm-layout blockquote { font-size: clamp(1.25rem,6.7vw,2rem); }
  .reflection { grid-template-columns: 1fr; }
  .promise-grid { grid-template-columns: 1fr; }
  .promise-grid div { border-right: 0 !important; border-bottom: 1px solid rgba(235,212,155,.14); }
  .promise-grid div:last-child { border-bottom: 0; }
  .gospel-title-block h2 { font-size: clamp(1.45rem,7.7vw,2.15rem); }
  .gospel-copy, .savior-copy { padding-left: 42px; font-size: .78rem; }
  .step-pill { width: 31px; height: 31px; font-size: .92rem; }
  .gospel-scripture-card { font-size: .88rem; }
  .gospel-need-grid > p, .how-saved-card > p, .scripture-bullets { font-size: .75rem; }
  .salvation-response { flex-direction: column; gap: 8px; }
  .hotline-title h2 { font-size: clamp(2rem,10.8vw,3rem); }
  .hotline-title-small h2 { font-size: clamp(1.4rem,7.2vw,2.1rem); }
  .hotline-row { min-height: 44px; grid-template-columns: 22px minmax(76px,1fr) minmax(4px,.5fr) minmax(92px,auto); gap: 5px; }
  .hotline-row strong, .hotline-row em { font-size: .60rem; line-height: 1.2; }
  .hotline-icon { width: 20px; height: 20px; font-size: .82rem; }
  .hotline-ending, .hotline-callout { padding: 12px 10px; gap: 10px; }
  .open-bible-symbol { transform: scale(.84); transform-origin: center; margin-inline: -5px; }
  .final-content {
    width: 88vw;
    padding: max(54px,env(safe-area-inset-top)) 0 calc(95px + env(safe-area-inset-bottom));
  }
  .final-content h2 { font-size: clamp(2.2rem,12vw,4.1rem); }
  .final-content blockquote { margin-top: 24px; font-size: .98rem; }
}

@media (max-width: 390px) {
  .page-inner, .gospel-page-inner, .hotline-page-inner { padding-left: 13px; padding-right: 13px; }
  .cover-content h1 { font-size: clamp(2.45rem,14.5vw,3.5rem); }
  .cover-subtitle { font-size: .8rem; }
  .cover-verse { font-size: .77rem; }
  .hotline-row { grid-template-columns: 20px minmax(68px,1fr) 8px minmax(82px,auto); }
  .hotline-row strong, .hotline-row em { font-size: .56rem; }
  .book-controls { width: calc(100vw - 18px); }
  .nav-button { width: 38px; height: 38px; }
  .progress-text { font-size: .58rem; }
}

@media (max-height: 560px) and (min-width: 560px) {
  .page:not(.cover-page):not(.final-page) { overflow-y: auto; scrollbar-width: none; }
  .page:not(.cover-page):not(.final-page)::-webkit-scrollbar { display: none; }
  .page-inner, .gospel-page-inner, .hotline-page-inner {
    min-height: 100%; height: auto;
    padding: max(18px,env(safe-area-inset-top)) 34px calc(82px + env(safe-area-inset-bottom));
  }
  .page-header { font-size: .52rem; }
  .cover-content {
    width: min(82vw,760px); transform: none;
    padding: max(18px,env(safe-area-inset-top)) 0 calc(76px + env(safe-area-inset-bottom));
  }
  .cross-mark { transform: scale(.68); transform-origin: center; margin-bottom: 4px; }
  .eyebrow { margin-bottom: 8px; font-size: .58rem; }
  .cover-content h1 { font-size: clamp(2.5rem,8vw,4.8rem); }
  .cover-subtitle { margin-top: 10px; font-size: .76rem; }
  .cover-verse { margin-top: 12px; font-size: .72rem; line-height: 1.4; }
  .enter-book { margin-top: 14px; transform: scale(.88); }
  .verse-layout, .psalm-layout { min-height: 0; }
  .reflection, .promise-grid, .gospel-need-section, .how-saved-card, .hotline-callout, .hotline-ending { margin-bottom: 0; }
  .gospel-title-block, .hotline-title { margin-top: 10px; margin-bottom: 10px; }
  .book-controls { bottom: max(8px,env(safe-area-inset-bottom)); }
  .swipe-hint { top: 8px; right: 8px; }
}

@supports (padding: max(0px)) {
  .cover-footer, .final-footer {
    left: max(22px,env(safe-area-inset-left)); right: max(22px,env(safe-area-inset-right));
    bottom: max(20px,env(safe-area-inset-bottom));
  }
}

@supports (height: 100dvh) {
  .experience, .book-shell, .book { height: var(--app-height,100dvh); }
}


/* =========================================================
   Cover title: Salvation and Redemption Is Yours
   ========================================================= */
.cover-content .salvation-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: min(1040px, 94vw);
  margin: 0;
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  text-align: center;
  line-height: .88;
  letter-spacing: .025em;
  text-wrap: balance;
}

.salvation-title .title-line {
  display: block;
}

.salvation-title .title-primary {
  font-size: clamp(2.9rem, 7.4vw, 7rem);
  text-shadow:
    0 8px 50px rgba(0,0,0,.55),
    0 0 34px rgba(226, 201, 137, .08);
}

.salvation-title .title-connector {
  margin: .18em 0 .08em;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1rem, 2.2vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: .18em;
  color: var(--gold-soft);
}

.salvation-title .title-yours {
  margin-top: .18em;
  font-size: clamp(1.5rem, 3.2vw, 2.9rem);
  letter-spacing: .22em;
  color: var(--gold-soft);
  text-shadow: 0 0 22px rgba(217,184,103,.22);
}

@media (max-width: 800px) {
  .cover-content .salvation-title {
    max-width: 92vw;
    line-height: .92;
  }

  .salvation-title .title-primary {
    font-size: clamp(2.45rem, 12vw, 4.8rem);
  }

  .salvation-title .title-connector {
    margin-top: .14em;
    font-size: clamp(.85rem, 4vw, 1.15rem);
  }

  .salvation-title .title-yours {
    margin-top: .25em;
    font-size: clamp(1.2rem, 5.5vw, 1.9rem);
    letter-spacing: .18em;
  }
}

@media (max-width: 390px) {
  .salvation-title .title-primary {
    font-size: clamp(2.08rem, 11vw, 3rem);
  }

  .salvation-title .title-yours {
    font-size: clamp(1.04rem, 5.2vw, 1.45rem);
    letter-spacing: .14em;
  }
}

@media (max-height: 560px) and (min-width: 560px) {
  .cover-content .salvation-title {
    line-height: .9;
  }

  .salvation-title .title-primary {
    font-size: clamp(2.25rem, 6.4vw, 4rem);
  }

  .salvation-title .title-connector {
    margin: .08em 0;
    font-size: .82rem;
  }

  .salvation-title .title-yours {
    margin-top: .08em;
    font-size: clamp(1.05rem, 2.5vw, 1.55rem);
  }
}


/* =========================================================
   Salvation journey — scrollable, responsive, interactive
   ========================================================= */
.scroll-page {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(190, 155, 78, .38) transparent;
}

.scroll-page::-webkit-scrollbar {
  width: 6px;
}

.scroll-page::-webkit-scrollbar-thumb {
  background: rgba(190, 155, 78, .38);
  border-radius: 999px;
}

.salvation-scriptures-page {
  color: #261f18;
  background:
    radial-gradient(circle at 12% 10%, rgba(229, 205, 146, .22), transparent 26%),
    radial-gradient(circle at 88% 88%, rgba(77, 128, 176, .10), transparent 26%),
    linear-gradient(180deg, #fdf9ef 0%, #f3ead7 100%);
}

.salvation-scroll-inner,
.decision-inner,
.guidance-inner {
  min-height: 100%;
  height: auto;
  padding-bottom: max(96px, calc(76px + env(safe-area-inset-bottom)));
}

.salvation-section-heading {
  width: min(1060px, 100%);
  margin: clamp(26px, 5vh, 50px) auto 24px;
  text-align: center;
}

.salvation-section-heading h2 {
  max-width: 940px;
  margin: 0 auto;
  font-family: "Cinzel", serif;
  font-size: clamp(2rem, 4.7vw, 4.6rem);
  line-height: 1.06;
  color: #2b261f;
  text-wrap: balance;
}

.salvation-scripture-grid {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.salvation-scripture-card {
  position: relative;
  min-width: 0;
  padding: clamp(22px, 3.5vw, 34px);
  border: 1px solid rgba(117, 92, 52, .18);
  border-radius: 20px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 16px 48px rgba(69, 52, 29, .06);
}

.salvation-scripture-card.feature-card {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(246,236,214,.92));
  border-color: rgba(168, 129, 60, .28);
}

.scripture-index {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #263851;
  color: #f1d38b;
  font-family: "Cinzel", serif;
  font-size: .72rem;
  letter-spacing: .08em;
}

.salvation-scripture-card h3 {
  margin: 0 0 12px;
  font-family: "Cinzel", serif;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: #28384f;
}

.salvation-scripture-card p {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(.96rem, 1.55vw, 1.14rem);
  line-height: 1.7;
  color: #40392f;
}

.card-theme {
  display: block;
  margin-top: 18px;
  color: #927039;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .64rem;
  font-weight: 700;
}

.salvation-callout {
  width: min(920px, 100%);
  margin: 22px auto 0;
  padding: 18px 22px;
  border-left: 3px solid #b58b42;
  background: rgba(255,255,255,.46);
  display: grid;
  gap: 5px;
}

.salvation-callout strong {
  font-family: "Libre Baskerville", serif;
}

.salvation-callout span {
  color: #665e52;
  line-height: 1.55;
}

.salvation-explainer,
.guidance-notes {
  width: min(980px, 100%);
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.salvation-explainer div,
.guidance-notes div {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(116, 92, 53, .17);
  border-radius: 16px;
  background: rgba(255,255,255,.52);
  display: grid;
  gap: 7px;
}

.salvation-explainer strong,
.guidance-notes strong {
  font-family: "Cinzel", serif;
  color: #31405b;
}

.salvation-explainer span,
.guidance-notes span {
  color: #665f54;
  line-height: 1.5;
  font-size: .88rem;
}

/* Decision pages */
.decision-page {
  color: #f8f3e8;
  background:
    radial-gradient(circle at 50% 30%, rgba(92, 73, 170, .30), transparent 30%),
    radial-gradient(circle at 50% 76%, rgba(213, 178, 84, .13), transparent 32%),
    #080a17;
}

.decision-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 16%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 38% 72%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 86% 81%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 23% 88%, #fff 0 1px, transparent 1.4px);
  background-size: 220px 220px, 300px 300px, 260px 260px, 340px 340px, 280px 280px;
}

.decision-content {
  position: relative;
  z-index: 2;
  width: min(1000px, 100%);
  margin: auto;
  padding: clamp(34px, 7vh, 74px) 0 34px;
  text-align: center;
}

.decision-cross {
  display: block;
  margin: 0 auto 20px;
  color: var(--gold-soft);
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  filter: drop-shadow(0 0 22px rgba(226,194,112,.26));
}

.decision-content h2 {
  max-width: 950px;
  margin: 0 auto;
  font-family: "Cinzel", serif;
  font-size: clamp(1.9rem, 4.5vw, 4.25rem);
  line-height: 1.12;
  text-wrap: balance;
}

.decision-copy {
  max-width: 760px;
  margin: 22px auto 0;
  font-family: "Libre Baskerville", serif;
  color: rgba(255,255,255,.70);
  line-height: 1.65;
}

.decision-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.decision-btn {
  min-width: 168px;
  padding: 14px 22px;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 700;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.decision-btn:hover {
  transform: translateY(-2px);
}

.decision-yes,
.prayer-next {
  border: 1px solid #e0c273;
  background: linear-gradient(135deg, #e7cd88, #b58a38);
  color: #171209;
}

.decision-more {
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.07);
  color: #fff;
}

.prayer-panel {
  width: min(780px, 100%);
  margin: 32px auto 0;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid rgba(228, 199, 122, .36);
  border-radius: 22px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 70px rgba(0,0,0,.18);
}

.prayer-panel[hidden] {
  display: none !important;
}

.prayer-panel h3 {
  margin: 0 0 18px;
  font-family: "Cinzel", serif;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  color: #f0d795;
}

.prayer-panel > p:not(.small-kicker):not(.prayer-note) {
  margin: 0;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.8;
  color: rgba(255,255,255,.88);
}

.prayer-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.58);
  font-size: .82rem;
  line-height: 1.55;
}

.prayer-next {
  margin-top: 22px;
}

/* Guidance page */
.guidance-page {
  color: #2a251e;
  background:
    radial-gradient(circle at 50% 20%, rgba(222, 195, 128, .24), transparent 25%),
    linear-gradient(180deg, #fffdf7 0%, #f3ead8 100%);
}

.guidance-content {
  width: min(980px, 100%);
  margin: auto;
  padding: clamp(38px, 8vh, 86px) 0 30px;
  text-align: center;
}

.guidance-icon {
  display: block;
  margin-bottom: 14px;
  color: #9b7535;
  font-size: clamp(3rem, 7vw, 5.5rem);
}

.guidance-content h2 {
  max-width: 820px;
  margin: 0 auto;
  font-family: "Cinzel", serif;
  font-size: clamp(2.1rem, 5vw, 4.7rem);
  line-height: 1.05;
  color: #2c2923;
}

.guidance-lead {
  max-width: 760px;
  margin: 24px auto 0;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(1rem, 2vw, 1.3rem);
  line-height: 1.7;
  color: #5c554a;
}

.contact-number {
  display: inline-block;
  margin-top: 30px;
  padding: 14px 28px;
  border: 1px solid rgba(151,111,51,.34);
  border-radius: 999px;
  color: #6d4d1e;
  text-decoration: none;
  font-family: "Cinzel", serif;
  font-size: clamp(2rem, 5.5vw, 4.3rem);
  letter-spacing: .08em;
  background: rgba(255,255,255,.55);
  box-shadow: 0 15px 44px rgba(84,60,25,.08);
}

@media (max-width: 800px) {
  .salvation-scroll-inner,
  .decision-inner,
  .guidance-inner {
    padding:
      max(24px, env(safe-area-inset-top))
      18px
      calc(100px + env(safe-area-inset-bottom));
  }

  .salvation-section-heading {
    margin-top: 20px;
    margin-bottom: 16px;
  }

  .salvation-section-heading h2 {
    font-size: clamp(1.55rem, 7.5vw, 2.7rem);
  }

  .salvation-scripture-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .salvation-scripture-card.feature-card {
    grid-column: auto;
  }

  .salvation-scripture-card {
    padding: 18px;
  }

  .salvation-scripture-card p {
    font-size: .88rem;
    line-height: 1.58;
  }

  .salvation-explainer,
  .guidance-notes {
    grid-template-columns: 1fr;
  }

  .decision-content {
    padding-top: 32px;
  }

  .decision-content h2 {
    font-size: clamp(1.55rem, 7.2vw, 2.75rem);
  }

  .decision-actions {
    flex-direction: column;
    align-items: stretch;
    width: min(380px, 100%);
    margin-inline: auto;
  }

  .decision-btn {
    width: 100%;
  }

  .prayer-panel {
    padding: 20px 17px;
  }

  .guidance-content {
    padding-top: 34px;
  }

  .contact-number {
    font-size: clamp(1.8rem, 10vw, 3rem);
  }
}

@media (max-width: 420px) {
  .salvation-scroll-inner,
  .decision-inner,
  .guidance-inner {
    padding-left: 13px;
    padding-right: 13px;
  }

  .salvation-scripture-card {
    border-radius: 15px;
    padding: 16px;
  }

  .salvation-scripture-card h3 {
    font-size: 1rem;
  }

  .card-theme {
    font-size: .56rem;
    letter-spacing: .1em;
  }

  .decision-cross {
    margin-bottom: 14px;
  }

  .decision-content h2 {
    font-size: clamp(1.42rem, 7vw, 2.25rem);
  }

  .decision-copy {
    font-size: .87rem;
  }

  .prayer-panel > p:not(.small-kicker):not(.prayer-note) {
    font-size: .9rem;
    line-height: 1.65;
  }
}

@media (max-height: 600px) and (min-width: 600px) {
  .scroll-page {
    overflow-y: auto !important;
  }

  .salvation-scroll-inner,
  .decision-inner,
  .guidance-inner {
    min-height: auto;
    padding-top: 20px;
    padding-bottom: 86px;
  }

  .salvation-section-heading,
  .decision-content,
  .guidance-content {
    padding-top: 16px;
    margin-top: 0;
  }
}


/* =========================================================
   Flow fixes — Page 4 continuation + final page 15
   ========================================================= */

/* Page 4 must always allow the entire salvation message to be read. */
.gospel-guide-page[data-page="4"] {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(65, 125, 184, .35) transparent;
}

.gospel-guide-page[data-page="4"]::-webkit-scrollbar {
  width: 6px;
}

.gospel-guide-page[data-page="4"]::-webkit-scrollbar-thumb {
  background: rgba(65, 125, 184, .35);
  border-radius: 999px;
}

.gospel-guide-page[data-page="4"] .gospel-page-inner {
  height: auto !important;
  min-height: 100%;
  padding-bottom: max(110px, calc(88px + env(safe-area-inset-bottom)));
}

.gospel-guide-page[data-page="4"] .savior-grid {
  flex: 0 0 auto;
}

.gospel-guide-page[data-page="4"] .how-saved-card {
  flex: 0 0 auto;
  margin-bottom: 24px;
}

.gospel-guide-page[data-page="4"] .page-footer {
  flex: 0 0 auto;
}

/* Page 15 is now the real ending of the book. */
.guidance-final-actions {
  width: min(700px, 100%);
  margin: 30px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(125, 91, 43, .18);
  text-align: center;
}

.guidance-final-actions p {
  margin: 0 0 16px;
  color: #6b6255;
  font-family: "Libre Baskerville", serif;
  line-height: 1.55;
}

.guidance-restart-btn {
  min-width: 180px;
  padding: 14px 24px;
  border: 1px solid #9f7839;
  border-radius: 999px;
  background: linear-gradient(135deg, #b98c43, #7b5726);
  color: #fffaf0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .72rem;
  font-weight: 700;
  box-shadow: 0 12px 34px rgba(87, 60, 25, .14);
  transition: transform .2s ease, box-shadow .2s ease;
}

.guidance-restart-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(87, 60, 25, .20);
}

@media (max-width: 800px) {
  .gospel-guide-page[data-page="4"] .gospel-page-inner {
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
  }

  .gospel-guide-page[data-page="4"] .gospel-title-block {
    margin-top: 16px;
    margin-bottom: 14px;
  }

  .gospel-guide-page[data-page="4"] .savior-grid {
    gap: 12px;
  }

  .gospel-guide-page[data-page="4"] .how-saved-card {
    margin-top: 14px;
    margin-bottom: 18px;
  }

  .guidance-final-actions {
    margin-top: 22px;
  }

  .guidance-restart-btn {
    width: min(320px, 100%);
  }
}

@media (max-height: 620px) {
  .gospel-guide-page[data-page="4"] .gospel-page-inner {
    height: auto !important;
    min-height: auto;
    padding-bottom: 92px;
  }
}


/* =========================================================
   Smooth 3D flip engine
   ========================================================= */
.book-shell {
  perspective: 2200px;
  perspective-origin: 50% 50%;
  -webkit-perspective: 2200px;
}

.book {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.page {
  transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  transform: translate3d(0, 0, 0) rotateY(0deg);
  -webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* Page motion is driven by the Web Animations API.
     Removing the old CSS transform transition prevents double-animation. */
  transition: none !important;
  filter: none !important;
  will-change: auto;
}

.page.flipped {
  transform: translate3d(0, 0, 0) rotateY(-180deg);
  -webkit-transform: translate3d(0, 0, 0) rotateY(-180deg);
  filter: none !important;
}

.page.active {
  transform: translate3d(0, 0, 0) rotateY(0deg);
  -webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
  filter: none !important;
}

.page.flip-running {
  will-change: transform;
  overflow: hidden !important;
  pointer-events: none !important;
  contain: paint;
}

.page.flip-running::after {
  opacity: .62;
  animation: flipPageShade 760ms cubic-bezier(.22,.61,.36,1) both;
}

@keyframes flipPageShade {
  0%   { opacity: .05; background: linear-gradient(90deg, rgba(0,0,0,.08), transparent 25%, transparent 100%); }
  42%  { opacity: .68; background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(255,255,255,.05) 18%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.42)); }
  58%  { opacity: .72; background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(255,255,255,.04) 20%, rgba(0,0,0,.24) 74%, rgba(0,0,0,.48)); }
  100% { opacity: .08; background: linear-gradient(90deg, rgba(0,0,0,.10), transparent 32%, transparent 100%); }
}

.book-shell.is-turning .page-shadow {
  opacity: .22;
}

.book-shell.is-turning .book-controls,
.book-shell.is-turning .page:not(.flip-running) {
  pointer-events: none;
}

/* Keep long scrollable pages performant when they are NOT turning. */
.scroll-page:not(.flip-running) {
  contain: layout paint;
}

@media (max-width: 800px) {
  .book-shell {
    perspective: 1600px;
    -webkit-perspective: 1600px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page.flip-running::after {
    animation: none !important;
  }
}


/* Contact page — primary salvation guidance numbers */
.contact-numbers {
  width: min(760px, 100%);
  margin: 28px auto 0;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.contact-label,
.contact-secondary-label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .68rem;
  font-weight: 700;
  color: #80653d;
}

.primary-contact-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.contact-number.primary-contact {
  margin-top: 0;
  min-width: 230px;
  background: linear-gradient(135deg, #fffaf0, #f0dfba);
  border-color: rgba(143, 101, 38, .46);
  color: #6f4b16;
  box-shadow: 0 16px 42px rgba(98, 67, 25, .12);
}

.contact-number.secondary-contact {
  margin-top: 0;
  padding: 10px 20px;
  font-size: clamp(1.2rem, 3vw, 2rem);
  opacity: .82;
  background: rgba(255,255,255,.38);
}

.contact-secondary-label {
  margin-top: 8px;
  color: #8c8171;
}

@media (max-width: 600px) {
  .primary-contact-list {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-number.primary-contact {
    width: 100%;
    min-width: 0;
    font-size: clamp(1.8rem, 10vw, 2.8rem);
  }

  .contact-number.secondary-contact {
    font-size: clamp(1.15rem, 6vw, 1.7rem);
  }
}


/* =========================================================
   Navigation/content separation
   The bottom controls have a dedicated safe zone so they
   never cover Scripture, footers, prayers, or contact details.
   ========================================================= */
:root {
  --book-nav-height: 76px;
  --book-nav-gap: 18px;
  --book-nav-safe: calc(var(--book-nav-height) + var(--book-nav-gap) + 24px);
}

/* Every page after the cover reserves real visual space for the navigator. */
.page:not(.cover-page) .page-inner {
  padding-bottom: calc(var(--book-nav-safe) + env(safe-area-inset-bottom)) !important;
}

/* Scrollable pages can always scroll their final content completely above the dock. */
.scroll-page,
.page:not(.cover-page):not(.final-page) {
  scroll-padding-bottom: calc(var(--book-nav-safe) + 24px + env(safe-area-inset-bottom));
}

.scroll-page .page-inner::after,
.page:not(.cover-page):not(.final-page) .page-inner::after {
  content: "";
  display: block;
  flex: 0 0 calc(var(--book-nav-gap) + 12px);
  width: 100%;
  pointer-events: none;
}

/* Keep page footers visibly above the controls. */
.page:not(.cover-page) .page-footer,
.page:not(.cover-page) .final-footer {
  position: relative;
  z-index: 4;
  margin-bottom: 0;
}

/* Dedicated navigation dock. */
.book-controls {
  box-sizing: border-box;
  min-height: var(--book-nav-height);
  bottom: max(10px, env(safe-area-inset-bottom));
  padding: 10px 12px;
  background: rgba(6, 8, 16, .88);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 44px rgba(0,0,0,.38),
    0 0 0 1px rgba(0,0,0,.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* A subtle fade behind the dock further separates UI from page content. */
.book-shell::after {
  content: "";
  position: fixed;
  z-index: 110;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--book-nav-safe) + 12px);
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(3,4,12,.72) 0%,
    rgba(3,4,12,.34) 48%,
    rgba(3,4,12,0) 100%
  );
  opacity: 1;
}

/* The cover has no navigator, therefore no bottom fade either. */
.book-shell.on-cover::after {
  opacity: 0;
}

/* The controls always stay above the separation fade. */
.book-controls {
  z-index: 130;
}

/* Guidance/contact page needs a little more room because it is the final page. */
.guidance-page .guidance-inner {
  padding-bottom: calc(var(--book-nav-safe) + 38px + env(safe-area-inset-bottom)) !important;
}

.guidance-final-actions {
  margin-bottom: 8px;
}

/* Decision pages: ensure the prayer's Next button can scroll fully clear of the navigator. */
.decision-page .decision-inner {
  padding-bottom: calc(var(--book-nav-safe) + 38px + env(safe-area-inset-bottom)) !important;
}

.prayer-panel {
  margin-bottom: 12px;
}

/* Hotline and Gospel pages often have dense bottom content. */
.hotline-page .hotline-page-inner,
.gospel-guide-page .gospel-page-inner,
.salvation-scriptures-page .salvation-scroll-inner {
  padding-bottom: calc(var(--book-nav-safe) + 34px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 800px) {
  :root {
    --book-nav-height: 66px;
    --book-nav-gap: 14px;
    --book-nav-safe: calc(var(--book-nav-height) + var(--book-nav-gap) + 28px);
  }

  .book-controls {
    bottom: max(8px, env(safe-area-inset-bottom));
    min-height: var(--book-nav-height);
    width: min(calc(100vw - 20px), 390px);
    padding: 8px 10px;
  }

  .page:not(.cover-page) .page-inner {
    padding-bottom: calc(var(--book-nav-safe) + env(safe-area-inset-bottom)) !important;
  }

  .guidance-page .guidance-inner,
  .decision-page .decision-inner,
  .hotline-page .hotline-page-inner,
  .gospel-guide-page .gospel-page-inner,
  .salvation-scriptures-page .salvation-scroll-inner {
    padding-bottom: calc(var(--book-nav-safe) + 28px + env(safe-area-inset-bottom)) !important;
  }

  .book-shell::after {
    height: calc(var(--book-nav-safe) + 8px);
  }
}

@media (max-width: 390px) {
  :root {
    --book-nav-height: 62px;
    --book-nav-gap: 12px;
  }

  .book-controls {
    width: calc(100vw - 14px);
    padding-inline: 7px;
  }

  .nav-button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .progress-wrap {
    gap: 8px;
  }
}

/* Short landscape displays need proportionally more scrolling room
   because the navigator consumes a larger percentage of the viewport. */
@media (max-height: 580px) {
  :root {
    --book-nav-height: 58px;
    --book-nav-gap: 10px;
    --book-nav-safe: calc(var(--book-nav-height) + var(--book-nav-gap) + 24px);
  }

  .book-controls {
    min-height: var(--book-nav-height);
    bottom: max(5px, env(safe-area-inset-bottom));
  }

  .page:not(.cover-page) .page-inner,
  .guidance-page .guidance-inner,
  .decision-page .decision-inner,
  .hotline-page .hotline-page-inner,
  .gospel-guide-page .gospel-page-inner,
  .salvation-scriptures-page .salvation-scroll-inner {
    padding-bottom: calc(var(--book-nav-safe) + 24px + env(safe-area-inset-bottom)) !important;
  }
}