/* ════════════════════════════════════════════════════════════════════════
   MYRIAD — The Gospel Network · public homepage DESIGN SYSTEM v3
   "Ten thousand times ten thousand" (Rev 5:11) — light out of darkness.
   Concept: a living field of countless points of light scattered in a deep
   void; the CROSS is the single source of light at the center toward which
   every line bends. Everything points to Christ — literally.

   v3 premium refinement: one elevation/spacing/type scale; a gold VALUE-LADDER
   (leaf for display accents, mid for labels, deep for engraving) over NEUTRAL
   resting hairlines — gold survives only on the illuminated top edge; faux
   italics removed; decoration cut to restraint; reveals made self-healing.

   Layers ON TOP of app.css (linked after it). Reuses app.css :root tokens
   (--bg --surface --surface-2 --gold --gold-dim --copper --copper-dim
   --silver --silver-bright --silver-dim --ink --line --serif --sans --pass).

   CSP-clean: no external origins, no inline style, no inline script.
   Self-hosted fonts only (/static/fonts). data: URIs allowed in CSS only.
   Do NOT redefine .hero/.tag/.coreline/.lede/.grid (owned by app.css).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Vendored fonts ──────────────────────────────────────────────────────── */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/cinzel-400.woff2") format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/cinzel-600.woff2") format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/fonts/cinzel-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("/static/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/inter-600.woff2") format("woff2")}

/* ── Tokens (v3) ─────────────────────────────────────────────────────────── */
:root{
  /* void + surfaces — deeper than app.css for cathedral darkness */
  --void:#04040A;
  --void-2:#06060C;
  --surf:#0C0E13;
  --surf-2:#14171D;

  /* light — SILVER leads, GOLD is the rare inlay, COPPER the third metal.
     Palette matched to MYRIAD: silver #C8D0D8, gold #C9A24A,
     deep gold #9A7B2E, on cool near-black. (Buttons are SILVER, not gold.) */
  --ivory:#EEF1F4;                 /* cool bright silver-white (MYRIAD text) */
  --holy:#FFFFFF;
  --linen:#E8ECF2;                 /* brightest serif — cool, not warm */
  --gold-hi:#E6CD8C;               /* specular highlight of the leaf */
  --gold-leaf:#C9A24A;             /* MYRIAD gold — DISPLAY accents only */
  --gold-mid:#9A7B2E;              /* MYRIAD deep gold — labels / eyebrows */
  --gold-deep:#6E5620;             /* engraved shadow */
  --silver-soft:#C8D0D8;           /* MYRIAD silver — leads the UI */
  --silver-mute:#9AA7B5;           /* legible secondary UI text (MYRIAD slate) */
  --copper-light:#B87333;          /* the third metal — copper accent */

  /* type families */
  --display:"Cinzel",Georgia,"Times New Roman",serif;
  --script:"EB Garamond",Georgia,serif;        /* Scripture / serif body */
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* layout */
  --pub-max:1180px;
  --pub-read:920px;                /* narrower reading rail than the graph rail */
  --pub-pad:clamp(1.1rem,4vw,2.6rem);

  /* spacing scale — one ladder, no magic numbers */
  --s-1:.5rem;  --s-2:.75rem; --s-3:1rem;  --s-4:1.5rem; --s-5:2rem;
  --s-6:2.5rem; --s-7:3rem;   --s-8:4rem;  --s-9:5rem;   --s-10:7rem;
  --card-pad:clamp(1.75rem,1.4rem + 1.6vw,2.5rem);     /* 28→40 — ONE card padding */
  --grid-gap:clamp(1.25rem,1rem + 1.2vw,2rem);          /* 20→32 — ONE grid gap */
  --rad-card:14px; --rad-inner:10px; --rad-pill:999px;

  /* type scale — six clear rungs, no muddy middle */
  --fs-eyebrow:clamp(.72rem,.7rem + .12vw,.8rem);
  --fs-body:clamp(1rem,.97rem + .15vw,1.06rem);
  --fs-lede:clamp(1.2rem,1.06rem + .66vw,1.55rem);
  --fs-h4:clamp(1.05rem,1rem + .25vw,1.18rem);          /* small card titles */
  --fs-h3:clamp(1.3rem,1.15rem + .7vw,1.6rem);
  --fs-h2:clamp(2.15rem,1.3rem + 3.9vw,4.1rem);
  --fs-display:clamp(3.7rem,1.4rem + 9vw,8.4rem);

  /* hairlines — NEUTRAL at rest; gold reserved for the illuminated top edge */
  --hair:rgba(150,160,175,.10);
  --hair-hi:rgba(217,180,92,.26);
  --glass-line:var(--hair);        /* aliases — keep every existing reference valid */
  --glass-line-hi:var(--hair-hi);
  --glow-gold:rgba(217,180,92,.26);
  --glow-holy:rgba(255,255,255,.55);

  /* elevation — surfaces LIGHTEN as they rise; shadows tighten + a contact line */
  --e0:#090B10;   /* inset wells (packet outputs) */
  --e1:#0E1118;   /* resting card */
  --e2:#141821;   /* raised / hovered card */
  --e3:#1A1F29;   /* nav chrome */
  --sh-1:0 1px 2px rgba(0,0,0,.55), 0 14px 36px rgba(0,0,0,.42);
  --sh-2:0 2px 4px rgba(0,0,0,.6), 0 22px 56px rgba(0,0,0,.5);

  /* motion */
  --ease-rev:cubic-bezier(.16,.84,.30,1);       /* reverent ease-out */
  --rule:linear-gradient(90deg,transparent,rgba(217,180,92,.5) 18%,rgba(217,180,92,.7) 50%,rgba(217,180,92,.5) 82%,transparent);
}

/* ── Base: the void ──────────────────────────────────────────────────────── */
body.public{
  background:var(--void);
  color:var(--ivory);
  font-family:var(--ui);
  font-size:var(--fs-body);
  line-height:1.55;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* The public site owns its own FULL-WIDTH layout. Do NOT inherit the admin
   app's narrow, left-pinned <main> (app.css `main{max-width:900px;padding…}`
   with no auto-margin) — that squashed the whole site onto the left. Sections
   handle their own padding + centering via .section / .container. */
