/* THNK GOD — marketing + legal site
   Deliberately zero third-party requests: no analytics, no CDNs, and fonts
   served from this site. A site whose subject is privacy shouldn't phone
   anyone to render itself.

   FONTS (2026-10-18, Kenam: "make it look more professional"): the app's own
   three, self-hosted from /assets/fonts (fontsource variable builds, latin,
   SIL Open Font License). Inter for text, Playfair Display for headings,
   Cinzel for small capitals. Until then the site used whatever the visitor's
   computer had, which was the biggest single reason it looked unbuilt. */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-display-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("/assets/fonts/cinzel-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy-deep: #070d20;
  --navy: #0d1530;
  --navy-panel: #111a38;
  --gold: #e0b76a;
  --gold-bright: #ffd166;
  --ink: rgba(255, 255, 255, 0.9);
  --ink-soft: rgba(255, 255, 255, 0.64);
  --ink-faint: rgba(255, 255, 255, 0.44);
  --rule: rgba(255, 200, 80, 0.16);
  --rule-soft: rgba(255, 255, 255, 0.08);

  --serif: "Playfair Display", ui-serif, "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --caps: "Cinzel", var(--serif);
  --ivory: #f5ecd9;

  --page: 1040px;
  --prose: 68ch;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--gold-bright);
  text-decoration-color: rgba(255, 209, 102, 0.4);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--gold-bright);
}

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  background: var(--navy-panel);
  padding: 10px 16px;
  border-radius: 8px;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */

.site-header {
  position: relative;
  z-index: 2;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
}

.brand span {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.site-nav {
  display: flex;
  gap: 26px;
  font-size: 15px;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--gold-bright);
}

/* ---------- hero ---------- */

/* The tall bottom padding is load-bearing, not whitespace. The sky fills the
   hero, so the ridgeline always lands at ~62% of the hero's height; without
   room below the copy, the lede crosses the back ridge's rim-light. */
.hero {
  position: relative;
  text-align: center;
  padding: 112px 0 250px;
  overflow: hidden;
  isolation: isolate;
}

.hero-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Scrim, kept OFF the sun. The first version centred a 66%-opaque wash at
   42% height — directly over the sun at 23.7% — and erased it completely
   along with most of the mountains' contrast. This one sits low and light,
   and the copy leans on its own text-shadow instead. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 66% 42% at 50% 62%,
    rgba(7, 13, 32, 0.4),
    rgba(7, 13, 32, 0.16) 58%,
    transparent 82%
  );
}

.hero .tagline,
.hero .lede {
  text-shadow: 0 1px 14px rgba(7, 13, 32, 0.85);
}

/* Section heading with the app icon beside it. The icon runs the FULL height
   of the heading and its lede rather than sitting as a small square against
   the heading alone — so it squares off the whole block, and it re-measures
   itself when the lede rewraps at a different width. */
.section-head {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 44px;
}

.section-mark {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
}

/* aspect-ratio and object-fit are the guards: stretching a square to the
   text block's height means its WIDTH comes from that height, which is a
   circular dependency in a flex row — the text's height depends on the
   width left over after the icon takes its share. On a narrow screen the
   browser resolves that badly, and the icon came out squeezed with the
   section overflowing sideways. A hard max-height breaks the circle. */
.section-mark img {
  height: 100%;
  width: auto;
  max-height: 132px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 209, 102, 0.16);
}

/* Below this the stretch is abandoned outright: there is not enough width to
   spend a square icon's worth on it, and a fixed size cannot deform. */
@media (max-width: 700px) {
  .section-head {
    align-items: flex-start;
  }

  .section-mark {
    align-self: flex-start;
  }

  .section-mark img {
    height: 68px;
    width: 68px;
    max-height: none;
  }
}

.section-head-text {
  min-width: 0;
}

/* The front ridge is rgb(16,12,28) and the page is rgb(7,13,32) — close, but
   a hard edge is still an edge. This dissolves the join. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--navy-deep));
}

.hero .wrap {
  position: relative;
  z-index: 3;
}

/* ---------- panorama motion ----------
   Only transform and opacity animate, so every one of these stays on the
   compositor and none of them triggers layout or paint. */

.stars circle {
  fill: rgb(255, 246, 226);
  opacity: 0.3;
  animation: twinkle 4.4s ease-in-out infinite;
}

.stars circle:nth-child(3n) {
  animation-duration: 6.2s;
  animation-delay: -1.6s;
}

.stars circle:nth-child(3n + 1) {
  animation-duration: 5.1s;
  animation-delay: -3.4s;
}

.stars circle:nth-child(5n) {
  animation-duration: 7.6s;
  animation-delay: -0.7s;
}

.stars circle:nth-child(7n) {
  animation-duration: 3.6s;
  animation-delay: -2.2s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.92;
  }
}

/* Rare by construction: the streak is only visible for the first ~8% of a
   long timeline, so the rest of the cycle is empty sky. */
/* Each streak carries its own POSITION in its keyframes and flashes in three
   different places per cycle. Previously the two elements sat inside fixed
   translate() wrappers and only travelled along a fixed vector, so a streak
   always appeared in one of exactly two spots — noticeable within a minute,
   which is how Kenam spotted it.

   Nine spots across three cycles of 71/97/113s, each visible for under 2% of
   its timeline. The periods share no small factors, so the combined pattern
   takes hours to repeat. Between flashes the transform interpolates from one
   spot to the next, which is invisible because opacity is 0 the whole way. */
.shooter {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 0 0;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}

.shooter-a {
  animation-name: shoot-a;
  animation-duration: 71s;
}

.shooter-b {
  animation-name: shoot-b;
  animation-duration: 97s;
  animation-delay: 23s;
}

.shooter-c {
  animation-name: shoot-c;
  animation-duration: 113s;
  animation-delay: 51s;
}

@keyframes shoot-a {
  0%    { opacity: 0;    transform: translate(210px, 74px) rotate(22deg) translateX(-130px); }
  0.5%  { opacity: 0.85; }
  2.2%  { opacity: 0;    transform: translate(210px, 74px) rotate(22deg) translateX(360px); }
  33%   { opacity: 0;    transform: translate(880px, 128px) rotate(14deg) translateX(-130px); }
  33.5% { opacity: 0.85; }
  35.2% { opacity: 0;    transform: translate(880px, 128px) rotate(14deg) translateX(360px); }
  67%   { opacity: 0;    transform: translate(455px, 232px) rotate(29deg) translateX(-130px); }
  67.5% { opacity: 0.85; }
  69.2% { opacity: 0;    transform: translate(455px, 232px) rotate(29deg) translateX(360px); }
  100%  { opacity: 0;    transform: translate(455px, 232px) rotate(29deg) translateX(360px); }
}

@keyframes shoot-b {
  0%    { opacity: 0;    transform: translate(1090px, 52px) rotate(31deg) translateX(-130px); }
  0.5%  { opacity: 0.8; }
  2%    { opacity: 0;    transform: translate(1090px, 52px) rotate(31deg) translateX(360px); }
  38%   { opacity: 0;    transform: translate(96px, 176px) rotate(12deg) translateX(-130px); }
  38.5% { opacity: 0.8; }
  40%   { opacity: 0;    transform: translate(96px, 176px) rotate(12deg) translateX(360px); }
  72%   { opacity: 0;    transform: translate(700px, 42px) rotate(25deg) translateX(-130px); }
  72.5% { opacity: 0.8; }
  74%   { opacity: 0;    transform: translate(700px, 42px) rotate(25deg) translateX(360px); }
  100%  { opacity: 0;    transform: translate(700px, 42px) rotate(25deg) translateX(360px); }
}

@keyframes shoot-c {
  0%    { opacity: 0;    transform: translate(1290px, 208px) rotate(18deg) translateX(-130px); }
  0.5%  { opacity: 0.82; }
  2.1%  { opacity: 0;    transform: translate(1290px, 208px) rotate(18deg) translateX(360px); }
  41%   { opacity: 0;    transform: translate(330px, 118px) rotate(34deg) translateX(-130px); }
  41.5% { opacity: 0.82; }
  43.1% { opacity: 0;    transform: translate(330px, 118px) rotate(34deg) translateX(360px); }
  78%   { opacity: 0;    transform: translate(985px, 262px) rotate(9deg) translateX(-130px); }
  78.5% { opacity: 0.82; }
  80.1% { opacity: 0;    transform: translate(985px, 262px) rotate(9deg) translateX(360px); }
  100%  { opacity: 0;    transform: translate(985px, 262px) rotate(9deg) translateX(360px); }
}

