@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Oswald:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

:root {
  --app-height: 100vh;
  /* Clean Minimalism Color Palette */
  --color-bg-primary: #FAF9F6;      /* Cream / Warm Alabaster */
  --color-bg-secondary: #F1F0EC;    /* Soft Warm Gray / Beige */
  --color-bg-dark: #141715;         /* Deepest Forest Night */
  --color-bg-dark-accent: #141715;  /* Deepest Forest Night */
  
  --color-text-primary: #1A1A1A;    /* Dark Charcoal for pure contrast */
  --color-text-muted: #454545;      /* Slate Gray for legible descriptions */
  --color-text-light: #FAF9F6;      /* Off-white cream for dark backgrounds */
  --color-text-light-muted: #8E8B82;/* Elegant muted gold/gray */
  
  --color-accent: #4A5D4E;          /* Muted, organic forest sage green */
  --color-accent-hover: #36453A;    /* Darker forest sage */
  --color-accent-bg-trans: rgba(74, 93, 78, 0.08);
  
  --color-border: #E5E4E1;          /* Subtle warm concrete border */
  --color-border-dark: #2E3330;     /* Dark theme matching border */
  
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-display: "Oswald", "Inter", sans-serif;
  
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@supports (height: 100dvh) {
  :root {
    --app-height: 100dvh;
  }
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Typography Selection & Hierarchy */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Ensure all main headings use Oswald and are all uppercase, overriding any inline var(--font-serif) */
h2, h3,
.step-title,
.transition-title,
.modal-title,
.contact-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  font-weight: 400 !important;
}

h1,
.headline {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
}

.theme-light h1,
.theme-light .headline,
.theme-beige h1,
.theme-beige .headline {
  color: var(--color-text-primary) !important;
  --color-headline-highlight: #2A75D3;
}

.theme-dark h1,
.theme-dark .headline,
.theme-dark-accent h1,
.theme-dark-accent .headline {
  color: var(--color-text-light) !important;
  --color-headline-highlight: #60A5FA;
}

h1 span.highlight,
.headline span.highlight {
  color: var(--color-headline-highlight);
  font-weight: 700 !important;
}

h1 span.italic {
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
}

p {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 2rem; /* Clear elegant space between paragraphs */
}

/* Accessibility Focus States */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Layout Landmarks */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.75rem 2.5rem;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.75rem;
  column-gap: 1rem;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

@media (max-width: 600px) {
  header {
    padding: 1.25rem 1.25rem;
  }
}

.logo-breadcrumb-container {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

.logo-link {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-text-primary);
  text-decoration: none;
  font-style: italic;
  pointer-events: auto;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.logo-home-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  fill: currentColor;
  stroke: none;
  display: inline-block;
  vertical-align: middle;
}

.logo-breadcrumb-sep {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-text-primary);
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.logo-breadcrumb-curr {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity var(--transition-fast);
}

a.logo-breadcrumb-curr:hover,
.breadcrumb-what-next-link:hover {
  opacity: 0.82;
}

.dark-section-active .logo-link,
header.dark-section-active .logo-link {
  color: var(--color-text-light) !important;
}

.dark-section-active .logo-breadcrumb-sep,
header.dark-section-active .logo-breadcrumb-sep {
  color: var(--color-text-light) !important;
  opacity: 0.65 !important;
}

body.slide-deck-active header .logo-breadcrumb-sep {
  font-family: var(--font-serif) !important;
  font-size: 1.1rem !important;
}

body.slide-deck-active header .logo-breadcrumb-curr {
  font-family: var(--font-serif) !important;
  font-size: 1.1rem !important;
}

/* Dynamic section highlight colors for breadcrumb current page indicator */
body:has(#next-intro.active) .logo-breadcrumb-curr,
body[data-active-section="next-intro"] .logo-breadcrumb-curr {
  color: #eb9400 !important;
}
body:has(#next-bible.active) .logo-breadcrumb-curr,
body[data-active-section="next-bible"] .logo-breadcrumb-curr {
  color: #a93a5c !important;
}
body:has(#next-talk.active) .logo-breadcrumb-curr,
body[data-active-section="next-talk"] .logo-breadcrumb-curr {
  color: #6085fa !important;
}
body:has(#next-church.active) .logo-breadcrumb-curr,
body[data-active-section="next-church"] .logo-breadcrumb-curr {
  color: #cf5b0b !important;
}
body:has(#next-tell.active) .logo-breadcrumb-curr,
body[data-active-section="next-tell"] .logo-breadcrumb-curr {
  color: #f8634d !important;
}
body:has(#next-live.active) .logo-breadcrumb-curr,
body[data-active-section="next-live"] .logo-breadcrumb-curr {
  color: #356d5c !important;
}
body:has(#next-baptise.active) .logo-breadcrumb-curr,
body[data-active-section="next-baptise"] .logo-breadcrumb-curr {
  color: #10d2d9 !important;
}
body:has(#next-learning.active) .logo-breadcrumb-curr,
body[data-active-section="next-learning"] .logo-breadcrumb-curr {
  color: #226f4d !important;
}
body:has(#next-promises.active) .logo-breadcrumb-curr,
body[data-active-section="next-promises"] .logo-breadcrumb-curr {
  color: #e08339 !important;
}
body:has(#next-adventure.active) .logo-breadcrumb-curr,
body[data-active-section="next-adventure"] .logo-breadcrumb-curr {
  color: #75a350 !important;
}

header .whats-next-btn {
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
  background-color: transparent;
  transition: all var(--transition-fast);
}

header .whats-next-btn:hover {
  background-color: var(--color-text-primary);
  color: var(--color-text-light);
}

.dark-section-active header .whats-next-btn,
header.dark-section-active .whats-next-btn {
  color: var(--color-text-light) !important;
  border-color: var(--color-text-light) !important;
  background-color: transparent !important;
}

.dark-section-active header .whats-next-btn:hover,
header.dark-section-active .whats-next-btn:hover {
  background-color: var(--color-text-light) !important;
  color: var(--color-text-primary) !important;
}

/* Get Support buttons always have white styling */
.get-support-btn,
header .get-support-btn,
.dark-section-active header .get-support-btn,
header.dark-section-active .get-support-btn,
body.slide-deck-active header .get-support-btn {
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  background-color: transparent !important;
  transition: all var(--transition-fast) !important;
}

.get-support-btn:hover,
header .get-support-btn:hover,
.dark-section-active header .get-support-btn:hover,
header.dark-section-active .get-support-btn:hover,
body.slide-deck-active header .get-support-btn:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}

.nav-actions {
  display: flex;
  gap: 1rem;
  pointer-events: auto;
}

/* Buttons and Links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 0px; /* Sharp crisp rectangular borders */
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  min-height: 44px;
  min-width: 44px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.btn-primary {
  background-color: var(--color-text-primary); /* #1A1A1A */
  color: var(--color-bg-primary); /* Cream */
}

.btn-primary:hover {
  background-color: #333333;
}

.theme-dark .btn-primary,
.theme-dark-accent .btn-primary,
.dark-section-active .btn-primary {
  background-color: var(--color-text-light); /* Off-white */
  color: #1A1A1A;
}

.theme-dark .btn-primary:hover,
.theme-dark-accent .btn-primary:hover,
.dark-section-active .btn-primary:hover {
  background-color: #E5E4E1;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.btn-secondary:hover {
  background-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}

.theme-dark .btn-secondary,
.theme-dark-accent .btn-secondary,
.dark-section-active .btn-secondary {
  color: var(--color-text-light);
  border-color: var(--color-text-light);
}

.theme-dark .btn-secondary:hover,
.theme-dark-accent .btn-secondary:hover,
.dark-section-active .btn-secondary:hover {
  background-color: var(--color-text-light);
  color: var(--color-text-primary);
}

.btn-small {
  padding: 0.6rem 1.5rem;
  font-size: 0.75rem;
}

/* Five Core Sections Style */
section {
  min-height: 100vh;
  padding: 9rem 2.5rem 7rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

/* Section-Specific Themes for "Chapters" */
section.theme-light {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  --color-border-current: var(--color-border);
}

section.theme-beige {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  --color-border-current: var(--color-border);
}

section.theme-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
  border-bottom-color: var(--color-border-dark);
  --color-border-current: var(--color-border-dark);
}

section.theme-dark p {
  color: var(--color-text-light-muted);
}

section.theme-dark-accent {
  background-color: var(--color-bg-dark-accent);
  color: var(--color-text-light);
  border-bottom-color: var(--color-border-dark);
  --color-border-current: var(--color-border-dark);
}

section.theme-dark-accent p {
  color: var(--color-text-light-muted);
}

/* Container limits to prevent ultra-wide stretching */
.container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Grid layout for sections with pictures side-by-side on large screens */
.section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .section-grid {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 5rem;
  }
}

/* Eye-Catching Eyebrow Label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  padding: 0.4rem 0.9rem;
  border-radius: 3rem;
  display: inline-block;
  margin-bottom: 1.75rem;
  transition: all var(--transition-fast);
}

.theme-dark .eyebrow,
.theme-dark-accent .eyebrow {
  border-color: var(--color-text-light-muted);
  color: var(--color-text-light-muted);
}

/* Content Heading & Hook */
.headline {
  font-size: 3.44rem;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.03em;
  margin-bottom: 1.75rem;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .headline {
    font-size: 5.62rem;
  }
}

.hook {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.48rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .hook {
    font-size: 3.22rem;
    margin-bottom: 2.25rem;
  }
}

.theme-dark .hook,
.theme-dark-accent .hook {
  color: var(--color-text-light);
}

/* Styled Bible Verse Callout */
blockquote {
  background-color: var(--color-bg-secondary);
  border-left: 2px solid var(--color-accent);
  padding: 2.5rem;
  margin: 3rem 0;
  position: relative;
  border-radius: 0px; /* Sharp corners */
  transition: background-color var(--transition-smooth);
}

.theme-dark blockquote,
.theme-dark-accent blockquote {
  background-color: rgba(255, 255, 255, 0.03);
  border-left-color: var(--color-text-light-muted);
}

blockquote::before {
  content: "“";
  position: absolute;
  top: -0.75rem;
  left: 1.5rem;
  font-size: 6rem;
  font-family: var(--font-serif);
  color: var(--color-accent);
  opacity: 0.15;
  line-height: 1;
  pointer-events: none;
}

.theme-dark blockquote::before,
.theme-dark-accent blockquote::before {
  color: var(--color-text-light-muted);
}

blockquote p {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.65;
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.theme-dark blockquote p,
.theme-dark-accent blockquote p {
  color: var(--color-text-light);
}

blockquote cite {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-light-muted);
  font-style: normal;
  display: block;
  margin-top: 1.25rem;
  position: relative;
  z-index: 1;
}

/* "Tell me more" buttons group */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
}

/* Image Containers & Responsiveness */
.section-illustration {
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  border: none;
  background-color: var(--color-bg-secondary);
  aspect-ratio: 16/10; /* Set a standard aspect ratio so it doesn't collapse */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
}

.theme-dark .section-illustration,
.theme-dark-accent .section-illustration {
  border: none;
  background-color: rgba(255, 255, 255, 0.03);
}

.section-illustration img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  filter: grayscale(15%) contrast(1.05);
  text-indent: -10000px; /* Hide broken image icon in webkit */
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
}

.section-illustration img.active {
  opacity: 1;
  pointer-events: auto;
}

/* Elegant placeholder label when there is no loaded image */
.section-illustration::before {
  content: "";
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.15em;
  z-index: 1;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  padding: 1rem;
}

.theme-dark .section-illustration::before,
.theme-dark-accent .section-illustration::before {
  color: var(--color-text-light-muted);
}

.image-placeholder {
  background-color: var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
  min-height: 220px;
  border: 1px solid var(--color-border-current);
  border-radius: 0.75rem;
}

section.theme-dark .image-placeholder,
section.theme-dark-accent .image-placeholder {
  background-color: rgba(255, 255, 255, 0.03);
}

.image-placeholder svg {
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.image-placeholder span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

section.theme-dark .image-placeholder span,
section.theme-dark-accent .image-placeholder span {
  color: var(--color-text-light-muted);
}

/* Collapsible "Go deeper" Drawer */
details.go-deeper {
  position: relative !important;
  overflow: hidden !important;
  background-color: #FFFFFF;
  border: 1px solid var(--color-accent);
  padding: 1.5rem 2rem;
  margin-top: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all var(--transition-fast);
  border-radius: 0px; /* Sharp corners */
}

details.go-deeper > summary {
  position: static !important;
}

details.go-deeper > .drawer-content {
  position: relative !important;
  z-index: 2 !important;
}

details.go-deeper .summary-text {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

details.go-deeper .water-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.theme-dark details.go-deeper,
.theme-dark-accent details.go-deeper {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: var(--color-border-dark);
  box-shadow: none;
}

details.go-deeper summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #29302b;
  cursor: pointer;
  user-select: none;
  min-height: 44px;
}

.theme-dark details.go-deeper summary,
.theme-dark-accent details.go-deeper summary {
  color: #ffffff;
}

details.go-deeper summary::-webkit-details-marker {
  display: none;
}

details.go-deeper summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  transition: transform var(--transition-fast);
  position: relative !important;
  z-index: 2 !important;
}

details.go-deeper[open] summary::after {
  transform: rotate(45deg);
}

.drawer-content {
  padding-top: 1.5rem;
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.deeper-section {
  margin-bottom: 1.5rem;
}

.deeper-section:last-child {
  margin-bottom: 0;
}

.deeper-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.theme-dark .deeper-title,
.theme-dark-accent .deeper-title {
  color: var(--color-text-light-muted);
}

.deeper-links {
  list-style: none;
}

.deeper-links li {
  margin-bottom: 0.5rem;
}

.deeper-links li:last-child {
  margin-bottom: 0;
}

.deeper-links a,
a[data-external-link],
a.has-external-icon {
  color: var(--color-text-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.deeper-links a::before,
a[data-external-link]::before,
a.has-external-icon::before {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-top: 0.25em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
}

section.theme-dark .deeper-links a,
section.theme-dark-accent .deeper-links a {
  color: var(--color-text-light);
}

.deeper-links a:hover {
  color: var(--color-accent);
}

.book-recommendation {
  background-color: var(--color-bg-primary);
  padding: 1.25rem;
  border-radius: 0px; /* Sharp corners */
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
}

section.theme-dark .book-recommendation,
section.theme-dark-accent .book-recommendation {
  background-color: rgba(255, 255, 255, 0.02);
  border-color: var(--color-border-dark);
  border-left-color: var(--color-text-light-muted);
}

.book-recommendation h4 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  font-family: var(--font-sans);
}

.book-recommendation p {
  font-size: 0.9rem;
}

/* Native Dialog / Modal System */
dialog {
  border: none;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 580px;
  max-height: 80vh;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 1rem; /* Rounded minimalist rectangular dialogs */
  border-top: 4px solid var(--color-accent); /* Elegant top brand line */
  padding: 2.5rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain; /* Scroll action for modal alone; no page scroll under it */
  transform: scale(0.95);
  opacity: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), display 0.35s allow-discrete;
}

dialog[open] {
  transform: scale(1);
  opacity: 1;
}

@starting-style {
  dialog[open] {
    transform: scale(0.95);
    opacity: 0;
  }
}

dialog::backdrop {
  background-color: rgba(18, 20, 22, 0);
  backdrop-filter: blur(0px);
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease, display 0.4s allow-discrete;
}

dialog[open]::backdrop {
  background-color: rgba(18, 20, 22, 0.6);
  backdrop-filter: blur(4px);
}

@starting-style {
  dialog[open]::backdrop {
    background-color: rgba(18, 20, 22, 0);
    backdrop-filter: blur(0px);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.modal-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
  display: block;
}

.modal-title {
  font-size: 2rem;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.03em;
  margin-right: 2rem;
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0px;
  border: 1px solid var(--color-border);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  min-height: 44px;
  min-width: 44px;
}

.modal-close-btn:hover {
  background-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}

.modal-body {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  overflow-y: auto;
}

.modal-body p {
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}

.modal-body p:last-child {
  margin-bottom: 0;
}

.modal-body strong {
  color: var(--color-text-primary);
  font-weight: 600;
}



/* Scroll-Driven Revealer Effects & Fading Focus States */
.scroll-reveal {
  opacity: 0;
  transform: none !important;
  filter: none !important;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity;
  pointer-events: none; /* Prevent interaction with hidden elements */
}

.scroll-reveal.revealed {
  opacity: 1;
  pointer-events: auto; /* Enable interaction once revealed */
}

/* Active focus element - completely sharp and bold */
.scroll-reveal.active-step {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Reveal Column and Grid Groupings to allow perfect anchored overlay fading */
.reveal-column {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  position: relative;
  width: 100%;
}

.reveal-group {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  visibility: hidden;
  transform: none !important;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.3, 1), visibility 0.8s;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.reveal-group.active-group {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 5;
}

/* Interactive Navigation / Dot Indicator */
.progress-nav {
  position: fixed;
  z-index: 100;
  display: none;
}

/* Hide nav dots on landing page in ALL screen views */
body[data-active-section="section-intro"] .progress-nav,
body:has(#section-intro.active) .progress-nav {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (min-width: 1280px) {
  .progress-nav {
    display: flex;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 1.5rem;
  }
}

@media (max-width: 1279px) {
  body.slide-deck-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 12vh; /* covers roughly a third of the 32vh header image height */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 140; /* Above header images (z-index 10) but below progress-nav (z-index 150) */
    pointer-events: none;
  }

  /* LANDING PAGE ONLY (Mobile/Tablet):
     1. Remove top image darkening overlay where header image used to be
     2. Raise 'What is the Gospel' logo link & Get Support button to top of page ABOVE nav dots
     3. Shift nav dots below top header links on landing page ONLY */
  body[data-active-section="section-intro"]::before,
  body:has(#section-intro.active)::before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
  }

  body[data-active-section="section-intro"] header,
  body:has(#section-intro.active) header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3.5rem !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.6rem 1.25rem 0 1.25rem !important;
    z-index: 200 !important; /* Raised above nav dots (z-index 150) */
    pointer-events: auto !important;
  }

  body[data-active-section="section-intro"] .progress-nav,
  body:has(#section-intro.active) .progress-nav {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .progress-nav {
    display: flex !important;
    position: fixed !important;
    top: 15px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    gap: 1.6rem !important; /* Slightly widened from 1.2rem */
    z-index: 150 !important; /* Above the header image which has z-index 10 */
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    counter-reset: mobile-progress -1;
  }

  .progress-dot-wrapper {
    justify-content: center !important;
    position: relative !important;
  }

  .progress-dot {
    counter-increment: mobile-progress;
  }

  .progress-dot.active::before {
    content: counter(mobile-progress, decimal-leading-zero) !important;
    position: absolute !important;
    top: 16px !important; /* Beautifully aligned below the active dot */
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    animation: fadeInDotNumber 0.2s ease-out !important;
  }

  .progress-label {
    display: none !important; /* Hide labels completely on mobile/tablet view */
  }

  /* Responsive styling for the back link in mobile views */
  .back-link {
    position: fixed !important;
    top: -4px !important;
    left: 0.5rem !important;
    z-index: 160 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    background: transparent !important;
    padding: 0 !important;
    height: 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .back-link span {
    display: none !important;
  }

  .back-link svg {
    width: 22px !important;
    height: 22px !important;
    stroke: rgba(255, 255, 255, 0.95) !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)) !important;
  }
}

@keyframes fadeInDotNumber {
  from {
    opacity: 0;
    transform: translate(-50%, -2px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.progress-dot-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45); /* Minimal white */
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast);
  outline: none;
  min-height: auto;
  min-width: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-dot::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0);
  transition: all var(--transition-fast);
}

.progress-dot:hover {
  background-color: rgba(255, 255, 255, 0.85);
  transform: scale(1.1);
}

.progress-dot.active {
  background-color: #FFFFFF !important;
  transform: scale(1);
}

.progress-dot.active::after {
  border-color: rgba(255, 255, 255, 0.9); /* Beautiful ring around the active dot */
  transform: scale(1.1);
}

.progress-label {
  position: absolute;
  right: 2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: translateX(10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
  pointer-events: none;
}

.progress-dot-wrapper:hover .progress-label {
  opacity: 1;
  transform: translateX(0);
}

.progress-dot.active + .progress-label {
  opacity: 1;
  transform: translateX(0);
  color: #FFFFFF !important;
}

/* Mobile Header / Minimal Top Progress Bar */
.mobile-progress-container {
  display: none !important;
}

/* End-of-Journey Response Controls */
.end-journey-box {
  border-top: 1px solid var(--color-border-current);
  margin-top: 4rem;
  padding-top: 3rem;
}

.prayer-panel {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border-current);
  border-radius: 0px; /* Sharp corners */
  margin-bottom: 3rem;
  transition: all var(--transition-fast);
}

.prayer-panel summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1.5rem;
  cursor: pointer;
  user-select: none;
  color: var(--color-text-light);
}

.prayer-panel summary::-webkit-details-marker {
  display: none;
}

.prayer-panel summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  transition: transform var(--transition-fast);
}

.prayer-panel[open] summary::after {
  transform: rotate(45deg);
}

.prayer-body {
  padding: 0 1.5rem 2rem 1.5rem;
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.prayer-text {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.7;
  font-style: italic;
  color: var(--color-text-light);
  border-left: 2px solid var(--color-text-light-muted);
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Contact Form Grid Layout */
.contact-form-container {
  background-color: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--color-border-current);
  border-radius: 0px; /* Sharp corners */
  padding: 2.5rem;
}

@media (min-width: 768px) {
  .contact-form-container {
    padding: 3.5rem;
  }
}

.contact-title {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

.contact-desc {
  font-size: 1rem;
  margin-bottom: 2rem;
  color: var(--color-text-light-muted);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .contact-form {
    grid-template-columns: 1fr 1fr;
  }
  .form-full-width {
    grid-column: span 2;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  color: var(--color-accent);
}

.form-input, .form-textarea {
  font-family: var(--font-sans);
  font-size: 16px !important; /* Prevents iOS Safari auto-zoom on input focus */
  padding: 0.85rem 1rem;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border-current);
  border-radius: 0px; /* Sharp corners */
  color: var(--color-text-light);
  transition: all var(--transition-fast);
  min-height: 44px;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background-color: rgba(255, 255, 255, 0.05);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.form-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 0px; /* Sharp checkbox corners */
  accent-color: var(--color-accent);
  margin-top: 0.2rem;
  cursor: pointer;
  min-height: 18px;
  min-width: 18px;
}

.checkbox-label {
  font-size: 0.95rem;
  color: var(--color-text-light-muted);
}

.form-message-banner {
  padding: 1rem;
  border-radius: 0px; /* Sharp corners */
  margin-top: 1rem;
  display: none;
  font-weight: 500;
}

.form-message-banner.success {
  background-color: rgba(46, 125, 50, 0.15);
  border: 1px solid #2e7d32;
  color: #4caf50;
  display: block;
}

.form-message-banner.error {
  background-color: rgba(198, 40, 40, 0.15);
  border: 1px solid #c62828;
  color: #f44336;
  display: block;
}

/* Animations Keyframes */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* What's Next specific custom styles */
.next-intro {
  text-align: center;
  padding: 9rem 2.5rem 5rem 2.5rem;
  background-color: var(--color-bg-primary);
}

.next-intro h1 {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .next-intro h1 {
    font-size: 5rem;
  }
}

.next-intro p {
  max-width: 600px;
  margin: 0 auto;
  font-weight: 300;
}

.back-home-header {
  pointer-events: auto;
}

/* Back link styling */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color var(--transition-fast);
  min-height: 44px;
  pointer-events: auto;
  cursor: pointer;
}

.back-link:hover {
  color: var(--color-accent) !important;
}

.dark-section-active .back-link {
  color: var(--color-text-light);
}

/* Timeline/Interactive Step Grid for what-next */
.steps-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 2.5rem 8rem 2.5rem;
}

.step-card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 0px; /* Sharp corners */
  padding: 3rem;
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

@media (min-width: 768px) {
  .step-card {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 4rem;
    align-items: center;
  }
}

.step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.02);
}

.step-badge {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  padding: 0.4rem 0.9rem;
  border-radius: 3rem;
  display: inline-block;
  margin-bottom: 1.25rem;
  background: transparent;
}

.step-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
}

.step-desc {
  font-size: 1.1rem;
  font-weight: 300;
  margin-bottom: 1.75rem;
}

/* Footer elements */
footer {
  background-color: var(--color-bg-dark-accent);
  color: var(--color-text-light-muted);
  text-align: center;
  padding: 4rem 2rem;
  border-top: 1px solid var(--color-border-dark);
}

footer p {
  font-size: 0.95rem;
  color: var(--color-text-light-muted);
}

footer .footer-logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-text-light);
  font-style: italic;
  font-weight: 700;
  margin-bottom: 1rem;
}

