/* =========================================================================
   ENLIGHTENED PRESENTER: design system + landing page
   1. Tokens          5. Hero            9. Scripture
   2. Reset/base      6. Showcase       10. Who it's for / Why
   3. Buttons         7. Features       11. Proof / FAQ / CTA
   4. Navigation      8. How it works   12. Footer / motion / responsive
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces */
  --ink:            #060a14;
  --ink-2:          #080d1a;
  --surface:        #0a1020;
  --surface-2:      #0c1326;
  --card:           #0e1729;
  --card-hi:        #121d34;

  /* lines */
  --line:           rgba(125,157,214, .12);
  --line-2:         rgba(125,157,214, .20);
  --line-3:         rgba(125,157,214, .32);

  /* text */
  --text:           #f2f6fd;
  --text-2:         #a8b8d4;
  --text-3:         #74849f;

  /* accent */
  --blue:           #3b82f6;
  --blue-2:         #60a5fa;
  --blue-deep:      #1d4ed8;
  --indigo:         #6366f1;
  --violet:         #8b5cf6;
  --cyan:           #22d3ee;
  --blue-cta:       #2563eb;

  /* scripture: a warmer voice than the interface around it */
  --parchment:      #f6f0e4;
  --candle:         #e3c38a;
  --serif:          "EB Garamond", Georgia, "Times New Roman", serif;

  /* radius */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* shadow */
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh:    0 12px 32px -12px rgba(0,0,0,.7);
  --sh-lg: 0 40px 80px -32px rgba(0,0,0,.85);

  /* rhythm */
  --pad-x:  clamp(20px, 5vw, 40px);
  --sec-y:  clamp(72px, 10vw, 136px);
  --max:    1200px;
  --max-wide: 1320px;
  --max-narrow: 800px;

  --nav-h: 68px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #26324a var(--ink);
  accent-color: var(--blue-2);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body{
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4{ margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -.022em; }
p{ margin: 0; text-wrap: pretty; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
img, picture, svg{ display: block; max-width: 100%; }
img{ height: auto; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a{ color: var(--blue-2); text-decoration: none; }
abbr{ text-decoration: none; }
strong{ font-weight: 600; color: var(--text); }
::selection{ background: rgba(96,165,250,.32); color: #fff; }

.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }
.icon{
  width: 1.25em; height: 1.25em;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

:where(a, button, [tabindex]):focus-visible{
  outline: 2px solid var(--blue-2);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link{
  position: absolute; left: 12px; top: -80px; z-index: 200;
  padding: 12px 18px; border-radius: var(--r-sm);
  background: var(--blue-deep); color: #fff; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus{ top: 12px; }

.container{
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container-narrow{ max-width: var(--max-narrow); }

.section{ padding-block: var(--sec-y); position: relative; }

/* section headers */
.section-head{ max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head-center{ margin-inline: auto; text-align: center; }
.section-head h2{
  font-size: clamp(1.9rem, 1.25rem + 2.6vw, 3.1rem);
  margin-bottom: 18px;
}
.section-lead{
  color: var(--text-2);
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem);
  max-width: 62ch;
}
.section-head-center .section-lead{ margin-inline: auto; }

/* the one emphasised line in a heading: a colour step, not a gradient */
.accent{ color: var(--blue-2); }

/* ---------- 3. BUTTONS ---------- */
.btn{
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  min-height: 44px;
  border-radius: var(--r-pill);
  font-size: .94rem; font-weight: 600; letter-spacing: -.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease), box-shadow .25s var(--ease), color .2s var(--ease);
}
.btn-lg{ padding: 14px 28px; min-height: 52px; font-size: 1rem; }
.btn .icon{ width: 1.15em; height: 1.15em; }

/* white text holds at least 4.6:1 across the whole button, hover included */
.btn-primary{
  background: linear-gradient(180deg, var(--blue-cta), var(--blue-deep));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 8px 18px -10px rgba(0,0,0,.85);
}
.btn-primary:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg, #2b6cf0, #1f55de);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 14px 26px -12px rgba(0,0,0,.9);
}
.btn-primary:active{ transform: translateY(0); }

.btn-outline{
  background: rgba(255,255,255,.02);
  border-color: var(--line-2);
  color: var(--text);
}
.btn-outline:hover{
  transform: translateY(-2px);
  border-color: var(--line-3);
  background: rgba(96,165,250,.07);
}

.cta-row{ display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 4. NAVIGATION ---------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              backdrop-filter .3s var(--ease);
}
.site-header.is-stuck{
  background: rgba(8, 13, 26, .78);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}

.nav-inner{
  display: flex; align-items: center; gap: 20px;
  min-height: var(--nav-h);
}

.brand{ display: inline-flex; align-items: center; gap: 11px; color: var(--text); }
.brand-mark{ width: 30px; height: 30px; }
.brand-name{
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em;
}

.nav-actions{
  display: flex; align-items: center; gap: clamp(8px, 1.6vw, 20px);
  margin-left: auto;
}
.nav-link{
  color: var(--text-2);
  font-size: .92rem; font-weight: 500;
  padding: 8px 2px;
  transition: color .2s var(--ease);
}
.nav-link:hover{ color: var(--text); }

/* Phones: the link and Download fold into a dropdown. It is a <details>
   disclosure, so it opens and closes with no JavaScript at all; main.js only
   adds closing on Escape, on a tap outside it, or on a tap on one of its links. */
.nav-menu{ display: none; }
.nav-toggle{
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: rgba(255,255,255,.03);
  color: var(--text);
  list-style: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.nav-toggle::-webkit-details-marker{ display: none; }
.nav-toggle::marker{ content: ""; }
.nav-toggle:hover{ border-color: var(--line-3); background: rgba(96,165,250,.08); }
.nav-toggle .icon{ grid-area: 1 / 1; width: 22px; height: 22px; }
.nav-toggle .icon-shut,
.nav-menu[open] .icon-open{ display: none; }
.nav-menu[open] .icon-shut{ display: block; }
.nav-menu[open] .nav-toggle{ border-color: rgba(96,165,250,.55); background: rgba(96,165,250,.1); }
.nav-drop{
  position: absolute; top: calc(100% + 8px); left: var(--pad-x); right: var(--pad-x);
  display: grid; gap: 10px;
  padding: 10px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: rgba(10,16,32,.97);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.9);
  animation: drop-in .22s var(--ease-out);
}
@keyframes drop-in{ from{ opacity: 0; transform: translateY(-6px); } }
.nav-drop-link{
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 0 14px;
  border-radius: var(--r-sm);
  color: var(--text); font-size: 1.02rem; font-weight: 600;
  transition: background-color .2s var(--ease);
}
.nav-drop-link:hover{ background: rgba(96,165,250,.08); }
.nav-drop-link .icon{ width: 18px; height: 18px; color: var(--text-3); }
.nav-drop .btn{ width: 100%; }
/* the header turns solid while the menu is open, even at the top of the page */
.site-header:has(.nav-menu[open]){ background: rgba(8,13,26,.94); border-bottom-color: var(--line); }

@media (max-width: 700px){
  .nav-actions > .nav-link,
  .nav-actions > .nav-cta{ display: none; }
  .nav-menu{ display: block; }
}

/* ---------- APP FRAME (shared product treatment) ---------- */
.app-frame{
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #0d1527, #080d1a);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.app-bar{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.022);
}
.app-title{
  display: flex; align-items: center; gap: 7px;
  color: var(--text-3); font-size: .74rem; font-weight: 500; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-title img{ width: 15px; height: 15px; }
.app-shot{ width: 100%; display: block; }


/* ---------- 5. HERO ---------- */
/* Centred composition: headline, actions, then the product interface as the
   single large object beneath them. */
.hero{
  position: relative;
  padding-top: clamp(88px, 10vw, 156px);
  padding-bottom: clamp(56px, 8vw, 112px);
  overflow: hidden;
  text-align: center;
}
.hero .container{ max-width: 1400px; }
.hero-inner{ position: relative; z-index: 1; }

/* one soft light from above, painted on the section rather than a blurred blob */
.hero, .page-hero, .notfound{
  background-image: radial-gradient(ellipse 72% 58% at 50% 0%, rgba(37,99,235,.17), transparent 72%);
}
.hero-atmos{ position: absolute; inset: 0; pointer-events: none; }
.hero-fade{
  position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  background: linear-gradient(180deg, transparent, var(--ink));
  pointer-events: none;
}

.hero h1{
  font-size: clamp(2.3rem, 1.2rem + 4.3vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -.038em;
  margin-bottom: clamp(28px, 3.2vw, 44px);
  text-wrap: balance;
}
.hero h1 span{ display: block; }

/* The page's one authored entrance. Pure CSS, so a script that fails to load
   can never leave the hero hidden: the lines rise out of a slight blur in
   turn, the actions follow, and the laptop settles. The laptop never fades,
   so the product screenshot paints (and counts for LCP) straight away. */
@media (prefers-reduced-motion: no-preference){
  .hero h1 span,
  .hero .cta-row{ animation: hero-rise 1s var(--ease-out) both; }
  .hero h1 span:nth-child(2){ animation-delay: .08s; }
  .hero h1 span:nth-child(3){ animation-delay: .16s; }
  .hero .cta-row{ animation-delay: .26s; }
  .hero-stage{ animation: hero-settle 1.4s var(--ease-out) .2s both; }
}
@keyframes hero-rise{
  from{ opacity: 0; transform: translateY(.4em); filter: blur(6px); }
}
@keyframes hero-settle{
  from{ transform: translateY(26px) scale(.985); }
}

.hero .cta-row{
  justify-content: center;
  margin-bottom: 14px;
}
.hero-meta{
  margin-bottom: clamp(58px, 6.4vw, 92px);
  color: var(--text-3);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- LAPTOP MOCKUP (hero) ---------- */
.laptop{
  --bezel: clamp(8px, 1vw, 13px);
  position: relative; z-index: 1;
  margin: 0 auto;
  max-width: 1010px;
}

.laptop-screen{
  position: relative;
  padding: var(--bezel);
  padding-bottom: calc(var(--bezel) * 1.7);
  border-radius: clamp(10px, 1.2vw, 16px) clamp(10px, 1.2vw, 16px) 6px 6px;
  background: linear-gradient(180deg, #202b40, #131b2b 60%, #0d1422);
  box-shadow:
    0 0 0 1px rgba(150,178,224,.14),
    0 48px 90px -36px rgba(0,0,0,.92);
  /* a query container, so the demo layer can size itself in cqw: % of the
     screenshot's rendered width (the content box is exactly the screenshot) */
  container-type: inline-size;
}
/* the camera dot on the top bezel */
.laptop-screen::before{
  content: "";
  position: absolute; top: calc(var(--bezel) / 2 - 1.5px); left: 50%;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%;
  background: rgba(150,178,224,.35);
}
.laptop-screen picture,
.laptop-screen .app-shot{
  display: block; width: 100%;
  border-radius: 3px;
}
.laptop-screen .app-shot{ background: #05080f; }

/* deck: slightly wider than the lid, as a real laptop is */
.laptop-base{
  position: relative;
  width: calc(100% + clamp(28px, 4.5vw, 64px));
  margin-left: calc(clamp(28px, 4.5vw, 64px) / -2);
  height: clamp(11px, 1.3vw, 17px);
  border-radius: 0 0 clamp(9px, 1.1vw, 14px) clamp(9px, 1.1vw, 14px);
  background: linear-gradient(180deg, #33415e 0%, #1d2739 55%, #0d1422 100%);
  box-shadow:
    inset 0 1px 0 rgba(170,197,240,.22),
    0 20px 38px -14px rgba(0,0,0,.95);
}
/* the thumb notch */
.laptop-base span{
  position: absolute; top: 0; left: 50%;
  width: clamp(56px, 9vw, 104px); height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 5px 5px;
  background: rgba(3, 6, 14, .55);
}

/* ---------- HERO BACKGROUND SLIDES ---------- */
/* Three service photos crossfade on a 24s loop: each holds for ~8s, with a
   ~1.5s overlap into the next. Kept very faint so the text and laptop lead. */
.hero-slides{
  position: absolute; inset: 0;
  /* fade the photos out towards the top and bottom edges */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%);
}
.hero-slide{
  --slide-o: .11;
  position: absolute; inset: 0;
  display: block;
  opacity: 0;
  animation: hero-slide 24s linear infinite;
  will-change: opacity;
}
.hero-slide img{ width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-slide:nth-child(2){ animation-delay: 8s; }
.hero-slide:nth-child(3){ animation-delay: 16s; }

/* a plain crossfade, no zoom: the background never competes with the demo */
@keyframes hero-slide{
  0%   { opacity: 0; }
  6%   { opacity: var(--slide-o); }
  33%  { opacity: var(--slide-o); }
  39%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- HERO: THE APP'S FIVE VIEWS ---------- */
.hero-stage{ --hold: 4600ms; position: relative; max-width: 1010px; margin-inline: auto; }

/* The five screenshots stack exactly (tools/build_assets.py cuts them all to
   one size): the first stays in the flow and sizes the screen, the others lie
   on top of it and crossfade in turn. */
.app-views{ position: relative; }
.app-view{ display: block; transition: opacity .8s var(--ease); }
.app-view:not(:first-child){ position: absolute; inset: 0; }
.app-view:not(:first-child) img{ height: 100%; object-fit: cover; }
.app-view:not(.is-shown){ opacity: 0; }

/* An invisible clock. The end of its animation moves the laptop on to the
   next view, so pausing the animation (hover, focus, off screen) pauses the
   tour exactly where it is, and the chip's progress bar with it. */
.views-clock{ position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.views-clock.is-running{ animation: views-clock var(--hold) linear; }
@keyframes views-clock{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
.hero-stage.is-paused .views-clock,
.hero-stage.is-paused .chip-timer{ animation-play-state: paused; }

/* floating menu chips */
.hero-controls{ display: none; }
.hero-chip{
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
  /* the drag offset lives in `translate`, the drift in `transform` and the
     press in `scale`, so all three compose */
  translate: var(--dx, 0px) var(--dy, 0px);
  cursor: grab;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  animation: chip-drift var(--drift, 12s) ease-in-out infinite;
  /* on release the chip glides home: a short pause, then a slow ease-out */
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), scale .12s var(--ease),
              translate 1.8s cubic-bezier(.22, 1, .36, 1) .3s;
}
/* while held, the chip must track the pointer with no lag */
.hero-chip.is-held{
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), scale .12s var(--ease);
}
.hero-chip.is-dragging{
  cursor: grabbing; z-index: 5;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(96,165,250,.45);
}
.hero-chip .icon{ width: 15px; height: 15px; }

/* The app's own sidebar menu, as chips: outlined while idle, and filled the
   way the app fills its selected menu item while that view is on screen. */
.chip-view{
  cursor: pointer;
  background: rgba(6,10,20,.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.chip-view .icon{ color: var(--text-3); transition: color .25s var(--ease); }
.chip-view:hover{ color: var(--text); border-color: var(--line-3); }
.chip-view:active{ scale: .95; }
.chip-view.is-active{
  color: #fff;
  border-color: rgba(47,128,255,.7);
  background: rgba(18,36,69,.94);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.8);
}
.chip-view.is-active .icon{ color: #7db0ff; }
.chip-view[data-view="saved-verses"] .icon{ color: #e5484d; }   /* the app's red pin */
/* how long this view has left on the laptop */
.chip-timer{
  position: absolute; left: 16px; right: 16px; bottom: 5px;
  height: 2px; border-radius: 2px;
  background: rgba(125,176,255,.85);
  transform: scaleX(0); transform-origin: left;
  opacity: 0;
}
.hero-stage.is-touring .chip-view.is-active .chip-timer{
  opacity: 1;
  animation: views-clock var(--hold) linear forwards;
}

/* three above the laptop and two below it, clear of the screen */
.chip-view[data-slot="tl"]{ bottom: 100%; left: 2%;   margin-bottom: 16px; --drift: 11s;   animation-delay: -.6s; }
.chip-view[data-slot="tc"]{ bottom: 100%; left: 0; right: 0; width: max-content; margin: 0 auto 16px;
                            --drift: 12.5s; animation-delay: -3.1s; }
.chip-view[data-slot="tr"]{ bottom: 100%; right: 2%;  margin-bottom: 16px; --drift: 10.2s; animation-delay: -5.4s; }
.chip-view[data-slot="bl"]{ top: 100%;    left: 14%;  margin-top: 18px;    --drift: 13s;   animation-delay: -7.2s; }
.chip-view[data-slot="br"]{ top: 100%;    right: 14%; margin-top: 18px;    --drift: 11.6s; animation-delay: -2s; }

/* slow, slight, two-axis wander */
@keyframes chip-drift{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  30%     { transform: translate3d(3px, -5px, 0); }
  65%     { transform: translate3d(-3px, -2px, 0); }
}

/* Only the chip being aimed at holds still: the rest keep drifting. */
.hero-chip:hover,
.hero-chip:focus-visible,
.hero-chip.is-dragging{ animation-play-state: paused; }

/* the chips only appear where the full interface shows and the gutters allow */
@media (min-width: 901px){
  .js .hero-controls{ display: block; }
}

/* ---------- PHOTO BAND ---------- */
.photo-band{
  position: relative;
  display: grid;
  min-height: clamp(360px, 46vw, 560px);
  border-block: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.photo-band picture,
.photo-band-veil,
.photo-band-copy{ grid-area: 1 / 1; }
.photo-band-img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
}
.photo-band-veil{
  /* dark enough for white text bottom-left, light enough that the room reads */
  background:
    linear-gradient(180deg, rgba(6,10,20,.48) 0%, rgba(6,10,20,.14) 38%, rgba(6,10,20,.9) 100%),
    linear-gradient(90deg, rgba(6,10,20,.72) 0%, rgba(6,10,20,0) 58%);
}
.photo-band-copy{
  position: relative; z-index: 1;
  align-self: end;
  padding-block: clamp(36px, 6vw, 72px);
  max-width: var(--max);
}
.photo-band-copy h2{
  font-size: clamp(1.7rem, 1.15rem + 2.3vw, 2.9rem);
  max-width: 16ch;
  margin-bottom: 16px;
  text-wrap: balance;
}
.photo-band-copy p{
  color: var(--text-2);
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem);
  max-width: 52ch;
}

/* ---------- WHY: photo beside the copy ---------- */
.why-top{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.why-media{
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.why-media img{
  display: block; width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover; object-position: center 42%;
}
.section-why .why-head{ text-align: left; margin: 0; max-width: none; }
.section-why .why-lead{ margin-inline: 0; }

/* ---------- CTA backdrop photo ---------- */
.cta-photo{
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cta-photo img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  opacity: .22;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
}
/* keep the copy column off the busy part of the photo */
.cta-photo::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(6,10,23,.93) 0%, rgba(6,10,23,.72) 34%, rgba(6,10,23,.3) 62%, rgba(6,10,23,.12) 100%);
}

/* ---------- who it's for: supporting photo ---------- */
.who-photo{
  margin: 0 0 clamp(26px, 4vw, 40px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.who-photo img{
  display: block; width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover; object-position: center 46%;
}

/* ---------- 404 ---------- */
.notfound{
  position: relative; overflow: hidden;
  padding-block: clamp(88px, 11vw, 156px);
  text-align: center;
}
.notfound-inner{ position: relative; z-index: 1; }
.notfound-code{
  font-size: clamp(4.5rem, 3rem + 7vw, 9rem);
  font-weight: 700; line-height: 1; letter-spacing: -.05em;
  color: rgba(150,178,224,.16);
  margin-bottom: 8px;
}
.notfound-screen{
  display: grid; place-items: end start;
  width: min(360px, 80%); aspect-ratio: 16 / 9;
  margin: 0 auto 36px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: #000;
  box-shadow: var(--sh-lg);
}
.notfound-screen .live-pip i{ background: var(--text-3); box-shadow: none; animation: none; }
.notfound h1{
  font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3rem);
  margin-bottom: 14px;
}
.notfound-lead{
  color: var(--text-2);
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem);
  margin: 0 auto 34px; max-width: 44ch;
}
.notfound .cta-row{ justify-content: center; }

/* ---------- INTRO (landing page) ---------- */
.section-intro{
  background: linear-gradient(180deg, var(--ink), var(--surface) 45%, var(--ink));
  border-block: 1px solid var(--line);
}
.intro-grid{
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.intro-copy h2{
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.85rem);
  margin-bottom: 18px;
}
.intro-list{
  display: grid; gap: 12px;
  margin: 28px 0 0;
}
.intro-list li{
  position: relative;
  padding-left: 26px;
  color: var(--text-2);
  font-size: .97rem;
}
.intro-list li::before{
  content: "";
  position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue-2);
  box-shadow: 0 0 0 3px rgba(96,165,250,.14);
}
.intro-link{ margin-top: 30px; }
.intro-link a{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .97rem; font-weight: 600;
  transition: gap .2s var(--ease);
}
.intro-link a:hover{ gap: 13px; }
.intro-link .icon{ width: 1.05em; height: 1.05em; }
.app-frame-intro{ max-width: 520px; margin-inline: auto; }
.app-frame-intro .app-shot{ display: block; }

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{
  position: relative;
  overflow: hidden;
  padding-top: clamp(76px, 9vw, 124px);
  padding-bottom: clamp(44px, 6vw, 76px);
}
.crumbs{ margin-bottom: 26px; }
.crumbs ol{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crumbs li{ color: var(--text-3); font-size: .84rem; }
.crumbs li + li::before{
  content: "/";
  margin-right: 10px;
  color: var(--line-3);
}
.crumbs a{ display: inline-block; padding-block: 4px; color: var(--text-2); }
.crumbs a:hover{ color: var(--blue-2); }
.page-hero h1{
  position: relative; z-index: 1;
  font-size: clamp(2.1rem, 1.35rem + 3vw, 3.5rem);
  letter-spacing: -.032em;
  max-width: 16ch;
  margin-bottom: 18px;
}
.page-hero-lead{
  position: relative; z-index: 1;
  color: var(--text-2);
  font-size: clamp(1rem, .96rem + .4vw, 1.15rem);
  max-width: 46ch;
}

/* ---------- DOWNLOADS (/download) ---------- */
/* Every release is a row of one table, newest first (main.js guards the
   order). Each release is its own <tbody>: its row, then its details, which
   the row opens and closes. Every release starts collapsed. */
.page-hero-download h1{ max-width: 22ch; text-wrap: balance; }
.section-downloads{ padding-top: clamp(4px, 1.6vw, 20px); }

.release-table-wrap{
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: rgba(10,16,32,.5);
  overflow: hidden;
}
.release-table{
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.release-table thead th{
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(255,255,255,.02);
  color: var(--text-3);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  white-space: nowrap;
}
.release-table .col-date{ width: 9.5rem; }
.release-table .col-size{ width: 6.5rem; }
.release-table .col-get{ width: 1%; text-align: right; }

.release-row{ cursor: pointer; transition: background-color .2s var(--ease); }
.release-row:hover{ background: rgba(96,165,250,.04); }
.release-row > *{
  padding: 14px 20px;
  vertical-align: top;
  color: var(--text-2);
  font-size: .94rem; font-weight: 400;
  white-space: nowrap;
}
/* everything hangs from the top of the row; the date and size drop ~10px
   so their text sits level with the version, centred in its 44px button */
.release-row > .col-date,
.release-row > .col-size{ padding-top: 24px; }
.release + .release .release-row > *{ border-top: 1px solid var(--line); }
.release.is-open .release-row,
.release.is-open .release-more{ background: rgba(96,165,250,.05); }

.release-id{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.release-toggle{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0;
  color: var(--text);
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em;
}
.release-toggle .icon{
  width: 18px; height: 18px;
  color: var(--text-3);
  transition: transform .3s var(--ease), color .2s var(--ease);
}
.release-row:hover .release-toggle .icon{ color: var(--text-2); }
.release.is-open .release-toggle .icon{ transform: rotate(90deg); color: var(--blue-2); }
/* without JavaScript every release shows its details and nothing toggles */
html:not(.js) .release-toggle .icon{ display: none; }

.release-tags{ display: flex; flex-wrap: wrap; gap: 8px; }
.release-tag{
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  color: var(--text-2); font-size: .7rem; font-weight: 600;
}
.release-tag-latest{ color: #fff; border-color: rgba(96,165,250,.55); background: rgba(37,99,235,.24); }
/* a compact 36px button, centred on the 44px version line, with a 44px
   hit area around it like the copy buttons */
.release-get{
  position: relative;
  min-height: 36px; margin-block: 4px;
  padding: 6px 14px; gap: 6px;
  font-size: .84rem;
}
.release-get::after{ content: ""; position: absolute; inset: -4px; }

/* the details open like the FAQ answers: expanded without JavaScript, and
   collapsing is layered on once it runs */
.release-more > td{ padding: 0; }
.release-panel{
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .38s var(--ease);
}
.release-panel > div{ overflow: hidden; min-height: 0; }
.js .release-panel{ grid-template-rows: 0fr; }
.js .release-panel > div{ visibility: hidden; transition: visibility 0s .38s; }
.js .release.is-open .release-panel{ grid-template-rows: 1fr; }
.js .release.is-open .release-panel > div{ visibility: visible; transition-delay: 0s; }

/* indented to line up with the version number, past the chevron */
.release-body{ padding: 0 20px 18px 48px; }
.release-notes{ margin-bottom: 12px; color: var(--text-2); font-size: .96rem; max-width: 60ch; }
/* a release's changes, when its notes list them: two columns of short lines */
.release-changes{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 32px;
  max-width: 780px;
  margin-bottom: 16px;
}
.release-changes li{
  position: relative;
  padding-left: 18px;
  color: var(--text-2); font-size: .92rem;
}
.release-changes li::before{
  content: "";
  position: absolute; left: 3px; top: .66em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue-2);
}

/* the facts read as a spec sheet: label, value, hairline */
.release-facts{ margin: 0; max-width: 780px; }
.release-facts > div{
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.release-facts dt{
  color: var(--text-3);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
}
.release-facts dd{ margin: 0; min-width: 0; color: var(--text); font-size: .94rem; }
.release-bytes{ color: var(--text-3); }
.release-facts code{
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: .84rem;
  color: var(--text-2);
  /* a checksum carries a <wbr> at its midpoint, so it splits into two even
     halves; only a screen too narrow for half of it breaks it anywhere */
  overflow-wrap: anywhere;
}
.release-sum dd{ display: flex; align-items: center; gap: 12px; }
.release-link{
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  color: var(--text-2); font-size: .86rem; font-weight: 500;
  transition: color .2s var(--ease);
}
.release-link:hover{ color: var(--blue-2); }
.release-link .icon{ width: 14px; height: 14px; }

/* ---------- 6. PRODUCT SHOWCASE ---------- */
.section-showcase{
  background: linear-gradient(180deg, var(--ink), var(--surface) 42%, var(--ink));
  border-block: 1px solid var(--line);
}
/* the stage runs wider than the text measure; the heading stays on it */
.container-wide{ max-width: 1440px; }


/* ---------- 7. FEATURES ---------- */
/* a ruled list rather than a wall of boxes: each item hangs from a hairline.
   Nine items, so three columns of three (two on tablets, one on phones). */
.feature-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px) clamp(28px, 3.6vw, 52px);
}
.feature-card{
  padding: 24px 0 28px;
  border-top: 1px solid var(--line-2);
}
.feature-icon{
  width: 22px; height: 22px; margin-bottom: 16px;
  color: var(--blue-2);
}
.feature-card h3{ font-size: 1.06rem; margin-bottom: 8px; }
.feature-card p{ color: var(--text-2); font-size: .93rem; }

/* ---------- 8. HOW IT WORKS ---------- */
.section-steps{
  background: linear-gradient(180deg, var(--ink), var(--surface-2) 50%, var(--ink));
  border-block: 1px solid var(--line);
}
.steps-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
.steps-list{ display: grid; gap: 10px; }

.step{
  border: 1px solid transparent;
  border-radius: var(--r);
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.step.is-active{
  border-color: var(--line-2);
  background: linear-gradient(180deg, rgba(18,29,52,.9), rgba(10,16,32,.6));
}
.step-btn{
  display: flex; gap: 18px; width: 100%;
  padding: 22px 22px 24px;
  text-align: left;
  border-radius: inherit;
}
.step-num{
  color: var(--text-3); font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  padding-top: 4px; flex: none;
  transition: color .35s var(--ease);
}
.step.is-active .step-num{ color: var(--blue-2); }
.step-text{ display: block; }
.step-title{
  display: flex; align-items: center; gap: 10px;
  font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--text-2);
  margin-bottom: 8px;
  transition: color .35s var(--ease);
}
.step-title .icon{ width: 19px; height: 19px; color: var(--text-3); transition: color .35s var(--ease); }
.step.is-active .step-title{ color: var(--text); }
.step.is-active .step-title .icon{ color: var(--blue-2); }
.step-desc{ display: block; color: var(--text-2); font-size: .94rem; }

.step-media-inline{ display: none; margin: 0 22px 22px; }
.step-media-inline img{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink);
}

.steps-media{ position: sticky; top: calc(var(--nav-h) + 32px); }
.app-frame-step{ background: linear-gradient(180deg, #0d1527, #070c17); }
.step-stage{
  --stage-pad: clamp(12px, 1.8vw, 22px);
  position: relative;
  aspect-ratio: 16 / 11;
  padding: var(--stage-pad);
}
.step-img{
  position: absolute; inset: var(--stage-pad);
  width: calc(100% - 2 * var(--stage-pad));
  height: calc(100% - 2 * var(--stage-pad));
  object-fit: contain;
  opacity: 0; transform: scale(.975) translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.6));
}
.step-img.is-shown{ opacity: 1; transform: none; }

/* ---------- 9. VISUAL CUSTOMIZATION ---------- */
.visual-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.visual-card{
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--card), var(--ink-2));
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.visual-card:hover{ border-color: var(--line-3); }
.visual-body{ flex: 1 1 auto; padding: 24px 30px 30px; }
.visual-body h3{ font-size: 1.18rem; margin-bottom: 10px; }
.visual-body p{ color: var(--text-2); font-size: .95rem; max-width: 46ch; }

.visual-media{
  position: relative;
  flex: none;
  height: clamp(190px, 24vw, 264px);
  padding: 28px 30px 8px;
  display: flex; align-items: center; justify-content: center;
}
.visual-media img{
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain;          /* never crop or stretch the real interface */
  padding: 7px;
  background: #070c17;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: var(--sh);
  transition: transform .45s var(--ease);
}

/* ---------- 10. SCRIPTURE ---------- */
.section-scripture{
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--ink), #070d1e 40%, var(--ink));
  border-block: 1px solid var(--line);
}

.scripture-stage{
  position: relative;
  max-width: 940px; margin-inline: auto;
}
.scripture-screen{
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(280px, 34vw, 420px);
  padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 72px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  /* the product's deep blue, with a little lamplight falling from above */
  background:
    radial-gradient(ellipse 80% 70% at 50% -8%, rgba(227,195,138,.13), transparent 64%),
    linear-gradient(165deg, #0b1733, #060b18 70%);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
/* Passages change by a slow crossfade and nothing else: the Word holds still */
.verse{
  grid-area: 1 / 1;
  margin: 0; text-align: center;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  pointer-events: none;
}
.verse.is-shown{ opacity: 1; pointer-events: auto; }
.verse blockquote{ margin: 0; }
/* set in a book face, so the Word reads as distinct from the interface */
.verse blockquote p{
  max-width: 30ch; margin-inline: auto;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.05rem + 2.3vw, 2.8rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--parchment);
}
.verse figcaption{
  margin-top: clamp(20px, 3vw, 30px);
  color: var(--candle);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.verse figcaption span{ color: var(--text-3); margin-left: 8px; letter-spacing: .1em; }
.sc{ font-size: .8em; letter-spacing: .06em; }

.scripture-controls{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 20px;
}
.live-pip{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-3); font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.live-pip i{
  width: 7px; height: 7px; border-radius: 50%;
  background: #f87171;
  animation: pulse 3.2s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }

.verse-dots{ display: flex; gap: 4px; }
/* The bar is 4px tall but the button is 44px, so it is easy to tap. */
.verse-dots button{
  position: relative;
  width: 40px; height: 44px; padding: 0;
  background: none;
  transition: width .3s var(--ease);
}
.verse-dots button[aria-pressed="true"]{ width: 60px; }
.verse-dots button::before,
.verse-dots button::after{
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 4px; margin-top: -2px;
  border-radius: var(--r-pill);
}
.verse-dots button::before{ background: var(--line-2); transition: background-color .3s var(--ease); }
.verse-dots button:hover::before{ background: var(--line-3); }

/* the fill drains across the autoplay interval, so the pause on hover is visible */
.verse-dots button::after{
  transform-origin: left;
  transform: scaleX(0);
  background: var(--blue-2);
}
.verse-dots button[aria-pressed="true"]::after{ transform: scaleX(1); }
.js .verse-dots button[aria-pressed="true"].is-timing::after{
  animation: verse-fill var(--verse-ms, 6500ms) linear forwards;
}
@keyframes verse-fill{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

/* ---------- 11. WHO IT'S FOR ---------- */
.who-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px) clamp(24px, 3vw, 44px);
}
.who-card{ padding-top: 22px; border-top: 1px solid var(--line-2); }
.who-card h3{ font-size: 1.06rem; margin-bottom: 8px; }
.who-card p{ color: var(--text-2); font-size: .92rem; }

/* ---------- WHY ---------- */
.section-why{
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--ink), var(--surface) 50%, var(--ink));
  border-block: 1px solid var(--line);
}
.why-head{ text-align: center; max-width: 780px; margin: 0 auto clamp(48px, 7vw, 80px); }
.why-title{
  font-size: clamp(2.15rem, 1.3rem + 3.6vw, 4rem);
  line-height: 1.06; letter-spacing: -.035em;
  margin-bottom: 24px;
}
.why-lead{
  color: var(--text-2);
  font-size: clamp(1rem, .96rem + .35vw, 1.18rem);
  max-width: 54ch; margin-inline: auto;
}
.why-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(8px, 1vw, 12px) clamp(28px, 3.6vw, 52px);
}
.why-card{ padding-top: 24px; border-top: 1px solid var(--line-2); }
.why-card h3{ font-size: 1.1rem; margin-bottom: 8px; }
.why-card p{ color: var(--text-2); font-size: .94rem; }

/* ---------- FAQ ---------- */
.section-faq{
  background: linear-gradient(180deg, var(--ink), var(--surface-2) 55%, var(--ink));
  border-block: 1px solid var(--line);
}
.faq-list{
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(10,16,32,.5);
  overflow: hidden;
}
.faq-item + .faq-item{ border-top: 1px solid var(--line); }
.faq-item h3{ margin: 0; font-size: inherit; font-weight: inherit; }
.faq-q{
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%;
  padding: 22px clamp(20px, 3vw, 28px);
  text-align: left;
  font-size: clamp(.98rem, .95rem + .2vw, 1.06rem);
  font-weight: 600; letter-spacing: -.012em;
  color: var(--text);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.faq-q:hover{ background: rgba(96,165,250,.05); }
.faq-chevron{
  width: 20px; height: 20px; color: var(--text-3);
  transition: transform .35s var(--ease), color .25s var(--ease);
}
.faq-q[aria-expanded="true"]{ color: var(--blue-2); }
.faq-q[aria-expanded="true"] .faq-chevron{ transform: rotate(180deg); color: var(--blue-2); }

/* Answers are expanded by default so a no-JS visitor still reads them;
   the collapsing accordion is layered on only once JS is running. */
.faq-panel{
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .38s var(--ease);
}
.faq-panel > div{ overflow: hidden; }

.js .faq-panel{ grid-template-rows: 0fr; }
.js .faq-panel > div{ visibility: hidden; transition: visibility 0s .38s; }
.js .faq-item.is-open .faq-panel{ grid-template-rows: 1fr; }
.js .faq-item.is-open .faq-panel > div{ visibility: visible; transition-delay: 0s; }
.faq-panel p{
  padding: 0 clamp(20px, 3vw, 28px) 24px;
  color: var(--text-2);
  font-size: .96rem;
  max-width: 68ch;
}

/* ---------- FINAL CTA ---------- */
.final-cta{
  position: relative; overflow: hidden;
  padding-block: var(--sec-y);
  background: linear-gradient(180deg, var(--ink), #080f24 55%, #060a17);
  border-top: 1px solid var(--line);
}
.cta-grid{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
  max-width: var(--max-wide);
}
.cta-copy h2{
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  margin-bottom: 20px;
}
.cta-copy > p{
  color: var(--text-2);
  font-size: clamp(1rem, .96rem + .35vw, 1.15rem);
  max-width: 44ch;
  margin-bottom: 34px;
}
.cta-meta{
  margin-top: 18px;
  color: var(--text-3); font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.cta-meta + .cta-note{ margin-top: 6px; }
.cta-note{
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: 22px;
  color: var(--text-3); font-size: .88rem;
}
.cta-note a{ color: var(--text-2); border-bottom: 1px solid var(--line-2); }
.cta-note a:hover{ color: var(--blue-2); border-bottom-color: currentColor; }

.app-frame-cta{ max-width: 620px; margin-inline: auto; }

/* ---------- 12. FOOTER ---------- */
.site-footer{
  background: #04070f;
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 8vw, 88px) 30px;
  overflow: hidden;
}
.footer-top{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(36px, 5vw, 72px);
}
.footer-brand .brand{ margin-bottom: 18px; }
.footer-brand p{
  color: var(--text-3);
  font-size: .92rem;
  max-width: 34ch;
}

.footer-nav{
  display: grid;
  /* content-sized so the contact address never breaks mid-word */
  grid-template-columns: auto auto;
  gap: clamp(28px, 4vw, 72px);
}
.footer-col h2{
  font-size: .74rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.footer-col li + li{ margin-top: 5px; }
.footer-col a{
  display: inline-block; padding-block: 3px;
  color: var(--text-2); font-size: .92rem;
  transition: color .2s var(--ease);
  overflow-wrap: break-word;
}
.footer-col a:hover{ color: var(--text); }

.mail-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mail-link{
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text-2); font-size: .92rem;
  transition: color .2s var(--ease);
}
/* .footer-col a (inline-block) would otherwise win and stack the icon on top */
.footer-col .mail-link{ display: inline-flex; }
.mail-link:hover{ color: var(--text); }
.mail-link .icon{ width: 16px; height: 16px; color: var(--blue-2); flex: none; }

.copy-btn{
  position: relative;
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--line-2); border-radius: var(--r-xs);
  color: var(--text-3);
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
/* the author display rule would otherwise beat the hidden attribute,
   leaving a dead control on no-JS / no-clipboard clients */
.copy-btn[hidden]{ display: none; }
/* a 44px target around the 36px button */
.copy-btn::after{ content: ""; position: absolute; inset: -4px; }
.copy-btn:hover{ color: var(--text); border-color: var(--line-3); background: rgba(96,165,250,.08); }
.copy-btn .icon{ width: 14px; height: 14px; grid-area: 1 / 1; }
.copy-btn .icon-done{ opacity: 0; }
.copy-btn.is-done{ color: #6ee7b7; border-color: rgba(110,231,183,.5); }
.copy-btn.is-done .icon-copy{ opacity: 0; }
.copy-btn.is-done .icon-done{ opacity: 1; }

.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* oversized wordmark, cropped by the footer edge */
.footer-wordmark{
  margin: clamp(44px, 7vw, 88px) 0 0;
  /* sized to sit inside the container; wraps rather than clipping if it ever
     exceeds it, so a fallback font can never break the lockup */
  font-size: clamp(1.8rem, 7.4vw, 88px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.045em;
  color: rgba(150,178,224,.09);
  user-select: none;
}

.footer-bottom{
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px;
  margin-top: clamp(26px, 4vw, 40px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--text-3); font-size: .84rem;
}
.footer-domain{ color: var(--text-3); }

/* ---------- SCROLL REVEAL ---------- */
/* Content is visible by default. The inline script in <head> opts the page
   into reveals before first paint (so nothing flashes), and main.js marks
   itself running with .js-ready. If main.js is blocked or never arrives, the
   failsafe shows everything after 2.5s regardless. Nothing above the fold
   uses .reveal at all. */
.js .reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.js .reveal.is-in{ opacity: 1; transform: none; }
.js:not(.js-ready) .reveal{ animation: reveal-failsafe .6s var(--ease) 2.5s forwards; }
@keyframes reveal-failsafe{ to{ opacity: 1; transform: none; } }

/* stagger cards inside a grid */
.js .feature-grid .reveal:nth-child(3n+2){ transition-delay: .06s; }
.js .feature-grid .reveal:nth-child(3n+3){ transition-delay: .12s; }
.js .who-grid .reveal:nth-child(2),
.js .why-grid .reveal:nth-child(2){ transition-delay: .08s; }
.js .who-grid .reveal:nth-child(3),
.js .why-grid .reveal:nth-child(3){ transition-delay: .16s; }
.js .who-grid .reveal:nth-child(4){ transition-delay: .24s; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* tablet landscape */
@media (max-width: 1080px){
  .cta-grid{ grid-template-columns: minmax(0, 1fr); }
  .cta-copy > p{ max-width: 56ch; }
}

/* tablet portrait */
@media (max-width: 960px){
  .steps-layout{ grid-template-columns: minmax(0, 1fr); }
  .steps-media{ display: none; }
  .step-media-inline{ display: block; }
  .step{ border-color: var(--line); background: rgba(10,16,32,.45); }

  .visual-grid{ grid-template-columns: minmax(0, 1fr); }
  .who-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* an odd one out takes the whole last row rather than sitting alone */
  .feature-card:last-child:nth-child(odd){ grid-column: 1 / -1; }

  .intro-grid{ grid-template-columns: minmax(0, 1fr); }
  .why-top{ grid-template-columns: minmax(0, 1fr); }
  .section-why .why-head{ text-align: center; }
  .section-why .why-lead{ margin-inline: auto; }
  .footer-top{ grid-template-columns: minmax(0, 1fr); }
}

/* phones */
@media (max-width: 700px){
  :root{ --sec-y: clamp(60px, 13vw, 84px); }

  /* The hero fills exactly one screen (minus the sticky header). Text and
     buttons take what they need; the laptop sizes itself to the height that
     is left, so the whole hero is visible without scrolling on any phone. */
  .hero{
    display: flex; flex-direction: column;
    min-height: calc(100svh - var(--nav-h));
    padding-top: clamp(56px, 10svh, 92px);
    padding-bottom: 12px;          /* the laptop sits just above the hero's end */
  }
  /* the service photos show much more on a phone: stronger, zoomed in, and
     filling the top 80% of the hero, so the performers stand in the open
     space directly above the headline (framing: HERO_M_FRAME in the pipeline) */
  .hero-slide{ --slide-o: .34; inset: 0 0 auto; height: 80%; }
  .hero-slide img{ object-position: center top; }
  .hero-slides{
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, #000 9%, #000 50%, transparent 82%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, #000 9%, #000 50%, transparent 82%);
  }
  .hero-inner{ flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .hero h1{
    letter-spacing: -.03em;
    font-size: min(8.7vw, 6svh);   /* keeps "Present Scripture." on one line */
    margin-bottom: clamp(22px, 3.4svh, 34px);
  }
  .hero .cta-row{ gap: 10px; margin-bottom: 8px; }
  .hero-meta{ margin-bottom: clamp(16px, 3svh, 30px); font-size: .78rem; }
  /* side by side when they fit, wrapping to full width when they don't */
  .hero .cta-row .btn{
    flex: 1 1 auto;
    min-height: 48px;
    padding: 12px 18px;
    font-size: .95rem;
  }
  .hero-stage{
    flex: 1 1 auto;
    /* auto margins switch off flex stretching, and a size-contained box has
       no content width of its own, so it needs an explicit width here */
    width: 100%;
    min-height: 130px;
    display: flex; align-items: center; justify-content: center;
  }
  .laptop{ --bezel: 7px; width: 100%; }
  .hero-fade{ height: 90px; }

  .feature-grid{ grid-template-columns: minmax(0, 1fr); }

  .who-grid{ grid-template-columns: minmax(0, 1fr); }

  /* releases: version, date and an icon-only download button. The size
     moves to the details, which it is already part of, and each fact's
     label sits above its value so the file name and checksum fit */
  .release-table thead th{ padding: 10px 8px; font-size: .66rem; letter-spacing: .08em; }
  .release-row > *{ padding: 10px 8px; }
  .release-row > .col-date{ padding-top: 20px; font-size: .88rem; }
  .release-table .col-size{ display: none; }
  .release-table .col-date{ width: auto; }
  /* the version and its tag stay on one line */
  .release-id{ gap: 2px 10px; flex-wrap: nowrap; }
  .release-tag{ padding: 1px 7px; font-size: .66rem; }
  .release-get{ width: 36px; padding: 0; }
  .release-get-label{
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .release-body{ padding: 0 8px 16px; }
  .release-facts > div{ grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .release-changes{ grid-template-columns: minmax(0, 1fr); }

  .scripture-controls{ justify-content: center; }

  .footer-bottom{ justify-content: flex-start; }
}

/* Phones at least 600px tall: pin the hero to exactly one screen and let the
   laptop take whatever height is left. Container-height units need a definite
   height, which min-height + flex-grow does not give, hence the fixed height.
   Shorter screens (iPhone SE 1st gen, landscape) keep the flowing layout
   above rather than risk content spilling out of a fixed box. */
@media (max-width: 700px) and (min-height: 600px){
  .hero{ height: calc(100svh - var(--nav-h)); min-height: 0; }
  /* Text + laptop move as one group, pushed down to the bottom of the hero:
     all the spare space goes above the headline, where the photos show. */
  .hero-inner::before{ content: ""; flex: 1 1 0; }
  .hero-stage{
    container-type: size;
    /* just the height a full-width laptop needs; it may shrink, never grow */
    flex: 0 1 calc((100vw - 2 * var(--pad-x)) * .6013 + 22px);
  }
  /* laptop height = (width - 14px bezels) / 1.663 + ~30px of bezel and deck */
  .laptop{ width: min(100%, calc((100cqh - 30px) * 1.663 + 14px)); }
}

/* the narrowest phones: the date and the tag may wrap rather than push the
   table wider than the screen */
@media (max-width: 350px){
  .release-table .col-date{ white-space: normal; }
  .release-id{ flex-wrap: wrap; }
}

@media (max-width: 460px){
  .footer-nav{ grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

@media (max-width: 400px){
  .brand-name{ font-size: .92rem; }
  .brand-mark{ width: 26px; height: 26px; }
  .btn-lg{ padding: 13px 20px; }
}

/* =========================================================================
   REDUCED MOTION: a clean, static experience
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal{ opacity: 1; transform: none; }
  .hero-slide{ animation: none !important; }
  .hero-slide:first-child{ opacity: var(--slide-o); }
  .hero-chip{ animation: none !important; }
  .verse-dots button::after{ animation: none !important; }
  .verse{ transition: opacity .001ms; }
}

/* =========================================================================
   PRINT
   ========================================================================= */
@media print{
  .site-header, .hero-atmos, .hero-controls{ display: none !important; }
  body{ background: #fff; color: #000; }
}