/* site.css — publifye.com
 *
 * Sacred Flame, the family palette. The tokens below are publifye.org's
 * (--bg-primary #0a0f1a, --accent-primary #c9a227) so the two sites read as one
 * house. publifye.com diverges in ONE deliberate way: it is warmer, because it
 * is the reading side — embers rather than gold leaf.
 *
 * Dark is the design, not a mode. The light block is a courtesy for readers who
 * ask the OS for it; every colour is defined on :root first so nothing is only
 * ever defined inside a media query.
 */
:root {
  --pv-h:28rem;
  --bg:        #0a0f1a;
  --bg-2:      #111827;
  --bg-card:   #141c2b;
  --bg-raise:  #1a2334;
  --gold:      #c9a227;
  --gold-2:    #d4af37;
  --ember:     #f0a35e;
  --ember-2:   #ffb066;
  --text:      #f3f4f6;
  --text-2:    #9ca3af;
  --text-3:    #8a9aa8;  /* droide: 6.3:1. #6b7280 was 4.3:1 and fails AA */
  --line:      #2d3748;
  --line-soft: rgba(255,255,255,.06);
  --r-sm: .375rem; --r-md: .625rem; --r-lg: .75rem; --r-xl: 1.1rem;
  --sh-md: 0 4px 12px rgba(0,0,0,.25);
  --sh-lg: 0 8px 32px rgba(0,0,0,.30);
  --wrap: 1120px;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fbfaf8; --bg-2: #f4f2ee; --bg-card: #ffffff; --bg-raise: #ffffff;
    --text: #14181f; --text-2: #4b5563; --text-3: #8a9aa8;
    --line: #e6e2da; --line-soft: rgba(0,0,0,.07);
    --gold: #9a7b12; --gold-2: #b08d1c;
    --sh-md: 0 4px 12px rgba(20,24,31,.07);
    --sh-lg: 0 10px 34px rgba(20,24,31,.09);
  }
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 18px; line-height: 1.72;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--gold-2); text-decoration-color: color-mix(in srgb, var(--gold-2) 40%, transparent); text-underline-offset: .18em; }
a:hover { color: var(--ember-2); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 3px; }

.skip { position:absolute; left:-9999px; top:0; background:var(--bg-card); color:var(--text);
        padding:.7rem 1rem; z-index:100; border-radius:0 0 var(--r-md) 0; }
.skip:focus { left:0; }

h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0 0 .55em; letter-spacing:-.01em; }
h1 { font-size: clamp(2.9rem, 7vw, 5rem); }
h2 { font-size: clamp(2.1rem, 4vw, 3rem); }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.15rem; }
p  { margin: 0 0 1.05rem; }

/* ---------- nav ---------- */
.nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
       gap:1rem; padding:.85rem clamp(1rem,4vw,2.5rem);
       background: color-mix(in srgb, var(--bg) 78%, transparent);
       backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
       border-bottom:1px solid var(--line-soft); }
.brand { display:inline-flex; align-items:center; gap:.6rem; font-weight:600; letter-spacing:.16em;
         font-size:0.9375rem; color:var(--text); text-decoration:none; }
.nav nav { display:flex; align-items:center; gap:clamp(.7rem,2.2vw,1.7rem); font-size:.94rem; }
.nav nav a { color:var(--text-2); text-decoration:none; white-space:nowrap; }
.nav nav a:hover { color:var(--text); }
.btn-ghost { border:1px solid var(--line); padding:.4rem .85rem; border-radius:100px; color:var(--text)!important; }
.btn-ghost:hover { border-color:var(--gold); }
@media (max-width:720px){ .nav nav a:not(.btn-ghost){ display:none; } }

/* ---------- hero ---------- */
.hero { position:relative; isolation:isolate; min-height:clamp(540px,80svh,820px);
        display:grid; place-items:center; text-align:center; overflow:hidden;
        padding:clamp(3rem,10vh,7rem) 1.25rem clamp(4rem,12vh,8rem); }
/* On a wide screen the ember field gets its OWN half. A centred hero has no
   empty region for it, so every previous attempt put the glyph either behind
   the headline or on top of the buttons. Giving it a column solves that by
   composition rather than by dimming it into invisibility. */