footer a {
  color: var(--color-text-light);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

footer a:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   Slide Deck Narrative Engine Styling
   ========================================================================== */

body.slide-deck-active {
  height: 100vh;
  height: var(--app-height, 100dvh);
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

main.slide-deck-active {
  position: relative;
  width: 100%;
  height: 100vh;
  height: var(--app-height, 100dvh);
  overflow: hidden;
}

body.slide-deck-active section {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Smooth hardware-accelerated transitions with custom easing */
  transition: opacity 1.1s cubic-bezier(0.25, 1, 0.3, 1), transform 1.1s cubic-bezier(0.25, 1, 0.3, 1), background-color 1.8s cubic-bezier(0.25, 1, 0.3, 1), color 1.8s cubic-bezier(0.25, 1, 0.3, 1);
  transform: translateY(40px);
  z-index: 1;
  overflow: hidden !important; /* Force no scrolling */
  padding-bottom: 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important; /* Force start at the top of the container so headers are always visible! */
}

body.slide-deck-active section::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

body.slide-deck-active section.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 10;
}

body.slide-deck-active section.past {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-40px);
  z-index: 1;
}

body.slide-deck-active section.future {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(40px);
  z-index: 1;
}

/* Scroll reveal delays are managed step-by-step by JavaScript in Slide Deck mode,
   so we remove the default CSS-based automatic staggered delay so they show immediately
   upon trigger instead of staggering on their own. */
body.slide-deck-active .scroll-reveal {
  transition-delay: 0s !important;
}

