:root {
  --bg: #050914;
  --bg-2: #0c1324;
  --panel: rgba(12, 19, 36, 0.88);
  --gold: #f3bb34;
  --gold-deep: #c88812;
  --text: #f5f7fb;
  --muted: #c7d0e0;
  --line: rgba(255, 255, 255, 0.08);
  --shadow: 0 20px 80px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.center { text-align: center; }
.left { text-align: left; }

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(5, 9, 20, 0.68);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.nav__brand {
  font-weight: 800;
  letter-spacing: 0.5px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 0.95rem;
}

.nav__cta {
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #1a1405;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(243, 187, 52, 0.25);
}

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px 0 70px;
  background:
    radial-gradient(circle at 65% 45%, rgba(255, 189, 85, 0.32) 0, rgba(255, 189, 85, 0.14) 16%, rgba(255, 189, 85, 0.04) 30%, transparent 43%),
    linear-gradient(90deg, #1e2438 0%, #2a2a46 26%, #58425b 52%, #83595b 71%, #a8734f 86%, #c98a52 100%);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 55%, rgba(255,255,255,0.12) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 24% 35%, rgba(255,255,255,0.16) 0 2px, transparent 2px 100%),
    radial-gradient(circle at 72% 20%, rgba(255,255,255,0.12) 0 1.5px, transparent 1.5px 100%);
  background-size: 140px 140px, 180px 180px, 220px 220px;
  opacity: 0.25;
}

.hero__texture {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 31%;
  opacity: 0.35;
}

.hero__texture--left {
  left: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,0.1) 8px 10px, transparent 10px 28px),
    repeating-linear-gradient(180deg, transparent 0 18px, rgba(255,255,255,0.08) 18px 20px, transparent 20px 46px);
  clip-path: polygon(0 0, 80% 0, 100% 16%, 90% 42%, 100% 62%, 74% 100%, 0 100%);
}

.hero__texture--right {
  right: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,0.07) 18px 20px, transparent 20px 46px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,0.09) 9px 11px, transparent 11px 29px);
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 20% 100%, 0 76%, 12% 56%, 0 32%);
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}

.hero__glow--left {
  width: 380px;
  height: 380px;
  left: 26%;
  top: 40%;
  background: rgba(59, 127, 235, 0.22);
}

.hero__glow--right {
  width: 500px;
  height: 500px;
  right: 7%;
  top: 18%;
  background: rgba(255, 197, 90, 0.28);
}

.hero__cross-wrap {
  position: absolute;
  right: 12%;
  top: 30%;
  width: 18vw;
  max-width: 205px;
  min-width: 110px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__cross-wrap::before {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 244, 196, 0.92) 0%, rgba(255, 223, 136, 0.56) 24%, rgba(255, 210, 120, 0.18) 48%, rgba(255, 205, 110, 0.06) 64%, transparent 78%);
  filter: blur(4px);
}

.hero__cross-wrap::after {
  content: '';
  position: absolute;
  inset: -40%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 10deg,
      rgba(255, 229, 149, 0.34) 10deg 14deg,
      transparent 14deg 28deg,
      rgba(255, 229, 149, 0.18) 28deg 31deg,
      transparent 31deg 45deg,
      rgba(255, 229, 149, 0.28) 45deg 49deg,
      transparent 49deg 65deg,
      rgba(255, 229, 149, 0.14) 65deg 68deg,
      transparent 68deg 90deg,
      rgba(255, 229, 149, 0.28) 90deg 94deg,
      transparent 94deg 112deg,
      rgba(255, 229, 149, 0.18) 112deg 115deg,
      transparent 115deg 135deg,
      rgba(255, 229, 149, 0.3) 135deg 139deg,
      transparent 139deg 155deg,
      rgba(255, 229, 149, 0.14) 155deg 158deg,
      transparent 158deg 180deg,
      rgba(255, 229, 149, 0.3) 180deg 184deg,
      transparent 184deg 202deg,
      rgba(255, 229, 149, 0.16) 202deg 205deg,
      transparent 205deg 225deg,
      rgba(255, 229, 149, 0.3) 225deg 229deg,
      transparent 229deg 246deg,
      rgba(255, 229, 149, 0.16) 246deg 249deg,
      transparent 249deg 270deg,
      rgba(255, 229, 149, 0.26) 270deg 274deg,
      transparent 274deg 292deg,
      rgba(255, 229, 149, 0.16) 292deg 295deg,
      transparent 295deg 315deg,
      rgba(255, 229, 149, 0.28) 315deg 319deg,
      transparent 319deg 337deg,
      rgba(255, 229, 149, 0.16) 337deg 340deg,
      transparent 340deg 360deg
    );
  filter: blur(1px);
  opacity: 0.95;
}