.hero-art { position:absolute; inset:0; z-index:-1; }
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
@media (min-width: 1040px) {
  .hero { text-align:left; grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr);
          gap:clamp(2rem,5vw,4rem); align-items:center;
          max-width:calc(var(--wrap) + 6rem); margin:0 auto;
          padding-inline:clamp(1.5rem,5vw,3rem); }
  /* BOTH need an explicit row. Grid auto-placement is forward-only, so with
     the art declared at column 2 first, the text could no longer be put back
     into row 1 — it was pushed to row 2 and the hero grew to ~1390px tall. */
  .hero-art { position:relative; grid-column:2; grid-row:1; inset:auto; z-index:0;
              aspect-ratio:1/1; width:100%;
              /* Uncapped, a 1/1 column on a wide viewport is taller than the
                 hero and drags the whole grid out of alignment. */
              max-height:none; height:auto; margin-inline:auto; align-self:center; }
  .hero-inner { grid-column:1; grid-row:1; margin:0; align-self:center; }
  .hero-inner::before { display:none; }
  .hero .cta { justify-content:flex-start; }
  .hero .lede { margin-left:0; }
}
.hero::before { /* the static picture: an ember bloom from below */
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 78% at 50% 108%, rgba(240,163,94,.30) 0%, rgba(201,162,39,.12) 32%, transparent 68%),
    radial-gradient(80% 55% at 50% 0%, rgba(201,162,39,.09) 0%, transparent 70%);
}
.hero-inner { max-width:52rem; position:relative; }
/* The ember glyph is deliberately large. This scrim keeps the headline
   legible over it without dimming the animation itself. */
.hero-inner::before { content:""; position:absolute; z-index:-1;
  inset:-10% -14% 8% -14%; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--bg) 62%, transparent) 0%,
             color-mix(in srgb, var(--bg) 28%, transparent) 60%, transparent 100%); }
.eyebrow { font-size:0.9375rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2);
           margin:0 0 1.5rem; font-weight:500; }
.hero h1 { margin-bottom:.5em;
  /* The H1 now names the entity as well as the promise (P1: Google read this
     company as an educational-books app), so it is 64 characters rather than
     37. At the old 5rem cap that wrapped to four lines and swamped the lede. */
  font-size:clamp(2.5rem,5.4vw,3.9rem);
  background:linear-gradient(180deg, var(--text) 40%, color-mix(in srgb, var(--text) 62%, var(--ember)) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.lede { font-size:clamp(1.06rem,1.8vw,1.28rem); color:var(--text-2); max-width:44rem; margin:0 auto 2.3rem; }
.cta { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; align-items:center; }
.btn { display:inline-block; padding:.78rem 1.45rem; border-radius:100px; font-weight:600; font-size:.98rem;
       text-decoration:none; background:linear-gradient(135deg,var(--gold-2),var(--ember)); color:#1a1206;
       box-shadow:0 6px 22px rgba(201,162,39,.22); transition:transform .18s ease, box-shadow .18s ease; }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(201,162,39,.32); color:#1a1206; }
.btn-sm { padding:.55rem 1.15rem; font-size:1rem; }
.btn-quiet { background:transparent; color:var(--text)!important; border:1px solid var(--line); box-shadow:none; }
.btn-quiet:hover { border-color:var(--gold); background:color-mix(in srgb,var(--gold) 8%,transparent); }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }
.hero-fade { position:absolute; left:0; right:0; bottom:0; height:11rem; z-index:-1;
             background:linear-gradient(180deg,transparent,var(--bg)); }

/* ---------- sections ---------- */
section { padding:clamp(3.5rem,9vh,6.5rem) clamp(1rem,5vw,2.5rem); }
/* The heading and its lede must share ONE left edge. They used to be two
   centred blocks of different widths, which reads as a mistake at every
   breakpoint above the lede's max-width. */
section > h2, section > .section-lede { max-width:var(--wrap); margin:0 auto .55em; }
section > .section-lede { color:var(--text-2); font-size:1.06rem; margin-bottom:2.8rem; }
section > .section-lede { max-width:var(--wrap); }
.section-lede > span, .lede-w { display:block; max-width:46rem; }
.grid { max-width:var(--wrap); margin:0 auto; display:grid; gap:1.5rem;
        grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); }

.card { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-xl);
        padding:2rem 1.9rem; box-shadow:var(--sh-md); position:relative; overflow:hidden;
        transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.card:hover { border-color:color-mix(in srgb,var(--gold) 45%,var(--line)); transform:translateY(-3px); box-shadow:var(--sh-lg); }
@media (prefers-reduced-motion: reduce){ .card:hover{ transform:none; } }
.card::after { content:""; position:absolute; inset:0 0 auto 0; height:2px;
               background:linear-gradient(90deg,transparent,var(--accent,var(--gold)),transparent); opacity:.55; }