body.slide-deck-active .reveal-group {
  display: contents !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Mobile and responsive styling for Slide Deck mode (screens up to 1279px) */
@media (max-width: 1279px) {
  /* Hide point 1, 2, 3, 4 etc 'pill box' panel on mobile and tablet view */
  .eyebrow {
    display: none !important;
  }

  /* Style horizontal side symbols bar under header image on mobile/tablet */
  body.slide-deck-active .side-symbols-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1.25rem !important;
    position: relative !important;
    width: 100% !important;
    height: 55px !important;
    background-color: #FFFFFF !important;
    border-bottom: none !important;
    z-index: 20 !important;
    padding: 0 1.25rem !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    order: 2 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  body.slide-deck-active .side-symbols-container::-webkit-scrollbar {
    display: none !important;
  }

  body.slide-deck-active .side-symbol {
    opacity: 0.25 !important;
    transform: translateY(0) scale(0.9) !important;
    fill: #888888 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: opacity 0.3s ease, fill 0.3s ease, transform 0.3s ease !important;
    flex-shrink: 0 !important;
  }

  /* Keep symbol sizes appropriate for the mobile horizontal bar */
  body.slide-deck-active .side-symbol.crown {
    width: 1.55rem !important;
    height: 1.5rem !important;
  }

  body.slide-deck-active .side-symbol.cross {
    width: 1.4rem !important;
    height: 1.82rem !important;
  }

  body.slide-deck-active .side-symbol.raised {
    width: 1.15rem !important;
    height: 1.82rem !important;
  }

  body.slide-deck-active .side-symbol.question {
    width: 1.4rem !important;
    height: 1.9rem !important;
  }

  body.slide-deck-active .side-symbol.respond {
    width: 1.4rem !important;
    height: 1.54rem !important;
  }

  /* Container override for what-next page on mobile to fit all 8 symbols across screen */
  body.slide-deck-active .side-symbols-container.what-next-symbols {
    justify-content: space-around !important;
    gap: 0.25rem !important;
    padding: 0 0.6rem !important;
  }

  /* Mobile sizes for what-next symbols */
  body.slide-deck-active .side-symbol.bible {
    width: 1.35rem !important;
    height: 1.35rem !important;
  }

  body.slide-deck-active .side-symbol.prayer {
    width: 1.35rem !important;
    height: 1.35rem !important;
  }

  body.slide-deck-active .side-symbol.church {
    width: 1.45rem !important;
    height: 1.28rem !important;
  }

  body.slide-deck-active .side-symbol.tell {
    width: 1.35rem !important;
    height: 1.35rem !important;
  }

  body.slide-deck-active .side-symbol.live {
    width: 1.15rem !important;
    height: 1.53rem !important;
  }

  body.slide-deck-active .side-symbol.baptise {
    width: 1.15rem !important;
    height: 1.53rem !important;
  }

  body.slide-deck-active .side-symbol.learning {
    width: 1.35rem !important;
    height: 1.35rem !important;
  }

  body.slide-deck-active .side-symbol.promises {
    width: 1.15rem !important;
    height: 1.53rem !important;
  }

  /* Progressive highlights inside the horizontal bar on mobile (Index Gospel Page) */
  body.slide-deck-active [data-section-index="1"] .crown {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    fill: #957a42 !important;
  }

  body.slide-deck-active [data-section-index="2"] .crown {
    opacity: 1 !important;
    transform: scale(1) !important;
    fill: #666666 !important;
  }
  body.slide-deck-active [data-section-index="2"] .cross {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    fill: #d2173a !important;
  }

  body.slide-deck-active [data-section-index="3"] .crown,
  body.slide-deck-active [data-section-index="3"] .cross {
    opacity: 1 !important;
    transform: scale(1) !important;
    fill: #666666 !important;
  }
  body.slide-deck-active [data-section-index="3"] .raised {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    fill: #5d9142 !important;
  }

  body.slide-deck-active [data-section-index="4"] .crown,
  body.slide-deck-active [data-section-index="4"] .cross,
  body.slide-deck-active [data-section-index="4"] .raised {
    opacity: 1 !important;
    transform: scale(1) !important;
    fill: #666666 !important;
  }
  body.slide-deck-active [data-section-index="4"] .question {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    fill: #1a7fa0 !important;
  }

  body.slide-deck-active [data-section-index="5"] .crown,
  body.slide-deck-active [data-section-index="5"] .cross,
  body.slide-deck-active [data-section-index="5"] .raised,
  body.slide-deck-active [data-section-index="5"] .question {
    opacity: 1 !important;
    transform: scale(1) !important;
    fill: #666666 !important;
  }
  body.slide-deck-active [data-section-index="5"] .respond {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    fill: #57ad70 !important;
  }

  body.slide-deck-active [data-section-index="6"] .crown,
  body.slide-deck-active [data-section-index="6"] .cross,
  body.slide-deck-active [data-section-index="6"] .raised,
  body.slide-deck-active [data-section-index="6"] .question,
  body.slide-deck-active [data-section-index="6"] .respond {
    opacity: 1 !important;
    transform: scale(1) !important;
    fill: #666666 !important;
  }

  /* Progressive highlights inside horizontal bar on mobile (What Next Page) */
  body.slide-deck-active [data-section-index="1"] .bible {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    fill: #a93a5c !important;
  }

  body.slide-deck-active [data-section-index="2"] .bible {
    opacity: 1 !important;
    transform: scale(1) !important;
    fill: #666666 !important;
  }
  body.slide-deck-active [data-section-index="2"] .prayer {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    fill: #6085fa !important;
  }

  body.slide-deck-active [data-section-index="3"] .bible,
  body.slide-deck-active [data-section-index="3"] .prayer {
    opacity: 1 !important;
    transform: scale(1) !important;
    fill: #666666 !important;
  }
  body.slide-deck-active [data-section-index="3"] .church {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    fill: #cf5b0b !important;
  }

  body.slide-deck-active [data-section-index="4"] .bible,
  body.slide-deck-active [data-section-index="4"] .prayer,
  body.slide-deck-active [data-section-index="4"] .church {
    opacity: 1 !important;
    transform: scale(1) !important;
    fill: #666666 !important;
  }
  body.slide-deck-active [data-section-index="4"] .tell {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    fill: #f8634d !important;
  }

  body.slide-deck-active [data-section-index="5"] .bible,
  body.slide-deck-active [data-section-index="5"] .prayer,
  body.slide-deck-active [data-section-index="5"] .church,
  body.slide-deck-active [data-section-index="5"] .tell {
    opacity: 1 !important;
    transform: scale(1) !important;
    fill: #666666 !important;
  }
  body.slide-deck-active [data-section-index="5"] .live {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    fill: #356d5c !important;
  }

  body.slide-deck-active [data-section-index="6"] .bible,
  body.slide-deck-active [data-section-index="6"] .prayer,
  body.slide-deck-active [data-section-index="6"] .church,
  body.slide-deck-active [data-section-index="6"] .tell,
  body.slide-deck-active [data-section-index="6"] .live {
    opacity: 1 !important;
    transform: scale(1) !important;
    fill: #666666 !important;
  }
  body.slide-deck-active [data-section-index="6"] .baptise {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    fill: #10d2d9 !important;
  }

  body.slide-deck-active [data-section-index="7"] .bible,
  body.slide-deck-active [data-section-index="7"] .prayer,
  body.slide-deck-active [data-section-index="7"] .church,
  body.slide-deck-active [data-section-index="7"] .tell,
  body.slide-deck-active [data-section-index="7"] .live,
  body.slide-deck-active [data-section-index="7"] .baptise {
    opacity: 1 !important;
    transform: scale(1) !important;
    fill: #666666 !important;
  }
  body.slide-deck-active [data-section-index="7"] .learning {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    fill: #226f4d !important;
  }

  body.slide-deck-active [data-section-index="8"] .bible,
  body.slide-deck-active [data-section-index="8"] .prayer,
  body.slide-deck-active [data-section-index="8"] .church,
  body.slide-deck-active [data-section-index="8"] .tell,
  body.slide-deck-active [data-section-index="8"] .live,
  body.slide-deck-active [data-section-index="8"] .baptise,
  body.slide-deck-active [data-section-index="8"] .learning {
    opacity: 1 !important;
    transform: scale(1) !important;
    fill: #666666 !important;
  }
  body.slide-deck-active [data-section-index="8"] .promises {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    fill: #e08339 !important;
  }

  body.slide-deck-active [data-section-index="9"] .bible,
  body.slide-deck-active [data-section-index="9"] .prayer,
  body.slide-deck-active [data-section-index="9"] .church,
  body.slide-deck-active [data-section-index="9"] .tell,
  body.slide-deck-active [data-section-index="9"] .live,
  body.slide-deck-active [data-section-index="9"] .baptise,
  body.slide-deck-active [data-section-index="9"] .learning,
  body.slide-deck-active [data-section-index="9"] .promises {
    opacity: 1 !important;
    transform: scale(1) !important;
    fill: #666666 !important;
  }

  /* Dark theme passed symbol fill override (lighter grey for dark backgrounds) */
  body.slide-deck-active .theme-dark [data-section-index="2"] .crown,
  body.slide-deck-active .theme-dark [data-section-index="3"] .crown,
  body.slide-deck-active .theme-dark [data-section-index="3"] .cross,
  body.slide-deck-active .theme-dark [data-section-index="4"] .crown,
  body.slide-deck-active .theme-dark [data-section-index="4"] .cross,
  body.slide-deck-active .theme-dark [data-section-index="4"] .raised,
  body.slide-deck-active .theme-dark [data-section-index="5"] .crown,
  body.slide-deck-active .theme-dark [data-section-index="5"] .cross,
  body.slide-deck-active .theme-dark [data-section-index="5"] .raised,
  body.slide-deck-active .theme-dark [data-section-index="5"] .question,
  body.slide-deck-active .theme-dark [data-section-index="6"] .crown,
  body.slide-deck-active .theme-dark [data-section-index="6"] .cross,
  body.slide-deck-active .theme-dark [data-section-index="6"] .raised,
  body.slide-deck-active .theme-dark [data-section-index="6"] .question,
  body.slide-deck-active .theme-dark [data-section-index="6"] .respond,
  body.slide-deck-active .theme-dark-accent [data-section-index="2"] .crown,
  body.slide-deck-active .theme-dark-accent [data-section-index="3"] .crown,
  body.slide-deck-active .theme-dark-accent [data-section-index="3"] .cross,
  body.slide-deck-active .theme-dark-accent [data-section-index="4"] .crown,
  body.slide-deck-active .theme-dark-accent [data-section-index="4"] .cross,
  body.slide-deck-active .theme-dark-accent [data-section-index="4"] .raised,
  body.slide-deck-active .theme-dark-accent [data-section-index="5"] .crown,
  body.slide-deck-active .theme-dark-accent [data-section-index="5"] .cross,
  body.slide-deck-active .theme-dark-accent [data-section-index="5"] .raised,
  body.slide-deck-active .theme-dark-accent [data-section-index="5"] .question,
  body.slide-deck-active .theme-dark-accent [data-section-index="6"] .crown,
  body.slide-deck-active .theme-dark-accent [data-section-index="6"] .cross,
  body.slide-deck-active .theme-dark-accent [data-section-index="6"] .raised,
  body.slide-deck-active .theme-dark-accent [data-section-index="6"] .question,
  body.slide-deck-active .theme-dark-accent [data-section-index="6"] .respond,
  body.slide-deck-active .theme-dark [data-section-index="2"] .bible,
  body.slide-deck-active .theme-dark [data-section-index="3"] .bible,
  body.slide-deck-active .theme-dark [data-section-index="3"] .prayer,
  body.slide-deck-active .theme-dark [data-section-index="4"] .bible,
  body.slide-deck-active .theme-dark [data-section-index="4"] .prayer,
  body.slide-deck-active .theme-dark [data-section-index="4"] .church,
  body.slide-deck-active .theme-dark [data-section-index="5"] .bible,
  body.slide-deck-active .theme-dark [data-section-index="5"] .prayer,
  body.slide-deck-active .theme-dark [data-section-index="5"] .church,
  body.slide-deck-active .theme-dark [data-section-index="5"] .tell,
  body.slide-deck-active .theme-dark [data-section-index="6"] .bible,
  body.slide-deck-active .theme-dark [data-section-index="6"] .prayer,
  body.slide-deck-active .theme-dark [data-section-index="6"] .church,
  body.slide-deck-active .theme-dark [data-section-index="6"] .tell,
  body.slide-deck-active .theme-dark [data-section-index="6"] .live,
  body.slide-deck-active .theme-dark [data-section-index="7"] .bible,
  body.slide-deck-active .theme-dark [data-section-index="7"] .prayer,
  body.slide-deck-active .theme-dark [data-section-index="7"] .church,
  body.slide-deck-active .theme-dark [data-section-index="7"] .tell,
  body.slide-deck-active .theme-dark [data-section-index="7"] .live,
  body.slide-deck-active .theme-dark [data-section-index="7"] .baptise,
  body.slide-deck-active .theme-dark [data-section-index="8"] .bible,
  body.slide-deck-active .theme-dark [data-section-index="8"] .prayer,
  body.slide-deck-active .theme-dark [data-section-index="8"] .church,
  body.slide-deck-active .theme-dark [data-section-index="8"] .tell,
  body.slide-deck-active .theme-dark [data-section-index="8"] .live,
  body.slide-deck-active .theme-dark [data-section-index="8"] .baptise,
  body.slide-deck-active .theme-dark [data-section-index="8"] .learning,
  body.slide-deck-active .theme-dark [data-section-index="9"] .bible,
  body.slide-deck-active .theme-dark [data-section-index="9"] .prayer,
  body.slide-deck-active .theme-dark [data-section-index="9"] .church,
  body.slide-deck-active .theme-dark [data-section-index="9"] .tell,
  body.slide-deck-active .theme-dark [data-section-index="9"] .live,
  body.slide-deck-active .theme-dark [data-section-index="9"] .baptise,
  body.slide-deck-active .theme-dark [data-section-index="9"] .learning,
  body.slide-deck-active .theme-dark [data-section-index="9"] .promises,
  body.slide-deck-active .theme-dark-accent [data-section-index="2"] .bible,
  body.slide-deck-active .theme-dark-accent [data-section-index="3"] .bible,
  body.slide-deck-active .theme-dark-accent [data-section-index="3"] .prayer,
  body.slide-deck-active .theme-dark-accent [data-section-index="4"] .bible,
  body.slide-deck-active .theme-dark-accent [data-section-index="4"] .prayer,
  body.slide-deck-active .theme-dark-accent [data-section-index="4"] .church,
  body.slide-deck-active .theme-dark-accent [data-section-index="5"] .bible,
  body.slide-deck-active .theme-dark-accent [data-section-index="5"] .prayer,
  body.slide-deck-active .theme-dark-accent [data-section-index="5"] .church,
  body.slide-deck-active .theme-dark-accent [data-section-index="5"] .tell,
  body.slide-deck-active .theme-dark-accent [data-section-index="6"] .bible,
  body.slide-deck-active .theme-dark-accent [data-section-index="6"] .prayer,
  body.slide-deck-active .theme-dark-accent [data-section-index="6"] .church,
  body.slide-deck-active .theme-dark-accent [data-section-index="6"] .tell,
  body.slide-deck-active .theme-dark-accent [data-section-index="6"] .live,
  body.slide-deck-active .theme-dark-accent [data-section-index="7"] .bible,
  body.slide-deck-active .theme-dark-accent [data-section-index="7"] .prayer,
  body.slide-deck-active .theme-dark-accent [data-section-index="7"] .church,
  body.slide-deck-active .theme-dark-accent [data-section-index="7"] .tell,
  body.slide-deck-active .theme-dark-accent [data-section-index="7"] .live,
  body.slide-deck-active .theme-dark-accent [data-section-index="7"] .baptise,
  body.slide-deck-active .theme-dark-accent [data-section-index="8"] .bible,
  body.slide-deck-active .theme-dark-accent [data-section-index="8"] .prayer,
  body.slide-deck-active .theme-dark-accent [data-section-index="8"] .church,
  body.slide-deck-active .theme-dark-accent [data-section-index="8"] .tell,
  body.slide-deck-active .theme-dark-accent [data-section-index="8"] .live,
  body.slide-deck-active .theme-dark-accent [data-section-index="8"] .baptise,
  body.slide-deck-active .theme-dark-accent [data-section-index="8"] .learning,
  body.slide-deck-active .theme-dark-accent [data-section-index="9"] .bible,
  body.slide-deck-active .theme-dark-accent [data-section-index="9"] .prayer,
  body.slide-deck-active .theme-dark-accent [data-section-index="9"] .church,
  body.slide-deck-active .theme-dark-accent [data-section-index="9"] .tell,
  body.slide-deck-active .theme-dark-accent [data-section-index="9"] .live,
  body.slide-deck-active .theme-dark-accent [data-section-index="9"] .baptise,
  body.slide-deck-active .theme-dark-accent [data-section-index="9"] .learning,
  body.slide-deck-active .theme-dark-accent [data-section-index="9"] .promises {
    fill: #CCCCCC !important;
  }

  /* Global header positioning and styling over mobile header image */
  body.slide-deck-active header {
    position: absolute !important;
    top: calc(var(--app-height, 32vh) * 0.32 - 4.5rem) !important;
    left: 0 !important;
    width: 100% !important;
    height: 4.5rem !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 1.5rem !important;
    z-index: 25 !important;
    border-bottom: none !important;
    pointer-events: auto !important;
  }

  body.slide-deck-active header .logo-link {
    color: #FFFFFF !important;
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }

  body.slide-deck-active header .logo-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.75) !important;
  }

  /* Breadcrumb sub-wrapper styling */
  .logo-breadcrumb-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  @media (max-width: 767px) {
    body.slide-deck-active header .logo-breadcrumb-container {
      margin-left: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      justify-content: center !important;
      gap: 0.15rem !important;
    }

    body.slide-deck-active header .logo-breadcrumb-sub {
      display: flex !important;
      align-items: center !important;
      gap: 0.3rem !important;
      margin-top: -2px !important;
    }

    body.slide-deck-active header .logo-breadcrumb-sep {
      font-size: 0.95rem !important;
    }

    body.slide-deck-active header .logo-breadcrumb-curr {
      font-size: 0.95rem !important;
    }
  }

  body.slide-deck-active header .whats-next-btn,
  body.slide-deck-active header .get-support-btn {
    background-color: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    padding: 0.4rem 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
  }

  body.slide-deck-active header .whats-next-btn:hover,
  body.slide-deck-active header .get-support-btn:hover {
    background-color: #FFFFFF !important;
    color: #000000 !important;
  }

  /* Section and Container resets for edge-to-edge slide-deck mobile view */
  body.slide-deck-active section {
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: var(--app-height, 100dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-bottom: none !important;
  }

  body.slide-deck-active .container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Section grid rehaul */
  body.slide-deck-active .section-grid {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    height: var(--app-height, 100dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: inherit !important;
    color: inherit !important;
    gap: 0 !important;
  }

  /* Right column panel becomes the header image at the top */
  body.slide-deck-active .right-column-panel {
    position: relative !important;
    width: 100% !important;
    height: 32vh !important;
    height: calc(var(--app-height, 100dvh) * 0.32) !important;
    min-height: 32vh !important;
    min-height: calc(var(--app-height, 100dvh) * 0.32) !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    order: 1 !important;
  }

  body.slide-deck-active .section-illustration {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    margin: 0 !important;
    position: relative !important;
  }

  body.slide-deck-active .section-illustration img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    transition: opacity 0.8s ease-in-out !important;
    pointer-events: none !important;
  }

  body.slide-deck-active .section-illustration img.active {
    opacity: 1.0 !important; /* Full opacity header image */
    pointer-events: auto !important;
  }

  /* Scripture overlays are hidden, inline scriptures are used instead */
  body.slide-deck-active .scripture-overlay,
  .scripture-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Persistent side symbols bar directly under header image */
  body.slide-deck-active .side-symbols-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.25rem !important;
    width: 100% !important;
    height: 55px !important;
    min-height: 55px !important;
    padding: 0 1.5rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-bottom: none !important;
    order: 2 !important;
    z-index: 20 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  body.slide-deck-active .side-symbol {
    width: 2.25rem !important;
    height: 2.25rem !important;
    opacity: 0.25 !important;
    fill: #888888 !important;
    transition: opacity 0.4s ease, fill 0.4s ease, transform 0.4s ease !important;
    transform: scale(0.9) !important;
    overflow: visible !important;
  }

  /* Section 1: God (Crown is active) */
  body.slide-deck-active [data-section-index="1"] .crown {
    opacity: 1 !important;
    fill: #957a42 !important; /* Gold */
    transform: scale(1.1) !important;
  }

  /* Section 2: Cross (Crown passed, Cross active) */
  body.slide-deck-active [data-section-index="2"] .crown {
    opacity: 1 !important;
    fill: #666666 !important;
    transform: scale(1.0) !important;
  }
  body.slide-deck-active [data-section-index="2"] .cross {
    opacity: 1 !important;
    fill: #d2173a !important; /* Red */
    transform: scale(1.1) !important;
  }

  /* Section 3: Resurrection (Crown/Cross passed, Raised active) */
  body.slide-deck-active [data-section-index="3"] .crown,
  body.slide-deck-active [data-section-index="3"] .cross {
    opacity: 1 !important;
    fill: #666666 !important;
    transform: scale(1.0) !important;
  }
  body.slide-deck-active [data-section-index="3"] .raised {
    opacity: 1 !important;
    fill: #5d9142 !important; /* Green */
    transform: scale(1.1) !important;
  }

  /* Section 4: Grace (Crown/Cross/Raised passed, Question active) */
  body.slide-deck-active [data-section-index="4"] .crown,
  body.slide-deck-active [data-section-index="4"] .cross,
  body.slide-deck-active [data-section-index="4"] .raised {
    opacity: 1 !important;
    fill: #666666 !important;
    transform: scale(1.0) !important;
  }
  body.slide-deck-active [data-section-index="4"] .question {
    opacity: 1 !important;
    fill: #1a7fa0 !important; /* Blue */
    transform: scale(1.1) !important;
  }

  /* Section 5 & 6: Response & Support (All are passed / grey) */
  body.slide-deck-active [data-section-index="5"] .crown,
  body.slide-deck-active [data-section-index="5"] .cross,
  body.slide-deck-active [data-section-index="5"] .raised,
  body.slide-deck-active [data-section-index="5"] .question,
  body.slide-deck-active [data-section-index="6"] .crown,
  body.slide-deck-active [data-section-index="6"] .cross,
  body.slide-deck-active [data-section-index="6"] .raised,
  body.slide-deck-active [data-section-index="6"] .question {
    opacity: 1 !important;
    fill: #666666 !important;
    transform: scale(1.0) !important;
  }

  /* Scrollable content container style */
  body.slide-deck-active .reveal-column {
    display: block !important;
    flex: 1 !important;
    width: 100% !important;
    height: auto !important;
    padding: 0.75rem 1.5rem max(4.5rem, calc(3.5rem + env(safe-area-inset-bottom))) 2.5rem !important; /* Left padding matches progress bar spacing, bottom padding accounts for mobile browser toolbar */
    box-sizing: border-box !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    position: static !important; /* Changed from relative so absolute children can position relative to .section-grid and stay fixed */
    background-color: transparent !important;
    order: 3 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    
    /* Hardware-accelerated smooth gradient fade mask at top and bottom - REMOVED AS REQUESTED */
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  /* Typography scale adjustments for mobile/tablet */
  body.slide-deck-active .reveal-column p.hook,
  body.slide-deck-active .hook {
    font-size: 26.8px !important;
    line-height: 29.48px !important;
  }

  body.slide-deck-active h3.sub-headline,
  body.slide-deck-active .sub-headline {
    font-size: 1.75rem !important; /* 65% of 2.75rem headline is ~1.78rem */
    line-height: 1.25 !important;
  }

  body.slide-deck-active .reveal-column p:not(.hook),
  body.slide-deck-active .reveal-column .paragraph,
  body.slide-deck-active .reveal-column li,
  body.slide-deck-active .reveal-column .scripture-box,
  body.slide-deck-active .reveal-column details.go-deeper {
    font-size: 1.05rem !important; /* Style like modal text */
    line-height: 1.65 !important;
  }

  /* Make sure internal details and links inside go-deeper scale accordingly */
  body.slide-deck-active .reveal-column details.go-deeper summary,
  body.slide-deck-active .reveal-column details.go-deeper p,
  body.slide-deck-active .reveal-column details.go-deeper li {
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
  }

  body.slide-deck-active .reveal-column::-webkit-scrollbar {
    display: none !important;
  }

  /* Progress scrollbar positioning on the left - fixed in place and not scrollable */
  body.slide-deck-active .reveal-column-progress {
    display: block !important;
    position: absolute !important;
    left: 1rem !important;
    top: calc(var(--app-height, 100dvh) * 0.32 + 55px + 0.75rem) !important;
    bottom: calc(5.5rem - 20px + env(safe-area-inset-bottom)) !important; /* Extended 20px downwards to fill available space */
    width: 4px !important;
    border-radius: 4px !important;
    z-index: 15 !important;
    height: auto !important;
  }

  body.slide-deck-active .reveal-column-progress-fill {
    width: 100% !important;
    height: 0%;
    background-color: #111111 !important;
    border-radius: 4px !important;
    transition: none !important;
  }

  /* Fixed scroll hint at the bottom left below the scrollbar */
  body.slide-deck-active .scroll-indicator-hint {
    position: absolute !important;
    left: 1rem !important;
    bottom: calc(1.5rem - 6px - 20px + env(safe-area-inset-bottom)) !important; /* Moved down 20px matching extended scrollbar */
    top: auto !important;
    transform: none !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.15rem !important;
    margin-left: -4px !important; /* Slight adjustment to align with the vertical line */
  }

  /* Hide pillbox text at bottom of scrollbar on mobile/tablet view - only pulsating arrow appears */
  body.slide-deck-active .scroll-hint-text {
    display: none !important;
  }

  /* Only the Header image container and its image have sharp corners on mobile/tablet */
  body.slide-deck-active .section-illustration,
  body.slide-deck-active .section-illustration img {
    border-radius: 0px !important;
  }

  /* Remove image numbers badge on mobile and tablet view */
  .image-number-badge {
    display: none !important;
  }

  /* Theme-specific overrides for mobile/tablet */
  body.slide-deck-active .theme-light .section-grid,
  body.slide-deck-active .theme-light .reveal-column,
  body.slide-deck-active .theme-light .side-symbols-container {
    background-color: var(--color-bg-primary) !important; /* Cream/white */
    color: var(--color-text-primary) !important;
  }
  body.slide-deck-active .theme-light .reveal-column-progress {
    background-color: rgba(0, 0, 0, 0.08) !important;
  }
  body.slide-deck-active .theme-light .reveal-column-progress-fill {
    background-color: var(--color-text-primary) !important;
  }

  body.slide-deck-active .theme-beige .section-grid,
  body.slide-deck-active .theme-beige .reveal-column,
  body.slide-deck-active .theme-beige .side-symbols-container {
    background-color: var(--color-bg-secondary) !important; /* Beige */
    color: var(--color-text-primary) !important;
  }
  body.slide-deck-active .theme-beige .reveal-column-progress {
    background-color: rgba(0, 0, 0, 0.08) !important;
  }
  body.slide-deck-active .theme-beige .reveal-column-progress-fill {
    background-color: var(--color-text-primary) !important;
  }

  body.slide-deck-active .theme-dark .section-grid,
  body.slide-deck-active .theme-dark .reveal-column,
  body.slide-deck-active .theme-dark .side-symbols-container {
    background-color: var(--color-bg-dark) !important; /* Dark Slate */
    color: var(--color-text-light) !important;
    border-bottom: none !important;
  }
  body.slide-deck-active .theme-dark .reveal-column p,
  body.slide-deck-active .theme-dark .reveal-column li,
  body.slide-deck-active .theme-dark .reveal-column span,
  body.slide-deck-active .theme-dark .reveal-column a {
    color: rgba(255, 255, 255, 0.8) !important;
  }
  body.slide-deck-active .theme-dark .reveal-column-progress {
    background-color: rgba(255, 255, 255, 0.15) !important;
  }
  body.slide-deck-active .theme-dark .reveal-column-progress-fill {
    background-color: var(--color-text-light) !important;
  }

  body.slide-deck-active .theme-dark-accent .section-grid,
  body.slide-deck-active .theme-dark-accent .reveal-column,
  body.slide-deck-active .theme-dark-accent .side-symbols-container {
    background-color: var(--color-bg-dark-accent) !important; /* Deepest Slate */
    color: var(--color-text-light) !important;
    border-bottom: none !important;
  }
  body.slide-deck-active .theme-dark-accent .reveal-column p,
  body.slide-deck-active .theme-dark-accent .reveal-column li,
  body.slide-deck-active .theme-dark-accent .reveal-column span,
  body.slide-deck-active .theme-dark-accent .reveal-column a {
    color: rgba(255, 255, 255, 0.8) !important;
  }
  body.slide-deck-active .theme-dark-accent .reveal-column-progress {
    background-color: rgba(255, 255, 255, 0.15) !important;
  }
  body.slide-deck-active .theme-dark-accent .reveal-column-progress-fill {
    background-color: var(--color-text-light) !important;
  }

  /* Compact typography matching Layout_5.jpg mockup */
  body.slide-deck-active h1.headline {
    font-size: 2.75rem !important;
    margin-bottom: 1.25rem !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
  }

  /* Strict Font-Family Pairings: Oswald for Headings & Hook, System Sans for Body, Serif for Header Logo */
  body.slide-deck-active h1,
  body.slide-deck-active h2,
  body.slide-deck-active h3,
  body.slide-deck-active h4,
  body.slide-deck-active .headline,
  body.slide-deck-active .sub-headline,
  body.slide-deck-active .hook {
    font-family: var(--font-display) !important;
  }

  body.slide-deck-active p,
  body.slide-deck-active .paragraph,
  body.slide-deck-active span.progress-label,
  body.slide-deck-active a {
    font-family: var(--font-sans) !important;
  }

  body.slide-deck-active header .logo-link {
    font-family: var(--font-serif) !important;
  }

  /* Landing/Intro page adjustments on mobile handled in responsive landing section */
}

/* ==========================================================================
   EDGE-TO-EDGE HIGH-END SCREEN LAYOUTS (DESKTOP)
   ========================================================================== */
@media (min-width: 1280px) {
  /* Let sections be full viewport and remove container width limits */
  body.slide-deck-active section {
    height: 100vh !important;
    height: var(--app-height, 100dvh) !important;
    min-height: 100vh !important;
    min-height: var(--app-height, 100dvh) !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.slide-deck-active section .container {
    max-width: none !important;
    width: 100vw !important;
    height: 100vh !important;
    height: var(--app-height, 100dvh) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.slide-deck-active .section-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important; /* Left column wider, Right column edge-to-edge image */
    height: 100vh !important;
    height: var(--app-height, 100dvh) !important;
    width: 100vw !important;
    gap: 0 !important;
  }

  /* Left column - start at the top, elegantly padded */
  body.slide-deck-active .reveal-column {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 530px !important;
    margin-left: auto !important;
    margin-right: 6.5rem !important; /* Space from center dividing line */
    padding: 7.5rem 0 5rem 0 !important; /* Start high, leave room for the 50px bottom boundary */
    height: 100vh !important;
    height: var(--app-height, 100dvh) !important;
    position: relative;
    box-sizing: border-box;
  }

  /* Responsive size scaling for slide deck to guarantee perfect 100vh layout fit */
  body.slide-deck-active h1.headline {
    font-size: 4.06rem !important;
    margin-bottom: 1.25rem !important;
    line-height: 1.1 !important;
  }

  body.slide-deck-active p.paragraph {
    font-size: 1.05rem !important; /* Style like modal text */
    margin-bottom: 1.25rem !important;
    line-height: 1.65 !important;
  }

  body.slide-deck-active p.hook {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 26.8px !important;
    line-height: 29.48px !important;
    text-transform: uppercase !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 1.25rem !important;
  }

  body.slide-deck-active .eyebrow {
    margin-bottom: 1.25rem !important;
    padding: 0.35rem 0.8rem !important;
    font-size: 0.65rem !important;
  }

  body.slide-deck-active blockquote {
    padding: 1.75rem !important;
    margin: 1.25rem 0 !important;
  }

  body.slide-deck-active blockquote p {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
  }

  body.slide-deck-active .button-group {
    margin-top: 1.25rem !important;
    margin-bottom: 1.5rem !important;
  }

  body.slide-deck-active details.go-deeper {
    margin-top: 1.25rem !important;
    padding: 1rem 1.5rem !important;
  }

  body.slide-deck-active details.go-deeper .drawer-content {
    overscroll-behavior: contain !important;
    padding-right: 0.5rem !important;
  }

  /* Custom scrollbar styling for the Go Deeper drawer in slide deck mode */
  body.slide-deck-active details.go-deeper .drawer-content::-webkit-scrollbar {
    width: 6px !important;
    display: block !important;
  }

  body.slide-deck-active details.go-deeper .drawer-content::-webkit-scrollbar-track {
    background: transparent !important;
  }

  body.slide-deck-active details.go-deeper .drawer-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 3px !important;
  }

  body.slide-deck-active .theme-dark details.go-deeper .drawer-content::-webkit-scrollbar-thumb,
  body.slide-deck-active .theme-dark-accent details.go-deeper .drawer-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
  }

  /* Right column - edge-to-edge full height panel */
  body.slide-deck-active .right-column-panel {
    width: 100% !important;
    height: 100vh !important;
    height: var(--app-height, 100dvh) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  body.slide-deck-active .section-illustration {
    width: 100% !important;
    height: 100vh !important;
    height: var(--app-height, 100dvh) !important;
    border-radius: 0px !important;
    border: none !important;
    border-left: 1px solid var(--color-border) !important; /* Elegant boundary line */
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    background-color: var(--color-bg-dark) !important;
  }

  section.theme-dark .section-illustration,
  section.theme-dark-accent .section-illustration {
    border-left-color: var(--color-border-dark) !important;
  }

  body.slide-deck-active .section-illustration img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important; /* Start hidden */
    transition: opacity 1.2s ease-in-out !important;
    pointer-events: none !important;
  }

  body.slide-deck-active .section-illustration img.active {
    opacity: 0.85 !important; /* Brightened - 15% transparency (85% opacity) so scripture floats elegantly */
    pointer-events: auto !important;
  }
}