.hero__cross {
  position: relative;
  width: 10%;
  height: 58%;
  min-width: 10px;
  background: linear-gradient(180deg, #fff0ae 0%, #ffd468 26%, #f3bb34 62%, #d89416 100%);
  border-radius: 1px;
  box-shadow:
    0 0 10px rgba(255, 244, 185, 0.95),
    0 0 22px rgba(255, 214, 116, 0.78),
    0 0 46px rgba(255, 193, 74, 0.46);
}

.hero__cross::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 23%;
  transform: translateX(-50%);
  width: 290%;
  height: 9%;
  background: linear-gradient(180deg, #fff0ae 0%, #ffd468 26%, #f3bb34 62%, #d89416 100%);
  border-radius: 1px;
  box-shadow:
    0 0 10px rgba(255, 244, 185, 0.95),
    0 0 22px rgba(255, 214, 116, 0.78),
    0 0 46px rgba(255, 193, 74, 0.46);
}

.hero__cross::after {
  content: '';
  position: absolute;
  inset: -18% -90%;
  background:
    radial-gradient(circle at center, rgba(255, 245, 198, 0.42) 0%, rgba(255, 220, 132, 0.18) 35%, transparent 68%);
  filter: blur(10px);
  z-index: -1;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.hero__logo-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero__logo {
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
}

.hero__logo--akeelah { width: 112px; }
.hero__logo--biblebites { width: 92px; border-radius: 18px; }

.hero__logo-name {
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.65rem);
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 5px 14px rgba(0,0,0,0.42);
}

.hero__present-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.hero__present {
  font-weight: 900;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1;
  text-shadow: 0 5px 14px rgba(0,0,0,0.42);
}

.hero__amp {
  font-weight: 800;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1;
  text-shadow: 0 5px 14px rgba(0,0,0,0.42);
}

.hero__title-wrap {
  line-height: 0.9;
  margin: 18px 0 10px;
}

.hero__ai,
.hero__christians {
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  text-shadow:
    0 3px 0 rgba(7, 9, 20, 0.55),
    0 10px 24px rgba(0,0,0,0.46);
}

.hero__ai {
  font-size: clamp(5.8rem, 18vw, 15rem);
  background: linear-gradient(180deg, #8fdcff 0%, #4ba1ff 45%, #174b98 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__for {
  font-family: 'Yellowtail', cursive;
  font-size: clamp(3rem, 8vw, 6.2rem);
  color: #ffd363;
  text-shadow: 0 6px 14px rgba(0,0,0,0.42);
  margin: -12px 0 -6px;
}

.hero__christians {
  font-size: clamp(4.9rem, 14vw, 12rem);
  background: linear-gradient(180deg, #ffe37a 0%, #f3bb34 45%, #b96d0d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__message {
  margin: 0;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 6px 14px rgba(0,0,0,0.45);
}

.hero__message--top {
  font-size: clamp(1.7rem, 3.1vw, 2.8rem);
}

.hero__message--bottom {
  font-size: clamp(2.9rem, 5vw, 4.9rem);
  margin-top: 2px;
}

.hero__subcopy {
  max-width: 900px;
  margin: 26px auto 0;
  font-size: clamp(1rem, 1.8vw, 1.22rem);
  color: rgba(255,255,255,0.92);
  text-shadow: 0 3px 10px rgba(0,0,0,0.45);
}

.hero__actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.3px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

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

.btn--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #1a1405;
  box-shadow: 0 18px 38px rgba(243, 187, 52, 0.28);
}

.btn--ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
}

.btn--block {
  width: 100%;
}

.ribbon {
  position: relative;
  z-index: 3;
  margin-top: -1px;
  background: linear-gradient(180deg, rgba(9,12,22,0.98), rgba(14,20,36,0.96));
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ribbon__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ribbon__item {
  padding: 22px 26px;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.ribbon__item:last-child {
  border-right: 0;
}

.ribbon__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.ribbon__value {
  display: block;
  font-weight: 700;
  font-size: 1rem;
}

.section {
  padding: 96px 0;
}

.section--dark {
  background: linear-gradient(180deg, #09111f, #0d1728);
}

.section__narrow {
  max-width: 880px;
}

.label {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.78rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #dce4f7;
  font-weight: 800;
}

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

.section__title {
  margin: 0 0 18px;
  font-size: clamp(2.1rem, 4.5vw, 3.6rem);
  line-height: 1.12;
  font-weight: 900;
}

.section__lead {
  margin: 0;
  color: var(--muted);
  font-size: 1.06rem;
}

.value-grid,
.experience-grid,
.discern-grid,
.pricing-grid,
.faq-list,
.example-grid,
.shorts-grid,
.transform-grid {
  margin-top: 34px;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.value-card,
.experience-card,
.discern-card,
.price-card,
.who-box,
.footer__inner,
.example-card,
.short-card,
.gospel-note,
.transform-card,
.faq-item,
.event-highlight,
.footer__event {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.value-card {
  padding: 28px;
  text-align: left;
}

.value-card h3,
.tools-card h3,
.discern-card--faith h3,
.who-box h3,
.example-card h3,
.gospel-note h3,
.transform-card__copy h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.value-card p,
.tools-card p,
.discern-card p,
.quote-card__sub,
.pricing-note,
.who-box li,
.footer__copy,
.example-card p,
.gospel-note p,
.transform-card__copy p,
.faq-answer p {
  margin: 0;
  color: var(--muted);
}

.value-grid--takeaways {
  margin-top: 30px;
}

.experience-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
}

.experience-card {
  padding: 30px;
}

.experience-card--large {
  grid-row: span 2;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.check-list li {
  position: relative;
  padding-left: 28px;
  margin: 12px 0;
}

.check-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: -1px;
  font-size: 1.4rem;
  color: var(--gold);
}

.check-list--warn li::before {
  color: #ffb24b;
}

.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(155deg, rgba(243, 187, 52, 0.12), rgba(75, 161, 255, 0.10));
}

.quote-card__text {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.08;
  font-weight: 900;
}

.quote-card__text span {
  color: var(--gold);
}

.quote-card__sub {
  margin-top: 18px;
}

.tools-card {
  background: linear-gradient(180deg, rgba(12, 19, 36, 0.92), rgba(12, 19, 36, 0.72));
}

.tool-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.tool-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.92rem;
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.example-card {
  padding: 28px;
  text-align: left;
}

.shorts-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.short-card {
  overflow: hidden;
}

.short-frame {
  position: relative;
  padding-top: 177.78%;
  background: #000;
  border-radius: 24px;
  overflow: hidden;
}

.short-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.gospel-note {
  margin-top: 24px;
  padding: 28px;
  text-align: left;
}

.transform-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.transform-grid--large {
  grid-template-columns: 1fr;
  gap: 30px;
}

.transform-card {
  overflow: hidden;
}

.transform-card--full {
  overflow: hidden;
}

.transform-card img,
.transform-card--full img {
  width: 100%;
  height: auto;
  display: block;
}

.transform-card--full img {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.transform-card__copy {
  padding: 24px 28px;
}

.transform-card--compare {
  padding: 0;
}

.transform-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.transform-compare__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.transform-compare__panel:first-child {
  border-right: 1px solid rgba(255,255,255,0.08);
}

.transform-compare__media {
  background: rgba(0,0,0,0.2);
}

.transform-compare__media img,
.transform-compare__media video {
  width: 100%;
  height: 100%;
  display: block;
}

.transform-compare__media--video video {
  background: #000;
}

.discern-grid {
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 22px;
}

.discern-card {
  padding: 30px;
}

.discern-card--warning {
  background: linear-gradient(155deg, rgba(255, 176, 86, 0.08), rgba(12, 19, 36, 0.95));
}

.discern-card__warning-visual {
  margin: -6px 0 18px;
}

.discern-card__warning-visual img {
  width: 100%;
  max-width: 430px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(243, 187, 52, 0.12);
}

.faith-anchor {
  margin-top: 18px !important;
  color: var(--gold) !important;
  font-weight: 700;
}

.who-box {
  padding: 25px;
  margin: 30px auto;
  max-width: 600px;
  text-align: left;
}

.who-box ul {
  padding-left: 20px;
  margin: 0;
}

.who-box li {
  margin: 8px 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.price-card {
  padding: 34px 28px;
  text-align: center;
}

.price-card--accent {
  background: linear-gradient(165deg, rgba(243, 187, 52, 0.14), rgba(12, 19, 36, 0.94));
}

.price-card__amount {
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 10px;
}

.price-card__label {
  color: var(--muted);
  margin-bottom: 18px;
}

.event-highlight {
  margin-top: 28px;
  padding: 26px 26px 22px;
  text-align: center;
  background: linear-gradient(165deg, rgba(243, 187, 52, 0.12), rgba(12, 19, 36, 0.94));
}

.event-highlight__eyebrow {
  margin: 0 0 14px;
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
}

.event-highlight__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.event-highlight__item {
  padding: 16px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.event-highlight__item--wide {
  grid-column: span 1;
}

.event-highlight__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: 6px;
}

.event-highlight__value {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

.event-highlight__limited {
  margin: 16px 0 0;
  font-size: 1.08rem;
  font-weight: 900;
  color: #fff0bf;
  text-shadow: 0 0 20px rgba(243, 187, 52, 0.24);
}

.confidence {
  margin-top: 25px;
  font-weight: 600;
  opacity: 0.92;
}

.confidence p {
  margin: 8px 0;
}

.pricing-note {
  margin-top: 20px;
  text-align: center;
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 58px 22px 24px;
  font-weight: 700;
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-answer {
  padding: 0 24px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer {
  padding: 0 0 48px;
  background: linear-gradient(180deg, #09111f, #070c16);
}

.footer__inner {
  padding: 34px 28px;
  text-align: center;
}

.footer__eyebrow {
  margin: 0 0 8px;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
}

.footer__title {
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 900;
}

.footer__copy {
  font-size: 1rem;
}

.footer__event {
  margin: 24px auto 0;
  padding: 20px;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  background: linear-gradient(165deg, rgba(243, 187, 52, 0.12), rgba(12, 19, 36, 0.94));
}

.footer__event-item {
  padding: 15px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.footer__event-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
}

.footer__event-value {
  display: block;
  font-weight: 700;
  color: #fff;
}

.footer__limited {
  margin: 16px 0 0;
  font-size: 1.06rem;
  font-weight: 900;
  color: #fff0bf;
  text-shadow: 0 0 20px rgba(243, 187, 52, 0.24);
}

.footer__cta {
  margin-top: 22px;
}

.value-grid--four {
  grid-template-columns: repeat(4, 1fr);
}

#online-flow .section__narrow,
#church-inquiry .section__narrow {
  max-width: 980px;
}

#church-inquiry .who-box {
  max-width: 760px;
}

#church-inquiry .who-box p {
  margin: 10px 0;
  color: var(--muted);
}

@media (max-width: 1200px) {
  .shorts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 980px) {
  .nav__links {
    display: none;
  }

  .ribbon__grid,
  .value-grid,
  .experience-grid,
  .discern-grid,
  .pricing-grid,
  .example-grid,
  .shorts-grid,
  .transform-grid,
  .transform-grid--large,
  .event-highlight__grid,
  .footer__event,
  .value-grid--four,
  .transform-compare {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 92px;
  }

  .hero__cross-wrap {
    right: 8%;
    top: 25%;
  }

  .hero__texture {
    width: 36%;
  }

  .transform-compare__panel:first-child {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
}

@media (max-width: 720px) {
  .hero__logo--akeelah {
    width: 84px;
  }

  .hero__logo--biblebites {
    width: 72px;
  }

  .hero__logos {
    gap: 10px;
  }

  .hero__logo-block {
    gap: 10px;
  }

  .hero__logo-name {
    font-size: clamp(1.3rem, 7vw, 2rem);
  }

  .hero__present {
    font-size: 1.1rem;
  }

  .hero__amp {
    font-size: 1.4rem;
  }

  .hero__message--top {
    font-size: 1.2rem;
  }

  .hero__message--bottom {
    font-size: 2.2rem;
  }

  .hero__subcopy {
    font-size: 0.98rem;
  }

  .hero__cross-wrap {
    opacity: 0.92;
  }

  .ribbon__item {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .ribbon__item:last-child {
    border-bottom: 0;
  }

  .section {
    padding: 78px 0;
  }

  .footer {
    padding-bottom: 34px;
  }

  .footer__inner {
    padding: 28px 20px;
  }

  .example-card,
  .gospel-note,
  .transform-card__copy,
  .event-highlight {
    padding-left: 20px;
    padding-right: 20px;
  }

  .faq-item summary {
    padding: 20px 52px 20px 20px;
  }

  .faq-answer {
    padding: 0 20px 20px;
  }
}

/* ===== Visual refinement update ===== */

.section,
.ribbon,
.footer {
  position: relative;
  overflow: hidden;
}

.section > .container,
.ribbon > .container,
.footer > .container {
  position: relative;
  z-index: 1;
}

/* Hero cross: replace CSS-built cross with blended transparent image */
.hero__cross-wrap {
  right: 8.5%;
  top: 17%;
  width: min(25vw, 270px);
  max-width: 270px;
  min-width: 150px;
  aspect-ratio: auto;
  z-index: 1;
  opacity: 0.9;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 16px rgba(255, 222, 122, 0.12));
}

.hero__cross-wrap::before,
.hero__cross-wrap::after,
.hero__cross {
  display: none !important;
  content: none !important;
}

.hero__cross-image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.62;
  filter:
    drop-shadow(0 0 14px rgba(255, 220, 120, 0.18))
    drop-shadow(0 0 36px rgba(255, 220, 120, 0.10));
}

/* Break up the long black page with soft tonal shifts */
#online-flow {
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 197, 90, 0.08), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(74, 137, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #0a1222 0%, #0c1527 100%);
}

#why.section--dark {
  background:
    radial-gradient(circle at 80% 25%, rgba(255, 197, 90, 0.07), transparent 26%),
    linear-gradient(180deg, #0d1728 0%, #10203a 100%);
}

#experience {
  background:
    radial-gradient(circle at 18% 78%, rgba(255,255,255,0.06), transparent 24%),
    radial-gradient(circle at 85% 15%, rgba(95, 158, 255, 0.10), transparent 24%),
    linear-gradient(180deg, #f3f6fb 0%, #e9eef8 100%);
}

#experience .label,
#experience .section__title,
#experience .quote-card__text,
#experience .value-card h3,
#experience .experience-card h3,
#experience .tools-card h3 {
  color: #0f1b33;
}

#experience .section__lead,
#experience .quote-card__sub,
#experience .tools-card p,
#experience .check-list li {
  color: #33415e;
}

#experience .experience-card,
#experience .quote-card,
#experience .tools-card {
  background: rgba(255,255,255,0.78);
  border-color: rgba(15, 27, 51, 0.08);
  box-shadow: 0 18px 60px rgba(26, 35, 58, 0.14);
}

#experience .check-list li::before {
  color: var(--gold-deep);
}

#format.section--dark {
  background:
    linear-gradient(180deg, #0b1730 0%, #132443 100%);
}

#examples.section--dark {
  background:
    radial-gradient(circle at 14% 14%, rgba(243, 187, 52, 0.07), transparent 24%),
    radial-gradient(circle at 88% 80%, rgba(121, 173, 255, 0.10), transparent 28%),
    linear-gradient(180deg, #0f1a31 0%, #152744 100%);
}

#examples::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 47%, rgba(255,255,255,0.03) 47% 48%, transparent 48% 100%),
    linear-gradient(65deg, transparent 0 56%, rgba(255,255,255,0.025) 56% 57%, transparent 57% 100%);
  pointer-events: none;
}

#examples .example-card:nth-child(1)::before,
#examples .example-card:nth-child(2)::before,
#examples .example-card:nth-child(3)::before,
#examples .example-card:nth-child(4)::before,
#examples .example-card:nth-child(5)::before,
#examples .example-card:nth-child(6)::before {
  content: '';
  display: block;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

#examples .example-card:nth-child(1)::before {
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,0.18) 0 8px, transparent 9px),
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
}
#examples .example-card:nth-child(2)::before {
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.18) 0 10px, transparent 11px),
    radial-gradient(circle at 35% 58%, rgba(255,255,255,0.10) 0 4px, transparent 5px),
    radial-gradient(circle at 65% 58%, rgba(255,255,255,0.10) 0 4px, transparent 5px),
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
}
#examples .example-card:nth-child(3)::before {
  background:
    linear-gradient(180deg, transparent 14px, rgba(255,255,255,0.18) 14px 16px, transparent 16px 100%),
    linear-gradient(90deg, transparent 13px, rgba(255,255,255,0.18) 13px 15px, transparent 15px 28px, rgba(255,255,255,0.10) 28px 30px, transparent 30px 100%),
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
}
#examples .example-card:nth-child(4)::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0 12px, transparent 12px 100%),
    linear-gradient(90deg, rgba(255,255,255,0.12) 0 10px, transparent 10px 100%),
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
}
#examples .example-card:nth-child(5)::before {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.20) 0 6px, transparent 7px),
    linear-gradient(180deg, transparent 16px, rgba(255,255,255,0.18) 16px 18px, transparent 18px),
    linear-gradient(90deg, transparent 26px, rgba(255,255,255,0.18) 26px 28px, transparent 28px),
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
}
#examples .example-card:nth-child(6)::before {
  background:
    radial-gradient(circle at 38% 40%, rgba(255,255,255,0.17) 0 7px, transparent 8px),
    radial-gradient(circle at 66% 62%, rgba(255,255,255,0.10) 0 5px, transparent 6px),
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
}