/* Periods are dawn-sun.tsx's own: RAY_SPIN_SECONDS 420, GLOW_PULSE_SECONDS 8
   per direction, and the three ray subsets breathing on 2100/2500/1800ms
   half-cycles so they shimmer out of step with each other.

   transform-box: view-box so the origins read in viewBox units — without it
   they resolve against each element's own bounding box and the rays wobble
   around themselves instead of around the sun. */
.sun-halo,
.sun-rays,
.ray-a,
.ray-b,
.ray-c {
  transform-box: view-box;
  transform-origin: 720px 150px;
}

.sun-rays {
  animation: spin 420s linear infinite;
}

.sun-halo {
  animation: pulse 16s ease-in-out infinite;
}

.ray-a {
  animation: shimmer 4.2s ease-in-out infinite;
}

.ray-b {
  animation: shimmer 5s ease-in-out infinite;
  animation-delay: -1.7s;
}

.ray-c {
  animation: shimmer 3.6s ease-in-out infinite;
  animation-delay: -2.9s;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* RAY_BREATHE_AMP 0.12 and RAY_BREATHE_OP 0.26. */
@keyframes shimmer {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.74;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* TWO FLOCKS. Every bird in a flock shares its flock's duration and differs
   only by delay, which is what makes them cross together in a trailing line
   instead of arriving alone — bird-flock.tsx staggers a group by
   delayMs = i * (600 + rand*800), and spawns a new group every 15-45s rather
   than keeping birds permanently in frame.

   Each bird crosses in the first ~18% of its cycle and then parks off-screen,
   so between flocks the sky is genuinely empty. Scale 0.32-0.4: the app's
   birds are 7-9px on a 390px phone, about 7 units at this scene's scale. */
.bird {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Slower. The crossing used to take ~11s for 1580 units; it now takes ~26s,
   which is closer to a bird's pace and stops them reading as darting. */
.a1,
.a2,
.a3,
.a4 {
  animation-duration: 104s;
}

.b1,
.b2,
.b3 {
  animation-duration: 137s;
}

/* SOARING, not bobbing. Composed with the horizontal travel by animating the
   <use> INSIDE the travelling <g> — two elements, two transforms, no
   conflict.

   The first attempt took bird-flock.tsx's bobDurMs (1500-3000ms) literally
   and ran a symmetrical up-down at ~2s. On a phone that period reads as a
   wingbeat; at this scale it read as a metronome. Three things fix it:

   - The period stretches to 9-17s, so a bird undulates perhaps twice in the
     26s it takes to cross rather than a dozen times.
   - The waypoints are UNEVEN in both time and height, so the path wanders
     instead of oscillating — a bird riding a current does not return to the
     same altitude on a fixed beat.
   - A few degrees of bank, rotating about the bird's own centre. That is the
     detail that actually sells the glide; a body that tilts as it rises and
     falls is being carried, one that only translates is being animated. */
.bird use {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation-name: soar-1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 12s;
}

/* AMPLITUDE is what went missing. The first pass was fast and small and read
   as a metronome; slowing it down without widening the arc just made it read
   as still, because the whole excursion was under one bird-length. These
   travel roughly five bird-heights, which at this scale is ~40px on screen —
   enough to see, slow enough to be a glide. The periods come in a little
   from 9-17s to 6.5-11s so the motion is perceptible without hurrying. */
.a1 use { animation-name: soar-1; animation-duration: 8.5s; }
.a2 use { animation-name: soar-2; animation-duration: 7s;    animation-delay: -2.6s; }
.a3 use { animation-name: soar-3; animation-duration: 10s;   animation-delay: -4.1s; }
.a4 use { animation-name: soar-2; animation-duration: 7.5s;  animation-delay: -5.9s; }
.b1 use { animation-name: soar-3; animation-duration: 11s; }
.b2 use { animation-name: soar-1; animation-duration: 6.5s;  animation-delay: -3.3s; }
.b3 use { animation-name: soar-2; animation-duration: 9.5s;  animation-delay: -7.2s; }

@keyframes soar-1 {
  0%   { transform: translateY(-24px) rotate(-3.4deg); }
  17%  { transform: translateY(-48px) rotate(-1.2deg); }
  36%  { transform: translateY(-30px) rotate(2deg); }
  57%  { transform: translateY(24px)  rotate(4deg); }
  74%  { transform: translateY(44px)  rotate(1.6deg); }
  89%  { transform: translateY(10px)  rotate(-2deg); }
  100% { transform: translateY(-24px) rotate(-3.4deg); }
}

@keyframes soar-2 {
  0%   { transform: translateY(30px)  rotate(3.2deg); }
  21%  { transform: translateY(7px)   rotate(0.6deg); }
  44%  { transform: translateY(-40px) rotate(-3.8deg); }
  62%  { transform: translateY(-20px) rotate(-1.8deg); }
  81%  { transform: translateY(38px)  rotate(3.4deg); }
  100% { transform: translateY(30px)  rotate(3.2deg); }
}

@keyframes soar-3 {
  0%   { transform: translateY(-14px) rotate(-1.6deg); }
  26%  { transform: translateY(34px)  rotate(3.8deg); }
  41%  { transform: translateY(20px)  rotate(1.8deg); }
  63%  { transform: translateY(-44px) rotate(-4.2deg); }
  85%  { transform: translateY(-7px)  rotate(-0.7deg); }
  100% { transform: translateY(-14px) rotate(-1.6deg); }
}

.a1 { animation-name: fa1; }
.a2 { animation-name: fa2; animation-delay: 1.2s; }
.a3 { animation-name: fa3; animation-delay: 2.5s; }
.a4 { animation-name: fa4; animation-delay: 3.4s; }
.b1 { animation-name: fb1; animation-delay: 40s; }
.b2 { animation-name: fb2; animation-delay: 41.3s; }
.b3 { animation-name: fb3; animation-delay: 42.4s; }

@keyframes fa1 {
  0%   { transform: translate(-60px, 300px) scale(0.38); }
  9%   { transform: translate(700px, 288px) scale(0.38); }
  18%  { transform: translate(1520px, 302px) scale(0.38); }
  100% { transform: translate(1520px, 302px) scale(0.38); }
}

@keyframes fa2 {
  0%   { transform: translate(-60px, 312px) scale(0.34); }
  9%   { transform: translate(700px, 302px) scale(0.34); }
  18%  { transform: translate(1520px, 314px) scale(0.34); }
  100% { transform: translate(1520px, 314px) scale(0.34); }
}

@keyframes fa3 {
  0%   { transform: translate(-60px, 292px) scale(0.4); }
  9%   { transform: translate(700px, 279px) scale(0.4); }
  18%  { transform: translate(1520px, 295px) scale(0.4); }
  100% { transform: translate(1520px, 295px) scale(0.4); }
}

@keyframes fa4 {
  0%   { transform: translate(-60px, 320px) scale(0.33); }
  9%   { transform: translate(700px, 310px) scale(0.33); }
  18%  { transform: translate(1520px, 322px) scale(0.33); }
  100% { transform: translate(1520px, 322px) scale(0.33); }
}

@keyframes fb1 {
  0%   { transform: translate(-60px, 252px) scale(0.36); }
  8%   { transform: translate(720px, 264px) scale(0.36); }
  16%  { transform: translate(1520px, 250px) scale(0.36); }
  100% { transform: translate(1520px, 250px) scale(0.36); }
}

@keyframes fb2 {
  0%   { transform: translate(-60px, 262px) scale(0.32); }
  8%   { transform: translate(720px, 275px) scale(0.32); }
  16%  { transform: translate(1520px, 260px) scale(0.32); }
  100% { transform: translate(1520px, 260px) scale(0.32); }
}

@keyframes fb3 {
  0%   { transform: translate(-60px, 244px) scale(0.35); }
  8%   { transform: translate(720px, 256px) scale(0.35); }
  16%  { transform: translate(1520px, 242px) scale(0.35); }
  100% { transform: translate(1520px, 242px) scale(0.35); }
}

/* The panorama is decoration. Anyone who has asked their OS to stop moving
   things gets the same scene, held still. */
@media (prefers-reduced-motion: reduce) {
  .stars circle,
  .shooter,
  .sun-halo,
  .sun-rays,
  .ray-a,
  .ray-b,
  .ray-c,
  .bird,
  .bird use {
    animation: none;
  }

  .stars circle {
    opacity: 0.6;
  }

  .shooter {
    opacity: 0;
  }
}

/* The wordmark replaces both the app icon and the typeset H1. The hands land
   on the sun the way home does it: the sky's sun sits at viewBox y=180 of
   760, so at hero height Hh it renders at 0.237*Hh from the top, and the
   sun-anchor point inside this image is ~24% down — the middle of the hands,
   where the two palms meet. The app's own LOGO_HANDS_OFFSET_Y (0.5 of the
   uncropped source, 43.1% of this alpha-cropped one) lands at the WRISTS
   instead, because home also sits its sun higher than the anchor
   (SUN_Y_FRAC 0.237 vs LOGO_SUN_ANCHOR_Y 0.28). Matching one constant
   without the other put the sun under the hands rather than between them.
   The sun moved up to viewBox y=150 and the hero's top padding brings the
   two together. */
.hero-mark {
  margin: 0 0 18px;
  line-height: 0;
}

.hero-mark img {
  display: block;
  width: min(330px, 74vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 26px rgba(7, 13, 32, 0.5));
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 8vw, 60px);
  letter-spacing: 0.16em;
  margin: 0 0 18px;
  color: var(--gold);
  line-height: 1.1;
}

.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 3.4vw, 24px);
  color: var(--ink);
  margin: 0 auto 22px;
  max-width: 30ch;
  line-height: 1.45;
}

