/* Bible Answer — the website. Same look as the app: navy sky, gold, Cormorant Garamond and DM Sans.
   Colours are ManuscriptColors from the app (AppTheme.swift), dark and light. */

@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dm-sans.woff2) format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#0F1628;--text:#F2EADB;--muted:#A89B82;
  --gold:#D4A857;--ornament:#D4A857;--on-gold:#0F1628;
  --chip:rgba(27,42,72,.78);--chip-stroke:rgba(255,255,255,.09);
  --gold-hair:rgba(212,168,87,.55);--gold-soft:rgba(212,168,87,.14);
  --glass:rgba(15,22,40,.55);--glass-line:rgba(255,255,255,.08);
  --verse-ink:linear-gradient(180deg,#FFFDF8 0%,#F2EADB 55%,#D8CBAE 100%);
  --halo:rgba(0,0,0,.55);--shadow:0 40px 100px rgba(0,0,0,.45);
  --sky-o:.9;--skl:rgba(242,234,219,.14);--skl-strong:rgba(212,168,87,.55);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --pad:clamp(16px,4vw,48px);
}
@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;
    --bg:#DCEDF6;--text:#132A47;--muted:#4D6883;
    --gold:#3F86BE;--ornament:#D9A441;--on-gold:#fff;
    --chip:rgba(255,255,255,.72);--chip-stroke:rgba(255,255,255,.9);
    --gold-hair:rgba(63,134,190,.5);--gold-soft:rgba(63,134,190,.12);
    --glass:rgba(220,237,246,.62);--glass-line:rgba(19,42,71,.10);
    --verse-ink:linear-gradient(180deg,#132A47,#132A47);
    --halo:transparent;--shadow:0 30px 80px rgba(19,42,71,.18);
    --sky-o:0;--skl:rgba(19,42,71,.12);--skl-strong:rgba(63,134,190,.55);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;color:var(--text);font:400 17px/1.47 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- sky ---------- */
.sky{position:absolute;left:0;top:0;width:100%;height:118vh;z-index:-1;pointer-events:none;overflow:hidden;
  transform:translate3d(0,calc(var(--scroll,0)*.28px),0);will-change:transform;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.sky__img{position:absolute;inset:0;background:url(assets/sky-dark.jpg) center 18%/cover no-repeat;opacity:var(--sky-o)}
.sky__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,40,.55) 0%,rgba(15,22,40,.08) 34%,rgba(15,22,40,.7) 76%,var(--bg) 100%)}
@media (prefers-color-scheme:light){
  .sky__veil{background:radial-gradient(900px 520px at 50% 0,rgba(255,255,255,.85),rgba(220,237,246,0) 70%),linear-gradient(180deg,rgba(196,221,236,.6),rgba(220,237,246,0))}
}
.stars i{position:absolute;display:block;border-radius:50%;background:#FFF3D6;opacity:.7;animation:twinkle var(--t,4s) ease-in-out var(--dl,0s) infinite}
@media (prefers-color-scheme:light){.stars{display:none}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.95;transform:scale(1.15)}}