#gospel-media {
  background:
    radial-gradient(circle at 14% 20%, rgba(243, 187, 52, 0.08), transparent 26%),
    linear-gradient(180deg, #f8fafc 0%, #edf3fb 100%);
}

#gospel-media .label,
#gospel-media .section__title,
#gospel-media .gospel-note h3 {
  color: #13223f;
}

#gospel-media .section__lead,
#gospel-media .gospel-note p {
  color: #41506d;
}

#gospel-media .gospel-note {
  background: rgba(255,255,255,0.80);
  border-color: rgba(15, 27, 51, 0.08);
  box-shadow: 0 18px 60px rgba(26, 35, 58, 0.12);
}

#transformations.section--dark {
  background:
    linear-gradient(180deg, #0d1629 0%, #111f39 100%);
}

#discernment.section--dark {
  background:
    radial-gradient(circle at 10% 16%, rgba(255, 179, 75, 0.08), transparent 24%),
    linear-gradient(180deg, #16151f 0%, #211826 100%);
}


#takeaways {
  background:
    radial-gradient(circle at 82% 18%, rgba(97, 161, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #eef4fc 0%, #e4edf9 100%);
}

#takeaways .label,
#takeaways .section__title,
#takeaways .value-card h3 {
  color: #102142;
}

#takeaways .section__lead,
#takeaways .value-card p {
  color: #41506d;
}