.public main{max-width:none;width:100%;margin:0;padding:0}

/* serif reading blocks: old-style figures + ligatures (manuscript feel) */
.section-sub,.feature-text,.flow-text,.future-text,.theology-text,.hero-lede,
.packet-output-body,.gp-rest-verse,.gp-rest-cue,.sf-verse,.graph-caption,.footer-tagline{
  font-feature-settings:"liga" 1,"onum" 1,"kern" 1}

/* the void gradient floor — deepest at center; a faint royal-blue depth so the
   gold reads as precious metal against cool dark, never a warm wash. */
body.public::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(217,180,92,.05), transparent 55%),
    radial-gradient(90% 70% at 50% 60%, rgba(40,64,130,.12), transparent 70%),
    linear-gradient(180deg, var(--void) 0%, #05060E 45%, var(--void) 100%);
}

::selection{background:rgba(217,180,92,.85);color:#100B02;text-shadow:none}
::-moz-selection{background:rgba(217,180,92,.85);color:#100B02}

/* slim sacred scrollbar */
.public ::-webkit-scrollbar{width:11px;height:11px}
.public ::-webkit-scrollbar-track{background:var(--void-2)}
.public ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold-deep),rgba(217,180,92,.5));
  border-radius:99px;border:3px solid var(--void-2)}
.public ::-webkit-scrollbar-thumb:hover{background:var(--gold-leaf)}
.public{scrollbar-width:thin;scrollbar-color:var(--gold-deep) var(--void-2)}

:where(.public) :focus-visible{
  outline:2px solid var(--gold-leaf);outline-offset:3px;border-radius:3px}

/* ════════════════════════════════════════════════════════════════════════
   ATMOSPHERE — decorative fixed layers (mounted in public_base.html)
   ════════════════════════════════════════════════════════════════════════ */
/* the starfield canvas, drawn by myriad-fx.js */
.fx-starfield{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  width:100%;height:100%;display:block;opacity:.9}

/* film grain — pure CSS data: SVG noise, animated barely */
.fx-grain{
  position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  animation:grain-drift 7s steps(6) infinite}
@keyframes grain-drift{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,1%)}
  80%{transform:translate(3%,2%)}100%{transform:translate(0,0)}}

/* vignette — draws the eye inward to the light */
.fx-vignette{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 42%, transparent 52%, rgba(2,2,6,.55) 100%);
  mix-blend-mode:multiply}

/* keep real content above the vignette */
.site-nav,main,.site-footer{position:relative;z-index:1}

/* Faint sacred geometry behind any .sacred-bg section — barely there.
   RESTRAINT: there is only ONE sun on the page (the hero Cross). Section
   backgrounds must NOT read as a rayed gold burst. Instead: (::before) a single
   soft DIRECTIONAL bloom drifting in from the top edge — light entering the
   frame, not radiating from behind the title; (::after) a quiet inscribed
   sacred-geometry watermark (vesica + concentric ring), manuscript-margin feel.
   The starfield already supplies "the myriad," so no competing point-stipple. */
.sacred-bg{position:relative;isolation:isolate}
.sacred-bg::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background:
    linear-gradient(180deg, rgba(217,180,92,.045), transparent 42%),
    radial-gradient(120% 60% at 50% -18%, rgba(217,180,92,.05), transparent 60%);
}
.sacred-bg::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    /* a vesica piscis: two overlapping inscribed circles, barely drawn */
    radial-gradient(closest-side at 44% 50%, transparent 97.6%, rgba(217,180,92,.06) 98.4%, transparent 100%),
    radial-gradient(closest-side at 56% 50%, transparent 97.6%, rgba(217,180,92,.06) 98.4%, transparent 100%),
    /* an outer inscription ring */
    radial-gradient(closest-side, transparent 98.4%, rgba(217,180,92,.045) 99.2%, transparent 100%);
  background-size:360px 360px, 360px 360px, 540px 540px;
  background-position:center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000 22%, transparent 100%);
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 22%, transparent 100%);
}

/* ════════════════════════════════════════════════════════════════════════
   INSCRIPTIONAL TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════════ */
.foil,.metal-text{
  /* SILVER with a gold tinge — brushed-metal wordmark (silver leads, gold sheen) */
  background:linear-gradient(165deg,
    #FFFFFF 0%, #E8EEF6 14%, var(--silver-soft) 32%,
    #DCC994 47%, var(--gold-leaf) 56%, #C3CDD7 70%, #EFF3F8 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.glow{text-shadow:0 0 30px var(--glow-gold)}

/* ════════════════════════════════════════════════════════════════════════
   SECTION SCAFFOLD
   ════════════════════════════════════════════════════════════════════════ */
.section{padding:clamp(4.5rem,8vw,7rem) var(--pub-pad);position:relative}
.section.tight{padding-top:clamp(1.6rem,3.5vw,2.8rem)}
/* a hairline seam composes the stacked panels into one page (a border, NOT a
   pseudo-element, so it never collides with .sacred-bg::before/::after) */
.section + .section{border-top:1px solid rgba(217,180,92,.06)}
.container{max-width:var(--pub-max);margin:0 auto;width:100%}

.section-head{max-width:var(--pub-read);margin:0 auto clamp(1.6rem,3.5vw,2.6rem);text-align:center}
.section-head.left{margin-left:0;margin-right:auto;text-align:left}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:.9rem;
  text-transform:uppercase;letter-spacing:.32em;
  font:700 var(--fs-eyebrow)/1.4 var(--ui);color:var(--gold-leaf);
  margin-bottom:1.3rem}
.section-eyebrow::before,.section-eyebrow::after{
  content:"";width:26px;height:1px;flex:none;
  background:linear-gradient(90deg,transparent,rgba(201,162,74,.9))}
.section-eyebrow::after{transform:scaleX(-1)}
.section-head.left .section-eyebrow::after{margin-left:0}
.section-title{
  font-family:var(--display);font-weight:700;color:var(--holy);
  font-size:var(--fs-h2);line-height:1.06;letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 1rem;text-wrap:balance;
  text-shadow:0 1px 0 rgba(0,0,0,.55),0 0 40px rgba(232,238,246,.2)}
.section-sub{
  color:var(--silver-soft);font-family:var(--script);
  font-size:var(--fs-lede);line-height:1.7;margin:0 auto;max-width:54ch;text-wrap:pretty}
.section-head.left .section-sub{margin-left:0}

/* a hairline gold rule with a drawn diamond centerpiece — section divider.
   No sparkle dingbat: a CSS-drawn lozenge (font-size:0 hides any glyph text). */
.rule-ornament{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  max-width:200px;margin:clamp(1.4rem,3vw,2rem) auto 0}
.rule-ornament::before,.rule-ornament::after{
  content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(217,180,92,.45))}