/* ==========================================================================
   VERTICAL PROGRESS BAR (WITHIN LEFT COLUMN)
   ========================================================================== */
.reveal-column-progress {
  display: none;
}

@media (min-width: 1024px) {
  .reveal-column-progress {
    display: block;
    position: absolute;
    left: -3.5rem; /* Positioned perfectly on the left of the text */
    top: 7.5rem;
    bottom: calc(5rem + 7px); /* Stopped 7px higher to give clearance to scroll to read CTA */
    width: 4px;
    height: auto;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
    z-index: 20;
  }

  .theme-dark .reveal-column-progress,
  .theme-dark-accent .reveal-column-progress {
    background-color: rgba(255, 255, 255, 0.12);
  }

  .reveal-column-progress-fill {
    width: 100%;
    height: 0%;
    background-color: var(--color-accent);
    border-radius: 10px;
    transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .theme-dark .reveal-column-progress-fill,
  .theme-dark-accent .reveal-column-progress-fill {
    background-color: #FFFFFF;
  }
}

/* ==========================================================================
   FROSTED GLASS FLOATING SCRIPTURE OVERLAYS
   ========================================================================== */
.scripture-overlay {
  position: relative;
  background-color: var(--color-bg-secondary);
  border-left: 3px solid var(--color-accent);
  padding: 2.25rem;
  margin: 2rem 0;
  border-radius: 0px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

@media (min-width: 1024px) {
  .scripture-overlay {
    position: absolute !important;
    z-index: 50 !important;
    left: 0 !important;         /* Aligned exactly with the left edge of the large image */
    right: auto !important;
    width: 50% !important;       /* No wider than 50% of the whole image */
    max-width: 50% !important;
    top: 50% !important;         /* Perfectly aligned vertically in the center of the image */
    transform: translateY(-50%) translateY(15px) !important;
    margin: 0 !important;
    padding: 3rem !important;    /* Spacious elegant padding */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s !important;
    border-radius: 0px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* Style A: White background [60% opacity] with dark text */
  .scripture-overlay.scripture-style-a {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-left: 6px solid var(--color-accent) !important; /* Thick line at the left edge */
    color: #1A1E1B !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12) !important;
  }
  .scripture-overlay.scripture-style-a p {
    color: #1A1E1B !important;
  }
  .scripture-overlay.scripture-style-a cite {
    color: var(--color-accent) !important;
  }

  /* Style B: Black background [60% opacity] with light/white text */
  .scripture-overlay.scripture-style-b {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 6px solid var(--color-accent) !important; /* Thick line at the left edge */
    color: #FFFFFF !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35) !important;
  }
  .scripture-overlay.scripture-style-b p {
    color: #FFFFFF !important;
  }
  .scripture-overlay.scripture-style-b cite {
    color: #FFFFFF !important;
    opacity: 0.9 !important;
  }

  /* Support styling inside dark/accent section context if needed, but the explicit styles above dominate */
  .theme-dark .scripture-overlay.scripture-style-a,
  .theme-dark-accent .scripture-overlay.scripture-style-a {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #1A1E1B !important;
  }
  .theme-dark .scripture-overlay.scripture-style-a p,
  .theme-dark-accent .scripture-overlay.scripture-style-a p {
    color: #1A1E1B !important;
  }

  .theme-dark .scripture-overlay.scripture-style-b,
  .theme-dark-accent .scripture-overlay.scripture-style-b {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #FFFFFF !important;
  }
  .theme-dark .scripture-overlay.scripture-style-b p,
  .theme-dark-accent .scripture-overlay.scripture-style-b p {
    color: #FFFFFF !important;
  }

  /* Reveal animation classes controlled by the JS */
  .scripture-overlay.revealed {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(-50%) translateY(0) !important;
  }

  body.slide-deck-active .scripture-overlay p,
  body .scripture-overlay p,
  .scripture-overlay p {
    font-size: 26.6px !important; /* Custom requested scripture font size */
    line-height: 41.16px !important; /* Custom requested scripture line height */
    font-family: var(--font-serif) !important;
    margin-bottom: 1rem !important;
    font-weight: 300 !important;
  }

  body.slide-deck-active .scripture-overlay cite,
  body .scripture-overlay cite,
  .scripture-overlay cite {
    font-size: 12.6px !important; /* Custom requested citation font size */
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    font-family: var(--font-sans) !important;
  }
}

/* Inline Scripture Styling (Same font as body/sans-serif, italicized, editorial left border) */
.scripture-inline {
  font-family: var(--font-sans) !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 1.5rem !important;
  color: var(--color-text-primary) !important;
  border-left: 3px solid var(--color-accent) !important;
  padding-left: 1.25rem !important;
}

.theme-dark .scripture-inline,
.theme-dark-accent .scripture-inline {
  color: var(--color-text-light) !important;
}

/* Custom point/section highlight colors for inline scriptures' left borders */
#section-intro .scripture-inline {
  border-left-color: #2f86a7 !important;
}
#section-god .scripture-inline {
  border-left-color: #957a42 !important;
}
#section-cross .scripture-inline {
  border-left-color: #d2173a !important;
}
#section-resurrection .scripture-inline {
  border-left-color: #5d9142 !important;
}
#section-grace .scripture-inline {
  border-left-color: #1a7fa0 !important;
}
#section-respond .scripture-inline {
  border-left-color: #57ad70 !important;
}
#section-support .scripture-inline {
  border-left-color: #40c9b3 !important;
}

/* ==========================================================================
   FULL-SCREEN COSMIC BREAK/TRANSITION OVERLAY (LAYOUT 2)
   ========================================================================== */
.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: var(--app-height, 100dvh);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  
  /* Fallback radial gradient + high-res starry night background mimicking Layout 2 */
  background: radial-gradient(circle at center, rgba(16, 26, 36, 0.92) 0%, rgba(5, 8, 12, 0.98) 100%),
              url('https://images.unsplash.com/photo-1506318137071-a8e063b4bec0?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
}

.transition-overlay.active {
  opacity: 1;
  visibility: visible;
}

.transition-content {
  max-width: 650px;
  padding: 3rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.transition-overlay.active .transition-content {
  opacity: 1;
  transform: translateY(0);
}

.transition-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-text-light-muted);
  transition: color var(--transition-fast);
}