#takeaways .value-card {
  background: rgba(255,255,255,0.84);
  border-color: rgba(15, 27, 51, 0.08);
  box-shadow: 0 18px 60px rgba(26, 35, 58, 0.12);
}

#registration.section--dark {
  background:
    radial-gradient(circle at 13% 18%, rgba(243, 187, 52, 0.07), transparent 24%),
    linear-gradient(180deg, #111928 0%, #16253f 100%);
}

.pricing-grid--single {
  grid-template-columns: minmax(280px, 420px);
  justify-content: center;
}

.pricing-grid--single .price-card {
  margin-inline: auto;
}

#church-inquiry {
  background:
    linear-gradient(180deg, #fbfcfe 0%, #eef3fa 100%);
}

#church-inquiry .label,
#church-inquiry .section__title,
#church-inquiry strong {
  color: #102142;
}

#church-inquiry .section__lead,
#church-inquiry .who-box p {
  color: #41506d;
}

#church-inquiry .who-box {
  background: rgba(255,255,255,0.84);
  border-color: rgba(15, 27, 51, 0.08);
  box-shadow: 0 18px 60px rgba(26, 35, 58, 0.12);
}

#faq.section--dark {
  background:
    radial-gradient(circle at 86% 18%, rgba(243, 187, 52, 0.06), transparent 22%),
    linear-gradient(180deg, #0f1627 0%, #14223b 100%);
}