.rule-ornament::after{transform:scaleX(-1)}
.rule-ornament .glyph{
  width:4px;height:4px;flex:none;transform:rotate(45deg);
  background:var(--gold-mid);opacity:.7;font-size:0;color:transparent;text-shadow:none}

/* ════════════════════════════════════════════════════════════════════════
   NAVIGATION — slim sticky, neutral hairline, Cinzel wordmark
   ════════════════════════════════════════════════════════════════════════ */
.site-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  padding:.8rem var(--pub-pad);
  background:rgba(4,4,10,.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid rgba(150,160,175,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.03), 0 10px 40px rgba(0,0,0,.55);
}
.nav-brand{display:flex;flex-direction:column;line-height:1;gap:.26rem;text-decoration:none}
.nav-brand:hover{text-decoration:none}
.nav-wordmark{
  font:700 1.24rem/1 var(--display);letter-spacing:.22em;padding-left:.14em;
  background:linear-gradient(165deg,#FFFFFF 0%,var(--silver-soft) 42%,#D9C892 58%,var(--gold-leaf) 66%,#DDE4EC 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.nav-sub{font:500 .6rem/1 var(--ui);letter-spacing:.3em;color:var(--silver-mute);text-transform:uppercase}
.nav-links{
  display:flex;align-items:center;gap:.2rem;flex-wrap:wrap;
  margin-left:auto;list-style:none;padding:0}
.nav-links a{
  position:relative;display:inline-block;padding:.5rem .72rem;border-radius:8px;
  color:var(--silver-soft);font:500 .86rem/1 var(--ui);letter-spacing:.02em;
  transition:color .2s var(--ease-rev)}
.nav-links a::after{
  content:"";position:absolute;left:.72rem;right:.72rem;bottom:.32rem;height:1px;
  background:var(--gold-leaf);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-rev);opacity:.85}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ivory);text-decoration:none}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-links a.active{color:var(--gold-leaf)}
.nav-cta{
  position:relative;display:inline-block;margin-left:.5rem;padding:.55rem 1.1rem;border-radius:999px;
  font:600 .84rem/1 var(--ui);letter-spacing:.02em;color:#0B0E13 !important;overflow:hidden;
  background:linear-gradient(180deg,#F4F7FB,var(--silver-soft));
  border:1px solid #DDE3EA;
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset, 0 8px 24px rgba(200,208,216,.20);
  transition:transform .2s var(--ease-rev), box-shadow .2s var(--ease-rev)}
.nav-cta::after{content:none}
.nav-cta:hover,.nav-cta:focus-visible{
  text-decoration:none;transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(255,255,255,.7) inset, 0 12px 30px rgba(200,208,216,.34)}

/* hamburger — a gold hairline icon; hidden until mobile */
.nav-toggle{
  display:none;margin-left:auto;
  width:44px;height:44px;flex:none;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:transparent;border:1px solid var(--glass-line);border-radius:10px;
  cursor:pointer;transition:border-color .25s var(--ease-rev), box-shadow .25s var(--ease-rev)}
.nav-toggle:hover,.nav-toggle:focus-visible{
  border-color:var(--glass-line-hi);box-shadow:0 0 18px rgba(217,180,92,.16)}
.nav-toggle-bar{
  display:block;width:20px;height:1.5px;border-radius:2px;
  background:var(--gold-leaf);
  transition:transform .3s var(--ease-rev), opacity .25s var(--ease-rev)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ════════════════════════════════════════════════════════════════════════
   BUTTONS — restrained gold lift (no shimmer gimmick)
   ════════════════════════════════════════════════════════════════════════ */
.public .btn{
  position:relative;
  font:600 .92rem/1 var(--ui);letter-spacing:.04em;
  padding:.85rem 1.6rem;border-radius:999px;
  transition:transform .25s var(--ease-rev), box-shadow .25s var(--ease-rev),
    border-color .25s var(--ease-rev), color .25s var(--ease-rev)}

.public .btn.primary{
  color:#0B0E13;border:1px solid #DDE3EA;
  background:linear-gradient(180deg,#F6F9FC,var(--silver-soft) 68%,#A9B4C0);
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset, 0 10px 30px rgba(200,208,216,.20)}
.public .btn.primary:hover,.public .btn.primary:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(255,255,255,.7) inset,
    0 14px 40px rgba(200,208,216,.3), 0 0 44px rgba(200,208,216,.16)}

.public .btn:not(.primary){
  color:var(--ivory);
  border:1px solid var(--glass-line-hi);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.public .btn:not(.primary):hover,.public .btn:not(.primary):focus-visible{
  transform:translateY(-1px);border-color:var(--gold-leaf);color:var(--holy);
  box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 28px rgba(217,180,92,.12)}

/* drawn gold underline for prose links */
.public main a:not(.btn):not(.nav-cta):not(.feature-cta):not(.footer-social a):not(.scroll-cue){
  color:var(--gold-leaf)}

/* ════════════════════════════════════════════════════════════════════════
   GLASS CARDS — one elevation language: lighten on lift, illuminated top edge
   ════════════════════════════════════════════════════════════════════════ */
.glass{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 30%),var(--e1);
  border:1px solid var(--hair);
  border-radius:var(--rad-card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), var(--sh-1);
  transition:transform .45s var(--ease-rev),border-color .45s var(--ease-rev),
    background .45s var(--ease-rev),box-shadow .45s var(--ease-rev);
}
.glass::before{ /* illuminated top edge — the one resting gold on a card */
  content:"";position:absolute;left:14%;right:14%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(241,223,166,.5),transparent);
  opacity:.7;transition:opacity .45s var(--ease-rev)}
.glass:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 30%),var(--e2);
  border-color:var(--hair-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--sh-2)}