.card-bible { --accent:#5b8def; }
.card-flix  { --accent:#3fb98a; }
.card-mark { font-size:0.9375rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent,var(--gold));
             font-weight:600; margin-bottom:.9rem; }
.card-mark span { opacity:.55; }
.card h3 { margin-bottom:.4em; }
.card p { color:var(--text-2); font-size:.98rem; }
.facts { list-style:none; padding:0; margin:1.1rem 0 1.3rem; }
.facts li { position:relative; padding-left:1.4rem; margin-bottom:.5rem; color:var(--text-2); font-size:1rem; }
.facts li::before { content:""; position:absolute; left:.25rem; top:.62em; width:5px; height:5px;
                    border-radius:50%; background:var(--accent,var(--gold)); }
.card-links { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.6rem; font-size:0.9375rem; }
.note { font-size:1rem; color:var(--text-3); margin:0; }

/* ---------- pillars / estate ---------- */
.estate { background:var(--bg-2); border-block:1px solid var(--line-soft); }
.cols { max-width:var(--wrap); margin:0 auto; display:grid; gap:2.2rem;
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.cols h3, .cols h4 { font-family:var(--sans); font-size:1.02rem; font-weight:600; letter-spacing:.02em;
           color:var(--gold-2); margin-bottom:.6em; }
.cols p { color:var(--text-2); font-size:.97rem; margin:0; }
.estate-cta { max-width:var(--wrap); margin:2.6rem auto 0; }

/* ---------- company ---------- */
.facts-grid { max-width:var(--wrap); margin:0 auto; display:grid; gap:1.6rem 2.4rem;
              grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.facts-grid dt { font-size:0.9375rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); margin-bottom:.3rem; }
.facts-grid dd { margin:0; color:var(--text); font-size:1rem; }

/* ---------- footer ---------- */
.foot { background:var(--bg-2); border-top:1px solid var(--line); padding:3.2rem clamp(1rem,5vw,2.5rem) 2.6rem; }
.foot-in { max-width:var(--wrap); margin:0 auto; }
.foot-brand { display:flex; align-items:center; gap:.55rem; font-weight:600; letter-spacing:.1em;
              font-size:0.9375rem; margin:0 0 .4rem; }
.foot-line { color:var(--text-2); margin:0 0 1.4rem; font-size:.97rem; }
.foot-nav { display:flex; gap:1.4rem; flex-wrap:wrap; margin-bottom:1.6rem; font-size:1rem; }
.foot-nav a { color:var(--text-2); text-decoration:none; }
.foot-nav a:hover { color:var(--gold-2); }
.foot-legal { color:var(--text-3); font-size:1rem; margin:0; padding-top:1.4rem; border-top:1px solid var(--line-soft); }

/* ---------- platform + services ---------- */
.card-darash  { --accent:#c9a227; }
.card-junifye { --accent:#a06be0; }
.services { background:
  radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 70%),
  var(--bg); border-top:1px solid var(--line-soft); }
.services-in { max-width:var(--wrap); margin:0 auto; }
.services-in > h2, .services-in > .section-lede { margin-left:0; margin-right:0; }
.services .section-lede { max-width:52rem; }

/* ---------- the shared constellation footer ---------- */
/* anav ships its own CSS inline; this only seats it on our ground. */
.anav-footer { background: var(--bg-2) !important; margin-top: 0 !important; }

/* publifye.org's app.css has no prefers-reduced-motion block at all. This site
   is the better sibling on that point: every transition and the ember field
   both stand down. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card:hover, .btn:hover { transform: none; }
}

/* ---------- books + the gift band ---------- */
.books { background:var(--bg-2); border-block:1px solid var(--line-soft); }
.books > h2, .books > .section-lede, .books > .cols, .books > .band { max-width:var(--wrap); margin-inline:auto; }
.sub-h { font-family:var(--sans); font-size:1rem; font-weight:600; letter-spacing:.13em;
         text-transform:uppercase; color:var(--text-3); margin:3.4rem 0 1.6rem; }
/* The gift band: a whole-strip link, quiet by design — an offer, not a campaign. */
.band { display:flex; align-items:center; gap:2rem; flex-wrap:wrap;
        margin-top:3rem; padding:1.75rem 2rem; text-decoration:none;
        background:var(--bg-card); border:1px solid var(--line);
        border-left:3px solid var(--gold); border-radius:var(--r-lg);
        transition:border-color .25s ease, box-shadow .25s ease; }
.band:hover { border-color:var(--gold); box-shadow:var(--sh-md); }
.band-main { flex:1 1 22rem; }
.band-title { display:block; font-family:var(--serif); font-size:1.5rem; font-weight:600;
              color:var(--gold-2); margin-bottom:.25rem; }
.band-text { display:block; color:var(--text-2); font-size:1rem; line-height:1.7; }
.band-go { color:var(--gold-2); font-weight:600; white-space:nowrap; }

/* The bridge sentence to publifye.org / publifye.pro — the old index carried it
   and the redesign had dropped it along with the .pro link. */
.estate-note { max-width:var(--wrap); margin:2.4rem auto 0; color:var(--text-2); }
.estate-cta { display:flex; gap:.8rem; flex-wrap:wrap; }

/* The bridge to publifye.org / publifye.pro. The old index carried this
   sentence and the .pro link; the redesign dropped both. */
.estate-note { max-width:var(--wrap); margin:2.6rem auto .9rem; color:var(--text-2); }
.books .estate-cta { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:0; }

/* A secondary product: present and linkable, but not competing with Scripture
   for the eye. PageFlix is being wound down and, per P1, is the reason Google
   reads Publifye as an educational-books publisher rather than a biblical one. */
.card-second { --accent: var(--text-3); opacity:.86; }
.card-second h3 { font-size:1.15rem; }
.card-second:hover { opacity:1; }

/* A third pill did not fit the hero's text column and stacked the CTAs three
   rows deep. Support is a quieter action than the two primaries anyway. */
.cta-link { color:var(--text-2); text-decoration:none; font-size:1rem;
            border-bottom:1px solid color-mix(in srgb, var(--text-2) 35%, transparent);
            padding-bottom:1px; margin-left:.35rem; }
.cta-link:hover { color:var(--gold-2); border-bottom-color:var(--gold-2); }

/* ---------- the parallel Bible (hero) ----------
   Not an ornament: this IS the product. It is drawn as a leaf from a parallel
   Bible — a ruled column, the reference at its head, each translation named
   under its own line. Every value here exists to make the SCRIPTURE the
   brightest thing on the page. */
.hero-art { position:relative; }
/* a warm bloom behind the leaf, so it reads as lit rather than pasted on */
.hero-art::before { content:""; position:absolute; z-index:-1; inset:-14% -10% -10%;
  background:radial-gradient(60% 55% at 55% 45%, color-mix(in srgb,var(--gold) 16%,transparent), transparent 72%);
  filter:blur(6px); pointer-events:none; }

.pv-leaf { position:relative; padding:1.9rem 1.7rem 1.7rem; contain:layout;
  border:1px solid color-mix(in srgb,var(--gold) 22%,var(--line));
  border-radius:var(--r-xl);
  background:linear-gradient(180deg, color-mix(in srgb,var(--bg-card) 92%,var(--gold)) 0%, var(--bg-card) 42%);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset; }
/* the gilt top edge of a bound page */
.pv-leaf::before { content:""; position:absolute; inset:0 0 auto 0; height:2px; border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:linear-gradient(90deg,transparent,var(--gold),color-mix(in srgb,var(--ember) 90%,transparent),var(--gold),transparent); opacity:.85; }

.pv-ref { display:flex; align-items:center; gap:.85rem; font-size:.9375rem; letter-spacing:.26em;
          text-transform:uppercase; color:var(--gold-2); margin:0 0 1.5rem; font-weight:600; }
.pv-ref::after { content:""; flex:1 1 auto; height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 45%,transparent),transparent); }

/* RESERVE THE SPACE. Measured CLS on this page was 0.1434 against a 0.1
   target, and the cause was here: translations differ in length, so every
   rotation resized the card and shoved the page. Layout shift is a ranking
   tie-breaker and, more to the point, it is horrible to read. A floor sized for
   the tallest column means the leaf never changes height — the text swaps
   inside a box that is already the right size.
   The serif also arrives late (display:swap), which moved the same box on load;
   the floor absorbs that too. */
.pv-list {
  /* ONE FIXED HEIGHT, never a range. A min/max pair let the box resize between
     reloads (different verse, different height) and clipped anything taller.
     The server caps every line's weighted length (maxWeight in verses.go); this
     reserves what that cap needs at its worst, so nothing is ever cut off and
     the section below never moves. Change one, re-measure the other. */
  height:var(--pv-h); display:flex; flex-direction:column; justify-content:center;
  gap:1.4rem; margin:0; padding:0; list-style:none; overflow:visible;
           display:flex; flex-direction:column; gap:1.4rem;
           min-height:19.5rem; justify-content:center; }
@media (max-width:1039px){ .pv-list { min-height:17rem; } }
/* the thread: one verse, many tongues */
.pv-list::before { content:""; position:absolute; left:0; top:.35em; bottom:.35em; width:2px; border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--gold) 14%,var(--ember) 50%,var(--gold) 86%,transparent); opacity:.55; }
.pv { display:none; }
.pv.is-on { display:block; animation:pvIn .85s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pvIn { from{opacity:0; transform:translateY(9px);} to{opacity:1; transform:none;} }
.pv-t { display:block; font-family:var(--serif); font-size:clamp(1.05rem,1.58vw,1.29rem);
        line-height:1.45; color:var(--text); text-wrap:pretty; }
.pv-m { display:inline-block; margin-top:.55rem; font-size:.9375rem; letter-spacing:.12em;
        text-transform:uppercase; color:var(--gold-2); font-weight:500;
        padding:.15rem .6rem; border-radius:100px;
        background:color-mix(in srgb,var(--gold) 12%,transparent);
        border:1px solid color-mix(in srgb,var(--gold) 22%,transparent); }
/* Hebrew, Greek and Persian need more room and a little more weight to sit
   level with a Latin line at the same optical size. */
.pv[dir="rtl"] .pv-t { font-size:clamp(1.45rem,2.3vw,1.9rem); line-height:1.8; }
.pv[lang="GRK"] .pv-t, .pv[lang="wlc"] .pv-t { letter-spacing:.005em; }
.pv-foot { margin:1.5rem 0 0; font-size:1rem; color:var(--text-3); }
@media (prefers-reduced-motion: reduce) { .pv.is-on { animation:none; } }

/* ---------- the cover shelf (books) ----------
   Modelled on tbtm.sale's own shelf and kept at its scale: big covers, edge to
   edge, masked at both ends, drifting for ninety seconds. Fast enough to read
   as alive, slow enough that it never pulls the eye off the page — a marquee
   that announces itself is a carousel, and a carousel reads as an advert.

   These are REAL covers from the catalogue, served from files.publifye.com at
   188x300 and shown at 125x200, so they stay crisp on a retina screen. */
.shelf { display:block; margin:3rem auto 0; max-width:calc(var(--wrap) + 8rem);
         text-decoration:none; position:relative; padding:1.6rem 0 .4rem; }
.shelf-wrap { display:block;
               /* Clip sideways ONLY. `overflow:hidden` clipped the hover lift at
                  the top edge — a raised cover was sheared off mid-spine. */
               overflow-x:clip; overflow-y:visible; padding-block:1rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.shelf-track { display:flex; gap:.55rem; width:max-content;
               animation:shelfDrift 90s linear infinite; will-change:transform; }
@keyframes shelfDrift { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.shelf:hover .shelf-track, .shelf:focus-visible .shelf-track { animation-play-state:paused; }
.shelf img { display:block; width:125px; height:200px; object-fit:cover;
             border-radius:2px; background:var(--bg-2);
             box-shadow:0 10px 22px -12px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.05) inset;
             transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
             transform-origin:center center; }
.shelf img:hover, .shelf img:focus-visible {
    /* grows in every direction from its own centre, not just upward */
    transform:translateY(-10px) scale(1.075); z-index:2; position:relative;
                   box-shadow:0 20px 38px -14px rgba(0,0,0,.85), 0 0 0 1px var(--gold); }
/* the shelf itself: a warm line the books stand on */
.shelf::after { content:""; position:absolute; left:0; right:0; bottom:2.9rem; height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 55%,transparent),transparent);
  opacity:.45; }