/* ---------- navigation ---------- */
.nav{position:fixed;left:0;right:0;top:0;z-index:20;height:52px;background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--glass-line)}
.nav__in{height:100%;max-width:1280px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.mark{font:600 14px/1 var(--serif);letter-spacing:.32em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.mark:hover{text-decoration:none}
.nav__links{display:flex;gap:clamp(20px,3.4vw,44px);font-size:13px}
.nav__links a{color:color-mix(in srgb,var(--text) 82%,transparent);transition:color .25s}
.nav__links a:hover{color:var(--gold);text-decoration:none}
.nav__tools{display:flex;align-items:center;justify-content:flex-end;gap:14px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{background:var(--bg)}}
@media (max-width:760px){.nav__links{display:none}.nav__in{grid-template-columns:1fr auto}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:13px 28px;border-radius:980px;border:1px solid transparent;font-size:17px;font-weight:500;line-height:1.2;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,border-color .25s}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn--gold{background:var(--gold);color:var(--on-gold);box-shadow:0 10px 40px color-mix(in srgb,var(--gold) 30%,transparent)}
.btn--gold:hover{box-shadow:0 16px 52px color-mix(in srgb,var(--gold) 42%,transparent)}
.btn--ghost{background:var(--chip);border-color:color-mix(in srgb,var(--ornament) 40%,transparent);color:var(--text)}
.btn--ghost:hover{border-color:var(--ornament)}
.link{font-size:17px}
.link::after{content:" ›"}

/* ---------- reveal on scroll ---------- */
html.js .reveal{opacity:0;transform:translate3d(0,28px,0);filter:blur(6px);
  transition:opacity 1s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s),filter 1s var(--ease) var(--d,0s)}
html.js .reveal.in{opacity:1;transform:none;filter:none}
.rise{animation:rise 1.2s var(--ease) both;animation-delay:calc(var(--i,0)*130ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translate3d(0,30px,0);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:96px var(--pad) 72px}
.hero__in{display:flex;flex-direction:column;align-items:center;max-width:1100px;
  transform:translate3d(0,calc(var(--hp,0)*56px),0) scale(calc(1 - var(--hp,0)*.05));opacity:calc(1 - var(--hp,0)*1.15);will-change:transform,opacity}
.hero__icon{width:96px;height:96px;border-radius:22px;box-shadow:0 24px 64px color-mix(in srgb,var(--gold) 30%,transparent),0 0 0 1px rgba(255,255,255,.12);margin-bottom:36px;animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
h1{margin:0;font:500 clamp(50px,9.2vw,112px)/1 var(--serif);letter-spacing:-.012em;text-wrap:balance;
  background:var(--verse-ink);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero__sub{text-wrap:balance;margin:28px 0 0;max-width:620px;font-size:clamp(18px,2.1vw,22px);line-height:1.45;color:color-mix(in srgb,var(--text) 80%,transparent)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 28px;margin-top:40px}
.hero__langs{margin:44px 0 0;font-size:13px;letter-spacing:.06em;color:var(--muted)}
.hero__hint{position:absolute;left:50%;bottom:26px;translate:-50% 0;color:var(--gold);opacity:.8;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:.95}}

/* ---------- sections ---------- */
.section{position:relative;padding:clamp(72px,11vw,150px) var(--pad)}
.wrap{max-width:1120px;margin:0 auto}
.eyebrow{font:500 12px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
h2{margin:0;font:500 clamp(38px,6.4vw,84px)/1.04 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.lede{text-wrap:balance;margin:20px auto 0;max-width:640px;font-size:clamp(17px,1.9vw,21px);line-height:1.45;color:color-mix(in srgb,var(--text) 72%,transparent)}

/* ---------- ask ---------- */
.ask{text-align:center;background:radial-gradient(900px 520px at 50% -4%,color-mix(in srgb,var(--gold) 11%,transparent),transparent 70%)}
.ask h2{background:var(--verse-ink);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.feelings{max-width:900px;margin:52px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:720px){.feelings{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.chip-lg{display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 14px;text-align:left;font-size:15px;font-weight:500;line-height:1.25;background:var(--chip);border:1px solid var(--chip-stroke);border-radius:18px;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.chip-lg:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ornament) 70%,transparent);box-shadow:0 14px 40px color-mix(in srgb,var(--gold) 16%,transparent)}
.chip-lg:active,.pill:active{transform:scale(.96)}
.disc{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 20px color-mix(in srgb,var(--gold) 30%,transparent);color:var(--gold)}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.good{margin-top:32px;font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px auto 0;max-width:900px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;font-size:15px;background:var(--chip);border:1px solid var(--chip-stroke);border-radius:980px;transition:transform .3s var(--ease),border-color .3s}
.pill:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ornament) 60%,transparent)}
.pill .ico{width:18px;height:18px;color:var(--muted)}
.pill--warm{background:color-mix(in srgb,var(--ornament) 10%,var(--chip));border-color:color-mix(in srgb,var(--ornament) 35%,transparent)}
.pill--warm .ico{color:var(--ornament)}
.more{margin-top:8px;background:none;border:0;padding:10px 14px;font-size:14px;font-weight:500;color:var(--gold)}
.more::after{content:" ⌄"}
.more[aria-expanded=true]::after{content:" ⌃"}
.rest{margin-top:6px}

.composer{display:flex;align-items:flex-end;gap:12px;max-width:900px;margin:34px auto 0;padding:8px 8px 8px 26px;background:var(--chip);border:1px solid var(--chip-stroke);border-radius:32px;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);text-align:left;transition:border-color .3s,box-shadow .3s}
.composer:focus-within{border-color:color-mix(in srgb,var(--ornament) 55%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 12%,transparent)}
.send{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border:0;border-radius:50%;background:var(--gold);color:var(--on-gold);transition:transform .3s var(--ease),opacity .2s}
.send .ico{width:20px;height:20px;stroke-width:2}


/* ---------- the answer ---------- */
.answer{max-width:1180px;margin:0 auto;text-align:left;outline:0}
.spread{display:grid;grid-template-columns:1fr;gap:56px;margin-top:20px}
@media (min-width:1000px){
  .spread{grid-template-columns:minmax(0,.46fr) 1px minmax(0,.54fr);gap:0 64px;margin-top:8px}
  .verse-page{position:sticky;top:110px;align-self:start;min-height:calc(100vh - 220px);justify-content:center}
  .spread .gutter{display:block}
}
.gutter{display:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--ornament) 40%,transparent),transparent)}
.verse-page{display:flex;flex-direction:column;align-items:center;text-align:center}
.q{padding:11px 20px;border-radius:18px;background:var(--chip);border:1px solid var(--chip-stroke);font-size:15px;color:color-mix(in srgb,var(--text) 85%,transparent);max-width:100%;overflow-wrap:anywhere}
.ref{margin:44px 0 0;font:500 15px/1.2 var(--serif);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.hair{width:140px;height:1px;border:0;margin:22px 0;background:linear-gradient(90deg,transparent,var(--gold-hair),transparent)}
.verse{margin:0;font:400 clamp(28px,3.4vw,42px)/1.3 var(--serif);
  background:var(--verse-ink);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 22px rgba(255,243,214,.16))}