.glass:hover::before{opacity:1;left:8%;right:8%}

/* corner flourish removed for restraint (was an L-bracket on ~20 cards) */
.flourish{position:relative}
.flourish::after{content:none}

/* ════════════════════════════════════════════════════════════════════════
   HERO — full-viewport cinematic centerpiece
   ════════════════════════════════════════════════════════════════════════ */
.hero-banner{
  position:relative;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:clamp(5rem,10vh,8rem) var(--pub-pad) clamp(3rem,7vh,5rem);
  text-align:center}
.hero-grid{
  position:relative;z-index:2;
  max-width:880px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:0}
.hero-copy{min-width:0;display:flex;flex-direction:column;align-items:center}

/* the emblem sits ABOVE the wordmark — the source of light */
.hero-emblem{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:clamp(1.4rem,3vw,2.4rem)}
/* the real brand emblem (cross + network), glowing + a slow breath */
.hero-logo{display:block;width:clamp(240px,42vw,420px);height:auto;
  filter:drop-shadow(0 0 38px rgba(255,255,255,.12)) drop-shadow(0 0 74px rgba(201,162,74,.14));
  animation:logo-breathe 6.5s ease-in-out infinite}
@keyframes logo-breathe{0%,100%{transform:scale(.99);opacity:.95}50%{transform:scale(1.02);opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-logo{animation:none}}
/* nav + footer brand mark */
.nav-brand{flex-direction:row;align-items:center;gap:.6rem}
.nav-brand-text{display:flex;flex-direction:column;line-height:1;gap:.24rem}
.nav-logo{height:34px;width:auto;display:block;flex:none}
@media(max-width:880px){.nav-logo{height:28px}}

.hero-sub{
  display:inline-block;text-transform:uppercase;letter-spacing:.3em;
  font:600 var(--fs-eyebrow)/1.5 var(--ui);color:var(--gold-mid);
  margin:0 0 1.2rem;padding-left:.3em}
.hero-wordmark{
  margin:0 0 var(--s-2);font-family:var(--display);font-weight:700;
  font-size:var(--fs-display);line-height:.98;letter-spacing:.1em;
  text-transform:uppercase;
  display:block;width:100%;max-width:100%;overflow:visible;
  padding:0 .08em;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(233,239,246,.24)) drop-shadow(0 0 56px rgba(201,162,74,.18))}
.hero-tagline{
  font-family:var(--script);color:var(--copper-light);
  font-size:clamp(1.2rem,.9rem + 1.4vw,1.7rem);margin:var(--s-1) 0 var(--s-4);letter-spacing:.01em}
.hero-lede{
  color:var(--ivory);font-family:var(--script);
  font-size:var(--fs-lede);line-height:1.7;max-width:50ch;margin:0 0 var(--s-6)}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* quiet scroll cue */
.scroll-cue{
  position:absolute;left:50%;bottom:clamp(1.4rem,4vh,2.6rem);transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  color:var(--silver-mute);text-decoration:none;
  font:500 .6rem/1 var(--ui);letter-spacing:.24em;text-transform:uppercase}
.scroll-cue:hover{color:var(--gold-leaf);text-decoration:none}
.scroll-cue .line{
  width:1px;height:34px;
  background:linear-gradient(180deg,rgba(217,180,92,.0),rgba(217,180,92,.7));
  animation:cue-fall 2.4s var(--ease-rev) infinite}
@keyframes cue-fall{
  0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}

/* ════════════════════════════════════════════════════════════════════════
   EMBLEM — the Cross as light source (markup in _emblem.html)
   ════════════════════════════════════════════════════════════════════════ */
.emblem{
  width:100%;max-width:clamp(200px,32vw,320px);height:auto;display:block;overflow:visible;
  filter:drop-shadow(0 0 70px rgba(255,247,224,.16)) drop-shadow(0 0 140px rgba(217,180,92,.10))}

/* god-rays + halo + bloom */
.emblem-rays{
  fill:none;stroke:rgba(255,247,224,.5);stroke-width:.6;opacity:.5;
  transform-box:fill-box;transform-origin:160px 150px;
  animation:rays-turn 60s linear infinite, rays-breathe 6s ease-in-out infinite}
@keyframes rays-turn{to{transform:rotate(360deg)}}
@keyframes rays-breathe{0%,100%{opacity:.32}50%{opacity:.6}}

.emblem-mandorla{
  fill:none;stroke:rgba(217,180,92,.4);stroke-width:.8;opacity:.5}
.emblem-mandorla-2{fill:none;stroke:rgba(217,180,92,.22);stroke-width:.6}

/* a faint scarlet under-bloom beneath a warm-white glow — the one warm-living
   point on the page reads "alive," never red. */
.emblem-glow-core{fill:#9E2B25;opacity:.06;filter:blur(22px)}
.emblem-glow{
  fill:#FFE9C2;opacity:.16;filter:blur(7px);
  transform-box:fill-box;transform-origin:center;
  animation:emblem-breathe 6s ease-in-out infinite}
.emblem-cross{
  fill:var(--holy);stroke:rgba(255,247,224,.6);stroke-width:.5;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.8)) drop-shadow(0 0 30px rgba(217,180,92,.5));
  transform-box:fill-box;transform-origin:center;
  animation:cross-breathe 6s ease-in-out infinite}
@keyframes emblem-breathe{0%,100%{opacity:.12;transform:scale(.94)}50%{opacity:.32;transform:scale(1.08)}}
@keyframes cross-breathe{0%,100%{filter:drop-shadow(0 0 8px rgba(255,255,255,.7)) drop-shadow(0 0 22px rgba(217,180,92,.4))}
  50%{filter:drop-shadow(0 0 14px rgba(255,255,255,.95)) drop-shadow(0 0 40px rgba(217,180,92,.6))}}

.emblem-ring{fill:none;stroke:var(--gold-deep);opacity:.3}
.emblem-net{fill:none;stroke:var(--silver-dim);stroke-width:1;opacity:.4}
.emblem-net-faint{fill:none;stroke:var(--silver-dim);stroke-width:.75;opacity:.2}
.emblem-node{stroke:var(--void);stroke-width:1.2}
.emblem-node.gold{fill:var(--gold-leaf)}
.emblem-node.silver{fill:var(--silver-bright)}
.emblem-node.copper{fill:var(--copper-light)}