.hero p.lede {
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 auto 32px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.badges img {
  display: block;
  height: 55px;
  width: auto;
}
.badges a {
  line-height: 0;
}
/* The hero centres its text; a flex row does not follow text-align. */
.hero .badges {
  justify-content: center;
}
/* The church-leaders pill under the hero badges. */
.hero-leaders {
  margin: 18px 0 0;
  text-align: center;
}
/* 164 + 14 + 185 = 363px does not fit a 375px phone's 327px; at 48px tall
   the pair is 318px and stays on one line. */
@media (max-width: 400px) {
  .badges {
    gap: 12px;
  }
  .badges img {
    height: 48px;
  }
}

.pill {
  display: inline-block;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--gold);
  background: rgba(224, 183, 106, 0.06);
  text-decoration: none;
}

a.pill:hover,
a.pill:focus-visible {
  color: var(--gold-bright);
  border-color: var(--gold);
  background: rgba(224, 183, 106, 0.12);
}

/* ---------- verse band ---------- */

.verse {
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background: rgba(255, 255, 255, 0.015);
  padding: 52px 0;
  text-align: center;
}

.verse blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 3.6vw, 27px);
  line-height: 1.5;
  color: var(--ink);
}

.verse cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- sections ---------- */

section.band {
  padding: 76px 0;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 4.6vw, 34px);
  color: var(--gold);
  margin: 0 0 14px;
  line-height: 1.25;
}

.section-lede {
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 44px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.card {
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035),
    rgba(255, 255, 255, 0.012)
  );
  padding: 26px 24px;
}

.card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  margin: 0 0 10px;
  color: var(--ink);
}

.card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
}

/* Utility classes rather than inline style="" attributes: the CSP in
   vercel.json sets style-src 'self', which blocks inline style attributes
   too. Keep it that way — add a class here instead of loosening the policy. */

.band-ruled {
  border-top: 1px solid var(--rule-soft);
}

.centered {
  text-align: center;
}

.section-lede.flush {
  margin-bottom: 0;
}

.section-lede.centered {
  margin: 0 auto 26px;
}

.stack-top {
  margin-top: 22px;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: start;
}

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

ul.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  color: var(--ink-soft);
}

ul.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.75;
}

/* ---------- screenshot rail ---------- */

/* Scrolls inside its own container so the page body never scrolls
   horizontally, at any width. The partially-visible next card is the
   affordance — no arrows, no hint copy. */

.shots-rail {
  max-width: var(--page);
  margin: 0 auto;
}

.shots {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 4px 24px 22px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 200, 80, 0.35) transparent;
}

.shots::-webkit-scrollbar {
  height: 8px;
}

.shots::-webkit-scrollbar-track {
  background: transparent;
}

.shots::-webkit-scrollbar-thumb {
  background: rgba(255, 200, 80, 0.28);
  border-radius: 4px;
}

.shot {
  flex: 0 0 auto;
  width: 232px;
  margin: 0;
  scroll-snap-align: center;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  background: var(--navy);
}

.shot figcaption {
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .shot {
    width: 208px;
  }

  .shots {
    gap: 18px;
  }
}

/* ---------- prose (legal + support pages) ---------- */

.prose {
  max-width: var(--prose);
  margin: 0 auto;
  padding: 64px 0 88px;
}

.prose h1 {
  font-size: clamp(30px, 5.6vw, 42px);
  letter-spacing: 0.02em;
  text-align: left;
  margin-bottom: 10px;
}

.prose .updated {
  color: var(--ink-faint);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}

.prose h2 {
  font-size: 24px;
  margin: 44px 0 12px;
  letter-spacing: 0.01em;
}

.prose h2:first-of-type {
  margin-top: 0;
}

.prose h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  margin: 32px 0 8px;
}

.prose p,
.prose li {
  color: var(--ink-soft);
}

.prose p {
  margin: 0 0 16px;
}

.prose ul {
  padding-left: 22px;
  margin: 0 0 16px;
}

.prose li {
  margin-bottom: 10px;
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.callout {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: rgba(224, 183, 106, 0.05);
  padding: 20px 22px;
  margin: 28px 0;
}

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

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule-soft);
  padding: 46px 0 56px;
  color: var(--ink-faint);
  font-size: 14.5px;
}

.site-footer .cols {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer .legal p {
  margin: 0 0 4px;
}

.site-footer .legal .entity {
  color: var(--ink-soft);
  font-family: var(--serif);
  letter-spacing: 0.04em;
}

.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-footer nav a:hover {
  color: var(--gold-bright);
}

.site-footer .copyright {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  font-size: 13.5px;
}

@media (max-width: 560px) {
  body {
    font-size: 16.5px;
  }

  /* Top padding is what aligns the hands to the sun, and it is NOT free to
     copy from the desktop value: the sky is scaled to the hero, so the sun's
     distance from the top is 150/760 of the hero height, and raising the
     padding raises the hero, which lowers the sun. Solving that circle at a
     512px viewport (measured: hands 42px above the sun, hero 812, wordmark
     275 tall, sun anchor 24% down it):

       P + 0.24*275 = 150 * (P + 760) / 760   ->   P = 105

     At 390px the wordmark is shorter but the copy wraps longer, and the two
     nearly cancel — the same equation gives ~113 — so one value sits within
     about 5px across the whole range, which the glow absorbs.

     Everything below the mark is in normal flow, so this moves the tagline,
     lede and pill down with it rather than letting the mark slide under them. */
  .hero {
    padding: 108px 0 210px;
  }

  .section-head {
    gap: 16px;
  }

  section.band {
    padding: 58px 0;
  }

  .site-nav {
    gap: 20px;
    font-size: 14.5px;
  }
}

/* ── Verse of the day: teaching pages + hub (site/verse/) ─────────────────
   Generated by scripts/build-votd-pages.js. The teaching is long-form prose,
   so it is held to --prose (68ch) rather than the --page width the marketing
   sections use — a 1040px measure is unreadable for 900 words. */

article.band .wrap,
.hub-list {
  max-width: var(--prose);
}

article.band h1 {
  font-family: var(--serif);
  font-size: clamp(25px, 4.2vw, 36px);
  line-height: 1.24;
  color: var(--ink);
  margin: 0 0 14px;
}

article.band p {
  font-size: 17px;
  line-height: 1.74;
  color: var(--ink-soft);
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* The hook is the card's one-line thesis. It carries the page in search
   results (it is the meta description) so it earns display weight here. */
.hook {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.6vw, 21px) !important;
  line-height: 1.5;
  color: var(--ink) !important;
  margin: 0 0 28px;
}

.verse-block {
  margin: 0 0 30px;
  padding: 20px 24px;
  border-left: 2px solid var(--gold);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 10px 10px 0;
}

.verse-block p {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px !important;
  line-height: 1.6;
  color: var(--ink) !important;
}

.verse-block cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* `<source slug>` markers are tappable scholar pills in the app. There is
   nowhere to send that tap here, so the name is marked as an authority
   without pretending to be a link. */
.scholar {
  color: var(--gold-bright);
  font-weight: 600;
}

.sources {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-size: 14px !important;
  color: var(--ink-faint) !important;
}

.teach-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
  font-size: 15px;
}