.transition-title,
.transition-title * {
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 400;
  color: #FFFFFF !important;
  letter-spacing: 0.03em;
  margin: 0;
  line-height: 1.1;
}

.transition-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  transition: color var(--transition-fast);
}

body.slide-deck-active .transition-symbol .side-symbol,
body.slide-deck-active .transition-symbol svg,
.transition-symbol .side-symbol,
.transition-symbol svg {
  display: block !important;
  opacity: 1 !important;
  width: auto !important;
  height: 9.75rem !important;
  max-width: 12.75rem !important;
  max-height: 10.5rem !important;
  color: inherit !important;
  transform: none !important;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.65));
}

.transition-symbol svg path,
.transition-symbol svg g,
.transition-symbol svg * {
  fill: currentColor !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}

@media (max-width: 768px) {
  .transition-title {
    font-size: 2.25rem;
  }
  
  body.slide-deck-active .transition-symbol .side-symbol,
  body.slide-deck-active .transition-symbol svg,
  .transition-symbol .side-symbol,
  .transition-symbol svg {
    height: 7.125rem !important;
    max-width: 9.75rem !important;
    max-height: 7.875rem !important;
  }
}

/* Floating scroll indicator hint - positioned at the bottom of the scroll progress bar */
.scroll-indicator-hint {
  position: absolute;
  left: 0.75rem;
  bottom: calc(0.35rem - 6px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  z-index: 100;
  color: var(--color-text-primary);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  pointer-events: none;
  transform: translateX(-8px); /* Center the chevron under the mobile progress bar */
  margin-left: 3px; /* Shifted left 2px for perfect alignment with the scroll bar */
}

body.slide-deck-active section.active .scroll-indicator-hint.visible {
  opacity: 0.95;
  visibility: visible;
}

body.dark-section-active .scroll-indicator-hint {
  color: var(--color-text-light);
}

.scroll-hint-text {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding: 0.35rem 0.8rem;
  background-color: rgba(0, 0, 0, 0.04);
  border: 1.5px solid currentColor;
  border-radius: 3rem !important;
  transition: all var(--transition-fast);
}

body.dark-section-active .scroll-hint-text {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: currentColor;
  color: #ffffff;
}

.scroll-indicator-hint svg {
  animation: bounceHint 2s infinite;
}

@keyframes bounceHint {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-4px);
  }
  60% {
    transform: translateY(-2px);
  }
}

/* Desktop positioning relative to the progress bar */
@media (min-width: 1024px) {
  .scroll-indicator-hint {
    left: -3.5rem;
    bottom: calc(2.2rem - 6px);
    transform: translateX(-50%);
    align-items: center;
    gap: 0.25rem;
  }
  .scroll-hint-text {
    display: block !important;
  }
}

/* Image Number Badge Helper for Phase 1 - Hidden per user request */
.image-number-badge {
  display: none !important;
}

.image-number-badge .number-list {
  display: flex;
  gap: 0.4rem;
}

.image-number-badge .number-item {
  opacity: 0.45;
  transition: opacity 0.2s, transform 0.2s;
  cursor: pointer;
  padding: 0 0.15rem;
}

.image-number-badge .number-item:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

.image-number-badge .number-item.active {
  opacity: 1;
  font-weight: 700;
  text-decoration: underline;
  transform: scale(1.15);
}

/* Darken and blur image overlay dimmer when "Who We Are" container is revealed in support section */
.image-overlay-dimmer {
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), -webkit-backdrop-filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.section-illustration:has(.who-we-are-container.revealed) .image-overlay-dimmer {
  background-color: rgba(10, 15, 30, 0.75) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Focus Mode: Section Respond Highlight Button styling */
main:nth-of-type(1) > section#section-respond:nth-of-type(6) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1),
#section-respond .whats-next-btn {
  background-color: #57ad70 !important;
  color: #ffffff !important;
  border-color: #57ad70 !important;
  border-radius: 20px !important;
}

main:nth-of-type(1) > section#section-respond:nth-of-type(6) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1):hover,
#section-respond .whats-next-btn:hover {
  background-color: #4a9c61 !important;
  border-color: #4a9c61 !important;
}

/* ==========================================
   PERSISTENT SIDE SYMBOLS FOR SLIDE DECK (BASE & DESKTOP)
   ========================================== */

/* Base fallback styling for persistent side symbols (guarantees SVGs never render unconstrained) */
.side-symbols-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.side-symbol {
  display: inline-block;
  max-width: 3rem;
  max-height: 3.5rem;
  width: auto;
  height: auto;
  fill: #666666;
  overflow: visible;
}

.side-symbol.crown {
  width: 2.75rem;
  height: 2.68rem;
}

.side-symbol.cross {
  width: 2.5rem;
  height: 3.25rem;
}

.side-symbol.raised {
  width: 2.1rem;
  height: 3.25rem;
}

.side-symbol.question {
  width: 2.5rem;
  height: 3.4rem;
}

.side-symbol.respond {
  width: 2.5rem;
  height: 2.75rem;
}

/* Base dimensions for what-next side symbols */
.side-symbol.bible {
  width: 2.6rem;
  height: 2.6rem;
}

.side-symbol.prayer {
  width: 2.6rem;
  height: 2.6rem;
}

.side-symbol.church {
  width: 2.7rem;
  height: 2.4rem;
}

.side-symbol.tell {
  width: 2.6rem;
  height: 2.6rem;
}

.side-symbol.live {
  width: 2.1rem;
  height: 2.8rem;
}

.side-symbol.baptise {
  width: 2.1rem;
  height: 2.8rem;
}

.side-symbol.learning {
  width: 2.5rem;
  height: 2.5rem;
}

.side-symbol.promises {
  width: 2.1rem;
  height: 2.8rem;
}

@media (min-width: 1280px) {
  body.slide-deck-active .side-symbols-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: absolute !important;
    left: calc(-28.75vw + 265px) !important;
    top: calc(12.45rem - 8px) !important;
    bottom: calc(5rem + 0.35 * (100vh - 12.5rem)) !important;
    width: 3rem !important;
    z-index: 30 !important;
    pointer-events: none !important;
  }

  body.slide-deck-active .side-symbol {
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.3, 1), fill 1.2s cubic-bezier(0.25, 1, 0.3, 1), transform 0.3s cubic-bezier(0.25, 1, 0.3, 1) !important;
    opacity: 0;
    transform: translateY(15px) scale(0.9);
    fill: #666666 !important;
    overflow: visible !important;
    pointer-events: none !important;
    cursor: default !important;
  }

  body.slide-deck-active .side-symbol.crown {
    width: 2.75rem !important;
    height: 2.68rem !important;
  }

  body.slide-deck-active .side-symbol.cross {
    width: 2.5rem !important;
    height: 3.25rem !important;
  }

  body.slide-deck-active .side-symbol.raised {
    width: 2.1rem !important;
    height: 3.25rem !important;
  }

  body.slide-deck-active .side-symbol.question {
    width: 2.5rem !important;
    height: 3.4rem !important;
  }

  body.slide-deck-active .side-symbol.respond {
    width: 2.5rem !important;
    height: 2.75rem !important;
  }

  /* Desktop dimensions for what-next symbols */
  body.slide-deck-active .side-symbol.bible {
    width: 2.6rem !important;
    height: 2.6rem !important;
  }

  body.slide-deck-active .side-symbol.prayer {
    width: 2.6rem !important;
    height: 2.6rem !important;
  }

  body.slide-deck-active .side-symbol.church {
    width: 2.7rem !important;
    height: 2.4rem !important;
  }

  body.slide-deck-active .side-symbol.tell {
    width: 2.6rem !important;
    height: 2.6rem !important;
  }

  body.slide-deck-active .side-symbol.live {
    width: 2.1rem !important;
    height: 2.8rem !important;
  }

  body.slide-deck-active .side-symbol.baptise {
    width: 2.1rem !important;
    height: 2.8rem !important;
  }

  body.slide-deck-active .side-symbol.learning {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  body.slide-deck-active .side-symbol.promises {
    width: 2.1rem !important;
    height: 2.8rem !important;
  }

  /* Dark theme inactive symbol color override */
  body.slide-deck-active .theme-dark .side-symbol,
  body.slide-deck-active .theme-dark-accent .side-symbol {
    fill: rgba(255, 255, 255, 0.35) !important;
  }

  /* Progressive/Sequence Visibility per Section (Index Gospel Page) */

  /* Section 1: God (Crown is active) */
  body.slide-deck-active [data-section-index="1"] .crown {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #957a42 !important; /* Gold highlight */
  }

  /* Section 2: Cross (Crown passed, Cross active) */
  body.slide-deck-active [data-section-index="2"] .crown {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  body.slide-deck-active [data-section-index="2"] .cross {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #d2173a !important; /* Red highlight */
  }

  /* Section 3: Resurrection (Crown/Cross passed, Raised active) */
  body.slide-deck-active [data-section-index="3"] .crown,
  body.slide-deck-active [data-section-index="3"] .cross {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  body.slide-deck-active [data-section-index="3"] .raised {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #5d9142 !important; /* Green highlight */
  }

  /* Section 4: Grace (Crown/Cross/Raised passed, Question active) */
  body.slide-deck-active [data-section-index="4"] .crown,
  body.slide-deck-active [data-section-index="4"] .cross,
  body.slide-deck-active [data-section-index="4"] .raised {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  body.slide-deck-active [data-section-index="4"] .question {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #1a7fa0 !important; /* Blue highlight */
  }

  /* Section 5: Response (Crown/Cross/Raised/Question passed, Respond active) */
  body.slide-deck-active [data-section-index="5"] .crown,
  body.slide-deck-active [data-section-index="5"] .cross,
  body.slide-deck-active [data-section-index="5"] .raised,
  body.slide-deck-active [data-section-index="5"] .question {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  body.slide-deck-active [data-section-index="5"] .respond {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #57ad70 !important; /* Green highlight */
  }

  /* Section 6: Support (All 5 passed / grey) */
  body.slide-deck-active [data-section-index="6"] .crown,
  body.slide-deck-active [data-section-index="6"] .cross,
  body.slide-deck-active [data-section-index="6"] .raised,
  body.slide-deck-active [data-section-index="6"] .question,
  body.slide-deck-active [data-section-index="6"] .respond {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }

  /* Progressive/Sequence Visibility per Section (What Next Page) */

  /* Section 1: Read the Bible */
  body.slide-deck-active [data-section-index="1"] .bible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #a93a5c !important;
  }

  /* Section 2: Talk to God */
  body.slide-deck-active [data-section-index="2"] .bible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  body.slide-deck-active [data-section-index="2"] .prayer {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #6085fa !important;
  }

  /* Section 3: Find a Church */
  body.slide-deck-active [data-section-index="3"] .bible,
  body.slide-deck-active [data-section-index="3"] .prayer {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  body.slide-deck-active [data-section-index="3"] .church {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #cf5b0b !important;
  }

  /* Section 4: Tell Someone */
  body.slide-deck-active [data-section-index="4"] .bible,
  body.slide-deck-active [data-section-index="4"] .prayer,
  body.slide-deck-active [data-section-index="4"] .church {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  body.slide-deck-active [data-section-index="4"] .tell {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #f8634d !important;
  }

  /* Section 5: Live Differently */
  body.slide-deck-active [data-section-index="5"] .bible,
  body.slide-deck-active [data-section-index="5"] .prayer,
  body.slide-deck-active [data-section-index="5"] .church,
  body.slide-deck-active [data-section-index="5"] .tell {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  body.slide-deck-active [data-section-index="5"] .live {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #356d5c !important;
  }

  /* Section 6: Be Baptised */
  body.slide-deck-active [data-section-index="6"] .bible,
  body.slide-deck-active [data-section-index="6"] .prayer,
  body.slide-deck-active [data-section-index="6"] .church,
  body.slide-deck-active [data-section-index="6"] .tell,
  body.slide-deck-active [data-section-index="6"] .live {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  body.slide-deck-active [data-section-index="6"] .baptise {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #10d2d9 !important;
  }

  /* Section 7: Keep Learning */
  body.slide-deck-active [data-section-index="7"] .bible,
  body.slide-deck-active [data-section-index="7"] .prayer,
  body.slide-deck-active [data-section-index="7"] .church,
  body.slide-deck-active [data-section-index="7"] .tell,
  body.slide-deck-active [data-section-index="7"] .live,
  body.slide-deck-active [data-section-index="7"] .baptise {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  body.slide-deck-active [data-section-index="7"] .learning {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #226f4d !important;
  }

  /* Section 8: Remember Promises */
  body.slide-deck-active [data-section-index="8"] .bible,
  body.slide-deck-active [data-section-index="8"] .prayer,
  body.slide-deck-active [data-section-index="8"] .church,
  body.slide-deck-active [data-section-index="8"] .tell,
  body.slide-deck-active [data-section-index="8"] .live,
  body.slide-deck-active [data-section-index="8"] .baptise,
  body.slide-deck-active [data-section-index="8"] .learning {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  body.slide-deck-active [data-section-index="8"] .promises {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #e08339 !important;
  }

  /* Section 9: Support (All 8 passed steps grey) */
  body.slide-deck-active [data-section-index="9"] .bible,
  body.slide-deck-active [data-section-index="9"] .prayer,
  body.slide-deck-active [data-section-index="9"] .church,
  body.slide-deck-active [data-section-index="9"] .tell,
  body.slide-deck-active [data-section-index="9"] .live,
  body.slide-deck-active [data-section-index="9"] .baptise,
  body.slide-deck-active [data-section-index="9"] .learning,
  body.slide-deck-active [data-section-index="9"] .promises {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    fill: #666666 !important;
  }

  /* Enable clicking only on active/passed side symbols (which are visible at opacity 1) */
  body.slide-deck-active [data-section-index="1"] .crown,
  body.slide-deck-active [data-section-index="2"] .crown,
  body.slide-deck-active [data-section-index="2"] .cross,
  body.slide-deck-active [data-section-index="3"] .crown,
  body.slide-deck-active [data-section-index="3"] .cross,
  body.slide-deck-active [data-section-index="3"] .raised,
  body.slide-deck-active [data-section-index="4"] .crown,
  body.slide-deck-active [data-section-index="4"] .cross,
  body.slide-deck-active [data-section-index="4"] .raised,
  body.slide-deck-active [data-section-index="4"] .question,
  body.slide-deck-active [data-section-index="5"] .crown,
  body.slide-deck-active [data-section-index="5"] .cross,
  body.slide-deck-active [data-section-index="5"] .raised,
  body.slide-deck-active [data-section-index="5"] .question,
  body.slide-deck-active [data-section-index="5"] .respond,
  body.slide-deck-active [data-section-index="6"] .crown,
  body.slide-deck-active [data-section-index="6"] .cross,
  body.slide-deck-active [data-section-index="6"] .raised,
  body.slide-deck-active [data-section-index="6"] .question,
  body.slide-deck-active [data-section-index="6"] .respond,
  body.slide-deck-active [data-section-index="1"] .bible,
  body.slide-deck-active [data-section-index="2"] .bible,
  body.slide-deck-active [data-section-index="2"] .prayer,
  body.slide-deck-active [data-section-index="3"] .bible,
  body.slide-deck-active [data-section-index="3"] .prayer,
  body.slide-deck-active [data-section-index="3"] .church,
  body.slide-deck-active [data-section-index="4"] .bible,
  body.slide-deck-active [data-section-index="4"] .prayer,
  body.slide-deck-active [data-section-index="4"] .church,
  body.slide-deck-active [data-section-index="4"] .tell,
  body.slide-deck-active [data-section-index="5"] .bible,
  body.slide-deck-active [data-section-index="5"] .prayer,
  body.slide-deck-active [data-section-index="5"] .church,
  body.slide-deck-active [data-section-index="5"] .tell,
  body.slide-deck-active [data-section-index="5"] .live,
  body.slide-deck-active [data-section-index="6"] .bible,
  body.slide-deck-active [data-section-index="6"] .prayer,
  body.slide-deck-active [data-section-index="6"] .church,
  body.slide-deck-active [data-section-index="6"] .tell,
  body.slide-deck-active [data-section-index="6"] .live,
  body.slide-deck-active [data-section-index="6"] .baptise,
  body.slide-deck-active [data-section-index="7"] .bible,
  body.slide-deck-active [data-section-index="7"] .prayer,
  body.slide-deck-active [data-section-index="7"] .church,
  body.slide-deck-active [data-section-index="7"] .tell,
  body.slide-deck-active [data-section-index="7"] .live,
  body.slide-deck-active [data-section-index="7"] .baptise,
  body.slide-deck-active [data-section-index="7"] .learning,
  body.slide-deck-active [data-section-index="8"] .bible,
  body.slide-deck-active [data-section-index="8"] .prayer,
  body.slide-deck-active [data-section-index="8"] .church,
  body.slide-deck-active [data-section-index="8"] .tell,
  body.slide-deck-active [data-section-index="8"] .live,
  body.slide-deck-active [data-section-index="8"] .baptise,
  body.slide-deck-active [data-section-index="8"] .learning,
  body.slide-deck-active [data-section-index="8"] .promises,
  body.slide-deck-active [data-section-index="9"] .bible,
  body.slide-deck-active [data-section-index="9"] .prayer,
  body.slide-deck-active [data-section-index="9"] .church,
  body.slide-deck-active [data-section-index="9"] .tell,
  body.slide-deck-active [data-section-index="9"] .live,
  body.slide-deck-active [data-section-index="9"] .baptise,
  body.slide-deck-active [data-section-index="9"] .learning,
  body.slide-deck-active [data-section-index="9"] .promises {
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* Interactive Hover Scale Feedback for Active Desktop Symbols */
  @media (hover: hover) {
    body.slide-deck-active [data-section-index="1"] .crown:hover,
    body.slide-deck-active [data-section-index="2"] .crown:hover,
    body.slide-deck-active [data-section-index="2"] .cross:hover,
    body.slide-deck-active [data-section-index="3"] .crown:hover,
    body.slide-deck-active [data-section-index="3"] .cross:hover,
    body.slide-deck-active [data-section-index="3"] .raised:hover,
    body.slide-deck-active [data-section-index="4"] .crown:hover,
    body.slide-deck-active [data-section-index="4"] .cross:hover,
    body.slide-deck-active [data-section-index="4"] .raised:hover,
    body.slide-deck-active [data-section-index="4"] .question:hover,
    body.slide-deck-active [data-section-index="5"] .crown:hover,
    body.slide-deck-active [data-section-index="5"] .cross:hover,
    body.slide-deck-active [data-section-index="5"] .raised:hover,
    body.slide-deck-active [data-section-index="5"] .question:hover,
    body.slide-deck-active [data-section-index="5"] .respond:hover,
    body.slide-deck-active [data-section-index="6"] .crown:hover,
    body.slide-deck-active [data-section-index="6"] .cross:hover,
    body.slide-deck-active [data-section-index="6"] .raised:hover,
    body.slide-deck-active [data-section-index="6"] .question:hover,
    body.slide-deck-active [data-section-index="6"] .respond:hover,
    body.slide-deck-active [data-section-index="1"] .bible:hover,
    body.slide-deck-active [data-section-index="2"] .bible:hover,
    body.slide-deck-active [data-section-index="2"] .prayer:hover,
    body.slide-deck-active [data-section-index="3"] .bible:hover,
    body.slide-deck-active [data-section-index="3"] .prayer:hover,
    body.slide-deck-active [data-section-index="3"] .church:hover,
    body.slide-deck-active [data-section-index="4"] .bible:hover,
    body.slide-deck-active [data-section-index="4"] .prayer:hover,
    body.slide-deck-active [data-section-index="4"] .church:hover,
    body.slide-deck-active [data-section-index="4"] .tell:hover,
    body.slide-deck-active [data-section-index="5"] .bible:hover,
    body.slide-deck-active [data-section-index="5"] .prayer:hover,
    body.slide-deck-active [data-section-index="5"] .church:hover,
    body.slide-deck-active [data-section-index="5"] .tell:hover,
    body.slide-deck-active [data-section-index="5"] .live:hover,
    body.slide-deck-active [data-section-index="6"] .bible:hover,
    body.slide-deck-active [data-section-index="6"] .prayer:hover,
    body.slide-deck-active [data-section-index="6"] .church:hover,
    body.slide-deck-active [data-section-index="6"] .tell:hover,
    body.slide-deck-active [data-section-index="6"] .live:hover,
    body.slide-deck-active [data-section-index="6"] .baptise:hover,
    body.slide-deck-active [data-section-index="7"] .bible:hover,
    body.slide-deck-active [data-section-index="7"] .prayer:hover,
    body.slide-deck-active [data-section-index="7"] .church:hover,
    body.slide-deck-active [data-section-index="7"] .tell:hover,
    body.slide-deck-active [data-section-index="7"] .live:hover,
    body.slide-deck-active [data-section-index="7"] .baptise:hover,
    body.slide-deck-active [data-section-index="7"] .learning:hover,
    body.slide-deck-active [data-section-index="8"] .bible:hover,
    body.slide-deck-active [data-section-index="8"] .prayer:hover,
    body.slide-deck-active [data-section-index="8"] .church:hover,
    body.slide-deck-active [data-section-index="8"] .tell:hover,
    body.slide-deck-active [data-section-index="8"] .live:hover,
    body.slide-deck-active [data-section-index="8"] .baptise:hover,
    body.slide-deck-active [data-section-index="8"] .learning:hover,
    body.slide-deck-active [data-section-index="8"] .promises:hover,
    body.slide-deck-active [data-section-index="9"] .bible:hover,
    body.slide-deck-active [data-section-index="9"] .prayer:hover,
    body.slide-deck-active [data-section-index="9"] .church:hover,
    body.slide-deck-active [data-section-index="9"] .tell:hover,
    body.slide-deck-active [data-section-index="9"] .live:hover,
    body.slide-deck-active [data-section-index="9"] .baptise:hover,
    body.slide-deck-active [data-section-index="9"] .learning:hover,
    body.slide-deck-active [data-section-index="9"] .promises:hover {
      transform: translateY(0) scale(1.15) !important;
      opacity: 0.85 !important;
    }
  }
}

/* Custom Section Highlight Rules for Index Page Sections (Mobile, Tablet, Desktop) */

/* Section Intro (#2f86a7) */
#section-intro h1 span.highlight,
#section-intro p span.highlight,
#section-intro .headline span.highlight {
  color: #2f86a7 !important;
}
#section-intro .eyebrow {
  color: #2f86a7 !important;
}
#section-intro .scripture-inline {
  border-left-color: #2f86a7 !important;
}
#section-intro .scripture-overlay {
  border-left: 6px solid #2f86a7 !important;
}
#section-intro .scripture-overlay cite {
  color: #2f86a7 !important;
}

/* Section 1: God (#957a42) & Dynamic Tone Shift to Dark */
#section-god,
#section-god .container,
#section-god .section-grid,
#section-god .reveal-column,
#section-god .side-symbols-container,
#section-god .right-column-panel,
#section-god .section-illustration,
#section-god details.go-deeper,
#section-god p,
#section-god .paragraph,
#section-god .sub-headline,
#section-god .eyebrow,
#section-god h1,
#section-god .headline,
#section-god h1 span.highlight,
#section-god p span.highlight,
#section-god .headline span.highlight,
#section-god .scripture-inline,
#section-god .scripture-inline em,
#section-god .inline-context-link,
#section-god .reveal-column-progress,
#section-god .scroll-indicator-hint,
header,
.logo-link,
.back-link,
.btn-primary,
.btn-secondary {
  transition: background-color 1.8s cubic-bezier(0.25, 1, 0.3, 1),
              color 1.8s cubic-bezier(0.25, 1, 0.3, 1),
              border-color 1.8s cubic-bezier(0.25, 1, 0.3, 1),
              box-shadow 1.8s cubic-bezier(0.25, 1, 0.3, 1) !important;
}

/* Ensure vertical progress bar fill in #section-god retains smooth height easing */
#section-god .reveal-column-progress-fill {
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 1.8s cubic-bezier(0.25, 1, 0.3, 1) !important;
}

/* Ensure scroll-reveal elements in #section-god retain smooth opacity fade-in transition */
#section-god .scroll-reveal {
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              background-color 1.8s cubic-bezier(0.25, 1, 0.3, 1),
              color 1.8s cubic-bezier(0.25, 1, 0.3, 1),
              border-color 1.8s cubic-bezier(0.25, 1, 0.3, 1) !important;
}

#section-god h1 span.highlight,
#section-god p span.highlight,
#section-god .headline span.highlight {
  color: #957a42;
}
#section-god .eyebrow {
  color: #957a42;
}
#section-god .scripture-inline {
  border-left-color: #957a42;
}
#section-god .scripture-overlay {
  border-left: 6px solid #957a42;
}
#section-god .scripture-overlay cite {
  color: #957a42;
}