/* open Scripture glowing at the base */
.emblem-book{fill:var(--ivory);opacity:.92;filter:drop-shadow(0 0 12px rgba(255,247,224,.4))}
.emblem-book-line{stroke:var(--silver-dim);stroke-width:.8;opacity:.5}
.emblem-book-edge{stroke:var(--gold-deep);stroke-width:1;fill:none;opacity:.8}

/* ════════════════════════════════════════════════════════════════════════
   FEATURES
   ════════════════════════════════════════════════════════════════════════ */
/* a 2x2 plate divided by a faint gold CROSS-RULE — the grid itself points to
   the cross, lifting it out of generic SaaS feature-grid territory. */
.feature-grid{
  position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--grid-gap)}
.feature-grid::before,.feature-grid::after{
  content:"";position:absolute;pointer-events:none;z-index:0;opacity:.55}
.feature-grid::before{ /* vertical rule */
  left:50%;top:6%;bottom:6%;width:1px;transform:translateX(-.5px);
  background:linear-gradient(180deg,transparent,rgba(217,180,92,.18) 22%,rgba(217,180,92,.18) 78%,transparent)}
.feature-grid::after{ /* horizontal rule */
  top:50%;left:6%;right:6%;height:1px;transform:translateY(-.5px);
  background:linear-gradient(90deg,transparent,rgba(217,180,92,.18) 22%,rgba(217,180,92,.18) 78%,transparent)}
.feature-card{position:relative;z-index:1;display:flex;flex-direction:column;padding:var(--card-pad)}
/* neutral resting hairline — gold lives only on the illuminated top edge */
.feature-card.glass{border-color:var(--hair)}
.feature-card.glass::before{opacity:.8;left:10%;right:10%}
/* an inscriptional gold-leaf emblem in an engraved roundel — single hairline,
   inner engrave, no second ring, no outer glow at rest. */
.feature-icon{
  position:relative;
  width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;margin-bottom:var(--s-4);color:var(--gold-leaf);
  background:radial-gradient(circle at 50% 38%,rgba(217,180,92,.10),transparent 70%);
  border:1px solid var(--hair-hi);box-shadow:inset 0 1px 6px rgba(0,0,0,.5)}
.feature-icon::before{content:none}
.feature-icon svg{width:30px;height:30px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}
.feature-card:hover .feature-icon{border-color:var(--gold-leaf);
  box-shadow:inset 0 1px 6px rgba(0,0,0,.5), 0 0 22px rgba(217,180,92,.12)}
.feature-title{
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ivory);font-size:var(--fs-h3);margin:0 0 var(--s-2);line-height:1.15}
.feature-text{color:var(--silver-soft);font-family:var(--script);line-height:1.65;font-size:var(--fs-body);margin:0 0 var(--s-4);flex:1;max-width:42ch}
.feature-cta{
  align-self:flex-start;color:var(--gold-leaf);font:600 .88rem/1 var(--ui);letter-spacing:.04em;
  position:relative;padding-bottom:.22rem}
.feature-cta::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-leaf);
  transform:scaleX(.4);transform-origin:left;transition:transform .35s var(--ease-rev)}
.feature-cta:hover{color:var(--holy);text-decoration:none}
.feature-cta:hover::after{transform:scaleX(1)}

/* ════════════════════════════════════════════════════════════════════════
   MYRIAD MESSENGER
   ════════════════════════════════════════════════════════════════════════ */
.messenger-layout{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);gap:var(--grid-gap);align-items:center}
.messenger-art{padding:clamp(.7rem,1.5vw,1rem);overflow:hidden}
.messenger-art img{display:block;width:100%;height:auto;border-radius:var(--rad-inner)}
.messenger-copy{text-align:left}
.messenger-copy .section-eyebrow::after{display:none}
.messenger-copy .section-sub{margin-left:0;max-width:46ch}
.messenger-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.7rem 0 0;padding:0;list-style:none}
.messenger-features li{
  position:relative;padding:.78rem .95rem .78rem 2rem;border:1px solid var(--glass-line);
  border-radius:var(--rad-inner);color:var(--silver-soft);background:rgba(12,14,19,.72);
  font:500 .92rem/1.35 var(--ui)}
.messenger-features li::before{
  content:"";position:absolute;left:.9rem;top:1.05rem;width:.46rem;height:.46rem;border-radius:50%;
  background:var(--holy);box-shadow:0 0 14px rgba(255,255,255,.62)}

/* ════════════════════════════════════════════════════════════════════════
   NETWORK / GRAPH
   ════════════════════════════════════════════════════════════════════════ */
.graph-wrap{margin-top:clamp(1.6rem,3vw,2.6rem)}
.graph-stage{display:flex;flex-direction:column;min-width:0}

/* inscriptional caption above the constellation */
.graph-caption{
  display:flex;align-items:center;gap:.6rem;justify-content:center;
  margin:0 0 clamp(.9rem,2vw,1.3rem);text-align:center;
  font-family:var(--script);color:var(--silver-soft);
  font-size:1.02rem;line-height:1.5}

/* live network stats — UI numerals in tabular gold (the one stat-line metal) */
.graph-live-stats{font-family:var(--ui);font-size:var(--fs-body);letter-spacing:.01em}
.graph-live-stats strong{font-weight:600;color:var(--gold-leaf);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* the constellation frame — a glass window onto the deep, gilt corners */
.graph-frame{
  position:relative;flex:1;border-radius:16px;padding:1px;
  background:
    radial-gradient(80% 80% at 50% 50%, rgba(217,180,92,.20), transparent 72%),
    linear-gradient(180deg, var(--glass-line-hi), var(--glass-line));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    var(--sh-2)}
.graph-frame::before{ /* a soft central bloom — the Cross-star lights the field
    from the middle; NOT a rayed sunburst. The convergence is carried by the
    graph's own curved edges, not by decorative spokes. */
  content:"";position:absolute;inset:1px;border-radius:15px;pointer-events:none;z-index:1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,252,244,.10), rgba(233,196,110,.045) 9%, transparent 34%);
  -webkit-mask-image:radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 78%);
  mask-image:radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 78%)}