.hub-list {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}

.hub-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.hub-list li p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.hub-date {
  margin-left: 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Verse of the day module on the home page ─────────────────────────── */

.votd-home {
  display: block;
  margin: 26px auto 0;
  max-width: 620px;
  padding: 20px 24px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  text-align: left;
  text-decoration: none;
}

.votd-home:hover {
  border-color: var(--gold);
  background: rgba(255, 200, 80, 0.05);
}

/* A <span> inside the block-level anchor, so it needs display restored —
   .eyebrow is otherwise only ever used on a <p>. */
.votd-home .eyebrow {
  display: block;
  margin: 0 0 8px;
}

.votd-home .vh-ref {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--ink);
  margin-bottom: 6px;
}

.votd-home .vh-hook {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.votd-home .vh-cta {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

/* ── The 15:58 easter egg on the home screenshot ──────────────────────────
   <details>/<summary> disclosure, so it works with no JavaScript and the
   `script-src 'none'` CSP stays true. The default marker is removed in both
   the standard and the WebKit form — Safari still needs the pseudo-element. */

.egg summary {
  display: block;
  list-style: none;
  cursor: pointer;
}

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

.egg summary::marker {
  content: "";
}

/* A hint, not a label. The gold edge on hover says the image is live without
   announcing what it does — the point is that you find it. */
.egg summary img {
  transition: border-color 0.18s ease;
}

.egg summary:hover img,
.egg summary:focus-visible img {
  border-color: rgba(255, 209, 102, 0.55);
}

/* ⚠️ Load-bearing. The UA's own hiding of closed <details> content did NOT
   apply here — measured on the live page, the blockquote reported
   offsetHeight 208 with details.open === false, so the verse sat in plain
   sight and there was no egg to find. Browsers have moved this between a
   slot, `content-visibility` and `::details-content` over the years; stating
   the closed state explicitly does not care which one a given engine uses.
   Do not delete this on the grounds that <details> "already does it". */
.egg:not([open]) .egg-verse {
  display: none;
}

.egg-verse {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-left: 2px solid var(--gold);
  background: rgba(255, 200, 80, 0.05);
  border-radius: 0 10px 10px 0;
}

.egg-verse p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.egg-verse cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Teaching page heading, over the app's panorama ───────────────────────
   assets/sky.svg is the home hero's sky and ridgelines as a still (no sun, no
   stars, no birds — a background-image SVG never runs its animations, so the
   moving parts would only ever be frozen mid-cycle). One cached request
   instead of the same markup inlined into every teaching page. */

.teach-hero {
  position: relative;
  margin: 0 0 32px;
  padding: 32px 30px 28px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  background-color: var(--navy);
  /* Scrim is HEAVIEST AT THE TOP, where the eyebrow and headline sit, and
     lightest at the bottom, where the ridgelines are. The first version had it
     the other way round — 0.86 over the mountains — which painted out the only
     part of the panorama worth showing and left a plain dark panel. */
  background-image:
    linear-gradient(to bottom, rgba(7, 13, 32, 0.86), rgba(7, 13, 32, 0.72) 46%, rgba(7, 13, 32, 0.3)),
    url("/assets/sky.svg");
  background-size: cover, cover;
  background-position: center bottom, center bottom;
}

/* The scrim above is the legibility guard: the panorama's bottom third runs
   to rgb(220,150,88), which a white headline cannot sit on unaided. */
.teach-hero h1,
.teach-hero .hook {
  text-shadow: 0 1px 16px rgba(7, 13, 32, 0.9);
}

.teach-hero .hook {
  margin-bottom: 0;
}

article.band h2 {
  font-family: var(--serif);
  font-size: clamp(19px, 2.8vw, 23px);
  color: var(--gold);
  margin: 34px 0 10px;
}

/* ── Verse of the day: floating, not in the hero flow ─────────────────────
   Sitting inline under the pitch, it read as one more line of sales copy.
   Detached in the corner it reads as the thing the site does every day.

   ⚠️ It does NOT hide on scroll. That needs a scroll position, and this site
   has no JavaScript by design (`script-src 'none'`), so the honest options
   were "always there" or "not on small screens". Small screens get a slim
   single-line bar instead, which costs ~52px and never covers body text. */

.votd-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  width: min(330px, calc(100vw - 44px));
}