/* Light Scripture Overlay card (Style A) MUST retain dark text on its white card even in dark mode */
.scripture-overlay.scripture-style-a p,
#section-god .scripture-overlay.scripture-style-a p,
#section-god.theme-dark .scripture-overlay.scripture-style-a p {
  color: #1A1E1B !important;
}

#section-god .scripture-overlay.scripture-style-a cite,
#section-god.theme-dark .scripture-overlay.scripture-style-a cite {
  color: #957a42 !important;
}

/* Dynamic Solemn Dark Theme when reaching "But there's a problem..." */
#section-god.theme-dark,
#section-god.theme-dark .container,
#section-god.theme-dark .section-grid,
#section-god.theme-dark .reveal-column,
#section-god.theme-dark .side-symbols-container {
  background-color: var(--color-bg-dark) !important;
  color: var(--color-text-light) !important;
}

#section-god.theme-dark p,
#section-god.theme-dark .paragraph {
  color: #d0cec7 !important;
}

#section-god.theme-dark .sub-headline {
  color: #e2b866 !important;
}

#section-god.theme-dark h1 span.highlight,
#section-god.theme-dark p span.highlight,
#section-god.theme-dark .headline span.highlight {
  color: #e2b866 !important;
}

#section-god.theme-dark .eyebrow {
  color: #e2b866 !important;
}

#section-god.theme-dark .scripture-inline {
  border-left-color: #e2b866 !important;
  color: #e2dfd7 !important;
  background-color: rgba(226, 184, 102, 0.06) !important;
}

#section-god.theme-dark .scripture-inline em {
  color: #faf9f6 !important;
}

#section-god.theme-dark .inline-context-link {
  color: #f0ca7d !important;
  background: rgba(226, 184, 102, 0.16) !important;
  border-bottom-color: #e2b866 !important;
}

#section-god.theme-dark .inline-context-link:hover {
  color: #ffffff !important;
  background: rgba(226, 184, 102, 0.38) !important;
  border-bottom-color: #f3d89d !important;
}

/* Dark Theme Go Deeper Box in #section-god (matching #section-cross dark theme) */
#section-god details.go-deeper {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--color-border-dark) !important;
  color: #faf9f6 !important;
  box-shadow: none !important;
}

#section-god details.go-deeper summary {
  color: #ffffff !important;
}

#section-god details.go-deeper .deeper-title {
  color: #e2b866 !important;
}

#section-god details.go-deeper .deeper-links a {
  color: #e2dfd7 !important;
}

#section-god details.go-deeper .deeper-links a:hover {
  color: #ffffff !important;
}

#section-god details.go-deeper .book-recommendation {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--color-border-dark) !important;
  border-left: 3px solid #e2b866 !important;
}

#section-god details.go-deeper .book-recommendation h4 {
  color: #faf9f6 !important;
}

#section-god details.go-deeper .book-recommendation p {
  color: #d0cec7 !important;
}

#section-god.theme-dark .reveal-column-progress {
  background: rgba(255, 255, 255, 0.12) !important;
}

#section-god.theme-dark .reveal-column-progress-fill {
  background: #e2b866 !important;
}

#section-god.theme-dark .scroll-indicator-hint {
  color: #e2b866 !important;
}

/* Section 2: Cross (#d2173a) */
#section-cross h1 span.highlight,
#section-cross p span.highlight,
#section-cross .headline span.highlight {
  color: #d2173a !important;
}
#section-cross .eyebrow {
  color: #d2173a !important;
}
#section-cross .scripture-inline {
  border-left-color: #d2173a !important;
}
#section-cross .scripture-overlay {
  border-left: 6px solid #d2173a !important;
}
#section-cross .scripture-overlay cite {
  color: #d2173a !important;
}

/* Section 3: Resurrection (#5d9142) */
#section-resurrection h1 span.highlight,
#section-resurrection p span.highlight,
#section-resurrection .headline span.highlight {
  color: #5d9142 !important;
}
#section-resurrection .eyebrow {
  color: #5d9142 !important;
}
#section-resurrection .scripture-inline {
  border-left-color: #5d9142 !important;
}
#section-resurrection .scripture-overlay {
  border-left: 6px solid #5d9142 !important;
}
#section-resurrection .scripture-overlay cite {
  color: #5d9142 !important;
}

/* Section 4: Grace (#1a7fa0) */
#section-grace h1 span.highlight,
#section-grace p span.highlight,
#section-grace .headline span.highlight {
  color: #1a7fa0 !important;
}
#section-grace .eyebrow {
  color: #1a7fa0 !important;
}
#section-grace .scripture-inline {
  border-left-color: #1a7fa0 !important;
}
#section-grace .scripture-overlay {
  border-left: 6px solid #1a7fa0 !important;
}
#section-grace .scripture-overlay cite {
  color: #1a7fa0 !important;
}

/* Section 5: Respond (#57ad70) */
#section-respond h1 span.highlight,
#section-respond p span.highlight,
#section-respond .headline span.highlight {
  color: #57ad70 !important;
}
#section-respond .eyebrow {
  color: #57ad70 !important;
}
#section-respond .scripture-inline {
  border-left-color: #57ad70 !important;
}
#section-respond .scripture-overlay {
  border-left: 6px solid #57ad70 !important;
}
#section-respond .scripture-overlay cite {
  color: #57ad70 !important;
}

/* Section 6 / Support: The Greatest Adventure (#40c9b3) */
#section-support .highlight,
#section-support span.highlight,
#section-support h1 span.highlight,
#section-support p span.highlight,
#section-support .headline span.highlight,
#section-support .hook span.highlight {
  color: #40c9b3 !important;
}
#section-support .eyebrow,
#section-support .who-we-are-container .eyebrow {
  color: #40c9b3 !important;
}
#section-support .scripture-inline {
  border-left-color: #40c9b3 !important;
}
#section-support .scripture-overlay {
  border-left: 6px solid #40c9b3 !important;
}
#section-support .scripture-overlay cite {
  color: #40c9b3 !important;
}
#section-support .contact-form-container label.form-label {
  color: #40c9b3 !important;
}
#section-support .form-checkbox {
  accent-color: #40c9b3 !important;
}

/* Modal highlight-colored styles to match their sections */

/* Section 1: God (Gold highlight: #957a42) */
#modal-god-character,
#modal-god-purpose,
#modal-god-evidence {
  border-top-color: #957a42 !important;
}
#modal-god-character .modal-eyebrow,
#modal-god-purpose .modal-eyebrow,
#modal-god-evidence .modal-eyebrow {
  color: #957a42 !important;
}

/* Section 2: Christ (Red highlight: #d2173a) */
#modal-christ-sin,
#modal-christ-substitute {
  border-top-color: #d2173a !important;
}
#modal-christ-sin .modal-eyebrow,
#modal-christ-substitute .modal-eyebrow {
  color: #d2173a !important;
}

/* Section 3: Resurrection (Green highlight: #5d9142) */
#modal-raised-triumph,
#modal-raised-promise {
  border-top-color: #5d9142 !important;
}
#modal-raised-triumph .modal-eyebrow,
#modal-raised-promise .modal-eyebrow {
  color: #5d9142 !important;
}

/* Section 4: Grace (Blue highlight: #1a7fa0) */
#modal-grace-meaning,
#modal-grace-faith {
  border-top-color: #1a7fa0 !important;
}
#modal-grace-meaning .modal-eyebrow,
#modal-grace-faith .modal-eyebrow {
  color: #1a7fa0 !important;
}

/* Section 5: Response (Greenish highlight: #57ad70) */
#modal-respond-repentance,
#modal-respond-trust {
  border-top-color: #57ad70 !important;
}
#modal-respond-repentance .modal-eyebrow,
#modal-respond-trust .modal-eyebrow {
  color: #57ad70 !important;
}

main:nth-of-type(1) > section#section-respond:nth-of-type(6) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > h1:nth-of-type(1) > span:nth-of-type(1) {
  color: #57ad70 !important;
}

/* Custom Desktop edge highlight for Scripture Overlays to match their point/section */
@media (min-width: 1024px) {
  #section-intro .scripture-overlay {
    border-left: 6px solid #2f86a7 !important;
  }
  #section-intro .scripture-overlay cite {
    color: #2f86a7 !important;
  }

  #section-god .scripture-overlay {
    border-left: 6px solid #957a42 !important;
  }
  #section-god .scripture-overlay cite {
    color: #957a42 !important;
  }

  #section-cross .scripture-overlay {
    border-left: 6px solid #d2173a !important;
  }
  #section-cross .scripture-overlay cite {
    color: #d2173a !important;
  }

  #section-resurrection .scripture-overlay {
    border-left: 6px solid #5d9142 !important;
  }
  #section-resurrection .scripture-overlay cite {
    color: #5d9142 !important;
  }

  #section-grace .scripture-overlay {
    border-left: 6px solid #1a7fa0 !important;
  }
  #section-grace .scripture-overlay cite {
    color: #1a7fa0 !important;
  }

  #section-respond .scripture-overlay {
    border-left: 6px solid #57ad70 !important;
  }
  #section-respond .scripture-overlay cite {
    color: #57ad70 !important;
  }

  #section-support .scripture-overlay {
    border-left: 6px solid #40c9b3 !important;
  }
  #section-support .scripture-overlay cite {
    color: #40c9b3 !important;
  }
}