/* gilt inscription corners on the constellation window */
.graph-corner{position:absolute;width:20px;height:20px;pointer-events:none;z-index:2;opacity:.6}
.graph-corner.tl{top:11px;left:11px;border-top:1px solid var(--gold-mid);border-left:1px solid var(--gold-mid)}
.graph-corner.tr{top:11px;right:11px;border-top:1px solid var(--gold-mid);border-right:1px solid var(--gold-mid)}
.graph-corner.bl{bottom:11px;left:11px;border-bottom:1px solid var(--gold-mid);border-left:1px solid var(--gold-mid)}
.graph-corner.br{bottom:11px;right:11px;border-bottom:1px solid var(--gold-mid);border-right:1px solid var(--gold-mid)}

/* the constellation canvas — a deep blue-black void; the Christ-star is the
   single source of light. Vignette darkens the rim so the host reads as numinous
   depth, never a flat panel. The canvas itself paints all light (additive). */
.graph-wrap .network-canvas{
  display:block;position:relative;z-index:0;width:100%;
  height:clamp(440px,58vh,640px);min-height:440px;
  border:none;border-radius:15px;outline:none;touch-action:manipulation;
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(12,16,32,.65), transparent 72%),
    radial-gradient(130% 110% at 50% 50%, transparent 38%, rgba(2,3,9,.78) 100%),
    linear-gradient(180deg, #060A16, #04060E)}
.graph-wrap .network-canvas:focus-visible{
  box-shadow:0 0 0 2px var(--glass-line-hi)}
.graph-wrap .network-canvas.net-failed{opacity:.4}

/* ── CENTERPIECE: the Gospel Network is the signature moment — wide + tall ── */
#network .container{max-width:min(1520px,96vw)}
#network .graph-wrap{grid-template-columns:minmax(0,1fr) 366px}
#network .graph-wrap .network-canvas{height:clamp(520px,78vh,880px)}
#network .graph-wrap #node-panel{max-height:clamp(520px,78vh,880px)}
@media(max-width:880px){
  #network .graph-wrap{grid-template-columns:1fr}
  #network .graph-wrap .network-canvas{height:clamp(420px,62vh,560px)}
  #network .graph-wrap #node-panel{max-height:none}
}

/* node LABELS — positioned over the canvas by myriad-network-gl.js. This is
   what turns "a bunch of lights" into a readable network. */
.net-labels{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4}
.net-label{position:absolute;left:0;top:0;white-space:nowrap;
  font:500 11.5px/1 var(--ui);letter-spacing:.01em;color:#e7edf6;opacity:0;
  text-shadow:0 1px 2px #000,0 0 7px rgba(2,4,10,.95);transition:opacity .18s ease}
.net-label.is-christ{font-family:var(--display);font-weight:600;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:#ffe7ad;
  text-shadow:0 1px 3px #000,0 0 12px rgba(255,221,150,.45)}
@media(max-width:880px){.net-label{font-size:10px}.net-label.is-christ{font-size:11.5px}}
.graph-wrap #node-panel{
  min-height:440px;max-height:clamp(440px,58vh,640px);
  position:relative;border-radius:16px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(217,180,92,.06), transparent 60%),
    linear-gradient(180deg, var(--surf-2), var(--surf));
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--sh-2)}
.graph-wrap #node-panel::before{ /* illuminated top edge, matched to .glass */
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(217,180,92,.55),transparent);opacity:.7}

/* the resting / default panel — a finished sacred plate, never an empty void.
   Holds the Rev 5:11 inscription in Garamond with a cruciform mark. */
.gp-rest{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:100%;padding:clamp(2rem,4vw,3rem) clamp(1.4rem,3vw,2.2rem)}
.gp-rest-mark{
  font-size:1.9rem;line-height:1;color:var(--gold-leaf);margin-bottom:1.3rem;
  text-shadow:0 0 22px var(--glow-gold);opacity:.92}
.gp-rest-verse{
  font-family:var(--script);color:var(--linen);
  font-size:1.16rem;line-height:1.62;margin:0 0 1rem;max-width:30ch}
.gp-rest-ref{
  font:600 .68rem/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-mid);margin:0}
.gp-rest-rule{
  display:block;width:46px;height:1px;margin:1.5rem auto;background:var(--rule)}
.gp-rest-cue{
  font-family:var(--script);color:var(--silver-soft);font-size:.98rem;line-height:1.6;
  margin:0;max-width:32ch}
@media(prefers-reduced-motion:reduce){.gp-rest-mark{text-shadow:none}}

/* legend reads as scattered points of HOLY light — white / gold-leaf / silver-
   blue, matching the constellation tints. Overrides app.css's amber palette so
   no saturated orange dot survives; each dot glows like a tiny additive star. */
.graph-legend{margin-top:clamp(.9rem,2vw,1.2rem);justify-content:center}
.graph-legend span{display:inline-flex;align-items:center}
.graph-legend .dot{
  width:9px;height:9px;border-radius:50%;margin-right:7px;
  box-shadow:0 0 8px currentColor;opacity:.95}