.credit{margin-top:6px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.reading{padding-top:6px}
.head{display:flex;align-items:center;gap:12px}
.label{margin:0;font:500 11px/1 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.head i{flex:1;height:1px;background:linear-gradient(90deg,var(--gold-hair),transparent)}
.body{margin:16px 0 0;font:400 clamp(21px,2.1vw,24px)/1.5 var(--serif);text-shadow:0 0 16px var(--halo);overflow-wrap:anywhere}
.body--quiet{font-size:clamp(19px,1.9vw,21px);color:color-mix(in srgb,var(--text) 80%,transparent)}
.block{margin-top:46px}
.block:first-child{margin-top:0}
.prayer{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:46px}
.prayer .head i{flex:none;width:34px}
.prayer .head i:first-child{background:linear-gradient(90deg,transparent,var(--gold-hair))}
.prayer p{margin:0;padding:0 10px;text-align:center;font:italic 400 clamp(23px,2.4vw,26px)/1.45 var(--serif);text-shadow:0 0 16px var(--halo);overflow-wrap:anywhere}
.diamond{display:flex;align-items:center;gap:8px;width:200px;margin:44px auto 0}
.diamond i{flex:1;height:1px;background:var(--gold-hair)}
.diamond b{width:6px;height:6px;background:var(--ornament);transform:rotate(45deg);animation:glint 3.4s ease-in-out infinite}
@keyframes glint{0%,100%{box-shadow:0 0 0 rgba(212,168,87,0)}50%{box-shadow:0 0 14px var(--ornament)}}
.fine{margin:24px auto 0;max-width:520px;text-align:center;font-size:12px;line-height:1.55;color:var(--muted)}

/* ---------- features ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(36px,7vw,110px)}
.feature+.feature{margin-top:clamp(90px,13vw,190px)}
.feature--flip .feature__text{order:2}
.feature h2{margin-top:18px;font-size:clamp(36px,5.2vw,68px)}
.feature p{margin:22px 0 0;font-size:clamp(17px,1.8vw,21px);line-height:1.5;color:color-mix(in srgb,var(--text) 72%,transparent)}
@media (max-width:860px){.feature{grid-template-columns:1fr}.feature--flip .feature__text{order:0}}
.card{position:relative;overflow:hidden;border-radius:30px;background:var(--chip);border:1px solid var(--chip-stroke);box-shadow:var(--shadow);
  }
[data-parallax]{transform:translate3d(0,calc(var(--py,0)*1px),0)}
section[id],main[id]{scroll-margin-top:52px}
.answer{scroll-margin-top:72px}
.reader{min-height:400px;padding:34px 38px}
.skl{display:block;height:10px;border-radius:5px;background:var(--skl);margin-top:13px}
.skl--head{width:34%;height:8px;margin:0 0 22px;background:var(--skl-strong)}
.skl b{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;margin-right:8px;background:var(--skl-strong)}
.sheet{position:absolute;left:0;right:0;bottom:0;padding:16px 38px 28px;border-radius:26px 26px 0 0;background:color-mix(in srgb,var(--bg) 55%,#22304e);border-top:1px solid color-mix(in srgb,var(--ornament) 35%,transparent)}
.sheet::before{content:"";display:block;width:40px;height:4px;margin:0 auto 16px;border-radius:2px;background:var(--skl)}
.player{min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;padding:34px 36px}
.player__img{position:absolute;inset:0;background:url(assets/sky-dark.jpg) center 62%/cover;opacity:.95}
@media (prefers-color-scheme:light){.player__img{filter:saturate(.9)}}
.player__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,40,.1),rgba(15,22,40,.78))}
.play{position:absolute;left:50%;top:32%;translate:-50% -50%;width:88px;height:88px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#F2EADB}
.play svg{width:30px;height:30px;fill:currentColor;margin-left:4px}
.eq{position:relative;display:flex;align-items:flex-end;gap:5px;height:34px}
.eq i{display:block;width:4px;height:100%;border-radius:2px;background:#D4A857;transform-origin:bottom;transform:scaleY(.25)}
.in .eq i,.eq.in i{animation:eq 1.4s ease-in-out infinite;animation-delay:calc(var(--k)*-.23s)}
@keyframes eq{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.bar{position:relative;height:3px;margin-top:16px;border-radius:2px;background:rgba(242,234,219,.25)}
.bar i{display:block;height:100%;width:34%;border-radius:2px;background:#D4A857}
@media (max-width:860px){.reader,.player{min-height:340px}}

.privacy{text-align:center;border-top:1px solid var(--glass-line)}
.privacy h2{font-size:clamp(34px,4.6vw,56px)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:1000px;margin:44px auto 0}
@media (max-width:760px){.trio{grid-template-columns:1fr;gap:28px}}
.trio h3{margin:0;font:500 26px/1.15 var(--serif);color:var(--gold)}
.trio p{margin:8px 0 0;font-size:16px;line-height:1.5;color:color-mix(in srgb,var(--text) 70%,transparent)}
.foot{padding:0 var(--pad) 56px;text-align:center;font-size:13px;color:var(--muted)}
.foot p{margin:12px 0 0}
.foot .dot{opacity:.5;margin:0 6px}
.foot a{white-space:nowrap}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  html.js .reveal{opacity:1;transform:none;filter:none}
  .sky,.hero__in,[data-parallax]{transform:none!important;opacity:1}
  .eq i{transform:scaleY(.6)}
}

/* ---------- static pages: skip link, language menu ---------- */
.skip{position:absolute;left:-9999px;top:8px;z-index:60;padding:10px 16px;border-radius:12px;background:var(--gold);color:var(--on-gold);font-weight:500}
.skip:focus{left:12px}
.btn--small{min-height:0;padding:6px 16px;font-size:13px}
.langmenu{position:relative}
.langmenu summary{list-style:none;cursor:pointer;padding:5px 26px 5px 14px;font-size:13px;border:1px solid var(--glass-line);border-radius:980px;white-space:nowrap;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23A89B82' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.langmenu summary::-webkit-details-marker{display:none}
.langmenu ul{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;margin:0;padding:6px;list-style:none;border-radius:16px;background:color-mix(in srgb,var(--bg) 90%,#1B2A48);border:1px solid var(--chip-stroke);box-shadow:var(--shadow)}
.langmenu li a{display:block;padding:8px 12px;border-radius:10px;font-size:14px;color:var(--text)}
.langmenu li a:hover,.langmenu li a[aria-current]{background:var(--gold-soft);text-decoration:none}
.hero__langs a{color:var(--muted)}
.hero__langs a:hover{color:var(--gold);text-decoration:none}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--gold)}

/* ---------- the demo: what asking looks like in the app (nothing here talks to a server) ---------- */
.demo{max-width:1120px;margin:56px auto 0}
.demo__ask{max-width:900px;margin:0 auto}
.demo__ask .chip-lg,.demo__ask .pill{cursor:default}
.demo__composer{align-items:center;padding:8px 8px 8px 26px}
.demo__input{flex:1;min-width:0;display:flex;align-items:center;font-size:17px;line-height:1.4;text-align:left;padding:10px 0}
.typed{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:clip}
.caret{display:none;width:2px;height:1.15em;margin-left:2px;background:var(--gold);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.demo__answer{margin-top:64px}
.tag{display:inline-block;margin:0 0 18px;padding:5px 12px;border-radius:980px;border:1px solid color-mix(in srgb,var(--ornament) 45%,transparent);font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.demo__note{margin:36px auto 0;max-width:560px;font-size:15px;line-height:1.5;color:var(--muted)}
.demo__cta{margin:26px 0 0}

/* Played once when the demo scrolls into view; without scripts everything is simply shown. */
html.js .demo:not(.is-playing) .typed{clip-path:inset(0 100% 0 0)}
html.js .demo.is-playing .typed{animation:typing 1.5s steps(var(--n)) 1s both}
@keyframes typing{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
html.js .demo.is-playing .caret{display:inline-block}
html.js .demo.is-playing .chip-lg.first{animation:press 1.2s var(--ease) .3s both}
@keyframes press{
  0%{transform:none}
  30%{transform:scale(.97)}
  60%{transform:scale(1.03);border-color:var(--ornament);box-shadow:0 0 30px color-mix(in srgb,var(--gold) 38%,transparent);background:color-mix(in srgb,var(--ornament) 18%,var(--chip))}
  100%{transform:scale(1.015);border-color:color-mix(in srgb,var(--ornament) 70%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--gold) 24%,transparent);background:color-mix(in srgb,var(--ornament) 14%,var(--chip))}
}
html.js .demo:not(.is-playing) .demo__answer .part{opacity:0}
html.js .demo.is-playing .demo__answer .part{animation:rise 1.1s var(--ease) both;animation-delay:calc(2.9s + var(--i,0)*140ms)}

/* ---------- devices ---------- */
.platforms{text-align:center}
.device-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:56px;text-align:left}
@media (max-width:1000px){.device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.device-grid{grid-template-columns:1fr}}
.device{padding:28px 24px 30px;border-radius:28px;background:var(--chip);border:1px solid var(--chip-stroke);transition:transform .4s var(--ease),border-color .3s}
.device:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ornament) 50%,transparent)}
.device__art{height:104px;margin-bottom:22px;color:var(--gold)}
.device__art svg{height:100%;width:auto}
.device h3{margin:0 0 8px;font:500 27px/1.15 var(--serif)}
.device p{margin:0;font-size:15.5px;line-height:1.5;color:color-mix(in srgb,var(--text) 72%,transparent)}

/* ======================================================================
   bibleanswer.app: the app's features, devices, screenshot slots, links
   ====================================================================== */
.hero__cta{gap:22px 30px}
.badge{display:inline-block;line-height:0;transition:transform .35s var(--ease),filter .3s}
.badge:hover{transform:translateY(-2px);filter:brightness(1.08)}
.badge img{height:54px;width:auto}
.btn--small{white-space:nowrap}
@media (max-width:760px){.nav .btn{display:none}}
.cta{text-align:center}
.cta h2{background:var(--verse-ink);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.cta p{margin:34px 0 0}

/* reader: the three readings of a verse */
.lens{display:flex;gap:6px;padding:4px;border-radius:980px;background:var(--skl)}
.lens span{flex:1;padding:6px 8px;border-radius:980px;text-align:center;font:500 12px/1.2 var(--sans);color:var(--muted);white-space:nowrap}
.lens .on{background:var(--gold);color:var(--on-gold)}

/* guide: an engraving and the seven pages of the guide */
.guidecard{padding:0}
.guidecard__img{display:block;width:100%;height:auto;aspect-ratio:900/494;object-fit:cover;filter:saturate(.85)}
@media (prefers-color-scheme:dark){.guidecard__img{filter:saturate(.8) brightness(.82)}}
.chipgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:18px}
.chip-sm{display:flex;align-items:center;gap:10px;min-height:46px;padding:9px 12px;border-radius:16px;background:var(--chip);border:1px solid var(--chip-stroke);font-size:13.5px;line-height:1.3}
.chip-sm .ico{width:18px;height:18px;flex:none;color:var(--gold)}
.chip-sm:last-child{grid-column:1/-1}

/* counsel */
.topicscard{padding:28px}
.topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.topic{display:flex;align-items:center;gap:14px;min-height:92px;padding:16px 18px;border-radius:20px;background:color-mix(in srgb,var(--ornament) 8%,var(--chip));border:1px solid color-mix(in srgb,var(--ornament) 30%,transparent);font:500 25px/1.15 var(--serif)}
.topic b{flex:none;width:8px;height:8px;background:var(--ornament);transform:rotate(45deg)}

/* quiet and the hour's prayer */
.player__img{background-size:cover;background-position:center}
.platecard{padding:10px;max-width:360px;margin:0 auto}
.platecard img{display:block;width:100%;height:auto;border-radius:22px}
.hourlist{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.hourlist .pill{cursor:default}

/* a verse for every day */
.today{text-align:center}
.mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:900px;margin:52px auto 0}
@media (max-width:640px){.mini-grid{grid-template-columns:1fr;max-width:260px}}
.mini{position:relative;aspect-ratio:1;padding:24px;border-radius:34px;background:var(--chip);border:1px solid var(--chip-stroke);box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:flex-end;gap:2px;text-align:left}
.mini .label{margin:0 0 auto;color:var(--gold);font-size:10px;line-height:1.5;letter-spacing:.2em}
.mini--lock{align-items:center;text-align:center;justify-content:flex-start;padding-top:34px}
.mini--lock .skl{width:70%}
.clock{margin-bottom:auto;font:300 54px/1 var(--serif);letter-spacing:-.02em;color:var(--text)}
.mini--watch{align-items:center;justify-content:center;border-radius:50%;border:6px solid color-mix(in srgb,var(--bg) 40%,#1B2740)}
.mini--watch .ico{width:46px;height:46px;stroke-width:1.2;color:var(--gold)}
.ring{position:absolute;inset:18px;border-radius:50%;border:2px solid var(--skl);border-top-color:var(--gold);border-right-color:var(--gold);transform:rotate(-30deg)}

/* devices: Mac is not out yet */
.device--soon{opacity:.72;border-style:dashed}
.soon{margin-left:8px;padding:3px 10px;border-radius:980px;border:1px solid color-mix(in srgb,var(--ornament) 45%,transparent);font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);vertical-align:middle}

/* screenshots: Apple's sizes (iPhone 1320x2868, iPad 2064x2752); a quiet frame until the real one is added */
.screens{text-align:center}
.shots{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:48px}
.shot{margin:0;flex:0 1 230px;min-width:0}
.shot--ipad{flex-basis:340px}
@media (max-width:560px){.shot{flex-basis:calc(50% - 10px)}.shot--ipad{flex-basis:100%}}
.shot img{display:block;width:100%;height:auto;border-radius:30px;box-shadow:var(--shadow);border:1px solid var(--chip-stroke)}
.shot__ph{position:relative;aspect-ratio:1320/2868;border-radius:30px;border:1px solid color-mix(in srgb,var(--ornament) 30%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,#223055),var(--bg));display:flex;align-items:center;justify-content:center}
.shot__ph img{width:64px;height:64px;border:0;border-radius:15px;box-shadow:none;opacity:.5}
.shot--ipad .shot__ph{aspect-ratio:2064/2752}

/* languages */
.languages{text-align:center}
.lang-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.pill--lang{padding:12px 22px;font-size:16px;color:var(--text)}
.pill--lang:hover{text-decoration:none}
.pill--lang[aria-current]{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:500}
.foot__fine{font-size:12px}

/* /links and 404 */
body.solo{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:56px var(--pad)}
.links{width:100%;max-width:440px;text-align:center}
.links .hero__icon{margin:0 auto 26px}
.links__title{font-size:clamp(46px,12vw,64px)}
.links__tag{margin:14px 0 0;color:color-mix(in srgb,var(--text) 78%,transparent);font-size:18px}
.links__store{margin:30px 0 36px}
.links__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.links__list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 6px 20px;border-radius:20px;background:var(--chip);border:1px solid var(--chip-stroke);min-height:60px}
.links__lang{font:500 22px/1.2 var(--serif);color:var(--text);padding:12px 0;flex:1;text-align:left}
.links__lang:hover{color:var(--gold);text-decoration:none}
.links__handle{font-size:13px;color:var(--muted);padding-right:12px;white-space:nowrap}
.links__list--plain{display:flex;flex-wrap:wrap;justify-content:center;margin-top:30px;max-width:440px}
.links__list--plain li{justify-content:center;padding:0;min-height:48px}
.links__list--plain .links__lang{text-align:center;flex:none;padding:12px 20px;font-size:18px}
.links__foot{margin-top:34px;font-size:13px;color:var(--muted)}
.links__foot a{color:var(--muted)}
.links__foot .dot{margin:0 6px;opacity:.5}

/* social links: footer line and the /links page */
.foot__social a{color:var(--muted)}
.soc__lang{font-size:10px;letter-spacing:.08em;opacity:.7;margin-left:3px}
.links__follow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 0}
.links__follow .pill{display:inline-flex;align-items:center;padding:10px 18px;font-size:14px}

/* ======================================================================
   Redesign: cinematic type, a living sky, a phone that follows the page
   ====================================================================== */

/* words rise out of a mask, one by one */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .05em .22em;margin:-.14em -.05em -.22em}
.split .w>span{display:inline-block;transform-origin:0 100%}
h1.split,.ask h2.split,.cta h2.split{background:none;color:var(--text);-webkit-text-fill-color:currentcolor}
.grad .w>span{background:var(--verse-ink);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.split--hero .w>span{animation:wordup 1.5s var(--ease) both;animation-delay:calc(.25s + var(--i)*110ms)}
@keyframes wordup{from{transform:translateY(118%) rotate(4deg);opacity:0;filter:blur(8px)}to{transform:none;opacity:1;filter:none}}
html.js .split:not(.split--hero) .w>span{transition:transform 1.2s var(--ease) calc(var(--i)*75ms)}
html.js .split:not(.split--hero):not(.in) .w>span{transform:translateY(118%) rotate(4deg)}
h1.split{font-size:clamp(54px,10.4vw,140px);line-height:.98}

/* hero: a slow light behind the icon, a sky that arrives */
.hero__fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero__glow{will-change:transform,opacity;position:absolute;left:50%;top:44%;width:min(1100px,150vw);aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 24%,transparent),color-mix(in srgb,var(--gold) 7%,transparent) 55%,transparent 74%);animation:breathe 10s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.65;scale:.93}50%{opacity:1;scale:1.05}}
.hero__icon{position:relative}
.hero__icon::after{content:"";position:absolute;inset:-14px;border-radius:34px;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);opacity:0;animation:ring 5s ease-out 1.6s infinite}
@keyframes ring{0%{opacity:.7;transform:scale(.94)}100%{opacity:0;transform:scale(1.5)}}
.sky__img{animation:skyin 3.4s var(--ease) both}
@keyframes skyin{from{scale:1.14;opacity:0}to{scale:1;opacity:var(--sky-o)}}
.stars{position:absolute;inset:0}
.stars__cv{position:absolute;inset:0;width:100%;height:100%}
.sky::after{content:"";position:absolute;inset:-18% -10% 12%;pointer-events:none;will-change:transform;
  background:radial-gradient(38% 46% at 20% 38%,rgba(78,122,210,.26),transparent 72%),radial-gradient(32% 42% at 80% 28%,rgba(212,168,87,.15),transparent 72%);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.1)}}
