/* ============================================================
   BEHOLD NOW — shared chrome
   Dark base. Prismatic gradient is used ONLY as light:
   never as decoration, never as filler. Light enters, light refracts.
   ============================================================ */

:root{
  --void:#0a0a0f;
  --void-2:#0d0d15;
  --void-3:#111119;
  --ink:#eceaf6;
  --dim:#9b96b0;
  --faint:#5f5a74;
  --line:rgba(236,234,246,.09);
  --line-strong:rgba(236,234,246,.18);
  --prism:linear-gradient(90deg,#ff5f6d 0%,#ffb454 22%,#ffe08a 40%,#7cf29c 58%,#59d8ff 74%,#6f8dff 88%,#b06bff 100%);
  --t:500ms;
  --serif:"Cormorant Garamond","Cormorant","Iowan Old Style",Georgia,"Palatino Linotype",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(89,216,255,.25);color:#fff}

a{color:var(--ink);text-decoration:none}
a:hover{color:#fff}

img{max-width:100%}

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

.site-head{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 28px;
  background:rgba(10,10,15,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.wordmark{
  font-size:15px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
  transition:letter-spacing var(--t) ease;
}
.wordmark:hover{letter-spacing:.5em;color:#fff}
.site-nav{display:flex;gap:22px;flex-wrap:wrap}
.site-nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);transition:color var(--t) ease;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink)}

/* ---------- layout rhythm ---------- */

main{display:block}
section{padding:110px 28px}
.wrap{max-width:760px;margin:0 auto}
.wrap-wide{max-width:920px;margin:0 auto}
.center{text-align:center}

.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--faint);margin-bottom:28px;
}
.center .kicker::after,.center .kicker::before{content:"";}

.page-title{
  font-weight:400;
  font-size:clamp(32px,5.4vw,54px);
  line-height:1.18;letter-spacing:.01em;
  margin-bottom:26px;
}
.lede{font-size:clamp(20px,2.6vw,26px);line-height:1.6;color:var(--ink)}
.sub{color:var(--dim);font-size:17px}

.prose p{margin-bottom:1.5em}
.prose p:last-child{margin-bottom:0}
.prose em{color:#fff}
.prose strong{color:#fff;font-weight:600}
.prose blockquote{
  margin:2.2em 0;padding:.2em 0 .2em 28px;
  border-left:1px solid transparent;
  border-image:var(--prism) 1;
  font-size:clamp(20px,2.6vw,25px);line-height:1.55;font-style:italic;color:#fff;
}
.prose blockquote cite{
  display:block;margin-top:14px;font-style:normal;
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);
}
.prose h2{
  font-weight:400;font-size:clamp(24px,3.4vw,32px);line-height:1.3;
  margin:2em 0 .8em;
}
.prose h3{
  font-weight:600;font-size:19px;margin:1.8em 0 .6em;color:#fff;
}
.prose ul,.prose ol{margin:0 0 1.5em 1.2em}
.prose li{margin-bottom:.6em}

a.textlink{
  color:var(--dim);border-bottom:1px solid var(--line-strong);
  transition:color var(--t) ease,border-color var(--t) ease;
}
a.textlink:hover{color:#fff;border-color:#fff}

/* ---------- light (the only use of the prism gradient) ---------- */

.lightword{
  background:var(--prism);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.rule-prism{
  height:1px;border:0;width:120px;margin:0 auto;
  background:var(--prism);opacity:.7;
}
.beam-v{
  width:1px;height:72px;margin:40px auto 0;
  background:linear-gradient(180deg,transparent,#fff 30%,var(--c,#59d8ff) 70%,transparent);
  opacity:.65;animation:beamPulse 3.6s ease-in-out infinite;
}
@keyframes beamPulse{0%,100%{opacity:.25;transform:scaleY(.92)}50%{opacity:.85;transform:scaleY(1)}}

/* ---------- reveal on scroll ---------- */

.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity 600ms cubic-bezier(.22,.61,.36,1),transform 600ms cubic-bezier(.22,.61,.36,1);
}
.reveal.lit{opacity:1;transform:none}
.reveal.slow{transition-duration:600ms}

/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink);padding:18px 38px;
  border:1px solid var(--line-strong);background:transparent;
  transition:border-color var(--t) ease,color var(--t) ease,background var(--t) ease;
}
.btn:hover{border-color:rgba(236,234,246,.5);color:#fff;background:rgba(236,234,246,.04)}
.btn-feel{
  border:1px solid transparent;color:#fff;
  background:
    linear-gradient(var(--void-2),var(--void-2)) padding-box,
    var(--prism) border-box;
}
.btn-feel:hover{
  background:
    linear-gradient(var(--void-3),var(--void-3)) padding-box,
    var(--prism) border-box;
  border-color:transparent;
}
.btn-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:52px}

/* ---------- verse display ---------- */

.verse-display{
  font-weight:400;
  font-size:clamp(30px,5.2vw,54px);
  line-height:1.3;letter-spacing:.005em;
  max-width:20em;
}
.unfolding{
  margin-top:34px;color:var(--dim);font-style:italic;
  font-size:clamp(18px,2.4vw,22px);line-height:1.7;max-width:34em;
}
.center .unfolding{margin-left:auto;margin-right:auto}

/* ---------- share rows ---------- */

.share{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:44px}
.share-link{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);padding:10px 18px;border:1px solid var(--line);
  background:transparent;cursor:pointer;
  transition:color var(--t) ease,border-color var(--t) ease;
}
.share-link:hover{color:#fff;border-color:var(--line-strong)}
.share-link.copied{color:#fff;border-color:rgba(124,242,156,.5)}

/* ---------- pager (prev / next) ---------- */

.pager{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:110px;padding-top:34px;border-top:1px solid var(--line);
}
.pager a{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);max-width:46%;
  transition:color var(--t) ease;
}
.pager a:hover{color:#fff}
.pager .pager-label{display:block;color:var(--faint);margin-bottom:8px}
.pager .pager-next{margin-left:auto;text-align:right}

/* ---------- index lists (doctrine library, verses, questions) ---------- */

.index-list{margin-top:64px}
.index-item{
  display:block;padding:30px 6px;border-bottom:1px solid var(--line);
  transition:background var(--t) ease,padding-left var(--t) ease;
}
.index-item:first-child{border-top:1px solid var(--line)}
.index-item:hover{background:rgba(236,234,246,.025);padding-left:16px}
.index-num{
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--faint);
  display:block;margin-bottom:10px;
}
.index-title{font-size:clamp(21px,3vw,27px);line-height:1.35;color:#fff}
.index-desc{color:var(--dim);font-size:16px;margin-top:8px;max-width:56ch}

/* ---------- FAQ ---------- */

.faq details{border-bottom:1px solid var(--line);padding:6px 4px}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 0;
  font-size:clamp(18px,2.6vw,22px);color:#fff;line-height:1.5;
  transition:color var(--t) ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--faint);font-family:var(--mono)}
.faq details[open] summary::before{content:"− "}
.faq details p{padding:0 0 24px;color:var(--dim);max-width:62ch}

/* ---------- gathering form ---------- */

.confess{
  margin-top:56px;padding:52px 40px;
  border:1px solid var(--line);background:var(--void-2);
}
.confess label{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint);margin:26px 0 10px;
}
.confess input[type="email"],.confess input[type="text"],.confess textarea{
  width:100%;padding:15px 16px;font-size:16px;
  font-family:var(--serif);color:var(--ink);
  background:var(--void);border:1px solid var(--line-strong);
  outline:none;transition:border-color var(--t) ease;
}
.confess input:focus,.confess textarea:focus{border-color:rgba(124,242,156,.45)}
.confess textarea{min-height:120px;resize:vertical}
.confess .btn{margin-top:34px;width:100%;text-align:center}
.confess-note{margin-top:20px;font-size:14px;color:var(--faint);font-style:italic}