.votd-float .votd-home {
  margin: 0;
  max-width: none;
  background: rgba(13, 21, 48, 0.94);
  border-color: var(--rule);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

@media (max-width: 899px) {
  .votd-float {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
  }

  .votd-float .votd-home {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 11px 16px;
  }

  /* One line on a phone: the reference and the arrow. The eyebrow and the
     hook are the first things to go — the ref is what identifies it. */
  .votd-float .eyebrow,
  .votd-float .vh-hook {
    display: none;
  }

  .votd-float .vh-ref {
    display: inline;
    font-size: 16px;
    margin: 0;
  }

  .votd-float .vh-cta {
    float: right;
    font-size: 12px;
  }
}

/* Room for the bar so the last line of the footer is never trapped under it. */
@media (max-width: 899px) {
  .site-footer {
    padding-bottom: 76px;
  }
}

/* ── Footer pitch on a teaching page ─────────────────────────────────────
   A search visitor lands here cold, gets their verse answered, and before
   this block the page simply ended. Muted on purpose: the whole credibility
   of these pages rests on not reading as marketing, so this sits quietly
   below the prev/next links rather than interrupting the teaching. */

.app-cta {
  margin: 30px 0 26px;
  padding: 22px 22px 20px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

/* !important is load-bearing. `article.band h2` (added for the About page's
   section headings) is specificity 0-1-2 and beats `.app-cta h2` at 0-1-1, so
   its 34px top margin was winning and opening a large gap inside the card.
   There is no second class here to raise specificity with, and scoping to
   `article.band .app-cta h2` would miss the hub, which is a <section>. */
.app-cta h2 {
  margin: 0 0 10px !important;
  font-family: var(--serif);
  font-size: clamp(19px, 2.8vw, 23px);
  line-height: 1.28;
  color: var(--ink);
}

.app-cta > p {
  font-size: 16px !important;
  line-height: 1.68;
  color: var(--ink-soft) !important;
  margin: 0;
}

/* Three phones in a row, cropped to their top third — the whole screen at
   this width is unreadable anyway, and the crop reads as a glimpse rather
   than a thumbnail nobody can parse. */
.cta-shots {
  display: flex;
  gap: 14px;
  margin: 16px 0 14px;
}

/* ── Auto-scrolling screenshot strip ─────────────────────────────────────
   Pure CSS, no JavaScript, so `script-src 'none'` holds. The seven shots are
   emitted TWICE and the track translates exactly -50%, so the second copy is
   under the cursor at the moment the animation resets — the loop has no seam.
   Change the shot count and this stays correct; it is a percentage, not a
   pixel measurement.

   ⚠️ ACCESSIBILITY. Content that moves on its own for more than five seconds
   needs a way to stop it (WCAG 2.2.2). With no JS there is no pause button, so
   the two mechanisms below ARE the compliance story — do not remove them:
     - prefers-reduced-motion halts it outright and shows a static row
     - hover/focus pauses it
   A visitor who cannot use either still gets every screenshot; they are
   decorative (aria-hidden) and the copy beside them carries the meaning. */
.cta-rail {
  overflow: hidden;
  margin: 16px 0 14px;
  /* Fades both edges so shots enter and leave rather than being guillotined. */
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.cta-rail .cta-shots {
  margin: 0;
  width: max-content;
  animation: cta-marquee 48s linear infinite;
}

.cta-rail:hover .cta-shots,
.cta-rail:focus-within .cta-shots {
  animation-play-state: paused;
}

@keyframes cta-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-rail .cta-shots {
    animation: none;
  }
  .cta-rail {
    overflow-x: auto;
  }
}

/* Inside the rail the shots are a fixed width rather than flexing to thirds —
   a marquee has no "thirds", the track is wider than the card by design. */
.cta-rail .cta-shots img {
  flex: 0 0 auto;
  width: 132px;
  aspect-ratio: 3 / 4;
}

@media (max-width: 560px) {
  .cta-rail .cta-shots img {
    width: 104px;
  }
}

.cta-shots img {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.cta-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  margin: 0 !important;
  font-size: 15px;
}

.cta-foot span {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Phones keep a slightly squarer crop so three across is not a sliver each. */
@media (max-width: 560px) {
  .cta-shots img {
    aspect-ratio: 1 / 1;
  }
}

/* ── Small promo line, high on a teaching page ───────────────────────────
   The footer banner catches readers who finish. This catches the ones who
   read two paragraphs and leave, who are most of them. One line of text
   rather than a block: it sits above the passage, and anything heavier there
   would undercut the only thing making the page worth trusting.

   Deliberately NOT above the <h1>. A promotional block above the main content
   of a page answering an informational query is the shape Google's page-layout
   heuristics look at; a single inline link below the heading is not. */
.teach-promo {
  margin: -18px 0 26px !important;
  padding: 9px 14px;
  border-left: 2px solid var(--gold);
  background: rgba(255, 200, 80, 0.06);
  border-radius: 0 8px 8px 0;
  font-size: 14px !important;
  line-height: 1.45;
}

.teach-promo a {
  text-decoration: none;
  color: var(--gold-bright);
}

.teach-promo a:hover {
  text-decoration: underline;
}

/* ── Whole-card click target for the app pitch ───────────────────────────
   The block holds exactly one <a>, and this stretches it over the card.
   Wrapping the <aside> in an anchor instead would be invalid HTML (the
   heading and images are fine, but nested interactive content is not) and
   would muddle keyboard focus. This keeps one real focusable link and only
   widens what a mouse can hit. */
.app-cta {
  position: relative;
}

.cta-foot a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.app-cta:hover {
  border-color: var(--gold);
  background: rgba(255, 200, 80, 0.05);
}

/* ── Related teachings ───────────────────────────────────────────────────
   Links siblings from the same BOOK rather than the previous and next dates.
   Chronology means nothing to a reader; the other Proverbs do. */
.teach-nav-label {
  flex: 1 0 100%;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}

.teach-nav {
  justify-content: flex-start;
  gap: 6px 22px;
}

/* ── Auto-scrolling home page rail ───────────────────────────────────────
   Same pure-CSS marquee as the pitch strip, but this rail is NOT the same
   kind of thing, and the difference is worth stating.

   ⚠️ The pitch strip's shots are decorative (aria-hidden) and were never
   scrollable, so animating them cost nothing. THIS rail is a real
   `role="region" tabindex="0"` scroll container whose captions are content.
   CSS cannot auto-scroll a natively scrollable element — scroll-left is not
   animatable — so a transform marquee REPLACES scrolling rather than adding
   to it. Manual drag and keyboard arrow-scroll are gone while it animates.
   That is a deliberate trade, not an oversight.

   The mitigations are therefore load-bearing:
     - prefers-reduced-motion restores the original scrollable region intact
     - hover/focus pauses, so a caption can be read without chasing it
     - 90s, not the strip's 48s, because these captions are meant to be read

   If the trade ever looks wrong, deleting `shots-auto` from the wrapper in
   index.html reverts to the original behaviour with no other change. */

.shots-auto {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.shots-auto .shots {
  width: max-content;
  overflow-x: visible;
  scroll-snap-type: none;
  animation: shots-marquee 90s linear infinite;
}

.shots-auto .shots:hover,
.shots-auto .shots:focus-within,
.shots-auto:hover .shots {
  animation-play-state: paused;
}

@keyframes shots-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .shots-auto {
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .shots-auto .shots {
    width: auto;
    overflow-x: auto;
    animation: none;
  }
  /* The duplicate set is redundant without motion and would double the row. */
  .shots-auto .shot[aria-hidden="true"] {
    display: none;
  }
}

/* ── /churches: the page church leaders land on from a member's invite ─────
   DESKTOP FIRST, unlike the rest of the site: a pastor opens this at a desk.
   The hero reuses the teaching pages' still panorama (assets/sky.svg) rather
   than the home page's inline animated scene — one cached request, and the
   page is about the church, not the sunrise. */

/* Bottom padding is what keeps the ridgelines BELOW the lede: the sky is
   cover-scaled to the hero, so the back ridge's rim-light lands at a fixed
   fraction of its height. At 150px it ran straight through the paragraph. */
.church-hero {
  padding: 96px 0 260px;
  background-color: var(--navy);
  /* Scrim heaviest at the top where the copy sits, lightest over the ridges,
     same reasoning as .teach-hero. */
  background-image:
    linear-gradient(to bottom, rgba(7, 13, 32, 0.9), rgba(7, 13, 32, 0.66) 55%, rgba(7, 13, 32, 0.1) 85%, var(--navy-deep)),
    url("/assets/sky.svg");
  background-size: cover, cover;
  background-position: center bottom, center bottom;
  border-bottom: 1px solid var(--rule-soft);
}

/* Copy left, setup form right on a desk; stacked on a phone. */
.church-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}

@media (max-width: 900px) {
  .church-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  /* Scoped through the grid so it outranks the base .lead-form rule, which
     comes later in this file. */
  .church-hero-grid .lead-form {
    scroll-margin-top: 24px;
  }
}

/* Closed until the hero button targets it (#setup). The grid column stays
   reserved while closed, so opening it does not reflow the copy beside it. */
.lead-form {
  display: none;
  position: relative;
  /* Opening it must not jump the page. On a desk the form is already on
     screen beside the button, and a 100vh margin asks the browser to scroll
     to a point above the top, which clamps to "don't scroll". On a phone it
     opens BELOW the copy, so there the jump is wanted (see the 900px rule). */
  scroll-margin-top: 100vh;
  gap: 14px;
  padding: 26px 24px 24px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: rgba(13, 21, 48, 0.88);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.lead-form:target {
  display: grid;
  animation: lead-in 0.35s ease-out;
}

@keyframes lead-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lead-form:target {
    animation: none;
  }
}

.lead-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-faint);
  text-decoration: none;
}

.lead-close:hover {
  color: var(--gold-bright);
}

.lead-form .lead-title {
  font-size: 24px;
  margin: 0 0 2px;
}

/* Block, not grid: a grid label makes the "(optional)" hint its own row. */
.lead-form label {
  display: block;
  font-size: 14px;
  color: var(--ink);
}

.lead-form .opt {
  color: var(--ink-faint);
}

.lead-form input,
.lead-form textarea {
  display: block;
  margin-top: 6px;
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 10px 12px;
}

.lead-form textarea {
  resize: vertical;
}

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

.lead-form .cta {
  border: 0;
  cursor: pointer;
  margin-top: 4px;
  font-family: inherit;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.lead-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.church-hero .church-title {
  font-size: clamp(32px, 5.2vw, 52px);
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0 0 22px;
  text-shadow: 0 1px 16px rgba(7, 13, 32, 0.9);
}

/* Only on a member's tagged invite: functions/index.js `churchesPage` puts it
   above the headline. Never in churches.html itself. */
.church-welcome {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 14px;
  padding: 8px 14px;
  display: inline-block;
  border: 1px solid rgba(255, 209, 102, 0.45);
  border-radius: 999px;
  background: rgba(7, 13, 32, 0.55);
}

.church-lede {
  color: var(--ink);
  font-size: 18.5px;
  line-height: 1.7;
  margin: 0 0 34px;
  text-shadow: 0 1px 14px rgba(7, 13, 32, 0.85);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin: 0;
}

.cta-row.centered-row {
  justify-content: center;
}

.cta {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 200, 80, 0.97), rgba(255, 180, 60, 0.97));
  color: #1a1206;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(255, 180, 60, 0.18);
}

.cta:hover,
.cta:focus-visible {
  background: linear-gradient(135deg, #ffd166, #ffbe4a);
}

.cta-quiet {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15.5px;
}

.cta-quiet:hover {
  color: var(--gold-bright);
}

/* Copy and cards on the left, the real church screen on the right. Collapses
   to one column with the screenshot after the cards on narrow screens. */
.church-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 56px;
  align-items: start;
}

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

.church-shot {
  width: 100%;
  position: sticky;
  top: 32px;
}

@media (max-width: 860px) {
  .church-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .church-shot {
    position: static;
    width: 240px;
    margin: 0 auto;
  }
}