/* Styling for scroll next CTA on points/sections */
.scroll-next-cta {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding: 0.8rem 1.35rem 0.8rem 1.1rem;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.scroll-next-cta:hover,
.scroll-next-cta:focus-visible {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  outline: none;
}

.scroll-next-cta::before {
  content: '↓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 800;
  flex-shrink: 0;
  animation: bounceDownCTA 1.8s infinite ease-in-out;
}

@keyframes bounceDownCTA {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

/* Display 'Scroll' verb on desktop (>= 1280px), 'Swipe' verb on mobile/tablet (< 1279px) */
@media (max-width: 1279px) {
  .cta-verb-scroll {
    display: none !important;
  }
  .cta-verb-swipe {
    display: inline !important;
  }
}

@media (min-width: 1280px) {
  .cta-verb-scroll {
    display: inline !important;
  }
  .cta-verb-swipe {
    display: none !important;
  }
}

/* Section CTA pillbox colors taking the highlight color of the COMING point/step */
/* God section -> Coming: Point 2 (The Cross - #ff3b5c) */
#section-god .scroll-next-cta {
  background-color: rgba(210, 23, 58, 0.12);
  color: #c62828 !important;
  border: 1.5px solid #ff3b5c !important;
  box-shadow: 0 4px 16px rgba(210, 23, 58, 0.15);
}
#section-god .scroll-next-cta::before {
  background-color: #ff3b5c;
  color: #ffffff !important;
}

/* Cross section -> Coming: Point 3 (Resurrection - #5d9142) */
#section-cross .scroll-next-cta {
  background-color: rgba(93, 145, 66, 0.18);
  color: #75b854 !important;
  border: 1.5px solid #5d9142 !important;
  box-shadow: 0 4px 16px rgba(93, 145, 66, 0.2);
}
#section-cross .scroll-next-cta::before {
  background-color: #5d9142;
  color: #ffffff !important;
}

/* Resurrection section -> Coming: Point 4 (Grace - #1a7fa0) */
#section-resurrection .scroll-next-cta {
  background-color: rgba(26, 127, 160, 0.14);
  color: #125e77 !important;
  border: 1.5px solid #1a7fa0 !important;
}
#section-resurrection .scroll-next-cta::before {
  background-color: #1a7fa0;
  color: #ffffff !important;
}

/* Grace section -> Coming: Point 5 (Respond - #57ad70) */
#section-grace .scroll-next-cta {
  background-color: rgba(87, 173, 112, 0.15);
  color: #185e33 !important;
  border: 1.5px solid #57ad70 !important;
}
#section-grace .scroll-next-cta::before {
  background-color: #57ad70;
  color: #ffffff !important;
}

/* Section CTA pillbox colors for What's Next sections */
/* Intro step -> Coming: Step 1 (Read Bible - #a93a5c) */
#next-intro .scroll-next-cta {
  background-color: rgba(169, 58, 92, 0.14);
  color: #7a253f !important;
  border: 1.5px solid #a93a5c !important;
}
#next-intro .scroll-next-cta::before {
  background-color: #a93a5c;
  color: #ffffff !important;
}

/* Bible step -> Coming: Step 2 (Talk To God - #6085fa) */
#next-bible .scroll-next-cta {
  background-color: rgba(96, 133, 250, 0.16);
  color: #2a5cdb !important;
  border: 1.5px solid #6085fa !important;
}
#next-bible .scroll-next-cta::before {
  background-color: #6085fa;
  color: #ffffff !important;
}

/* Talk step -> Coming: Step 3 (Find A Church - #cf5b0b) */
#next-talk .scroll-next-cta {
  background-color: rgba(207, 91, 11, 0.18);
  color: #f98335 !important;
  border: 1.5px solid #cf5b0b !important;
}
#next-talk .scroll-next-cta::before {
  background-color: #cf5b0b;
  color: #ffffff !important;
}

/* Church step -> Coming: Step 4 (Tell Someone - #f8634d) */
#next-church .scroll-next-cta {
  background-color: rgba(248, 99, 77, 0.18);
  color: #d63b24 !important;
  border: 1.5px solid #f8634d !important;
}
#next-church .scroll-next-cta::before {
  background-color: #f8634d;
  color: #ffffff !important;
}

/* Tell step -> Coming: Step 5 (Live Differently - #356d5c) */
#next-tell .scroll-next-cta {
  background-color: rgba(53, 109, 92, 0.22);
  color: #5ec9ab !important;
  border: 1.5px solid #356d5c !important;
}
#next-tell .scroll-next-cta::before {
  background-color: #356d5c;
  color: #ffffff !important;
}

/* Live step -> Coming: Step 6 (Be Baptised - #10d2d9) */
#next-live .scroll-next-cta {
  background-color: rgba(16, 210, 217, 0.18);
  color: #0a8287 !important;
  border: 1.5px solid #10d2d9 !important;
}
#next-live .scroll-next-cta::before {
  background-color: #10d2d9;
  color: #ffffff !important;
}

/* Baptise step -> Coming: Step 7 (Keep Learning & Growing - #226f4d) */
#next-baptise .scroll-next-cta {
  background-color: rgba(34, 111, 77, 0.22);
  color: #4ede9c !important;
  border: 1.5px solid #226f4d !important;
}
#next-baptise .scroll-next-cta::before {
  background-color: #226f4d;
  color: #ffffff !important;
}

/* Learning step -> Coming: Step 8 (Remember God's Promises - #e08339) */
#next-learning .scroll-next-cta {
  background-color: rgba(224, 131, 57, 0.18);
  color: #aa5512 !important;
  border: 1.5px solid #e08339 !important;
}
#next-learning .scroll-next-cta::before {
  background-color: #e08339;
  color: #ffffff !important;
}

/* Promises step -> Coming: Step 9 (The Greatest Adventure - #75a350) */
#next-promises .scroll-next-cta {
  background-color: rgba(117, 163, 80, 0.2);
  color: #9cdb6c !important;
  border: 1.5px solid #75a350 !important;
}
#next-promises .scroll-next-cta::before {
  background-color: #75a350;
  color: #ffffff !important;
}

/* Clear rollover highlight state for Begin Journey button */
.start-journey-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.start-journey-btn:hover,
.start-journey-btn:focus-visible {
  background-color: #2f86a7 !important; /* Vibrant Gospel teal highlight color */
  color: #ffffff !important;
  border-color: #2f86a7 !important;
  box-shadow: 0 8px 24px rgba(47, 134, 167, 0.45) !important;
  transform: translateY(-2px);
}

/* Custom focus highlight color for what-next intro section */
#next-intro h1 span.highlight,
#next-intro p span.highlight {
  color: #eb9400 !important;
}

header:nth-of-type(1) > div:nth-of-type(1) > a.back-link {
  padding-left: 0px !important;
  margin-left: -14px !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 12.8px !important;
}

/* Custom responsive visibility utilities */
@media (min-width: 1280px) {
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .desktop-only {
    display: none !important;
  }
  
  /* Ensure that who-we-are headers / eyebrow are displayed inside the mobile section */
  .who-we-are-container.mobile-only .eyebrow {
    display: block !important;
  }
}

/* Tablet-Specific Typography and Multi-Image Behaviors */
@media (min-width: 768px) and (max-width: 1279px) {
  /* Headline and subtitle 25% larger for tablet scrolling layout */
  body.slide-deck-active h1.headline {
    font-size: 3.5rem !important; /* 2.75rem * 1.25+ = 3.5rem */
  }
  body.slide-deck-active h3.sub-headline,
  body.slide-deck-active .sub-headline {
    font-size: 2.25rem !important; /* 1.75rem * 1.25+ = 2.25rem */
  }
  .headline {
    font-size: 7.02rem !important; /* 5.62rem * 1.25 */
  }
  .hook {
    font-size: 4.02rem !important; /* 3.22rem * 1.25 */
  }

  /* Keep only the first image in the section-illustration active/visible in the header on tablet */
  body.slide-deck-active .section-illustration img {
    display: none !important;
    opacity: 0 !important;
  }
  body.slide-deck-active .section-illustration img:first-of-type {
    display: block !important;
    opacity: 0.85 !important;
    pointer-events: auto !important;
  }

  /* Center group of 5 side symbols on tablet view with sensible distance */
  body.slide-deck-active .side-symbols-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2.25rem !important;
    width: 100% !important;
    height: 55px !important;
    min-height: 55px !important;
    padding: 0 2rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-bottom: none !important;
    order: 2 !important;
    z-index: 20 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  body.slide-deck-active .side-symbol.crown {
    width: 1.8rem !important;
    height: 1.75rem !important;
  }

  body.slide-deck-active .side-symbol.cross {
    width: 1.6rem !important;
    height: 2.08rem !important;
  }

  body.slide-deck-active .side-symbol.raised {
    width: 1.3rem !important;
    height: 2.08rem !important;
  }

  body.slide-deck-active .side-symbol.question {
    width: 1.6rem !important;
    height: 2.18rem !important;
  }

  body.slide-deck-active .side-symbol.respond {
    width: 1.6rem !important;
    height: 1.76rem !important;
  }
}

/* Inline tablet images: hidden by default, displayed beautifully in the scrolling text stream on tablet */
.tablet-inline-image {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .tablet-inline-image {
    display: block !important;
    float: right !important;
    width: 48% !important;
    max-width: 48% !important;
    height: auto !important;
    margin: 0.5rem 0 1.25rem 1.5rem !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    object-fit: cover !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s ease-in-out !important;
  }

  .tablet-inline-image.revealed,
  .tablet-inline-image.active-step {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Clear transforms and set display block on tablet scroll-reveal elements to allow clean float wrapping */
  body.slide-deck-active .reveal-column .scroll-reveal {
    display: block !important;
  }
  body.slide-deck-active .reveal-column .scroll-reveal.revealed,
  body.slide-deck-active .reveal-column .scroll-reveal.active-step {
    transform: none !important;
  }
}

/* User-selected highlighted styling overrides for What's Next sections */
#next-intro h1 span.highlight,
#next-intro p span.highlight {
  color: #eb9400 !important;
}
#next-intro .eyebrow {
  color: #eb9400 !important;
}
#next-intro .scripture-inline {
  border-left-color: #eb9400 !important;
}
#next-intro .scripture-overlay {
  border-left-color: #eb9400 !important;
}
#next-intro .scripture-overlay cite {
  color: #eb9400 !important;
}

/* Step 1: Read the Bible (#a93a5c) */
#next-bible h1 span.highlight,
#next-bible p span.highlight {
  color: #a93a5c !important;
}
#next-bible .eyebrow {
  color: #a93a5c !important;
}
#next-bible .scripture-inline {
  border-left-color: #a93a5c !important;
}
#next-bible .scripture-overlay {
  border-left-color: #a93a5c !important;
}
#next-bible .scripture-overlay cite {
  color: #a93a5c !important;
}
#next-bible .book-recommendation {
  border-left: 4px solid #a93a5c !important;
}
#next-bible .book-recommendation h4 {
  color: #a93a5c !important;
}
#next-bible .book-recommendation a:hover {
  color: #a93a5c !important;
}

/* Step 2: Talk to God (#6085fa) */
#next-talk h1 span.highlight,
#next-talk p span.highlight {
  color: #6085fa !important;
}
#next-talk .eyebrow {
  color: #6085fa !important;
}
#next-talk .scripture-inline {
  border-left-color: #6085fa !important;
}
#next-talk .scripture-overlay {
  border-left-color: #6085fa !important;
}
#next-talk .scripture-overlay cite {
  color: #6085fa !important;
}

/* Step 3: Find a Church (#cf5b0b) */
#next-church h1 span.highlight,
#next-church p span.highlight {
  color: #cf5b0b !important;
}
#next-church .eyebrow {
  color: #cf5b0b !important;
}
#next-church .scripture-inline {
  border-left-color: #cf5b0b !important;
}
#next-church .scripture-overlay {
  border-left-color: #cf5b0b !important;
}
#next-church .scripture-overlay cite {
  color: #cf5b0b !important;
}

/* Step 4: Tell Someone (#f8634d) */
#next-tell h1 span.highlight,
#next-tell p span.highlight {
  color: #f8634d !important;
}
#next-tell .eyebrow {
  color: #f8634d !important;
}
#next-tell .scripture-inline {
  border-left-color: #f8634d !important;
}
#next-tell .scripture-overlay {
  border-left-color: #f8634d !important;
}
#next-tell .scripture-overlay cite {
  color: #f8634d !important;
}

/* Step 5: Live Differently (#356d5c) */
#next-live h1 span.highlight,
#next-live p span.highlight {
  color: #356d5c !important;
}
#next-live .eyebrow {
  color: #356d5c !important;
}
#next-live .scripture-inline {
  border-left-color: #356d5c !important;
}
#next-live .scripture-overlay {
  border-left-color: #356d5c !important;
}
#next-live .scripture-overlay cite {
  color: #356d5c !important;
}

/* Step 6: Be Baptised (#10d2d9) */
#next-baptise h1 span.highlight,
#next-baptise p span.highlight {
  color: #10d2d9 !important;
}
#next-baptise .eyebrow {
  color: #10d2d9 !important;
}
#next-baptise .scripture-inline {
  border-left-color: #10d2d9 !important;
}
#next-baptise .scripture-overlay {
  border-left-color: #10d2d9 !important;
}
#next-baptise .scripture-overlay cite {
  color: #10d2d9 !important;
}

/* Step 7: Keep Learning & Growing (#226f4d) */
#next-learning h1 span.highlight,
#next-learning p span.highlight {
  color: #226f4d !important;
}
#next-learning .eyebrow {
  color: #226f4d !important;
}
#next-learning .scripture-inline {
  border-left-color: #226f4d !important;
}
#next-learning .scripture-overlay {
  border-left-color: #226f4d !important;
}
#next-learning .scripture-overlay cite {
  color: #226f4d !important;
}

/* Step 8: Remember God's Promises (#e08339) */
#next-promises h1 span.highlight,
#next-promises p span.highlight {
  color: #e08339 !important;
}
#next-promises .eyebrow {
  color: #e08339 !important;
}
#next-promises .scripture-inline {
  border-left-color: #e08339 !important;
}
#next-promises .scripture-overlay {
  border-left-color: #e08339 !important;
}
#next-promises .scripture-overlay cite {
  color: #e08339 !important;
}

/* Step 8 Promises Comprehensive List Styles */
.promises-block {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.promises-intro {
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
  color: #f1f5f9;
}

.promise-category {
  margin-bottom: 1.5rem;
  padding-left: 0.1rem;
}

.promise-category-title {
  font-size: 1rem;
  font-weight: 700;
  color: #e08339;
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.promise-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.promise-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #e2e8f0;
}

.promise-item span {
  flex: 1;
}

.promise-item strong {
  color: #ffffff;
  font-weight: 600;
}

.promise-bookmark-icon {
  width: 1.1em;
  height: 1.1em;
  min-width: 1.1em;
  min-height: 1.1em;
  flex-shrink: 0;
  margin-top: 0.22em;
  color: #e08339;
  fill: rgba(224, 131, 57, 0.22);
  stroke: #e08339;
  stroke-width: 2.3;
}

/* Step 9 / Support: Adventure (#75a350) */
#next-adventure .highlight,
#next-adventure span.highlight,
#next-adventure h1 span.highlight,
#next-adventure p span.highlight,
#next-adventure .hook span.highlight {
  color: #75a350 !important;
}
#next-adventure .eyebrow,
#next-adventure .who-we-are-container .eyebrow {
  color: #75a350 !important;
}
#next-adventure .contact-form-container label.form-label {
  color: #75a350 !important;
}
#next-adventure .form-checkbox {
  accent-color: #75a350 !important;
}
#next-adventure .scripture-inline {
  border-left-color: #75a350 !important;
}
#next-adventure .scripture-overlay {
  border-left-color: #75a350 !important;
}
#next-adventure .scripture-overlay cite {
  color: #75a350 !important;
}

/* ==========================================
   INLINE CONTEXT LINKS & POP-OVER TRIGGERS
   ========================================== */