.graph-legend .dot.christ{background:#FFFCF4;box-shadow:0 0 14px rgba(255,252,244,.95),0 0 6px rgba(233,196,110,.9)}
.graph-legend .dot.scripture{background:#FFFCF4;box-shadow:0 0 8px rgba(255,252,244,.85)}
.graph-legend .dot.doctrine{background:#E9C46E;box-shadow:0 0 8px rgba(233,196,110,.85)}
.graph-legend .dot.struggle{background:#96AACD;box-shadow:0 0 8px rgba(150,170,205,.8)}
.graph-legend .dot.channel{background:#CDD6E2;box-shadow:0 0 8px rgba(205,214,226,.8)}
.graph-legend .dot.product{background:#D9B45C;box-shadow:0 0 8px rgba(217,180,92,.8)}

/* ════════════════════════════════════════════════════════════════════════
   WORKFLOW
   ════════════════════════════════════════════════════════════════════════ */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--grid-gap);position:relative;align-items:stretch}
.flow-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:var(--card-pad);border-radius:var(--rad-card)}
.flow-icon{
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  margin-bottom:var(--s-3);color:var(--gold-leaf);
  background:radial-gradient(circle at 50% 38%,rgba(217,180,92,.10),transparent 70%);
  border:1px solid var(--hair-hi);box-shadow:inset 0 1px 6px rgba(0,0,0,.5)}
.flow-icon svg{width:26px;height:26px}
.flow-num{font:600 .7rem/1 var(--ui);letter-spacing:.2em;color:var(--gold-mid);text-transform:uppercase;margin-bottom:.55rem}
.flow-title{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ivory);font-size:var(--fs-h4);margin:0 0 var(--s-1)}
.flow-text{color:var(--silver-soft);font-family:var(--script);line-height:1.6;font-size:var(--fs-body);margin:0}
.flow-connector{
  position:absolute;top:calc(var(--card-pad) + 28px);height:1px;left:calc(100% - .2rem);width:var(--grid-gap);
  background:linear-gradient(90deg,rgba(217,180,92,0),rgba(217,180,92,.55));box-shadow:none;z-index:1}
.flow-step:last-child .flow-connector{display:none}

/* ════════════════════════════════════════════════════════════════════════
   WITNESS PACKET
   ════════════════════════════════════════════════════════════════════════ */
.packet-preview{display:grid;grid-template-columns:1fr;gap:var(--s-4);max-width:var(--pub-read);margin:0 auto}
.packet-card{padding:var(--card-pad)}
.packet-topic{display:block;position:relative;padding-left:1.1rem;font-family:var(--display);font-weight:600;color:var(--gold-leaf);font-size:var(--fs-h3);letter-spacing:.05em;margin-bottom:var(--s-4)}
.packet-topic::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:2px;
  background:linear-gradient(180deg,var(--gold-leaf),var(--gold-deep));border-radius:1px}
.packet-outputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.packet-output{
  position:relative;background:var(--e0);border:1px solid var(--line);border-radius:var(--rad-inner);
  padding:var(--s-4);box-shadow:inset 0 1px 0 rgba(0,0,0,.4)}
.packet-output::before{content:"";position:absolute;left:var(--s-4);right:var(--s-4);top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,180,92,.45),transparent)}
.packet-output-label{display:block;text-transform:uppercase;letter-spacing:.2em;font:600 .66rem/1.4 var(--ui);color:var(--gold-mid);margin-bottom:.6rem}
.packet-output-body{color:var(--silver-soft);font-family:var(--script);font-size:1rem;line-height:1.6}
.packet-output-body .ref{display:block;margin-top:.5rem;font-family:var(--script);color:var(--copper-light);font-size:.92rem;letter-spacing:.04em}

/* ════════════════════════════════════════════════════════════════════════
   SHORTFORM REEL
   ════════════════════════════════════════════════════════════════════════ */
.shortform-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(228px,1fr);gap:1.3rem;overflow-x:auto;padding:.5rem .2rem 1.3rem;scroll-snap-type:x mandatory}
/* a finished vertical Scripture card — a verse fragment set in Garamond inside
   a hairline gold frame, a small cross above, the title carved at the base. An
   intentional, premium composition — never a bare placeholder dot. */
.shortform-card{
  position:relative;aspect-ratio:9/16;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:1.6rem 1.25rem 1.5rem;scroll-snap-align:start;overflow:hidden;border-radius:var(--rad-card);
  background:
    radial-gradient(85% 55% at 50% 30%,rgba(217,180,92,.13),transparent 72%),
    linear-gradient(180deg,var(--surf-2),var(--surf))}
/* inscribed hairline gold frame, manuscript-margin feel */
.sf-frame{
  position:absolute;inset:12px;border:1px solid var(--glass-line);border-radius:var(--rad-inner);
  pointer-events:none;
  box-shadow:inset 0 0 24px rgba(217,180,92,.06)}
.shortform-card:hover .sf-frame{border-color:var(--glass-line-hi)}
.sf-mark{
  font-size:1.05rem;line-height:1;color:var(--gold-leaf);margin-bottom:1rem;
  opacity:.82;text-shadow:none}
.sf-verse{
  font-family:var(--script);color:var(--linen);
  font-size:1.12rem;line-height:1.5;margin:0 0 .8rem;max-width:18ch;
  text-shadow:0 2px 12px rgba(0,0,0,.7)}
.sf-ref{
  font:600 .6rem/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-mid);margin:0}
.shortform-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#0B0E13;background:linear-gradient(180deg,#F2F5FA,var(--silver-soft));
  box-shadow:0 0 26px rgba(200,208,216,.4), inset 0 1px 0 rgba(255,255,255,.5);
  opacity:0;transition:opacity .3s var(--ease-rev), transform .3s var(--ease-rev)}
.shortform-card:hover .shortform-play,.shortform-card:focus-within .shortform-play{
  opacity:1;transform:translate(-50%,-50%) scale(1.04)}
.shortform-play svg{width:17px;height:17px;margin-left:2px}
.shortform-title{
  position:absolute;left:1.1rem;right:1.1rem;bottom:1.3rem;margin:0;
  color:var(--ivory);font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:.86rem;line-height:1.25;
  text-shadow:0 2px 12px rgba(0,0,0,.9)}

/* ════════════════════════════════════════════════════════════════════════
   FUTURE MODULES
   ════════════════════════════════════════════════════════════════════════ */
.future-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.future-card{padding:var(--card-pad)}
/* a quiet engraved label, not a filled SaaS pill — gold small-caps preceded by
   a short hairline rule, like a marginal inscription. */
.future-badge{
  display:inline-flex;align-items:center;gap:.6rem;
  text-transform:uppercase;letter-spacing:.2em;font:600 .6rem/1 var(--ui);
  color:var(--gold-mid);background:none;border:none;border-radius:0;
  padding:0;margin-bottom:1.05rem}
.future-badge::before{
  content:"";width:18px;height:1px;flex:none;
  background:linear-gradient(90deg,transparent,var(--gold-mid));opacity:.85}
.future-title{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ivory);font-size:var(--fs-h4);margin:0 0 var(--s-1)}
.future-text{color:var(--silver-soft);font-family:var(--script);line-height:1.65;font-size:var(--fs-body);margin:0}

/* ════════════════════════════════════════════════════════════════════════
   THEOLOGY / PLEDGES
   ════════════════════════════════════════════════════════════════════════ */