.footer {
  background:
    radial-gradient(circle at 18% 16%, rgba(243, 187, 52, 0.06), transparent 22%),
    linear-gradient(180deg, #0a1222 0%, #0f1b33 100%);
}

@media (max-width: 980px) {

  .hero__cross-wrap {
    right: 4%;
    top: 15%;
    width: min(32vw, 220px);
  }
}

@media (max-width: 720px) {
  .hero__cross-wrap {
    right: 2%;
    top: 11%;
    width: min(34vw, 170px);
    opacity: 0.8;
  }

  .hero__cross-image {
    opacity: 0.42;
  }
}


/* VIP section */
.vip-section {
  background:
    radial-gradient(circle at 14% 18%, rgba(243, 187, 52, 0.08), transparent 24%),
    radial-gradient(circle at 86% 82%, rgba(87, 150, 255, 0.14), transparent 28%),
    linear-gradient(180deg, #0f182b 0%, #14233e 100%);
}

.vip-shell {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 24px;
  align-items: stretch;
}

.vip-card {
  position: relative;
  background: rgba(12, 19, 36, 0.84);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.34);
  overflow: hidden;
}

.vip-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.05), transparent 42%);
  pointer-events: none;
}

.vip-card--main {
  padding: 34px 32px 30px;
  background:
    radial-gradient(circle at 82% 18%, rgba(243, 187, 52, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(17, 27, 48, 0.96), rgba(11, 19, 35, 0.94));
}

.vip-card--side {
  padding: 30px 26px;
  background:
    radial-gradient(circle at 20% 14%, rgba(103, 164, 255, 0.10), transparent 24%),
    linear-gradient(180deg, rgba(15, 27, 51, 0.94), rgba(10, 19, 35, 0.94));
}

.vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(243, 187, 52, 0.12);
  border: 1px solid rgba(243, 187, 52, 0.24);
  color: #ffe09d;
  font-size: 0.82rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 800;
}

.vip-title,
.vip-side-title {
  margin: 18px 0 10px;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.05;
  font-weight: 900;
}

.vip-side-title {
  font-size: 1.4rem;
  margin-top: 0;
}

.vip-price {
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  font-weight: 900;
  color: #ffd56f;
  text-shadow: 0 0 20px rgba(243, 187, 52, 0.16);
  margin-bottom: 12px;
}

.vip-copy,
.vip-note,
.vip-mini p {
  margin: 0;
  color: #c7d0e0;
}

.vip-perks {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 12px;
}

.vip-perks li {
  position: relative;
  padding: 14px 16px 14px 48px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  color: #eef3ff;
}

.vip-perks li::before {
  content: '\2713';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(243, 187, 52, 0.18);
  color: #ffd56f;
  font-size: 0.9rem;
  font-weight: 900;
}

.vip-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.vip-note {
  margin-top: 18px;
  font-size: 0.95rem;
}

.vip-mini-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.vip-mini {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}

.vip-mini__label {
  display: inline-block;
  margin-bottom: 8px;
  color: #ffd56f;
  font-weight: 800;
  letter-spacing: 0.4px;
}

@media (max-width: 980px) {
  .vip-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .vip-card--main,
  .vip-card--side {
    padding: 26px 20px 22px;
  }

  .vip-actions {
    flex-direction: column;
  }
}


/* Registration / Payment / Success pages */
.registration-page {
  background:
    radial-gradient(circle at 12% 12%, rgba(243, 187, 52, 0.06), transparent 18%),
    radial-gradient(circle at 88% 18%, rgba(75, 161, 255, 0.10), transparent 24%),
    linear-gradient(180deg, #050914 0%, #091225 100%);
  min-height: 100vh;
}

.registration-shell,
.payment-shell,
.success-shell {
  padding: 132px 0 72px;
}

.registration-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
}