@media (max-width: 620px) {
  .church-points {
    grid-template-columns: minmax(0, 1fr);
  }

  .church-hero {
    padding: 64px 0 200px;
  }

  .church-lede {
    font-size: 17px;
  }

  /* The forced break orphans "here." at phone width. */
  .church-title br {
    display: none;
  }
}

/* "It runs on what you already do": four cards, so a fixed 2 x 2 rather than
   .grid's auto-fit, which left the fourth card alone on a row at 1040px. A
   gold accent rule on the left marks these as the tools, apart from the
   plain cards above. */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.tool-grid .card {
  border-left: 2px solid rgba(224, 183, 106, 0.55);
  padding: 24px 28px 26px;
}

/* .card .tool-tag, not .tool-tag: `.card p` would otherwise win. */
.card .tool-tag {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 620px) {
  .tool-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

ol.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

ol.steps > li {
  counter-increment: step;
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  padding: 24px 24px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
}

ol.steps > li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  color: var(--gold-bright);
  font-family: var(--serif);
  font-size: 18px;
  margin-bottom: 14px;
}

ol.steps h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  margin: 0 0 8px;
  color: var(--ink);
}

ol.steps p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
}

ol.steps strong {
  color: var(--ink);
  font-weight: 600;
}

/* Badges inside a ~300px step card: two at 55px tall would wrap awkwardly. */
ol.steps .badges {
  margin-top: 18px;
  gap: 10px;
}

ol.steps .badges img {
  height: 40px;
}

.church-callout {
  margin: 28px 0 0;
}

.church-callout p {
  margin: 0;
  color: var(--ink-soft);
}

.church-callout strong {
  color: var(--ink);
}

/* ---------- website church claim (/church-claim.js) ---------- */
/* `hidden` must win over the display rules below: the script moves between
   steps by toggling it. */
.claim-band[hidden],
.claim-band [hidden],
#claim-cta[hidden],
#setup-cta[hidden] {
  display: none !important;
}

.claim-band {
  border-top: 1px solid var(--rule-soft);
  scroll-margin-top: 16px;
}

.claim-wrap {
  max-width: 720px;
}

.claim-title {
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.claim-step,
.claim-form {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: rgba(13, 21, 48, 0.88);
  position: relative;
}

.claim-step h3 {
  margin: 0;
}

.claim-step p {
  margin: 0;
}

.claim-band label {
  display: block;
  font-size: 14px;
  color: var(--ink);
}

.claim-band input {
  display: block;
  margin-top: 6px;
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 10px 12px;
}

.claim-band input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}

.claim-band button.cta {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  justify-self: start;
}

.claim-band button.cta:disabled {
  opacity: 0.6;
  cursor: default;
}

.claim-search-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.claim-search-row .claim-grow {
  flex: 2;
  min-width: 0;
}

.claim-search-row .claim-city {
  flex: 1;
  min-width: 0;
}

.claim-band textarea {
  display: block;
  margin-top: 6px;
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 10px 12px;
  resize: vertical;
}

.claim-band textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}

.claim-band .opt {
  color: var(--ink-faint);
}

.claim-typed {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}

.claim-typed legend {
  padding: 0;
  margin-bottom: 4px;
  font-size: 18px;
  color: var(--ink);
}

#claim-more {
  justify-self: start;
}

.claim-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.claim-result {
  width: 100%;
  display: grid;
  gap: 2px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.claim-result:hover,
.claim-result:focus-visible {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.07);
  outline: none;
}

.claim-result span,
.claim-result em {
  font-size: 14px;
  color: var(--ink-soft);
  font-style: normal;
}

.claim-result em {
  color: var(--ink-faint);
}

.claim-result:disabled {
  cursor: default;
  opacity: 0.7;
}

.claim-picked {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.claim-picked strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
}

.claim-picked span {
  font-size: 14px;
  color: var(--ink-soft);
}

.claim-link {
  font: inherit;
  font-size: 14px;
  color: var(--gold-bright);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.claim-hint {
  font-size: 14px;
  color: var(--ink-soft);
}

.claim-msg {
  font-size: 14px;
  color: var(--ink-soft);
  min-height: 1em;
}

.claim-msg.is-error {
  color: #ffb4a8;
}

.claim-msg:empty {
  display: none;
}

.claim-alt {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.claim-band .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 520px) {
  .claim-search-row {
    flex-direction: column;
    align-items: stretch;
  }
  .claim-step,
  .claim-form {
    padding: 20px 16px;
  }
}

/* ---------- churches page, 2026-10-18 redesign ---------- */
/* Kenam: "make it look more professional", keep the dark navy and gold.
   Patterns from Subsplash / Planning Center / Hallow: an eyebrow in small
   capitals, a short ivory headline, one line under it, the product on a
   phone, plain icon features instead of boxed paragraphs, generous space.
   Scoped to body.page-churches so the other pages only change typeface. */

:is(.page-churches, .page-home) .eyebrow {
  font-family: var(--caps);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  margin-bottom: 14px;
}

:is(.page-churches, .page-home) section.band {
  padding: 104px 0;
}

:is(.page-churches, .page-home) .section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin: 0 0 16px;
  max-width: 22ch;
}

/* No lede under it in "How it works": the steps need the gap instead. */
.page-churches #how .section-title {
  margin-bottom: 52px;
}

:is(.page-churches, .page-home) .centered .section-title {
  margin-left: auto;
  margin-right: auto;
}

:is(.page-churches, .page-home) .section-lede {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 56px;
}

:is(.page-churches, .page-home) h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ivory);
  margin: 0 0 8px;
}

.band-tint {
  background: linear-gradient(180deg, rgba(17, 26, 56, 0.55), rgba(13, 21, 48, 0.25));
}

/* Hero: copy left, the product on a phone right. */
.page-churches .church-hero {
  padding: 88px 0 200px;
  /* The phone's glow reaches past the screen edge on a phone. */
  overflow-x: clip;
}

.page-churches .church-hero-grid {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 72px;
  align-items: center;
}

.page-churches .church-hero .church-title {
  font-weight: 500;
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ivory);
  margin-bottom: 24px;
}

.page-churches .church-lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: 36px;
}

.hero-platforms {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--ink-faint);
}

/* The no-script setup form takes the phone's place when opened. */
.page-churches .church-hero-grid .lead-form {
  grid-column: 2;
  grid-row: 1;
}

.church-hero-grid:has(.lead-form:target) .hero-device {
  display: none;
}

.hero-device {
  position: relative;
  justify-self: center;
}

/* Warm light behind the phone, the app's own glow. */
.hero-device::before {
  content: "";
  position: absolute;
  inset: -18% -30%;
  background: radial-gradient(closest-side, rgba(255, 196, 92, 0.22), rgba(255, 196, 92, 0) 70%);
  z-index: 0;
}

/* A phone drawn in CSS: no device image to license or keep current. */
.phone {
  position: relative;
  z-index: 1;
  width: 300px;
  max-width: 78vw;
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(160deg, #1b2342, #0a0f22 60%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 0 2px rgba(0, 0, 0, 0.6),
    0 40px 90px rgba(0, 0, 0, 0.55),
    0 12px 30px rgba(0, 0, 0, 0.45);
}

.phone::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 92px;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 14px;
  background: #05070f;
  z-index: 2;
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 36px;
}

@media (max-width: 900px) {
  .page-churches .church-hero {
    padding: 64px 0 140px;
  }
  .page-churches .church-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }
  .page-churches .church-hero-grid .lead-form {
    grid-column: 1;
    grid-row: auto;
  }
  .phone {
    width: 260px;
  }
}

/* Features: icon, short title, one line. No boxes. */
/* 4 / 2 / 1 across, never 3 + 1. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 44px 36px;
}

@media (max-width: 1000px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.feature p,
.tool p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: rgba(255, 200, 80, 0.08);
  border: 1px solid rgba(255, 200, 80, 0.22);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Integrations: four quiet panels. */
.page-churches .tool-grid {
  gap: 18px;
}

.tool {
  padding: 28px 28px 30px;
  border-radius: 16px;
  border: 1px solid var(--rule-soft);
  background: rgba(7, 13, 32, 0.55);
}