.inline-context-link {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  color: #d9ac59;
  background: rgba(193, 155, 83, 0.12);
  border: none;
  border-bottom: 1.5px dotted #957a42;
  border-radius: 3px;
  padding: 0.05em 0.2em;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  line-height: inherit;
  vertical-align: baseline;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.inline-context-link:hover,
.inline-context-link:focus-visible {
  color: #ffffff;
  background: rgba(149, 122, 66, 0.45);
  border-bottom: 1.5px solid #f0ca7d;
  box-shadow: 0 0 10px rgba(193, 155, 83, 0.3);
}

.inline-context-link:focus-visible {
  outline: 2px solid #d9ac59;
  outline-offset: 2px;
}

/* Desktop Hover Tooltip Indicator ("Tap to explore topic") */
@media (hover: hover) and (pointer: fine) {
  .inline-context-link::after {
    content: "Tap to explore topic";
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #18191c;
    color: #e5d1a4;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(193, 155, 83, 0.35);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 100;
  }

  .inline-context-link:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* ==========================================================================
   WHAT NEXT BUTTON ROLLOVER INDICATOR / POPOVER
   ========================================================================== */
.whats-next-btn {
  position: relative !important;
  overflow: visible !important;
}

.whats-next-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem 0.85rem;
  background-color: #eb9400 !important;
  color: #121620 !important;
  border: 1px solid #ffd075 !important;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(235, 148, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px) scale(0.96);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 120;
}

.whats-next-popover::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 18px;
  width: 8px;
  height: 8px;
  background-color: #eb9400 !important;
  border-left: 1px solid #ffd075 !important;
  border-top: 1px solid #ffd075 !important;
  transform: rotate(45deg);
}

.whats-next-popover .popover-line {
  display: block;
}

.whats-next-btn:hover .whats-next-popover,
.whats-next-btn:focus-visible .whats-next-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.whats-next-popover.popover-above {
  top: auto;
  bottom: calc(100% + 12px);
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(5px) scale(0.96);
}

.whats-next-popover.popover-above::before {
  top: auto;
  bottom: -5px;
  left: 50%;
  right: auto;
  border-left: none !important;
  border-top: none !important;
  border-right: 1px solid #ffd075 !important;
  border-bottom: 1px solid #ffd075 !important;
  transform: translateX(-50%) rotate(45deg);
  background-color: #eb9400 !important;
}

.whats-next-btn:hover .whats-next-popover.popover-above,
.whats-next-btn:focus-visible .whats-next-popover.popover-above {
  transform: translateX(-50%) translateY(0) scale(1);
}

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

  body.slide-deck-active section,
  body.slide-deck-active section.active,
  body.slide-deck-active section.past,
  body.slide-deck-active section.future,
  body.slide-deck-active .scroll-reveal,
  body.slide-deck-active .section-illustration img,
  body.slide-deck-active .side-symbol,
  body.slide-deck-active .side-symbols-container {
    transition: none !important;
    animation: none !important;
  }

  body.slide-deck-active .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Landing page segments are an exception to the rule above: they must stay
     one-at-a-time even with reduced motion, otherwise the generic .scroll-reveal
     override makes all three (title/subtitle/body) visible and opaque at once,
     stacking directly on top of each other. Higher specificity wins here. */
  #section-intro .landing-segment {
    transition: none !important;
  }
  #section-intro .landing-segment:not(.active-segment) {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  #section-intro .landing-segment.active-segment {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) !important;
  }

  body.slide-deck-active .section-illustration img.active {
    opacity: 0.85 !important;
  }

  body.slide-deck-active .side-symbol {
    opacity: 0.8 !important;
    transform: none !important;
  }
}

/* ==========================================
   TRANSITION OVERLAY SYMBOL SIZE OVERRIDES
   Guarantees transition screen symbols are ALWAYS large and correctly sized
   across Desktop, Tablet, and Mobile, overriding all side-bar icon dimensions.
   ========================================== */
html.preload-transition-active #transition-overlay {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: none !important;
  background-color: #0b0f19 !important;
}

html.preload-transition-active,
html.preload-transition-active body {
  background-color: #0b0f19 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.preload-transition-active #transition-overlay .transition-content {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.slide-deck-active .transition-symbol .side-symbol,
body.slide-deck-active .transition-symbol .side-symbol.crown,
body.slide-deck-active .transition-symbol .side-symbol.cross,
body.slide-deck-active .transition-symbol .side-symbol.raised,
body.slide-deck-active .transition-symbol .side-symbol.question,
body.slide-deck-active .transition-symbol .side-symbol.respond,
body.slide-deck-active .transition-symbol .side-symbol.bible,
body.slide-deck-active .transition-symbol .side-symbol.prayer,
body.slide-deck-active .transition-symbol .side-symbol.church,
body.slide-deck-active .transition-symbol .side-symbol.tell,
body.slide-deck-active .transition-symbol .side-symbol.live,
body.slide-deck-active .transition-symbol .side-symbol.baptise,
body.slide-deck-active .transition-symbol .side-symbol.learning,
body.slide-deck-active .transition-symbol .side-symbol.promises,
body.slide-deck-active .transition-symbol .side-symbol.adventure,
body .transition-symbol .side-symbol,
body .transition-symbol svg,
.transition-symbol .side-symbol,
.transition-symbol svg {
  display: block !important;
  opacity: 1 !important;
  width: auto !important;
  height: 9.75rem !important;
  max-width: 12.75rem !important;
  max-height: 10.5rem !important;
  color: inherit !important;
  transform: none !important;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.65));
}

/* ==========================================================================
   LANDING HERO SECTION (FULLSCREEN VIDEO BACKGROUND & PROGRESSIVE SEGMENTS)
   ========================================================================== */
#section-intro.landing-hero-section {
  position: relative;
  width: 100vw !important;
  height: 100vh !important;
  height: var(--app-height, 100dvh) !important;
  min-height: 100vh !important;
  min-height: var(--app-height, 100dvh) !important;
  overflow: hidden !important;
  background-color: #0c0316 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

#section-intro .landing-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

#section-intro .landing-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: brightness(0.9) contrast(1.05);
}

/* Deep Purple Tint & Gradient Vignette Overlay */
#section-intro .landing-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(15, 4, 28, 0.25) 0%, rgba(12, 2, 22, 0.6) 70%, rgba(8, 1, 16, 0.82) 100%);
}

/* Hero Content Stage & Layout */
#section-intro .landing-hero-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1100px;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  box-sizing: border-box;
}

#section-intro .landing-content-stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

/* Segment Staging & Subtle Easing Up Transitions */
#section-intro .landing-segment {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 20px)) !important;
  width: 100%;
  max-width: 860px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease-out;
  box-sizing: border-box;
}

#section-intro .landing-segment.active-segment {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) !important;
}

/* Segment 1: Main Title */
#section-intro .landing-hero-title,
#section-intro h1.headline {
  font-family: var(--font-display) !important;
  font-size: clamp(4.2rem, 7.5vw, 6.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  color: #ffffff !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(47, 134, 167, 0.35) !important;
  margin: 0 auto !important;
  max-width: 860px !important;
}

#section-intro .landing-hero-title span.highlight,
#section-intro h1.headline span.highlight {
  color: #2f86a7 !important;
}

#section-intro .landing-hero-title span.title-white,
#section-intro h1.headline span.title-white {
  color: #ffffff !important;
}

/* Segment 2: Subtitle & Scripture */
#section-intro .landing-subtitle,
#section-intro .hook {
  font-family: var(--font-display) !important;
  font-size: clamp(1.8rem, 2.8vw, 2.5rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9) !important;
  margin-bottom: 2rem !important;
}

#section-intro .landing-subtitle span.highlight,
#section-intro .hook span.highlight {
  color: #2f86a7 !important;
}

#section-intro .landing-scripture {
  font-family: var(--font-serif) !important;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
  font-style: italic !important;
  line-height: 1.55 !important;
  color: #f5f3ff !important;
  background: rgba(20, 6, 36, 0.72) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-left: 4px solid #2f86a7 !important;
  padding: 1.4rem 2rem !important;
  border-radius: 0 14px 14px 0 !important;
  margin: 0 auto !important;
  max-width: 720px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

#section-intro .landing-scripture cite {
  display: block !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: #2f86a7 !important;
  margin-top: 0.85rem !important;
  letter-spacing: 0.05em !important;
}

/* Segment 3: Body & Begin Journey Button */
#section-intro .landing-body-text {
  font-family: var(--font-sans) !important;
  font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #f8fafc !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9) !important;
  margin-bottom: 2.25rem !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#section-intro .landing-action-group {
  display: flex !important;
  justify-content: center !important;
}

#section-intro .landing-begin-btn {
  font-family: var(--font-sans) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.95rem 2.8rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 1.5px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, border-color 0.35s ease !important;
}

#section-intro .landing-begin-btn:hover {
  transform: scale(1.05) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Understated Scroll / Swipe Indicator */
#section-intro .landing-scroll-indicator {
  position: absolute;
  bottom: calc(clamp(1.25rem, 3.5vh, 2.5rem) - 30px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.35rem !important;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  cursor: pointer;
  user-select: none;
}

#section-intro .landing-scroll-indicator.hidden-pill {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#section-intro .landing-pillbox {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  padding: 0.28rem 0.9rem !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#section-intro .landing-pillbox .pill-text {
  font-family: var(--font-sans) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 255, 255, 0.8) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#section-intro .pill-down-arrow {
  color: rgba(255, 255, 255, 0.65) !important;
  animation: bouncePillArrow 2s infinite ease-in-out;
}

@keyframes bouncePillArrow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

/* ==========================================================================
   LANDING HERO RESPONSIVE STYLES (TABLET & MOBILE)
   ========================================================================== */

/* TABLET VIEWPORT (768px - 1279px) */
@media (min-width: 768px) and (max-width: 1279px) {
  body.slide-deck-active #section-intro .landing-bg-img,
  #section-intro .landing-bg-img {
    object-position: right center !important;
  }

  body.slide-deck-active #section-intro .landing-hero-container,
  #section-intro .landing-hero-container {
    padding: clamp(5rem, 10vh, 6.5rem) 2rem clamp(4rem, 8vh, 5.5rem) 2rem !important;
    max-width: 820px !important;
  }

  body.slide-deck-active #section-intro .landing-content-stage,
  #section-intro .landing-content-stage {
    min-height: 380px !important;
  }

  body.slide-deck-active #section-intro .landing-segment,
  #section-intro .landing-segment {
    max-width: 720px !important;
    padding: 0 1rem !important;
  }

  /* Segment 1: Main Title */
  body.slide-deck-active #section-intro .landing-hero-title,
  body.slide-deck-active #section-intro h1.headline,
  body.slide-deck-active #section-intro h1,
  #section-intro .landing-hero-title,
  #section-intro h1.headline,
  #section-intro h1 {
    font-size: 70px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }

  /* Segment 2: Subtitle & Scripture */
  body.slide-deck-active #section-intro .landing-subtitle,
  body.slide-deck-active #section-intro p.hook,
  body.slide-deck-active #section-intro .hook,
  #section-intro .landing-subtitle,
  #section-intro p.hook,
  #section-intro .hook {
    font-size: clamp(1.55rem, 3.4vw, 2.1rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 1.6rem !important;
  }

  body.slide-deck-active #section-intro .landing-scripture,
  body.slide-deck-active #section-intro blockquote,
  body.slide-deck-active #section-intro blockquote.landing-scripture,
  body.slide-deck-active #section-intro .landing-scripture p,
  body.slide-deck-active #section-intro blockquote p,
  #section-intro .landing-scripture,
  #section-intro blockquote,
  #section-intro blockquote.landing-scripture,
  #section-intro .landing-scripture p,
  #section-intro blockquote p {
    font-size: 18px !important;
    line-height: 1.52 !important;
  }

  body.slide-deck-active #section-intro .landing-scripture,
  body.slide-deck-active #section-intro blockquote,
  #section-intro .landing-scripture,
  #section-intro blockquote {
    padding: 1.25rem 1.75rem !important;
    max-width: 650px !important;
    border-radius: 0 12px 12px 0 !important;
  }

  body.slide-deck-active #section-intro .landing-scripture cite,
  body.slide-deck-active #section-intro blockquote cite,
  #section-intro .landing-scripture cite,
  #section-intro blockquote cite {
    font-size: 0.9rem !important;
    margin-top: 0.75rem !important;
  }

  /* Segment 3: Body & Button */
  body.slide-deck-active #section-intro .landing-body-text,
  body.slide-deck-active #section-intro p.landing-body-text,
  #section-intro .landing-body-text,
  #section-intro p.landing-body-text {
    font-size: clamp(1.2rem, 2.5vw, 1.45rem) !important;
    line-height: 1.52 !important;
    margin-bottom: 1.9rem !important;
    max-width: 650px !important;
  }

  body.slide-deck-active #section-intro .landing-begin-btn,
  #section-intro .landing-begin-btn {
    font-size: 1.08rem !important;
    padding: 0.9rem 2.5rem !important;
  }

  body.slide-deck-active #section-intro .landing-scroll-indicator,
  #section-intro .landing-scroll-indicator {
    bottom: calc(clamp(1.25rem, 3vh, 2.25rem) - 30px) !important;
  }
}

/* MOBILE VIEWPORT (< 768px) */
@media (max-width: 767px) {
  body.slide-deck-active #section-intro .landing-bg-img,
  #section-intro .landing-bg-img {
    object-position: right center !important;
  }

  body.slide-deck-active #section-intro .landing-hero-container,
  #section-intro .landing-hero-container {
    padding: clamp(4.5rem, 9.5vh, 5.5rem) 1.25rem clamp(3.5rem, 7.5vh, 4.5rem) 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.slide-deck-active #section-intro .landing-content-stage,
  #section-intro .landing-content-stage {
    min-height: 300px !important;
    width: 100% !important;
  }

  body.slide-deck-active #section-intro .landing-segment,
  #section-intro .landing-segment {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0.5rem !important;
  }

  /* Segment 1: Main Title */
  body.slide-deck-active #section-intro .landing-hero-title,
  body.slide-deck-active #section-intro h1.headline,
  body.slide-deck-active #section-intro h1,
  #section-intro .landing-hero-title,
  #section-intro h1.headline,
  #section-intro h1 {
    font-size: 52px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
  }

  /* Segment 2: Subtitle & Scripture */
  body.slide-deck-active #section-intro .landing-subtitle,
  body.slide-deck-active #section-intro p.hook,
  body.slide-deck-active #section-intro .hook,
  body.slide-deck-active #section-intro p.landing-subtitle,
  #section-intro .landing-subtitle,
  #section-intro p.hook,
  #section-intro .hook,
  #section-intro p.landing-subtitle {
    font-size: 27.4px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 1.15rem !important;
  }

  body.slide-deck-active #section-intro .landing-scripture,
  body.slide-deck-active #section-intro blockquote,
  body.slide-deck-active #section-intro blockquote.landing-scripture,
  body.slide-deck-active #section-intro .landing-scripture p,
  body.slide-deck-active #section-intro blockquote p,
  #section-intro .landing-scripture,
  #section-intro blockquote,
  #section-intro blockquote.landing-scripture,
  #section-intro .landing-scripture p,
  #section-intro blockquote p {
    font-size: 16px !important;
    line-height: 1.48 !important;
  }

  body.slide-deck-active #section-intro .landing-scripture,
  body.slide-deck-active #section-intro blockquote,
  #section-intro .landing-scripture,
  #section-intro blockquote {
    padding: 0.95rem 1.15rem !important;
    max-width: 100% !important;
    border-left-width: 3.5px !important;
    border-radius: 0 10px 10px 0 !important;
  }

  body.slide-deck-active #section-intro .landing-scripture cite,
  body.slide-deck-active #section-intro blockquote cite,
  #section-intro .landing-scripture cite,
  #section-intro blockquote cite {
    font-size: 0.82rem !important;
    margin-top: 0.55rem !important;
  }

  /* Segment 3: Body & Button */
  body.slide-deck-active #section-intro .landing-body-text,
  body.slide-deck-active #section-intro p.landing-body-text,
  #section-intro .landing-body-text,
  #section-intro p.landing-body-text {
    font-size: clamp(1.05rem, 4.2vw, 1.28rem) !important;
    line-height: 1.48 !important;
    margin-bottom: 1.65rem !important;
    max-width: 100% !important;
  }

  body.slide-deck-active #section-intro .landing-begin-btn,
  #section-intro .landing-begin-btn {
    font-size: 0.98rem !important;
    padding: 0.85rem 2.2rem !important;
    letter-spacing: 0.06em !important;
  }

  body.slide-deck-active #section-intro .landing-scroll-indicator,
  #section-intro .landing-scroll-indicator {
    bottom: calc(clamp(1rem, 2.5vh, 1.75rem) - 90px) !important;
  }

  body.slide-deck-active #section-intro .landing-pillbox .pill-text,
  #section-intro .landing-pillbox .pill-text {
    font-size: 0.65rem !important;
    letter-spacing: 0.11em !important;
  }
}