.registration-panel,
.registration-form-card,
.payment-panel {
  background: rgba(12, 19, 36, 0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.34);
}

.registration-panel {
  padding: 34px 32px;
}

.registration-form-card {
  padding: 30px 28px;
}

.registration-session-card {
  margin-top: 22px;
  padding: 22px 22px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(18, 31, 55, 0.94), rgba(10, 19, 36, 0.94));
  border: 1px solid rgba(255,255,255,0.08);
}

.registration-session-card__label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
}

.registration-session-card__title {
  margin: 0 0 12px;
  font-size: 2rem;
}

.registration-session-card__time,
.registration-session-card__price,
.registration-session-card__access {
  margin: 0 0 14px;
  color: #f5f7fb;
  font-size: 1.05rem;
}

.registration-checklist {
  margin: 24px 0 0;
  padding-left: 22px;
}

.registration-checklist li {
  margin: 10px 0;
  color: #f5f7fb;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label {
  font-weight: 700;
  color: #fff;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font: inherit;
}

.form-field select option {
  color: #111;
}

.form-field textarea {
  min-height: 140px;
  padding: 14px 16px;
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(255,255,255,0.48);
}

.form-help,
.form-note,
.payment-tip,
.success-note {
  margin: 8px 0 0;
  color: var(--muted);
}

.form-actions {
  margin-top: 24px;
}

.payment-panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 42px 36px;
  text-align: center;
}

.payment-session-badge,
.success-session-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(243, 187, 52, 0.12);
  border: 1px solid rgba(243, 187, 52, 0.28);
  color: #ffe09d;
  font-size: 0.82rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 800;
}

.payment-title,
.success-title {
  margin: 18px 0 16px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}

.payment-copy,
.success-copy {
  margin: 0 0 14px;
  color: #f5f7fb;
  font-size: 1.08rem;
}

.payment-actions,
.success-actions {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .registration-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .registration-shell,
  .payment-shell,
  .success-shell {
    padding: 114px 0 44px;
  }

  .registration-panel,
  .registration-form-card,
  .payment-panel {
    padding: 24px 20px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .payment-actions,
  .success-actions {
    flex-direction: column;
  }
}
/* ===== VIP SECTION CENTER FIX ===== */
#vip .section__narrow {
  text-align: center;
  margin: 0 auto;
}

#vip .section__title {
  text-align: center;
}

#vip .section__lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}


/* ===== Our Story refresh ===== */
#why.section--dark {
  padding-bottom: 68px;
}

.section--story {
  padding-top: 68px;
  padding-bottom: 78px;
  background:
    radial-gradient(circle at 18% 18%, rgba(243, 187, 52, 0.08), transparent 24%),
    radial-gradient(circle at 82% 72%, rgba(76, 138, 255, 0.10), transparent 28%),
    linear-gradient(180deg, #08101f 0%, #0d1830 100%);
}

.story-header {
  max-width: 760px;
}

.story-shell {
  max-width: 1080px;
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: 1.1fr 1.45fr;
  gap: 22px;
  align-items: stretch;
}

.story-panel,
.story-step {
  background: rgba(10, 18, 36, 0.82);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 26px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
}

.story-panel {
  padding: 28px 28px 26px;
}

.story-panel--intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  background:
    radial-gradient(circle at 82% 16%, rgba(243, 187, 52, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(14, 25, 48, 0.96), rgba(8, 16, 31, 0.94));
}

.story-panel--intro p,
.story-panel--uses p,
.story-step p {
  margin: 0;
  color: #c7d0e0;
  font-size: 1rem;
  line-height: 1.7;
}

.story-kicker {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.story-journey {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.story-step {
  padding: 26px 22px 22px;
  position: relative;
  overflow: hidden;
}

.story-step::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 46%);
  pointer-events: none;
}

.story-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: rgba(243, 187, 52, 0.12);
  border: 1px solid rgba(243, 187, 52, 0.20);
  color: #ffd978;
  font-weight: 900;
  letter-spacing: 1px;
}

.story-step h3,
.story-panel--uses h3 {
  margin: 0 0 10px;
  font-size: 1.18rem;
  line-height: 1.2;
}

.story-panel--uses {
  background:
    radial-gradient(circle at 14% 18%, rgba(80, 146, 255, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(11, 20, 40, 0.96), rgba(8, 16, 31, 0.94));
}

.story-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.story-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #eef3ff;
  font-size: 0.94rem;
  font-weight: 600;
}

@media (max-width: 980px) {
  #why.section--dark {
    padding-bottom: 60px;
  }

  .section--story {
    padding-top: 60px;
    padding-bottom: 70px;
  }

  .story-shell {
    grid-template-columns: 1fr;
  }

  .story-journey {
    grid-template-columns: 1fr;
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 720px) {
  .story-panel,
  .story-step {
    border-radius: 22px;
  }

  .story-panel {
    padding: 22px 20px;
  }

  .story-step {
    padding: 22px 18px 18px;
  }

  .story-step h3,
  .story-panel--uses h3 {
    font-size: 1.08rem;
  }

  .story-tags span {
    font-size: 0.88rem;
  }
}
/* ===== OUR STORY SECTION (UPGRADED) ===== */

.our-story-section {
  padding: 80px 0 70px;
  background:
    linear-gradient(180deg, rgba(5,9,20,0.95), rgba(5,9,20,0.98)),
    url('../images/family.png') center/cover no-repeat;
  text-align: center;
}

/* BIG "OUR STORY" TITLE */
.our-story-eyebrow {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 10px;
  color: #ffffff;
  text-transform: uppercase;
}