.tool .tool-tag {
  margin: 0 0 14px;
  font-family: var(--caps);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-churches .split {
  align-items: center;
  gap: 56px;
}

.page-churches .ticks li {
  font-size: 16px;
}

/* Steps: numbered, no boxes, the number in gold. */
.page-churches ol.steps {
  gap: 40px;
  margin-bottom: 44px;
}

.page-churches ol.steps > li {
  border: 0;
  background: none;
  padding: 0;
}

.page-churches ol.steps > li::before {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  font-family: var(--serif);
  font-size: 20px;
  background: rgba(255, 200, 80, 0.08);
}

.page-churches ol.steps h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
}

.page-churches #how .badges img {
  height: 44px;
}

/* The claim form: one centred panel. */
.page-churches .claim-band {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 196, 92, 0.1), rgba(255, 196, 92, 0) 60%),
    var(--navy-deep);
}

.page-churches .claim-wrap {
  max-width: 760px;
}

.page-churches .claim-step,
.page-churches .claim-form {
  padding: 32px;
  border-radius: 20px;
  background: rgba(17, 26, 56, 0.8);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.cta-outline {
  background: none;
  border: 1px solid rgba(255, 209, 102, 0.55);
  color: var(--gold-bright);
  box-shadow: none;
}

.cta-outline:hover,
.cta-outline:focus-visible {
  background: rgba(255, 209, 102, 0.08);
}

@media (max-width: 560px) {
  :is(.page-churches, .page-home) section.band {
    padding: 72px 0;
  }
  .page-churches .claim-step,
  .page-churches .claim-form {
    padding: 22px 18px;
  }
}

/* ---------- home page, 2026-10-18 redesign ---------- */
/* Same approach as /churches: headline + download on the left, the app on a
   phone on the right, over the app's own panorama. */

.page-home .hero {
  text-align: left;
  padding: 96px 0 220px;
}

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 72px;
  align-items: center;
}

.page-home .home-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ivory);
  margin: 0 0 24px;
  max-width: 16ch;
  text-shadow: 0 2px 24px rgba(7, 13, 32, 0.7);
}

.page-home .hero p.lede {
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 34px;
  max-width: 34em;
}

.page-home .hero .badges {
  justify-content: flex-start;
}

.page-home .hero-leaders {
  text-align: left;
  margin-top: 22px;
}

@media (max-width: 900px) {
  .page-home .hero {
    padding: 64px 0 150px;
  }
  /* Stacked, the copy sits right over the sun: brighter text, heavier
     shadow, so the lede stays readable against it. */
  .page-home .hero p.lede {
    color: var(--ink);
    text-shadow: 0 1px 3px rgba(7, 13, 32, 0.9), 0 2px 18px rgba(7, 13, 32, 0.95);
  }
  .home-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }
}

/* The verse of the day: its own band under the hero, not a corner float
   (it covered the intro at laptop widths). The markup is regenerated by
   scripts/build-votd-pages.js and still says .votd-float; this undoes the
   float for the home page only. */
.votd-band {
  padding: 8px 0 72px;
}

.page-home .votd-float {
  position: static;
  width: auto;
}

.page-home .votd-float .votd-home {
  margin: 0 auto;
  max-width: 760px;
  padding: 28px 32px;
  border-radius: 20px;
  background: rgba(17, 26, 56, 0.8);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: none;
}

.page-home .votd-home .vh-ref {
  font-size: 26px;
  font-weight: 500;
  color: var(--ivory);
}

.page-home .votd-home .vh-hook {
  font-size: 18px;
}

@media (max-width: 899px) {
  .page-home .votd-float {
    position: static;
  }
  .page-home .votd-float .votd-home {
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 22px 20px;
  }
  .page-home .votd-float .eyebrow,
  .page-home .votd-float .vh-hook {
    display: block;
  }
  .page-home .votd-float .vh-ref {
    display: block;
    font-size: 22px;
    margin-bottom: 6px;
  }
  .page-home .votd-float .vh-cta {
    float: none;
  }
  /* The fixed bar is gone on this page, so its footer allowance is too. */
  .page-home .site-footer {
    padding-bottom: 32px;
  }
}

/* Six features: 3 / 2 / 1 across. */
.feature-grid.feature-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 52px 40px;
}

@media (max-width: 900px) {
  .feature-grid.feature-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .feature-grid.feature-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Screenshots: the same phone frame as the hero. */
.page-home .shot img {
  border-radius: 34px;
  border: 0;
  padding: 8px;
  background: linear-gradient(160deg, #1b2342, #0a0f22 60%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 30px 60px rgba(0, 0, 0, 0.5);
}

.page-home .shot figcaption {
  text-align: center;
  padding: 0 6px;
}

.page-home #screens .section-title {
  margin-bottom: 44px;
}

.page-home .split {
  align-items: center;
  gap: 56px;
}

/* The closing call to action. */
.final-cta {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 196, 92, 0.12), rgba(255, 196, 92, 0) 60%),
    var(--navy-deep);
}

.final-cta .badges {
  justify-content: center;
  margin: 0 0 28px;
}

.final-help {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
}

/* ---------- every other page, 2026-10-18 ---------- */
/* Kenam: bring support, privacy, terms, the verse pages and /get up to the
   same look. One block of overrides rather than rewriting each page: gold
   small-caps eyebrows, ivory headings without the wide tracking (that was a
   wordmark style the hero no longer uses), roomier long-text pages. */

.eyebrow {
  font-family: var(--caps);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

h1 {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ivory);
}

h2 {
  color: var(--ivory);
}

/* Short pages: /get, /iphone, 404, the form results. */
main > section.wrap,
main > .wrap.prose {
  padding-top: 96px;
  padding-bottom: 120px;
}

main > section.wrap > h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.12;
  margin-bottom: 20px;
}

main > section.wrap > p {
  max-width: 34em;
  font-size: 18px;
  color: var(--ink-soft);
}

/* Long text: support, privacy, terms. */
.prose {
  padding: 88px 0 112px;
}

.prose h1 {
  font-size: clamp(34px, 5vw, 48px);
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin-bottom: 14px;
}

.prose .updated {
  font-family: var(--caps);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 44px;
}

.prose h2 {
  font-weight: 500;
  font-size: 26px;
  line-height: 1.25;
  margin: 56px 0 14px;
  letter-spacing: -0.005em;
}

.prose h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  color: var(--ivory);
  margin: 30px 0 8px;
}

.callout {
  border-radius: 16px;
  padding: 24px 26px;
  background: rgba(17, 26, 56, 0.7);
}

/* The verse pages and their index. */
article.band h1 {
  font-weight: 500;
  color: var(--ivory);
  letter-spacing: -0.005em;
}

article.band h2 {
  font-weight: 500;
  color: var(--ivory);
}

.teach-hero {
  border-radius: 20px;
  padding: 40px 36px 34px;
}

@media (max-width: 560px) {
  .teach-hero {
    padding: 28px 22px 24px;
  }
  .prose {
    padding: 64px 0 88px;
  }
  main > section.wrap,
  main > .wrap.prose {
    padding-top: 64px;
    padding-bottom: 88px;
  }
}

/* /get: the store badges beside the app on a phone, like the home hero. */
.get-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 64px;
  align-items: center;
}

@media (max-width: 800px) {
  .get-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}

/* "Behind the verse:" before the hook, as the push says it (Kenam
   2026-10-17): upright and quieter than the italic hook, so it reads as a
   label and the hook can't be mistaken for the verse. */
.votd-home .vh-behind {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  color: var(--gold);
}

/* The card rides up over the bottom of the hero's mountains instead of
   leaving an empty stretch of ridge above it. */
.page-home .votd-band {
  position: relative;
  z-index: 4;
  margin-top: -150px;
}

@media (max-width: 900px) {
  .page-home .votd-band {
    margin-top: -90px;
  }
}

/* ---------- home: try today's question, 2026-10-18 ---------- */
/* The card now takes the overlap with the hero's mountains (it is the first
   thing to DO); the verse card sits under it in normal flow. */
.page-home .votd-band {
  margin-top: 0;
  padding: 0 0 80px;
}

.try-band {
  position: relative;
  z-index: 4;
  margin-top: -150px;
  padding: 0 0 56px;
}

@media (max-width: 900px) {
  .try-band {
    margin-top: -90px;
  }
  .page-home .votd-band {
    margin-top: 0;
  }
}

.try-band[hidden],
.try-band [hidden] {
  display: none !important;
}