/* ---------- testimonies ---------- */

.testimony{
  margin-top:44px;padding:44px 40px;border:1px solid var(--line);background:var(--void-2);
}
.testimony blockquote{
  font-size:clamp(19px,2.6vw,23px);line-height:1.65;font-style:italic;color:var(--ink);
}
.testimony cite{
  display:block;margin-top:18px;font-style:normal;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
}

/* ---------- give / tiers ---------- */

.tiers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;margin-top:64px;
}
.tier{
  border:1px solid var(--line);background:var(--void-2);
  padding:44px 32px;display:flex;flex-direction:column;
  transition:border-color var(--t) ease,transform var(--t) ease;
}
.tier:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.tier::before{content:"";height:1px;width:64px;background:var(--prism);opacity:.7;margin-bottom:30px}
.tier-name{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.tier-price{font-size:clamp(30px,4vw,40px);margin:14px 0 6px;color:#fff}
.tier-desc{color:var(--dim);font-size:16px;flex:1}
.tier .btn{margin-top:34px;text-align:center}

/* ---------- q pages ---------- */

.q-title{font-size:clamp(26px,4.4vw,44px);line-height:1.25}
.q-go-deeper{margin-top:70px;padding-top:40px;border-top:1px solid var(--line)}
.q-go-deeper .kicker{margin-bottom:18px}
.q-go-deeper ul{list-style:none}
.q-go-deeper li{padding:14px 0;border-bottom:1px solid var(--line)}
.q-go-deeper a{color:#fff;font-size:clamp(18px,2.4vw,22px)}
.q-cta{margin-top:80px;text-align:center}
.q-cta p{color:var(--dim);margin-bottom:8px}

/* ---------- send it forward (missionary) ---------- */

.send-cta{margin-top:70px;padding-top:44px;border-top:1px solid var(--line)}
.send-cta .send-line{margin-top:0}
.send-line{margin-top:26px;font-size:15px;line-height:1.7;color:var(--faint)}
.send-line .textlink{color:var(--dim)}
.m-note{margin-top:28px;font-size:14px;font-style:italic;color:var(--faint)}
.kit-out{margin-top:20px;padding:16px 18px;border:1px solid var(--line);background:var(--void-2);font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink);overflow-wrap:anywhere;text-align:left}
.kit-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.kit-actions .share-link:disabled{opacity:.45;cursor:default}

/* ---------- the word meets you (behold-knows.js) ---------- */

#meets-you{max-width:640px;margin:0 auto;text-align:center}
#meets-you.meets-after{padding:0 28px 26px}
.meets-line{
  opacity:0;transform:translateY(6px);transition:all .8s ease;
  color:var(--dim);font-size:clamp(16px,2vw,19px);font-style:italic;line-height:1.7;
}
#meets-you .meets-line{margin:0 0 18px}
#meets-you .meets-line:last-child{margin-bottom:0}
.meets-line.on{opacity:1;transform:none}

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

.site-foot{
  border-top:1px solid var(--line);
  padding:76px 28px 60px;text-align:center;
}
.foot-line{max-width:52ch;margin:0 auto 18px;font-size:19px;font-style:italic;color:var(--ink)}
.foot-safe{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-bottom:26px;
}
.foot-meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--faint)}
.foot-meta a{color:var(--dim);transition:color var(--t) ease}
.foot-meta a:hover{color:#fff}
.site-foot .rule-prism{margin-bottom:44px}

/* ---------- misc ---------- */

.tag-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line);padding:7px 13px;
}

@media (max-width:640px){
  section{padding:84px 20px}
  .site-head{padding:14px 20px}
  .site-nav{gap:15px}
  .confess,.testimony{padding:34px 22px}
  .pager a{max-width:100%}
  .pager .pager-next{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .beam-v{animation:none;opacity:.6}
}