/* SUB HEADING */
.our-story-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 12px;
}

/* SHORT INTRO LINE */
.our-story-sub {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto 30px;
}

/* CLEANED CONTENT BLOCK */
.our-story-content {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  font-size: 1.05rem;
  color: #e6ecf7;
  line-height: 1.6;
}

/* REMOVE HEAVY BLACK GAP ABOVE */
#why.section--dark {
  padding-bottom: 60px;
}

#our-story {
  margin-top: -30px;
}
/* ===== OUR STORY BACKGROUND IMAGE FIX ===== */

#our-story {
  position: relative;
  padding: 80px 0 70px;
  background:
    linear-gradient(rgba(5, 9, 20, 0.72), rgba(5, 9, 20, 0.82)),
    url("../images/family.png") center center / cover no-repeat !important;
  text-align: center;
}

#our-story::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(243, 187, 52, 0.10), transparent 25%),
    radial-gradient(circle at 80% 75%, rgba(76, 138, 255, 0.12), transparent 28%);
  pointer-events: none;
}

#our-story > .container {
  position: relative;
  z-index: 1;
}


/* ===== Church Host Landing Page ===== */
.church-page {
  background: #050914;
}

.church-hero {
  position: relative;
  min-height: 92vh;
  padding: 132px 0 90px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5,9,20,0.92) 0%, rgba(5,9,20,0.78) 45%, rgba(5,9,20,0.48) 100%),
    url('../images/church-workshop-stage.jpg') center center / cover no-repeat;
}

.church-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(243, 187, 52, 0.15), transparent 26%),
    radial-gradient(circle at 78% 72%, rgba(76, 138, 255, 0.16), transparent 30%);
  pointer-events: none;
}

.church-hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.church-hero__title {
  margin: 0 0 18px;
  font-size: clamp(3.1rem, 7vw, 6.7rem);
  line-height: .95;
  letter-spacing: -2px;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 18px 42px rgba(0,0,0,.5);
}

.church-hero__title span {
  display: block;
  color: var(--gold);
}

.church-hero__lead {
  max-width: 700px;
  margin: 0;
  color: rgba(245,247,251,.95);
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  text-shadow: 0 10px 24px rgba(0,0,0,.55);
}

.church-hero__actions {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.church-ribbon .ribbon__grid {
  grid-template-columns: repeat(3, 1fr);
}

.church-image-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 34px;
}

.church-image-card {
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 24px 80px rgba(0,0,0,.34);
  background: rgba(12,19,36,.86);
}

.church-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.church-image-card--tall {
  min-height: 470px;
}

.church-content-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 34px;
  text-align: left;
}

.church-content-card h3 {
  margin: 0 0 12px;
  font-size: 1.45rem;
}

.church-content-card p {
  margin: 0 0 18px;
  color: var(--muted);
}

.church-content-card p:last-child { margin-bottom: 0; }

.church-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 34px;
}

.church-feature-card {
  position: relative;
  padding: 30px 28px;
  border-radius: 24px;
  background: rgba(12,19,36,.88);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.church-feature-card::before {
  content: '';
  display: block;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(243,187,52,.24), rgba(75,161,255,.12));
  border: 1px solid rgba(255,255,255,.09);
}

.church-feature-card h3 {
  margin: 0 0 10px;
  font-size: 1.18rem;
}

.church-feature-card p {
  margin: 0;
  color: var(--muted);
}

.church-vision {
  min-height: 560px;
  display: flex;
  align-items: end;
  background:
    linear-gradient(180deg, rgba(5,9,20,.16) 0%, rgba(5,9,20,.34) 38%, rgba(5,9,20,.92) 100%),
    url('../images/church-national-vision.jpg') center center / cover no-repeat;
}

.church-vision .container {
  padding-top: 120px;
}

.church-vision__box {
  max-width: 760px;
  margin-bottom: 34px;
  padding: 34px;
  border-radius: 28px;
  background: rgba(5,9,20,.74);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 80px rgba(0,0,0,.34);
  backdrop-filter: blur(8px);
}

.church-vision__box .section__title { margin-bottom: 14px; }

.hosting-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 34px;
}

.hosting-card {
  padding: 32px 30px;
  border-radius: 26px;
  background: rgba(12,19,36,.88);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}

.hosting-card h3 {
  margin: 0 0 18px;
  font-size: 1.4rem;
}

.hosting-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hosting-card li {
  position: relative;
  padding-left: 28px;
  margin: 12px 0;
  color: var(--muted);
}

.hosting-card li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 900;
}

.church-cta-panel {
  max-width: 920px;
  margin: 0 auto;
  padding: 42px 34px;
  border-radius: 30px;
  text-align: center;
  background:
    radial-gradient(circle at 22% 18%, rgba(243,187,52,.16), transparent 28%),
    linear-gradient(165deg, rgba(12,19,36,.96), rgba(8,15,28,.96));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}

.church-cta-panel .section__lead { max-width: 720px; margin: 0 auto; }

.church-contact-line {
  margin-top: 22px;
  color: #fff0bf;
  font-weight: 800;
}

.church-contact-line a { color: var(--gold); }

