/* Bible Chat homepage. A night sky turning to dawn: one card with today's prayer
   and the live chat, the ways to continue on your phone, then a calm page. */
.page {
  --ground: #060b19; --ground-2: #0a1226; --moss: #121d36; --line: #f2ead81a; --line-strong: #f2ead830;
  --cream: #f4ecdb; --cream-soft: #f4ecdbd1; --mist: #a3aec4; --gold: #e8ca8c; --gold-soft: #f0dcae; --gold-deep: #c9a463;
  --ink: #0a0f1c; --paper: #f7f0e1;
  --surface: #0d1630ee; --surface-deep: #070d1ef5;
  --display: "Spectral", Georgia, "Times New Roman", serif;
  --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  background: var(--ground); min-height: 100vh; color: var(--cream); font: 400 15px/1.5 var(--ui);
  color-scheme: dark; -webkit-font-smoothing: antialiased; position: relative; overflow-x: clip;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #060b19; }
html { scroll-behavior: smooth; }
button { font: inherit; }
.page :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.page .composer textarea:focus-visible { outline: none; }
.sr { clip: rect(0 0 0 0); white-space: nowrap; width: 1px; height: 1px; position: absolute; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--paper); color: var(--ink); padding: 8px 14px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.top { z-index: 5; position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px 36px; }
.mark { color: var(--cream); font: 400 28px/1 var(--display); letter-spacing: -.015em; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; justify-self: start; }
.mark .cross { width: auto; height: 25px; margin-top: -3px; color: var(--gold); filter: drop-shadow(0 0 8px #e8ca8c66); }
.markText { display: grid; gap: 3px; }
.markText small { font: 400 12px/1 var(--ui); letter-spacing: .01em; color: var(--mist); }
.markText > * { white-space: nowrap; }
.topLinks { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: #0a12264d; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.topLinks a { color: var(--cream-soft); font: 500 14px var(--ui); text-decoration: none; padding: 7px 14px; border-radius: 999px; transition: background .2s, color .2s; }
.topLinks a:hover { color: var(--cream); background: #f4ecdb12; }
.topActions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.lang { appearance: none; background: transparent; color: var(--cream-soft); border: 1px solid var(--line-strong); border-radius: 999px; height: 40px; padding: 0 14px; font: 500 13px var(--ui); cursor: pointer; }
.lang:hover { border-color: #f4ecdb59; }
.lang option { color: #111; }
.topApp { background: var(--paper); height: 40px; color: var(--ink); font: 600 14px var(--ui); border: 0; border-radius: 999px; display: inline-flex; align-items: center; padding: 0 18px; cursor: pointer; box-shadow: 0 8px 30px -10px #f0dcae80; transition: transform .2s var(--ease), background .2s; }
.topApp:hover { background: #fff; transform: translateY(-1px); }

/* ── Hero: night turning to dawn ─────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 128px 36px 230px; background: linear-gradient(180deg, #040814 0%, #08112a 34%, #10204a 62%, #1b2c58 80%, #23315a 100%); }
.skyFrame { position: absolute; inset: 0; pointer-events: none; }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s; }
#sky[data-painted="true"] { opacity: 1; }
.halo { position: absolute; left: 62%; top: 56%; width: 1100px; height: 900px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, #f6dca04d, #e8ca8c1f 45%, transparent); filter: blur(10px); }
/* The edge of the earth, lit from below by a sun that hasn't risen yet */
.horizon { position: absolute; left: 50%; bottom: -1180px; width: max(2600px, 210vw); height: 1300px; transform: translateX(-50%); border-radius: 50%; background: var(--ground);
  box-shadow: 0 -1px 0 #f6dfaa8c, 0 -8px 22px #f0d39a59, 0 -40px 90px #e8ca8c40, 0 -140px 240px #d8b07a26; }
.skyFrame::after { content: ""; position: absolute; inset: auto 0 0; height: 70px; background: linear-gradient(transparent, var(--ground)); }
.grain { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.heroGrid { position: relative; z-index: 2; max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); grid-template-rows: auto 1fr; grid-template-areas: "intro card" "continue card"; column-gap: clamp(40px, 6vw, 96px); align-items: start; }
.intro { grid-area: intro; padding-top: 44px; animation: enter .9s var(--ease) both; }
.stage { grid-area: card; animation: enter .9s .12s var(--ease) both; }
.continue { grid-area: continue; display: grid; gap: 12px; max-width: 440px; margin-top: 40px; animation: enter .9s .24s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }

.heroTitle { margin: 0; font: 300 clamp(44px, 5.4vw, 72px)/1.02 var(--display); letter-spacing: -.028em; text-wrap: balance; color: #fbf4e4; }
.heroSub { margin: 24px 0 0; max-width: 30em; font: 400 18px/1.6 var(--ui); color: var(--cream-soft); text-wrap: pretty; }
.continueLabel { margin: 0 0 2px; font: 500 13.5px var(--ui); color: var(--mist); }

/* ── The card: today's prayer + the chat ─────────────────────────────────── */
.card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; width: 100%;
  border: 1px solid var(--line-strong); border-radius: 30px; padding: 30px 30px 20px;
  background: linear-gradient(180deg, var(--surface), var(--surface-deep));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 1px #ffecbe1f, 0 60px 120px -40px #000000e6, 0 0 0 1px #00000040, 0 0 120px -20px #e8ca8c2e;
}
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, #f6dfaa99, transparent); }
.prayMeta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1.2 var(--ui); letter-spacing: .02em; color: var(--gold); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px #e8ca8c26; }
.date { font: 400 13.5px var(--ui); color: var(--mist); }
.prayTitle { position: relative; margin: 18px 0 0; font: 400 27px/1.3 var(--display); letter-spacing: -.012em; text-wrap: pretty; color: #fbf4e4; }
.prayTitle::before { content: "“"; position: absolute; left: -.42em; top: -.04em; color: var(--gold); opacity: .8; }
.prayTitle[data-long="true"] { font-size: 23px; line-height: 1.36; }
.prayRef { margin: 10px 0 0; font: 500 14px var(--ui); color: var(--gold-soft); }
.prayRef:empty { display: none; }
.player { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 24px; }
.play { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f8e3b4, var(--gold) 60%, var(--gold-deep)); color: var(--ink); cursor: pointer; transition: transform .25s var(--ease); box-shadow: 0 12px 34px -10px #e8ca8cb3, inset 0 1px #fff6; }
.play:hover { transform: scale(1.05); }
.play svg { width: 22px; height: 22px; }
.play .i-stop, .play[aria-pressed="true"] .i-play { display: none; }
.play[aria-pressed="true"] .i-stop { display: block; }
.play[aria-pressed="true"]::after { content: ""; position: absolute; inset: -6px; border: 1px solid #e8ca8c80; border-radius: 50%; animation: ring 1.8s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.wave { display: flex; align-items: center; gap: 2px; height: 38px; min-width: 0; }
.wave i { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: #f4ecdb33; transition: background .3s; }
.wave i[data-on="true"] { background: var(--gold); }
.time { min-width: 36px; text-align: right; font: 500 12.5px var(--ui); font-variant-numeric: tabular-nums; color: var(--mist); }
.prayActions { display: flex; gap: 8px; margin-top: 20px; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; color: var(--cream); font: 500 13.5px var(--ui); cursor: pointer; background: #f4ecdb0a; border: 1px solid var(--line-strong); border-radius: 999px; transition: background .2s, border-color .2s; }
.pill:hover { background: #f4ecdb14; border-color: #f4ecdb4d; }
.pill svg { width: 16px; height: 16px; color: var(--gold); }
.pill[aria-expanded="true"] { border-color: #e8ca8c80; background: #e8ca8c14; }
.reading { display: grid; gap: 14px; margin-top: 20px; padding: 18px 20px; border-radius: 18px; background: #f4ecdb08; border: 1px solid var(--line); }
.reading[hidden] { display: none; }
.reading p { margin: 0; font: 400 18px/1.7 var(--display); color: #f4ecdbe6; }
.reading .question { font-style: italic; color: var(--gold-soft); }
.reading .question:empty { display: none; }
.readMore { color: var(--gold); font: 500 14px var(--ui); text-decoration: none; justify-self: start; }
.readMore:hover { text-decoration: underline; text-underline-offset: 4px; }

.deviceTop { display: none; }

/* The small bar today's prayer becomes once the chat starts */
.mini { display: none; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.miniPlay { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--gold); color: var(--ink); cursor: pointer; }
.miniPlay svg { width: 17px; height: 17px; }
.miniTitle { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 8px; color: var(--cream); text-align: left; cursor: pointer; background: none; border: 0; padding: 0; }
.miniTitle > span:first-child { display: grid; gap: 2px; min-width: 0; }
.miniEyebrow { font: 600 12px/1.2 var(--ui); color: var(--gold); }
.miniName { font: 400 16.5px/1.3 var(--display); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.miniTitle svg { width: 18px; height: 18px; color: var(--mist); transition: transform .25s; }
.miniTitle[aria-expanded="true"] svg { transform: rotate(180deg); }
.card[data-phase="chat"] { height: 610px; }

.card[data-phase="chat"] .mini { display: grid; flex: none; }
.card[data-phase="chat"] .talk { flex: none; }
.card[data-phase="chat"] .pray { display: none; }
.card[data-phase="chat"] .reading { margin-top: 16px; }

/* The conversation */
.thread { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; padding: 20px 2px 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 10px), transparent); mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 10px), transparent); scrollbar-width: thin; scrollbar-color: #f4ecdb2e transparent; }
.thread:empty { display: none; }
.msg-me { align-self: flex-end; max-width: 86%; padding: 10px 22px; font: 400 15.5px/1.45 var(--ui); white-space: pre-wrap; overflow-wrap: anywhere; color: #fbf4e4; background: linear-gradient(180deg, #e8ca8c2e, #e8ca8c1f); border: 1px solid #e8ca8c33; border-radius: 20px 20px 6px; animation: rise .4s var(--ease) both; }
.msg-them { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; padding-inline: 4px 20px; animation: rise .4s var(--ease) both; }
.msg-them .who { display: grid; justify-items: center; width: 30px; padding-top: 4px; color: var(--gold); }
.msg-them .who .cross { width: auto; height: 22px; filter: drop-shadow(0 0 6px #e8ca8c59); }
.words { min-width: 0; display: grid; gap: 10px; padding-top: 3px; font: 400 17.5px/1.6 var(--display); color: #f4ecdbf0; overflow-wrap: anywhere; }
.words p { margin: 0; white-space: pre-wrap; }
/* The reading guide: the line being read is gold, then hands the gold on to the next one. */
.words .w { transition: color .45s var(--ease); }
.words .w.lit { color: var(--gold-soft); }
.words audio { width: 100%; }
.note { margin: 0; font: 400 13px var(--ui); color: var(--mist); text-align: center; }
.typing { display: flex; gap: 5px; padding-top: 10px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: .3; animation: blink 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 50% { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* Link previews in the chat (daily word, the Plus card) */
.card-link { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #0b1426; color: var(--cream); text-decoration: none; font-family: var(--ui); }
.card-link img { display: block; width: 100%; aspect-ratio: 1.91; object-fit: cover; }
.card-link .meta { display: grid; gap: 2px; padding: 10px 12px; }
.card-link b { font: 600 14px var(--ui); }
.card-link span { font-size: 13px; color: var(--mist); }

/* The composer */
.talk { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.card[data-phase="chat"] .talk { margin-top: 14px; padding-top: 0; border-top: 0; }
.composer { display: flex; align-items: flex-end; gap: 10px; padding: 6px 6px 6px 18px; background: #0a1328; border: 1px solid #e8ca8c40; border-radius: 26px; box-shadow: inset 0 1px 3px #0006; transition: border-color .2s, box-shadow .2s; }
.composer:focus-within { border-color: #e8ca8cb3; box-shadow: inset 0 1px 3px #0006, 0 0 0 4px #e8ca8c1a; }
.composerIcon { width: 17px; height: 17px; flex: none; color: var(--gold); align-self: center; }
.composer textarea { flex: 1; min-width: 0; height: 44px; max-height: 120px; padding: 11px 0; resize: none; color: var(--cream); font: 400 16px/1.4 var(--ui); background: transparent; border: 0; outline: 0; }
.composer textarea::placeholder { color: #f4ecdb8c; font: italic 400 18px var(--display); }
.send { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #e8ca8c24; color: var(--gold); cursor: pointer; transition: background .2s, color .2s, transform .2s var(--ease); }
.send svg { width: 19px; height: 19px; }
.composer:focus-within .send, .send:hover { background: var(--gold); color: var(--ink); }
.send:active { transform: scale(.94); }
.send:disabled { opacity: .5; cursor: progress; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chips:empty { display: none; }
.chips button { color: var(--cream); font: 500 13.5px/1.25 var(--ui); text-align: left; cursor: pointer; background: #f4ecdb08; border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.chips button:hover { background: #e8ca8c14; border-color: #e8ca8c80; transform: translateY(-1px); }
.aiNote { margin: 14px 0 0; font: 400 12px var(--ui); color: #a3aec4cc; }
.aiNote a { color: inherit; text-underline-offset: 2px; }

/* ── Continue on your phone ─────────────────────────────────────────────── */
.heroBadges { display: grid; gap: 10px; }
.badge { display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: 14px; width: 100%; padding: 12px 16px 12px 12px; color: var(--cream); text-align: left; background: #0a12268c; border: 1px solid var(--line-strong); border-radius: 18px; cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 50px -30px #000; transition: border-color .2s, background .2s, transform .25s var(--ease); }
.badge[hidden] { display: none; }
.badge:hover { border-color: #f4ecdb59; background: #0e1830b3; transform: translateY(-2px); }
.badge:disabled { opacity: .6; cursor: progress; }
.badgeIcon { display: block; flex: none; width: 42px; height: 42px; border-radius: 9.5px; overflow: hidden; box-shadow: 0 6px 16px -6px #0009; }
.badgeIcon svg { display: block; width: 100%; height: 100%; }
.badgeText { display: grid; gap: 1px; }
.badgeText b { font: 600 16px/1.2 var(--ui); }
.badgeText small { font: 400 13px/1.3 var(--ui); color: var(--mist); }
.chev { width: 18px; height: 18px; color: var(--mist); transition: transform .25s var(--ease), color .2s; }
.badge:hover .chev { transform: translateX(3px); color: var(--cream); }
.moreWays { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.link { background: none; border: 0; padding: 0; color: var(--cream-soft); font: 500 13.5px var(--ui); text-decoration: underline; text-decoration-color: #f4ecdb4d; text-underline-offset: 4px; cursor: pointer; }
.link:hover { text-decoration-color: var(--gold); }
.link[hidden] { display: none; }
.qr { display: flex; align-items: center; gap: 16px; padding: 14px; background: #0a12268c; border: 1px solid var(--line-strong); border-radius: 18px; }
.qr[hidden] { display: none; }
#qr-code { flex: none; line-height: 0; background: #fff; padding: 8px; border-radius: 10px; }
.qr p { margin: 0; font-size: 14px; color: var(--mist); }
.status { margin: 0; font-size: 13px; color: var(--mist); }
.status:empty { display: none; }

/* ── The page below ─────────────────────────────────────────────────────── */
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 36px; }
.sectionHead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 30px; }
.sectionTitle { margin: 0; font: 300 clamp(32px, 3.8vw, 46px)/1.1 var(--display); letter-spacing: -.02em; text-wrap: balance; color: #fbf4e4; }
.more { color: var(--gold); font: 500 14.5px var(--ui); white-space: nowrap; text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* How it works: an iPhone in dark mode, mid-conversation in Messages */
.how { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(48px, 8vw, 120px); align-items: center; padding-block: 120px 110px; scroll-margin-top: 20px; }
.phone { position: relative; justify-self: center; width: 316px; }
.phone::before { content: ""; position: absolute; inset: -16% -34%; background: radial-gradient(closest-side, #e8ca8c2b, #3b5aa01a 55%, transparent); z-index: 0; }
.side { position: absolute; z-index: 0; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #2c2f36, #4a4e57); }
.side.vol1 { left: -3px; top: 150px; height: 46px; }
.side.vol2 { left: -3px; top: 206px; height: 46px; }
.side.power { right: -3px; top: 176px; height: 78px; background: linear-gradient(270deg, #2c2f36, #4a4e57); }
.phoneBody { position: relative; z-index: 1; padding: 11px; border-radius: 56px; background: linear-gradient(145deg, #4b4f58, #1b1d22 30%, #121317 65%, #3a3d45); box-shadow: inset 0 0 0 1px #ffffff1f, inset 0 0 0 3px #0b0c0f, 0 60px 110px -40px #000, 0 30px 60px -30px #0009; }
.screen { position: relative; height: 640px; overflow: hidden; display: flex; flex-direction: column; border-radius: 46px; background: #000; font-family: -apple-system, "SF Pro Text", var(--ui); color: #f5f5f7; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, #ffffff0d, transparent 34%); }
.statusBar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 50px; padding: 4px 26px 0 34px; font: 600 15px/1 -apple-system, "SF Pro Text", var(--ui); }
.island { width: 100px; height: 30px; border-radius: 20px; background: #0a0a0c; box-shadow: inset 0 0 0 1px #ffffff0a; }
.icons { display: flex; justify-content: flex-end; align-items: center; gap: 5px; }
.icons svg { height: 11px; width: auto; fill: currentColor; color: #f5f5f7; }
.phoneTop { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; padding: 2px 14px 10px; background: #0d0d0fe6; border-bottom: .5px solid #ffffff1f; }
.phoneTop .back { width: 11px; height: 19px; color: #0a84ff; }
.phoneTop .video { width: 24px; height: 17px; color: #0a84ff; justify-self: end; }
.contact { display: grid; justify-items: center; gap: 4px; }
.contact .avatar { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 12px -4px #000; }
.contact .who { display: inline-flex; align-items: center; gap: 3px; font: 400 11.5px -apple-system, "SF Pro Text", var(--ui); color: #f5f5f7; }
.contact .who svg { width: 6px; height: 9px; color: #8e8e93; }
.bubbles { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 0 14px 10px; font: 400 14.5px/1.3 -apple-system, "SF Pro Text", var(--ui); letter-spacing: -.01em; -webkit-mask-image: linear-gradient(transparent, #000 34px); mask-image: linear-gradient(transparent, #000 34px); }
.stamp { align-self: center; margin-bottom: 8px; text-align: center; font: 500 10.5px/1.35 -apple-system, var(--ui); color: #8e8e93; }
.stamp b { font-weight: 600; }
.read { align-self: flex-end; margin: 3px 2px 0; font: 500 10.5px -apple-system, var(--ui); color: #8e8e93; }
.b { position: relative; margin: 0; max-width: 76%; padding: 7px 12px 8px; border-radius: 18px; }
.b.them { align-self: flex-start; background: #262629; }
.b.me { align-self: flex-end; background: linear-gradient(180deg, #2a95ff, #0a7cf5); color: #fff; }
.b.tail { margin-bottom: 6px; }
.b.me.tail + .read { margin-top: -3px; }
.b.tail::before, .b.tail::after { content: ""; position: absolute; bottom: 0; height: 18px; }
.b.them.tail::before { left: -7px; width: 20px; background: #262629; border-bottom-right-radius: 16px 14px; }
.b.them.tail::after { left: -26px; width: 26px; background: #000; border-bottom-right-radius: 10px; }
.b.me.tail::before { right: -7px; width: 20px; background: #0a7cf5; border-bottom-left-radius: 16px 14px; }
.b.me.tail::after { right: -26px; width: 26px; background: #000; border-bottom-left-radius: 10px; }
.typingBubble { display: flex; gap: 4px; padding: 11px 13px; margin-top: 6px; }
.typingBubble i { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: dots 1.3s infinite ease-in-out; }
.typingBubble i:nth-child(2) { animation-delay: .16s; } .typingBubble i:nth-child(3) { animation-delay: .32s; }
@keyframes dots { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.inputBar { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 8px; padding: 6px 12px 0; }
.plus { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #2c2c2e; color: #98989d; }
.plus svg { width: 15px; height: 15px; }
.field { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid #3a3a3c; font: 400 14.5px -apple-system, var(--ui); color: #6e6e73; }
.field svg { width: 11px; height: 17px; color: #8e8e93; }
.homeBar { align-self: center; width: 120px; height: 5px; margin: 16px 0 8px; border-radius: 3px; background: #f5f5f7; opacity: .9; }
.howText { max-width: 520px; }
/* The Bible Chat dove, as in the app's PaywallAnimation: wings beating, a slow bob, the sun breathing, clouds drifting. */
.bc-body, .bc-wing path, .bc-laurel path { fill: var(--bc-dove, #fefefe); }
.bc-wing.w1 { opacity: .6; } .bc-wing.w2 { opacity: .8; }
.bc-eye { fill: #9a9a9a; }
.bc-sun circle { fill: var(--bc-sun, #ffe59f); }
.bc-cloud path { fill: var(--bc-cloud, #fff); }
.bc-bob { animation: bc-bob 3s ease-in-out infinite alternate; }
.bc-wing { transform-box: fill-box; transform-origin: center; }
.bc-wing.w1 { animation: bc-w1 .15s linear infinite alternate; }
.bc-wing.w2 { animation: bc-w2 .13s linear infinite alternate; }
.bc-sun .halo2 { animation: bc-halo 3s ease-in-out infinite alternate; }
.bc-cloud { animation: bc-drift 2s linear infinite alternate; }
.bc-cloud.drift-r { animation-name: bc-drift-r; }
@keyframes bc-bob { from { transform: translateY(10px); } to { transform: translateY(-10px); } }
@keyframes bc-w1 { to { transform: rotate(7deg); } }
@keyframes bc-w2 { to { transform: rotate(10deg); } }
@keyframes bc-halo { to { opacity: 0; } }
@keyframes bc-drift { to { transform: translateX(-10px); } }
@keyframes bc-drift-r { to { transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .bc-bob, .bc-wing, .bc-sun .halo2, .bc-cloud { animation: none; } }

/* The dove crosses the whole section: in from the lower left over the phone, a long rise, out at the top right. */
.how { position: relative; }
/* Edge to edge: the flight spans the whole window, not the centred column. */
.sky-dove { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; overflow: hidden; pointer-events: none; z-index: 2; }
.dove, .dust { position: absolute; left: -12%; top: 64%; opacity: 0; animation: dove-path 14s cubic-bezier(.37, .12, .63, .9) infinite; animation-delay: 1s; }
.dove { width: clamp(96px, 10vw, 150px); height: auto; overflow: visible; --bc-dove: #fffaf0;
  filter: drop-shadow(0 0 18px #ffe7a866) drop-shadow(0 0 4px #fff3d699) drop-shadow(0 14px 18px #0008); }
.dust { width: 6px; height: 6px; margin: 4% 0 0 3%; border-radius: 50%; background: radial-gradient(#fff6dc, #e8ca8c 45%, transparent 72%); opacity: 0; animation-name: dove-dust; }
.dust.d1 { animation-delay: .3s; } .dust.d2 { animation-delay: .6s; width: 5px; height: 5px; }
.dust.d3 { animation-delay: .9s; width: 4px; height: 4px; } .dust.d4 { animation-delay: 1.2s; width: 3px; height: 3px; }
.dust.d5 { animation-delay: 1.5s; width: 3px; height: 3px; } .dust.d6 { animation-delay: 1.8s; width: 2px; height: 2px; }
@keyframes dove-path {
  0%   { left: -12%; top: 64%; opacity: 0; transform: rotate(-5deg) scale(.9); }
  4%   { opacity: 1; }
  25%  { left: 20%;  top: 44%; transform: rotate(-9deg) scale(.96); }
  50%  { left: 50%;  top: 28%; transform: rotate(-4deg) scale(1); }
  75%  { left: 80%;  top: 16%; transform: rotate(-8deg) scale(1.04); }
  96%  { opacity: 1; }
  100% { left: 104%; top: 6%;  opacity: 0; transform: rotate(-10deg) scale(1.06); }
}
@keyframes dove-dust {
  0%   { left: -12%; top: 64%; opacity: 0; }
  6%   { opacity: .9; }
  25%  { left: 20%;  top: 44%; }
  50%  { left: 50%;  top: 28%; opacity: .6; }
  75%  { left: 80%;  top: 16%; opacity: .35; }
  100% { left: 104%; top: 6%;  opacity: 0; }
}


.steps { list-style: none; counter-reset: step; margin: 40px 0 0; padding: 0; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 8px; padding: 22px 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(step); grid-row: span 2; font: 300 32px/1 var(--display); color: var(--gold); }
.steps h3 { margin: 0 0 6px; font: 400 22px/1.3 var(--display); color: var(--cream); }
.steps p { margin: 0; font: 400 15.5px/1.6 var(--ui); color: var(--mist); }

/* Every day, a new prayer */
.days { padding-block: 40px 100px; scroll-margin-top: 20px; }
.dayRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.dayRow a { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 196px; padding: 22px 22px 20px; border-radius: 22px; text-decoration: none; color: var(--cream); background: linear-gradient(180deg, #0f1934, #0a1226); border: 1px solid var(--line); transition: border-color .25s, transform .3s var(--ease); }
.dayRow li:first-child a { background: linear-gradient(180deg, #1d2a4f, #0f1830); border-color: #e8ca8c40; }
.dayRow a:hover { border-color: #e8ca8c66; transform: translateY(-3px); }
.dayRow time { font: 500 12.5px var(--ui); color: var(--mist); }
.dayRow li:first-child time { color: var(--gold); }
.dayRow q { quotes: "“" "”"; max-width: 34em; font: 400 19px/1.45 var(--display); color: #f4ecdbeb; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.dayRow .ref { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font: 500 13px var(--ui); color: var(--gold-soft); }
.dayRow .ref svg { width: 16px; height: 16px; color: var(--mist); transition: transform .25s var(--ease), color .2s; }
.dayRow a:hover .ref svg { transform: translateX(3px); color: var(--gold); }

/* What it does / Questions: heading on the left, content on the right */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; padding-block: 72px 100px; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.split .sectionTitle { align-self: start; position: sticky; top: 32px; }
.featureList { list-style: none; margin: 0; padding: 0; }
.featureList li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.featureList li:first-child { padding-top: 6px; }
.featureList h3 { margin: 0; font: 400 22px/1.3 var(--display); color: var(--cream); }
.featureList p { margin: 0; font: 400 15.5px/1.6 var(--ui); color: var(--mist); }
details { border-bottom: 1px solid var(--line); padding: 22px 0; }
details:first-child { padding-top: 6px; }
summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; font: 400 21px/1.4 var(--display); color: var(--cream); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' stroke='%23e8ca8c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .3s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
summary:hover::after { border-color: #e8ca8c80; }
details p { margin: 12px 0 0; max-width: 60ch; color: var(--mist); font: 400 16px/1.65 var(--ui); }
/* The list keeps one height (room for its longest answer, set in home.js): opening a question never moves what comes after. */
.faqList { align-self: start; }
#faq details[open] summary { color: var(--gold-soft); }

/* Closing: dawn, finally */
.closing { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 28px; padding: 120px 24px 130px; text-align: center; background: radial-gradient(46% 62% at 50% 52%, #e8ca8c1c, #e8ca8c08 55%, transparent 80%), radial-gradient(80% 90% at 50% 60%, #12204466, transparent 75%), var(--ground); }
.closing h2 { position: relative; margin: 0; max-width: 14em; font: 300 clamp(36px, 5vw, 60px)/1.06 var(--display); letter-spacing: -.025em; text-wrap: balance; color: #fbf4e4; }
.topApp.big { position: relative; height: 54px; padding: 0 28px; font-size: 16px; }

.bottom { border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-block: 30px 44px; }
.mark.small { font-size: 22px; }
.mark.small .cross { height: 20px; }
.bottom nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.bottom nav a { color: var(--mist); font: 500 14px var(--ui); text-decoration: none; }
.bottom nav a:hover { color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .dove { animation: none; left: 72%; top: 8%; opacity: .9; } .dust { display: none; }
  .typingBubble i { animation: none; }
  .intro, .stage, .continue, .msg-me, .msg-them, .typing i, .play[aria-pressed="true"]::after { animation: none; }
  .badge, .dayRow a, .chips button, .topApp { transition: none; }
}

/* ── Tablets and phones ─────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .top { grid-template-columns: 1fr auto; padding: 18px 24px; }
  .topLinks { display: none; }
  .hero { padding: 108px 20px 190px; }
  .heroGrid { grid-template-columns: minmax(0, 560px); grid-template-areas: "intro" "card" "continue"; justify-content: center; }
  .intro { padding-top: 0; text-align: center; margin-bottom: 36px; }
  .heroSub { margin-inline: auto; }
  .continue { max-width: none; margin-top: 18px; }
  .continueLabel { text-align: center; }
  .heroBadges { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .moreWays { justify-content: center; }
  .status { text-align: center; }
  .halo { left: 50%; top: 62%; }
  .how { grid-template-columns: 1fr; padding-block: 90px 80px; }
  .howText { max-width: 600px; justify-self: center; }
  .split { grid-template-columns: 1fr; gap: 24px; padding-top: 56px; }
  .split .sectionTitle { position: static; }

}
@media (max-width: 640px) {
  /* Phones: the chat comes first, as a big iPhone; the rest follows below */
  .hero { padding: 76px 12px 150px; }
  .heroGrid { grid-template-areas: "card" "intro" "continue"; }
  .intro { margin: 40px 0 6px; }
  .stage { padding: 8px; }
  .card { height: max(540px, calc(100svh - 118px)); padding: 10px 18px 14px; border-radius: 46px; border: 0;
    box-shadow: 0 0 0 7px #15171c, 0 0 0 8px #3a3f4a, 0 40px 90px -30px #000, 0 0 90px -20px #e8ca8c33; }
  .card[data-phase="chat"] { height: max(540px, calc(100svh - 118px)); }
  .card::before { display: none; }
  .deviceTop { display: grid; justify-items: center; gap: 10px; padding-bottom: 12px; margin: 0 -18px 16px; border-bottom: 1px solid var(--line); }
  .deviceIsland { width: 96px; height: 28px; border-radius: 16px; background: #000; box-shadow: inset 0 0 0 1px #ffffff0d; }
  .deviceContact { display: inline-flex; align-items: center; gap: 10px; }
  .deviceContact .cross { width: auto; height: 26px; color: var(--gold); filter: drop-shadow(0 0 8px #e8ca8c66); }
  .deviceContact b { display: block; font: 600 15px/1.2 var(--ui); }
  .deviceContact small { display: flex; align-items: center; gap: 5px; font: 400 12px/1.2 var(--ui); color: var(--mist); }
  .deviceContact small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5bd27a; }
  .talk { margin-top: auto; padding-top: 14px; border-top: 0; }
  .pray { flex: none; }
  .top { padding: 14px 16px; }
  .mark { font-size: 18px; gap: 6px; }
  .mark .cross { height: 18px; }
  .markText small { font-size: 9.5px; }
  .topActions { gap: 6px; }
  .topApp { height: 34px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
  .lang { height: 34px; padding: 0 9px; }
  .hero { padding: 92px 12px 150px; }
  .heroTitle { font-size: 40px; }
  .heroSub { font-size: 16.5px; margin-top: 16px; }
  .intro { margin-bottom: 26px; padding-inline: 8px; }
  .prayTitle { font-size: 23px; margin-left: .3em; }
  .prayTitle[data-long="true"] { font-size: 21px; }
  .prayRef { margin-left: .4em; }
  .wrap { padding-inline: 18px; }
  .phone { width: 296px; }
  .screen { height: 600px; }
  .dayRow { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin-inline: -18px; padding-inline: 18px; scroll-padding-inline: 18px; scrollbar-width: none; }
  .dayRow li { scroll-snap-align: start; }
  .featureList li { grid-template-columns: 1fr; gap: 6px; }
  .closing { padding: 90px 20px 100px; }
}

/* "Where would you like to continue?": on a computer, iMessage and WhatsApp ask first (phone = a QR code). */
.sheet { width: min(440px, calc(100vw - 32px)); padding: 30px 26px 24px; border: 1px solid var(--line-strong); border-radius: 28px; color: var(--cream);
  background: radial-gradient(120% 70% at 50% 0%, #1b2547 0%, #0c1329 60%, #0a1024 100%); box-shadow: 0 30px 80px #000a, inset 0 1px 0 #ffffff14; }
.sheet::backdrop { background: #03060fb3; backdrop-filter: blur(6px); }
.sheet[open] { animation: sheet-in .32s var(--ease) both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.sheetClose { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #ffffff0d; color: var(--mist); cursor: pointer; }
.sheetClose:hover { background: #ffffff1a; color: var(--cream); }
.sheetClose svg { width: 18px; height: 18px; }
.sheetHead { text-align: center; }
.sheetIcon { display: inline-block; width: 56px; height: 56px; margin-bottom: 12px; }
.sheetIcon svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 18px #0008); }
.sheetHead h3 { margin: 0; font: 400 28px/1.15 var(--display); color: var(--cream); }
.sheetHead p { margin: 8px 0 22px; color: var(--mist); font: 400 15.5px/1.45 var(--ui); }
.sheetChoices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sheetChoices[hidden] { display: none; }
.choice { display: grid; justify-items: center; gap: 6px; padding: 22px 12px 18px; border: 1px solid var(--line-strong); border-radius: 20px; background: #ffffff08; color: var(--cream); cursor: pointer; text-align: center; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.choice:hover { border-color: #e8ca8c80; background: #e8ca8c12; transform: translateY(-2px); }
.choice svg { width: 34px; height: 34px; color: var(--gold); margin-bottom: 4px; }
.choice b { font: 600 16px/1.2 var(--ui); }
.choice small { font: 400 13px/1.35 var(--ui); color: var(--mist); }
.choice:focus-visible, .sheetClose:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sheetQr { display: grid; justify-items: center; gap: 12px; text-align: center; animation: sheet-in .3s var(--ease) both; }
.sheetQr[hidden] { display: none; }
.qrFrame { padding: 12px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 6px #e8ca8c26, 0 18px 40px #0007; line-height: 0; }
.sheetQr p { margin: 0; max-width: 32ch; color: var(--cream-soft); font: 400 15px/1.5 var(--ui); }
.sheetQr .fallback { color: var(--mist); font-size: 13.5px; }
.sheetQr .fallback b { color: var(--gold-soft); font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .sheet[open], .sheetQr { animation: none; } .choice:hover { transform: none; } }