.shelf-cta { display:block; margin-top:1.4rem; color:var(--gold-2); font-weight:600;
             font-size:1rem; letter-spacing:.01em; }
.shelf:hover .shelf-cta { color:var(--ember-2); }
/* Decorative motion. Reduced-motion gets ONE static row, not a slower drift —
   this is ornament, and vestibular disorders are not a preference. */
@media (prefers-reduced-motion: reduce) {
  .shelf-track { animation:none; width:auto; justify-content:center; flex-wrap:wrap; }
  .shelf-track img:nth-child(n+10) { display:none; }
  .shelf img:hover { transform:none; }
}

/* ---------- connect / enquiry page ---------- */
.connect { padding-top:clamp(2.5rem,7vh,4.5rem); }
.connect-in { max-width:var(--wrap); margin:0 auto; }
.connect h1 { font-size:clamp(2.2rem,4.6vw,3.4rem); margin-bottom:.35em; }
.lede-left { margin-left:0; max-width:46rem; }
.connect-grid { display:grid; gap:clamp(2rem,4vw,3.5rem); margin-top:3rem;
                grid-template-columns:minmax(0,1fr); }
@media (min-width:960px){ .connect-grid { grid-template-columns:minmax(0,1fr) minmax(0,26rem); align-items:start; } }
.connect-what h2, .connect-form h2 { font-size:1.45rem; margin-bottom:.6em; }
.connect-h2b { margin-top:2.4rem; }
.note-lg { font-size:1rem; color:var(--text-2); line-height:1.7; }