@media (prefers-color-scheme:light){.sky::after{display:none}}

/* the answer: after it appears, a glint crosses the verse */
@media (prefers-color-scheme:dark){
  html.js .demo.is-playing .demo__answer .verse.part{
    background:linear-gradient(104deg,transparent 40%,rgba(255,250,235,.95) 50%,transparent 60%) no-repeat,var(--verse-ink);
    background-size:280% 100%,100% 100%;background-position:170% 0,0 0;-webkit-background-clip:text;background-clip:text;
    animation:rise 1.1s var(--ease) calc(2.9s + var(--i,0)*140ms) both,sheen 3.2s ease-in-out 5.6s both}
}
@keyframes sheen{from{background-position:170% 0,0 0}to{background-position:-70% 0,0 0}}

/* ---------- the story: a phone that follows you down the page ---------- */
.story{position:relative;overflow-x:clip;padding:clamp(24px,6vw,80px) var(--pad) clamp(40px,8vw,100px)}
.story__in{max-width:1180px;margin:0 auto}
.stage{display:none}

.phone{--pw:min(320px,calc((100vh - 170px)/2.17));--u:calc(var(--pw)*.0094);position:relative;width:var(--pw)}
.phone__glow{position:absolute;inset:-16%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 30%,transparent),transparent 72%);filter:blur(26px);opacity:.75}
.phone__body{position:relative;aspect-ratio:1/2.17;padding:calc(var(--pw)*.028);border-radius:calc(var(--pw)*.15);
  background:linear-gradient(145deg,#2c3552,#0a0e1b 42%,#1c2440);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 0 calc(var(--pw)*.007) #05070d,0 50px 120px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.06)}
.phone__island{position:absolute;z-index:3;left:50%;top:calc(var(--pw)*.05);translate:-50% 0;width:calc(var(--pw)*.28);height:calc(var(--pw)*.08);border-radius:99px;background:#000}
.phone__screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--pw)*.123);isolation:isolate;
  background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 80%,#2a3a60))}
.scene{position:absolute;inset:0;padding:calc(var(--u)*17) calc(var(--u)*6) calc(var(--u)*6);overflow:hidden;opacity:0;pointer-events:none;
  transform:translateY(calc(var(--u)*3)) scale(1.035);filter:blur(7px);
  transition:opacity .75s var(--ease),transform 1s var(--ease),filter .75s var(--ease)}
.scene.on{opacity:1;transform:none;filter:none}
.sc-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-body{position:relative}
.sc-ref{margin:0;text-align:center;font:500 calc(var(--u)*3.3)/1.2 var(--serif);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.sc-verse{margin:calc(var(--u)*5) 0;padding:calc(var(--u)*3.4) calc(var(--u)*3.8);text-align:left;font:400 calc(var(--u)*4.7)/1.4 var(--serif);text-shadow:0 0 16px var(--halo);
  border-left:calc(var(--u)*.7) solid var(--gold);border-radius:calc(var(--u)*2.4);background:var(--gold-soft)}
.sc-body>.skl{height:calc(var(--u)*2.2);margin-top:calc(var(--u)*3);border-radius:9px}
.sc-body>.sc-ref+.skl{margin-top:calc(var(--u)*6)}
.sc-sheet{position:absolute;left:0;right:0;bottom:0;padding:calc(var(--u)*4) calc(var(--u)*6) calc(var(--u)*9);border-radius:calc(var(--u)*7) calc(var(--u)*7) 0 0;
  background:color-mix(in srgb,var(--bg) 55%,#22304e);border-top:1px solid color-mix(in srgb,var(--ornament) 35%,transparent)}
.sc-grab{display:block;width:calc(var(--u)*11);height:calc(var(--u)*1.1);margin:0 auto calc(var(--u)*4);border-radius:9px;background:var(--skl)}
.sc-sheet .skl{height:calc(var(--u)*2.4);margin-top:calc(var(--u)*3.2);border-radius:9px}
.scene .lens{gap:calc(var(--u)*1.2);padding:calc(var(--u)*1.2)}
.scene .lens span{padding:calc(var(--u)*2) calc(var(--u)*1);font-size:calc(var(--u)*3.2)}
.sc-plate{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--u)*5);filter:saturate(.85)}
@media (prefers-color-scheme:dark){.sc-plate{filter:saturate(.8) brightness(.85)}}
.scene .chipgrid{padding:calc(var(--u)*4) 0 0;gap:calc(var(--u)*2.4)}
.scene .chip-sm{min-height:calc(var(--u)*16);padding:calc(var(--u)*2.4) calc(var(--u)*3);gap:calc(var(--u)*2.4);font-size:calc(var(--u)*3.4);border-radius:calc(var(--u)*4)}
.scene .chip-sm .ico{width:calc(var(--u)*4.8);height:calc(var(--u)*4.8)}
.scene .topics{grid-template-columns:1fr;gap:calc(var(--u)*2.6)}
.scene .topic{padding:calc(var(--u)*4) calc(var(--u)*5);gap:calc(var(--u)*3.4);font-size:calc(var(--u)*7.4);border-radius:calc(var(--u)*5.5)}
.scene .topic--s{display:block;min-height:0}
.scene .topic__t{display:flex;align-items:center;gap:calc(var(--u)*3.4)}
.scene .topic--s .skl{height:calc(var(--u)*2.1);margin-top:calc(var(--u)*3);width:92%;border-radius:9px}
.scene .topic b{width:calc(var(--u)*2);height:calc(var(--u)*2)}
.sc-bg{position:absolute;inset:0;background-size:cover;background-position:center 62%}
.sc-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,40,.1),rgba(15,22,40,.82))}
.scene .play{top:36%;width:calc(var(--u)*22);height:calc(var(--u)*22)}
.scene .play svg{width:calc(var(--u)*7.5);height:calc(var(--u)*7.5);margin-left:calc(var(--u)*1)}
.scene .eq{position:absolute;left:calc(var(--u)*6);bottom:calc(var(--u)*18);gap:calc(var(--u)*1.4);height:calc(var(--u)*9)}
.scene .eq i{width:calc(var(--u)*1)}
.scene.on .eq i{animation:eq 1.4s ease-in-out infinite;animation-delay:calc(var(--k)*-.23s)}
.scene .bar{position:absolute;left:calc(var(--u)*6);right:calc(var(--u)*6);bottom:calc(var(--u)*11);margin:0;height:calc(var(--u)*.9)}
.sc-plate--fill{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-position:center top}
.sc-hours{position:absolute;left:calc(var(--u)*5);right:calc(var(--u)*5);bottom:calc(var(--u)*8);display:grid;gap:calc(var(--u)*2.2)}
.scene .sc-hours .pill{justify-content:center;padding:calc(var(--u)*2.8) calc(var(--u)*3);font-size:calc(var(--u)*4);background:rgba(15,22,40,.66);border-color:rgba(255,255,255,.14);color:#F2EADB;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.story__dots{display:flex;gap:9px;list-style:none;margin:0;padding:0}
.story__dots li{width:6px;height:6px;border-radius:3px;background:var(--skl);transition:width .5s var(--ease),background .4s}
.story__dots li.on{width:24px;background:var(--gold)}

@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  html.js .story__in{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(48px,7vw,120px)}
  html.js .stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;align-self:start;position:sticky;top:0;height:100vh;height:100svh;padding-top:52px;perspective:1700px}
  html.js .story .phone{transform:rotateY(calc((var(--sp,.5) - .5)*-18deg)) rotateX(3deg);transition:transform .35s linear;will-change:transform}
  html.js .story .step{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;margin:0;padding:10vh 0;opacity:.2;transition:opacity .8s var(--ease)}
  html.js .story .step.is-on{opacity:1}
  html.js .story .step__card{display:none}
  html.js .story .feature__text{max-width:540px}
  html.js .story .step h2{font-size:clamp(44px,5.2vw,78px)}
  html.js .story .step .eyebrow{margin-bottom:6px}
}
@media (prefers-reduced-motion:reduce){
  .split .w>span,.split--hero .w>span{transform:none!important;opacity:1!important;filter:none!important;animation:none!important}
}

.sc-eras{padding-top:calc(var(--u)*2.4)}
.sc-era{display:flex;align-items:center;gap:calc(var(--u)*3.2);margin-top:calc(var(--u)*4.2)}
.sc-era b{flex:none;width:calc(var(--u)*2.4);height:calc(var(--u)*2.4);border-radius:50%;background:var(--ornament);box-shadow:0 0 calc(var(--u)*3) color-mix(in srgb,var(--ornament) 60%,transparent)}
.sc-era .skl{margin:0;height:calc(var(--u)*2.4);border-radius:9px}
.scene .topic--ghost{border-style:dashed;opacity:.55}

/* the closing line: a warm light rising behind it */
.cta{position:relative;overflow:hidden;padding-bottom:clamp(110px,16vw,220px)}
.cta::before{content:"";position:absolute;left:50%;bottom:-34%;width:min(1300px,150%);aspect-ratio:2/1;translate:-50% 0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 26%,transparent),color-mix(in srgb,var(--gold) 6%,transparent) 62%,transparent 74%);animation:breathe 10s ease-in-out infinite}
.cta .wrap{position:relative}
.cta .badge img{height:64px}