.theology{text-align:center;max-width:780px;margin:0 auto}
.theology-title{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ivory);font-size:var(--fs-h2);margin:0 0 1.2rem;line-height:1.1}
.theology-text{color:var(--silver-soft);font-family:var(--script);font-size:var(--fs-lede);line-height:1.8;margin:0 auto 2.2rem;max-width:50ch}
.pledges{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.pledge{
  display:inline-flex;align-items:center;gap:.55rem;padding:.55rem 1.05rem;border-radius:999px;
  background:linear-gradient(180deg,rgba(20,23,29,.9),rgba(12,14,19,.9));
  border:1px solid var(--glass-line);color:var(--silver-soft);font:500 .88rem/1 var(--ui)}
.pledge svg{width:15px;height:15px;color:var(--gold-leaf);flex:none}

/* ════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════ */
.site-footer{
  border-top:1px solid rgba(150,160,175,.08);
  background:linear-gradient(180deg,transparent,rgba(217,180,92,.025));
  padding:clamp(3rem,6vw,5rem) var(--pub-pad) 2.4rem}
.footer-grid{max-width:var(--pub-max);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(1.6rem,3vw,2.6rem)}
.footer-brand .nav-wordmark{font-size:1.5rem;letter-spacing:.3em;display:inline-block}
.footer-tagline{font-family:var(--script);color:var(--copper-light);font-size:1.08rem;margin:.9rem 0 1.1rem;max-width:32ch}
.footer-social{display:flex;gap:.6rem;flex-wrap:wrap}
.footer-social a{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;
  color:var(--silver-mute);border:1px solid var(--line);background:rgba(12,14,19,.6);
  transition:color .2s var(--ease-rev), border-color .2s var(--ease-rev), box-shadow .2s var(--ease-rev), transform .2s var(--ease-rev)}
.footer-social a:hover{color:var(--gold-leaf);border-color:var(--glass-line-hi);transform:translateY(-2px);box-shadow:0 0 18px rgba(217,180,92,.2);text-decoration:none}
.footer-social svg{width:17px;height:17px}
.footer-col h3{font:600 .72rem/1.4 var(--ui);text-transform:uppercase;letter-spacing:.2em;color:var(--gold-mid);font-family:var(--ui);margin:0 0 1.1rem}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.65rem}
.footer-links a{color:var(--silver-soft);font:500 .92rem/1.4 var(--ui)}
.footer-links a:hover{color:var(--ivory);text-decoration:none}
.footer-fine{
  max-width:var(--pub-max);margin:clamp(2.2rem,4vw,3.2rem) auto 0;padding-top:1.5rem;
  border-top:1px solid var(--line);
  color:var(--silver-mute);font-family:var(--script);font-size:.95rem;text-align:center}

/* ════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL — self-healing entrance for [data-reveal].
   myriad-fx.js adds the .js class + (when it can) an IntersectionObserver that
   toggles .in for scroll choreography. To guarantee content can NEVER stay
   blank (even if the observer never fires), the hidden state is expressed as a
   CSS ANIMATION that always resolves to visible — not an observer-gated
   opacity. Without JS, .js is absent → content shows flat. Reduced-motion: off.
   ════════════════════════════════════════════════════════════════════════ */
.js [data-reveal]{animation:reveal-rise .8s var(--ease-rev) both}
@keyframes reveal-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media(max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
  .feature-grid,.future-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .messenger-layout{grid-template-columns:1fr}
}
@media(max-width:760px){
  .feature-grid,.future-grid,.packet-outputs,.flow{grid-template-columns:1fr}
  .messenger-features{grid-template-columns:1fr}
  /* single column — the 2x2 cross-rule no longer applies */
  .feature-grid::before,.feature-grid::after{display:none}
  .flow-connector{
    top:auto;bottom:calc(-1 * clamp(.5rem,2.4vw,1rem) - .5px);left:50%;width:1px;
    height:clamp(1rem,4vw,1.6rem);
    background:linear-gradient(180deg,rgba(217,180,92,0),rgba(217,180,92,.55))}

  /* the hamburger appears; the link list becomes a slide-down sacred drawer */
  .site-nav{flex-wrap:nowrap}
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;
    margin:0;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:.2rem;padding:clamp(5rem,16vh,7rem) clamp(20px,8vw,3rem) 2.4rem;
    background:linear-gradient(180deg,rgba(4,4,10,.98),rgba(6,6,12,.99));
    -webkit-backdrop-filter:blur(22px) saturate(1.1);
    backdrop-filter:blur(22px) saturate(1.1);
    border-left:1px solid rgba(217,180,92,.14);
    overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .35s var(--ease-rev), transform .35s var(--ease-rev), visibility .35s var(--ease-rev)}
  .nav-links.open{opacity:1;visibility:visible;transform:none}
  .nav-links a{
    padding:.95rem .2rem;border-radius:0;
    border-bottom:1px solid rgba(217,180,92,.08);
    font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--silver-soft)}
  .nav-links a::after{left:.2rem;right:auto;width:24px;bottom:.7rem}
  .nav-cta{
    margin:1.4rem 0 0;align-self:flex-start;padding:.8rem 1.6rem;
    font-family:var(--ui);font-size:.92rem;letter-spacing:.04em;border-bottom:none}
  /* lock background scroll while the drawer is open */
  body.public.nav-open{overflow:hidden}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .hero-banner{min-height:100svh}
  .hero-actions{flex-direction:column;width:100%;max-width:300px}
  .public .btn{width:100%;text-align:center}
  .hero-wordmark{font-size:clamp(2.9rem,15vw,4.6rem);letter-spacing:.06em}
  .section-title{font-size:clamp(1.55rem,7vw,2.1rem)}
  .nav-wordmark{font-size:1.04rem;letter-spacing:.18em}
  .graph-legend{font-size:.82rem;gap:.5rem .9rem}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}

/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — honour everywhere
   ════════════════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .fx-grain,.scroll-cue .line,
  .emblem-rays,.emblem-glow,.emblem-cross{animation:none}
  .emblem-glow{opacity:.22}
  .emblem-rays{opacity:.4}
  .js [data-reveal]{animation:none}
  *{scroll-behavior:auto !important}
}