.try-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 36px 32px;
  border-radius: 24px;
  border: 1px solid rgba(255, 209, 102, 0.28);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 196, 92, 0.1), rgba(255, 196, 92, 0) 65%),
    rgba(17, 26, 56, 0.92);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.try-question {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.2;
  color: var(--ivory);
  margin: 0 0 22px;
}

.try-form textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 14px 16px;
  resize: vertical;
}

.try-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}

.try-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 16px;
}

.try-actions .cta {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.try-note {
  font-size: 13px;
  color: var(--ink-faint);
}

.try-done-title {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  color: var(--gold-bright) !important;
  margin: 0 0 8px !important;
}

.try-done p {
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.try-done .claim-link {
  margin-top: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .try-card {
    padding: 26px 20px 24px;
  }
}

/* ---------- churches: church page preview (DARK, ?preview=1) ---------- */
/* A mock of the app's church page, drawn in HTML inside the CSS phone so it
   can show a church's own logo, photo, times and events. Sizes are tuned to
   the 300px phone. Every section is only drawn when it was found. */
.preview-band[hidden],
.preview-band [hidden] {
  display: none !important;
}

.preview-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  max-width: 640px;
}

.preview-form .preview-grow {
  flex: 1;
  min-width: 0;
}

.preview-form input {
  display: block;
  margin-top: 6px;
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 10px 12px;
}

.preview-form label {
  font-size: 14px;
  color: var(--ink);
}

.preview-form .cta {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.preview-result {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 40px;
}

@media (max-width: 860px) {
  .preview-result {
    grid-template-columns: minmax(0, 1fr);
  }
  .preview-form {
    flex-direction: column;
    align-items: stretch;
  }
}

.preview-device {
  justify-self: center;
}

.preview-side h3 {
  margin-top: 0;
}

.preview-side p {
  color: var(--ink-soft);
}

.preview-side .cta {
  margin-top: 22px;
}

.pv-checklist {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}

.pv-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ink-soft);
}

.pv-row strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.pv-row:not(.pv-yes) strong {
  color: var(--ink-soft);
}

.pv-hint {
  display: block;
  font-size: 13px;
  color: var(--ink-faint);
}

.pv-tick {
  flex: 0 0 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 1px solid var(--rule-soft);
  color: var(--ink-faint);
}

.pv-yes .pv-tick {
  background: rgba(255, 200, 80, 0.14);
  border-color: rgba(255, 200, 80, 0.4);
  color: var(--gold-bright);
}

.pv-note {
  font-size: 14px;
  margin-top: 16px;
}

/* the mock screen */
.m-screen {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 36px;
  overflow: hidden;
  background: linear-gradient(180deg, #13204a 0%, #0c1534 55%, #0a1230 100%);
  font-family: var(--sans);
  color: #fff;
  display: flex;
  flex-direction: column;
}

.m-banner {
  height: 128px;
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
  position: relative;
}

.m-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 13, 32, 0.15), rgba(7, 13, 32, 0.75));
}

/* No usable photo on their site: one of ours (the app's panorama). */
.m-banner-ours {
  background-image: url("/assets/sky.svg");
  background-position: center bottom;
}

.m-head {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 0 12px;
  margin-top: -34px;
  position: relative;
  z-index: 1;
}

.m-mark {
  flex: 0 0 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e0b76a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.m-mark-dark {
  background: #0d1530;
}

.m-mark img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.m-name-box {
  min-width: 0;
  padding-bottom: 2px;
}

.m-name {
  font-family: var(--caps);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5ecd9;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.m-pills {
  display: flex;
  gap: 4px;
  margin-top: 5px;
}

.m-pill,
.m-donate {
  font-size: 7.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 200, 80, 0.6);
  color: #ffd166;
  border-radius: 999px;
  padding: 2px 7px;
}

.m-card {
  margin: 12px 10px 0;
  padding: 8px 10px 10px;
  border: 1px solid rgba(255, 200, 80, 0.35);
  border-radius: 10px;
  background: rgba(13, 21, 48, 0.8);
  position: relative;
}

.m-label {
  font-family: var(--caps);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e0b76a;
  text-align: center;
  margin-bottom: 4px;
}

.m-label-out {
  text-align: left;
  margin: 12px 12px 5px;
}

.m-times {
  font-size: 9.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
}

.m-donate {
  display: inline-block;
  margin-top: 6px;
}

.m-watch {
  margin: 10px 10px 0;
  height: 74px;
  border-radius: 10px;
  background-color: #1b2342;
  background-size: cover;
  background-position: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.m-watch-label {
  position: absolute;
  left: 7px;
  bottom: 6px;
  font-size: 9px;
  font-weight: 600;
  background: rgba(7, 13, 32, 0.7);
  border-radius: 6px;
  padding: 2px 6px;
}

.m-events {
  display: flex;
  gap: 6px;
  padding: 0 10px;
}

.m-event {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 200, 80, 0.25);
}

.m-event-date {
  font-family: var(--serif);
  font-size: 10px;
  color: #ffd166;
}

.m-event-title {
  font-size: 7.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.m-tabs {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  padding: 8px 6px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(7, 13, 32, 0.9);
}

.m-tab {
  font-size: 7.5px;
  color: rgba(255, 255, 255, 0.45);
}

.m-tab-on {
  color: #fff;
  font-weight: 600;
}

.m-placeholder {
  margin: 12px 10px 0;
  padding: 10px;
  border: 1px dashed rgba(255, 200, 80, 0.3);
  border-radius: 10px;
  text-align: center;
}

.m-placeholder-text {
  font-size: 8.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);
}

/* No video thumbnail and no photo: our panorama and a play button, never an
   empty box. (JS sets an inline background-image when it has a picture,
   which wins over this.) */
.m-watch {
  background-image: url("/assets/sky.svg");
}

.m-watch::before {
  content: "\25B6";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: rgba(7, 13, 32, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 10px;
  line-height: 26px;
  text-align: center;
  padding-left: 2px;
  box-sizing: border-box;
}

/* Preview mock, matched to the app (fellowship.tsx / church-watch-pill.tsx,
   2026-10-18): Donate pill bottom-right ON the About card's bottom edge;
   Watch card at the app's height (134px on a 390px phone, scaled); event
   tiles as EventTile draws them. */
.m-card-donate {
  padding-bottom: 14px;
  margin-bottom: 8px;
}

.m-card .m-donate {
  position: absolute;
  right: 10px;
  bottom: -9px;
  margin: 0;
  background: #1a2a4a;
  border: 1px solid rgba(255, 200, 80, 0.55);
  border-radius: 6px;
  padding: 2px 7px;
  font-weight: 700;
  color: rgba(255, 200, 80, 0.95);
}

.m-watch {
  height: 100px;
  border-color: #9c7a2e;
}

.m-events {
  gap: 5px;
}

.m-event {
  position: relative;
  min-height: 70px;
  padding: 22px 5px 8px;
  border: 1px solid rgba(255, 200, 80, 0.3);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.06);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.m-event-img {
  border-color: rgba(255, 200, 80, 0.55);
}

.m-event-date {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: var(--caps);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #ffd166;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.m-event-title {
  font-family: var(--caps);
  font-weight: 600;
  font-size: 8.5px;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Preview mock, "the preview is a picture" (Kenam 2026-10-18): Watch + Reels
   side by side as church-watch-pill.tsx draws them (3.1 : 1, Reels a touch
   taller), a sample bulletin, an initial when there is no logo. */
.m-sample {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

.m-mark-initial {
  font-family: var(--caps);
  font-weight: 700;
  font-size: 26px;
  color: #0d1530;
}

.m-mark-dark .m-mark-initial {
  color: #ffd166;
}

.m-media {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 12px 10px 0;
}

.m-media .m-watch {
  flex: 3.1;
  margin: 0;
  height: 96px;
}

.m-reels {
  flex: 1;
  height: 105px;
  border-radius: 10px;
  border: 1px solid #9c7a2e;
  background-color: #1b2342;
  background-image: url("/assets/sky.svg");
  background-size: cover;
  background-position: center;
  position: relative;
}

.m-post {
  margin: 0 10px;
  padding: 8px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.m-post-by {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}

.m-post-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m-post-avatar img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.m-post-name {
  font-size: 8.5px;
  font-weight: 600;
  color: #fff;
}

.m-post-when {
  font-size: 7.5px;
  color: rgba(255, 255, 255, 0.45);
}

.m-post-text {
  font-size: 8px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}