.church-light-section {
  background:
    radial-gradient(circle at 82% 18%, rgba(97, 161, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #eef4fc 0%, #e4edf9 100%);
}

.church-light-section .label,
.church-light-section .section__title,
.church-light-section .church-content-card h3,
.church-light-section .church-feature-card h3 {
  color: #102142;
}

.church-light-section .section__lead,
.church-light-section .church-content-card p,
.church-light-section .church-feature-card p {
  color: #41506d;
}

.church-light-section .church-content-card,
.church-light-section .church-feature-card {
  background: rgba(255,255,255,.84);
  border-color: rgba(15,27,51,.08);
  box-shadow: 0 18px 60px rgba(26,35,58,.12);
}

@media (max-width: 980px) {
  .church-image-split,
  .church-feature-grid,
  .hosting-grid,
  .church-ribbon .ribbon__grid {
    grid-template-columns: 1fr;
  }

  .church-hero {
    min-height: auto;
    padding: 120px 0 74px;
  }

  .church-image-card--tall {
    min-height: auto;
  }

  .church-vision {
    min-height: 480px;
  }
}

@media (max-width: 720px) {
  .church-hero__title {
    letter-spacing: -1px;
  }

  .church-content-card,
  .church-vision__box,
  .hosting-card,
  .church-cta-panel {
    padding: 26px 20px;
    border-radius: 24px;
  }
}


/* ===== Church page feature icons ===== */
.church-feature-card::before {
  display: none !important;
}

.church-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: #102142;
  background: linear-gradient(145deg, rgba(255, 246, 219, 0.96), rgba(235, 228, 207, 0.96));
  border: 1px solid rgba(15, 27, 51, 0.06);
  box-shadow:
    0 10px 24px rgba(26, 35, 58, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.85);
}

.church-feature-icon svg {
  width: 27px;
  height: 27px;
  display: block;
}

.church-feature-icon--warning {
  color: #8a5a00;
  background: linear-gradient(145deg, rgba(255, 238, 199, 0.98), rgba(235, 216, 175, 0.98));
}

.section--dark .church-feature-icon {
  color: #ffe09d;
  background: linear-gradient(145deg, rgba(243,187,52,.18), rgba(75,161,255,.10));
  border-color: rgba(255,255,255,.10);
}


/* =========================================
   CHURCH PAGE EXPERIENCE SECTION FIX
   Fixes dark-on-dark contrast and image-card empty space.
========================================= */

body.church-page #experience.section--dark {
  background:
    radial-gradient(circle at 18% 16%, rgba(243, 187, 52, 0.10), transparent 26%),
    radial-gradient(circle at 86% 78%, rgba(75, 161, 255, 0.12), transparent 28%),
    linear-gradient(180deg, #08101f 0%, #0d1830 100%) !important;
}

body.church-page #experience .church-image-split {
  align-items: stretch;
}

body.church-page #experience .church-content-card {
  background:
    radial-gradient(circle at 16% 14%, rgba(243, 187, 52, 0.12), transparent 28%),
    linear-gradient(155deg, rgba(14, 25, 48, 0.98), rgba(7, 14, 28, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38) !important;
}

body.church-page #experience .church-content-card .label,
body.church-page #experience .church-content-card .label--gold {
  color: #f3bb34 !important;
}

body.church-page #experience .church-content-card .section__title,
body.church-page #experience .church-content-card h2 {
  color: #ffffff !important;
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

body.church-page #experience .church-content-card p {
  color: rgba(245, 247, 251, 0.90) !important;
}

body.church-page #experience .church-image-card {
  background: rgba(8, 15, 28, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.church-page #experience .church-image-card--tall {
  min-height: 0 !important;
  height: 100%;
}

body.church-page #experience .church-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 980px) {
  body.church-page #experience .church-image-card--tall {
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}


/* ===== Who We Are brand cards: logos + stronger descriptions ===== */

.about-brand-grid--logos {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.about-brand-card {
  position: relative;
  overflow: hidden;
}

.about-brand-card--biblebites,
.about-brand-card--akeelah {
  padding: 34px 30px 32px;
  text-align: left;
  border-radius: 28px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.about-brand-card--biblebites::before,
.about-brand-card--akeelah::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-brand-card--biblebites::before {
  background:
    radial-gradient(circle at 16% 12%, rgba(243, 187, 52, 0.18), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,0.10), transparent 46%);
}

.about-brand-card--akeelah::before {
  background:
    radial-gradient(circle at 16% 12%, rgba(75, 161, 255, 0.18), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,0.10), transparent 46%);
}

.about-brand-card--biblebites:hover,
.about-brand-card--akeelah:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(26, 35, 58, 0.18);
}

.about-brand-card--biblebites:hover {
  border-color: rgba(243, 187, 52, 0.24);
}

.about-brand-card--akeelah:hover {
  border-color: rgba(75, 161, 255, 0.22);
}

.about-brand-logo-wrap {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  margin-bottom: 22px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(255, 246, 219, 0.98), rgba(235, 228, 207, 0.94));
  border: 1px solid rgba(15, 27, 51, 0.08);
  box-shadow:
    0 16px 38px rgba(26, 35, 58, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.about-brand-card--akeelah .about-brand-logo-wrap {
  background:
    linear-gradient(145deg, rgba(232, 242, 255, 0.98), rgba(214, 228, 247, 0.94));
}

.about-brand-logo {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.16));
}

.about-brand-logo--biblebites {
  width: 58px;
  height: 58px;
  border-radius: 14px;
}

.about-brand-logo--akeelah {
  width: 68px;
  height: 68px;
}

.about-brand-card--biblebites h3,
.about-brand-card--akeelah h3,
.about-brand-card--biblebites p,
.about-brand-card--akeelah p {
  position: relative;
  z-index: 1;
}

.about-brand-card--biblebites h3,
.about-brand-card--akeelah h3 {
  margin-bottom: 12px;
  font-size: 1.35rem;
}

.about-brand-card--biblebites p,
.about-brand-card--akeelah p {
  line-height: 1.72;
}

@media (max-width: 980px) {
  .about-brand-grid--logos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .about-brand-card--biblebites,
  .about-brand-card--akeelah {
    padding: 28px 22px 26px;
  }

  .about-brand-logo-wrap {
    width: 76px;
    height: 76px;
    border-radius: 22px;
  }

  .about-brand-logo--biblebites {
    width: 52px;
    height: 52px;
  }

  .about-brand-logo--akeelah {
    width: 62px;
    height: 62px;
  }
}