.connect-form { background:var(--bg-card); border:1px solid var(--line);
                border-radius:var(--r-xl); padding:1.9rem 1.7rem; box-shadow:var(--sh-md);
                position:sticky; top:5.5rem; }
.connect-form label { display:block; font-size:1rem; font-weight:500; color:var(--text-2);
                      margin:1.05rem 0 .35rem; }
.connect-form input, .connect-form select, .connect-form textarea {
  width:100%; font:inherit; font-size:1rem; color:var(--text); background:var(--bg-raise);
  border:1px solid var(--line); border-radius:8px; padding:.7rem .8rem; min-height:44px; }
.connect-form textarea { min-height:104px; resize:vertical; }
.connect-form input:focus, .connect-form select:focus, .connect-form textarea:focus {
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent); }
.connect-form .btn { margin-top:1.5rem; width:100%; text-align:center; border:none; cursor:pointer; font:inherit;
                     font-weight:600; font-size:1rem; }
.connect-form .btn[disabled] { opacity:.6; cursor:default; }
.form-note { font-size:1rem; color:var(--text-3); margin:.9rem 0 0; }
.form-msg { margin:.9rem 0 0; font-size:1rem; }
.form-msg.is-ok { color:#3fb98a; }
.form-msg.is-err { color:#f0a35e; }
/* honeypot — off-screen, never display:none (bots skip hidden fields) */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* the action we most want a church to take, marked as such in the nav */
.btn-ghost-gold { border-color:color-mix(in srgb,var(--gold) 55%,var(--line)); color:var(--gold-2)!important; }
.btn-ghost-gold:hover { border-color:var(--gold); background:color-mix(in srgb,var(--gold) 10%,transparent); }
.services .estate-cta { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }

/* ---------- what we do: the examples grid ---------- */
.examples { margin:3.4rem 0 1rem; }
.examples h2 { font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:.35em; }
.ex-grid { display:grid; gap:1rem; margin-top:2.2rem;
           grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.ex { background:var(--bg-card); border:1px solid var(--line); border-radius:12px;
      padding:1.25rem 1.3rem; border-left:3px solid color-mix(in srgb,var(--gold) 60%,transparent);
      transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.ex:hover { border-color:var(--line); border-left-color:var(--gold);
            transform:translateY(-2px); box-shadow:var(--sh-md); }
.ex h3 { font-family:var(--sans); font-size:1.0625rem; font-weight:600; color:var(--gold-2);
         margin:0 0 .45em; line-height:1.35; }
.ex p { margin:0; color:var(--text-2); font-size:1rem; line-height:1.6; }
.ex-note { margin-top:1.8rem; color:var(--text-2); font-size:1rem; }
@media (prefers-reduced-motion: reduce){ .ex:hover{ transform:none; } }

/* ---------- NAP + map (local SEO: name, address, phone, consistent) ---------- */
.nap { margin:3.4rem 0 1rem; }
.nap h2 { font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:1.2rem; }
.nap-grid { display:grid; gap:1.4rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:820px){ .nap-grid{ grid-template-columns:minmax(0,20rem) minmax(0,1fr); } }
.nap-card { font-style:normal; background:var(--bg-card); border:1px solid var(--line);
            border-radius:12px; padding:1.4rem 1.4rem; }
.nap-card p { margin:0 0 .65rem; font-size:1rem; color:var(--text-2); line-height:1.6; }
.nap-name { font-weight:600; color:var(--text)!important; font-size:1.0625rem!important; }
.nap-meta { font-size:1rem!important; color:var(--text-3)!important; }
.nap-map iframe { width:100%; height:280px; border:1px solid var(--line); border-radius:12px;
                  display:block; background:var(--bg-2); filter:saturate(.85) contrast(.95); }

/* ---------- FAQ ----------
   P1: Google's answer to "what is Publifye" was a retired educational-books
   app. These are real questions with real answers, in the plain declarative
   shape an answer engine can quote — and the FAQPage node in home.html mirrors
   them word for word. Change one and change the other, or the markup lies. */
.faq { background:var(--bg-2); border-block:1px solid var(--line-soft); }
.faq > h2 { max-width:var(--wrap); margin:0 auto 2.2rem; }
.faq-list { max-width:var(--wrap); margin:0 auto; display:grid; gap:1.6rem 2.4rem;
            grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.faq-q { border-left:2px solid color-mix(in srgb, var(--gold) 40%, transparent); padding-left:1.25rem; }
.faq-q h3 { font-family:var(--sans); font-size:1.08rem; font-weight:600; color:var(--gold-2);
            letter-spacing:.01em; margin-bottom:.55em; }
.faq-q p { color:var(--text-2); font-size:1rem; line-height:1.62; margin:0; }
.faq .estate-cta { max-width:var(--wrap); margin:2.6rem auto 0; }

/* ---------- connect: per-card link + FAQ reuse ---------- */
.ex-link { margin:.7rem 0 0; font-size:1rem; }
.ex-link a { color:var(--gold-2); text-decoration:none; }
.ex-link a:hover { text-decoration:underline; }
.connect .faq-list { margin-top:1rem; }

/* The connect page's own four questions. Same visual language as the home FAQ,
   but it sits inside .connect-in, which is already width-constrained. */
.faq-inline { padding:0; margin:3.6rem 0 0; }
.faq-inline h2 { font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:1.6rem; }
.faq-inline .faq-list { max-width:none; }

/* ---------- example cards: colour carries meaning ----------
   droide UI Visual Standards: "Do NOT limit to 1-2 accents. Use color for
   meaning." Five families, each distinguishable at rest rather than only on
   hover, and SVG stroke icons — never emoji, which render differently on every
   platform and are unreadable to a screen reader. */
.ex-web   { --cat:#818cf8; }  /* websites, mail, members, analytics */
.ex-pub   { --cat:#daa04a; }  /* writing and publishing */
.ex-com   { --cat:#22c55e; }  /* shops, payments, delivery */
.ex-ops   { --cat:#22d3ee; }  /* backups, docs, schedules, agents */
.ex-study { --cat:#a78bfa; }  /* Scripture study and free Bibles */

.ex { position:relative; border-left-color:color-mix(in srgb,var(--cat) 62%,transparent); }
.ex:hover { border-left-color:var(--cat);
            box-shadow:0 10px 26px -16px rgba(0,0,0,.8), 0 0 0 1px color-mix(in srgb,var(--cat) 26%,transparent); }
.ex-i { width:26px; height:26px; color:var(--cat); margin-bottom:.75rem; display:block;
        transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.ex:hover .ex-i { transform:scale(1.12) rotate(-3deg); }
.ex h3 { color:var(--text); }          /* the heading is the message; the icon carries the colour */
.ex-grid { gap:1.1rem; }
@media (prefers-reduced-motion: reduce){ .ex:hover .ex-i{ transform:none; } }
/* The home page listed two products and three columns and read as "we do about
   five things". There are twenty-three. This line says so and sends the reader
   to them. */
.services-breadth { max-width:52rem; margin:2.6rem 0 1.6rem; color:var(--text-2);
                    font-size:1.0625rem; line-height:1.7;
                    border-left:2px solid color-mix(in srgb,var(--gold) 45%,transparent);
                    padding-left:1.1rem; }

/* ---------- the numbers ----------
   The only honest way to make a page like this land: real, checkable figures,
   set large. Every value is verified — nothing rounded up, nothing invented.
   Serif numerals so they read as printed rather than as a dashboard. */
.stats { padding:clamp(2.4rem,5vh,3.6rem) clamp(1rem,5vw,2.5rem);
         background:
           radial-gradient(70% 140% at 50% 0%, color-mix(in srgb,var(--gold) 8%,transparent), transparent 70%),
           var(--bg-2);
         border-block:1px solid var(--line-soft); }
.stats-in { max-width:var(--wrap); margin:0 auto; display:grid; gap:1.6rem 1.2rem;
            grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); text-align:center; }
.stats-in > div { position:relative; }
.stats-in > div + div::before { content:""; position:absolute; left:-.6rem; top:15%; bottom:15%; width:1px;
  background:linear-gradient(180deg,transparent,var(--line-soft),transparent); }
.stats dt { font-family:var(--serif); font-weight:600; line-height:1;
            font-size:clamp(2.1rem,3.6vw,3rem);
            background:linear-gradient(180deg,var(--gold-2),var(--ember));
            -webkit-background-clip:text; background-clip:text; color:transparent;
            font-variant-numeric:tabular-nums; }
.stats dd { margin:.5rem 0 0; font-size:.9375rem; letter-spacing:.09em; text-transform:uppercase;
            color:var(--text-3); line-height:1.4; }
@media (max-width:620px){ .stats-in > div + div::before { display:none; } }
.card-lexifye  { --accent:#3fb98a; }
.card-tringine { --accent:#5b8def; }
/* The three ways to get a Bible from us, side by side: buy one, build one, or
   be given twenty-five. */
.buy-row { max-width:var(--wrap); margin:2.4rem auto .4rem; display:flex; align-items:center;
           gap:.8rem 1rem; flex-wrap:wrap; }

/* ---------- verse sets: only one reference visible at a time ---------- */
.pv-set { display:none; }
.pv-set.is-set { display:block; }

/* ---------- Books: one action group, not three stacked lists ---------- */
.books-actions { max-width:var(--wrap); margin:2.8rem auto 0;
                 padding:1.7rem 1.6rem; border-radius:var(--r-xl);
                 background:var(--bg-card); border:1px solid var(--line);
                 border-top:2px solid color-mix(in srgb,var(--gold) 55%,transparent); }
.buy-lead { margin:0 0 1rem; font-size:.9375rem; letter-spacing:.16em; text-transform:uppercase;
            color:var(--gold-2); font-weight:600; }
.buy-row { display:flex; gap:.7rem; flex-wrap:wrap; margin:0; }
.books-actions .estate-note { margin:1.4rem 0 0; padding:1.1rem 0 0; border:0;
  border-top:1px solid var(--line-soft); color:var(--text-2); font-size:1rem; max-width:none; }
/* The services close: one clear action, the fallback beneath it, both centred
   so the eye lands on the button rather than the escape hatch. */
.services .estate-cta { flex-direction:column; align-items:center; text-align:center; gap:.8rem;
                        margin-top:2.4rem; }
.services .estate-cta .cta-link { margin-left:0; }
.beta { display:inline-block; margin-left:.45rem; padding:.1rem .5rem; border-radius:100px;
        font-size:.9375rem; letter-spacing:.06em; text-transform:none; font-weight:600;
        color:#22d3ee; background:color-mix(in srgb,#22d3ee 12%,transparent);
        border:1px solid color-mix(in srgb,#22d3ee 30%,transparent); vertical-align:middle; }
/* The height is RESERVED (see .pv-list min-height) and also CAPPED. The server
   filters long verses out by weighted length, but a cap here means even a
   mistake in that filter can never push the sections below off the page. */
.pv-list { max-height:30rem; overflow:hidden; }


/* One line box for every script. Without this, Thai and Devanagari fallback
   fonts declare far taller ascent/descent than Latin, so the same number of
   characters rendered ~40% taller and no character cap could predict the
   height. Pinning line-height is what makes the server's weight cap mean
   something in pixels. */
.pv .pv-t { line-height:1.5; display:block; }

/* ---------- Hebrew and Greek letterforms drifting behind the hero ----------
   Not ornament for its own sake: א/ת are the first and last letters of the
   Hebrew alphabet and Α/Ω of the Greek — the two languages Scripture was
   written in, and the figure Revelation 22:13 uses of Christ himself. They are
   DECORATIVE TEXT, so they are aria-hidden and pointer-events:none: a screen
   reader must never read a wall of loose letters, and a crawler must never take
   them for content. The indexable claim lives in the prose beneath them. */
.glyphs { position:absolute; inset:0; overflow:hidden; z-index:0;
          pointer-events:none; user-select:none; contain:strict; }
.glyphs span { position:absolute; font-family:var(--serif); line-height:1;
               font-size:clamp(3.5rem,7vw,8rem); font-weight:400;
               color:var(--gold); opacity:.045; will-change:transform;
               animation:glyphDrift linear infinite; }
.glyphs span:nth-child(even) { color:var(--indigo, #818cf8); opacity:.038; }
@keyframes glyphDrift {
  0%   { transform:translate3d(0,0,0) rotate(0deg); }
  50%  { transform:translate3d(1.4rem,-2.2rem,0) rotate(6deg); }
  100% { transform:translate3d(0,0,0) rotate(0deg); }
}
.glyphs span:nth-child(1){left:4%;  top:12%; animation-duration:29s; animation-delay:-2s;}
.glyphs span:nth-child(2){left:22%; top:68%; animation-duration:37s; animation-delay:-11s;}
.glyphs span:nth-child(3){left:41%; top:8%;  animation-duration:33s; animation-delay:-19s;}
.glyphs span:nth-child(4){left:57%; top:78%; animation-duration:41s; animation-delay:-6s;}
.glyphs span:nth-child(5){left:73%; top:22%; animation-duration:31s; animation-delay:-24s;}
.glyphs span:nth-child(6){left:88%; top:58%; animation-duration:35s; animation-delay:-14s;}
.glyphs span:nth-child(7){left:13%; top:40%; animation-duration:43s; animation-delay:-30s;}
.glyphs span:nth-child(8){left:65%; top:44%; animation-duration:39s; animation-delay:-8s;}
.hero > .hero-art, .hero > .hero-inner { position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce) { .glyphs span { animation:none; } }