/* =========================================================
   Lights website — cinematic midnight navy and candle gold
   Desktop sizes follow the 1536px reference design and scale
   with the window (vw) between sensible minimums and maximums.
   ========================================================= */
:root {
  --midnight: #061326;
  --deep: #091B33;
  --panel: #102541;
  --gold: #D9AD43;
  --gold-light: #F7D878;
  --ivory: #FFF3D1;
  --body: #F6F0E4;
  --muted: #C4CBD5;
  --line: rgba(217, 173, 67, .42);
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --script: "Kaushan Script", "Brush Script MT", cursive;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gold-text: linear-gradient(180deg, #FFFEF6 0%, #FFF1BC 16%, #FAD873 34%, #EDB843 46%, #9E6612 50%, #C68A22 54%, #EDBE52 66%, #FFE69A 84%, #C08422 100%);
  --cream-text: linear-gradient(180deg, #FFFFFF 0%, #FFF7DE 30%, #FBE6A8 48%, #D9AA4E 51%, #EFCB79 60%, #FFF0C4 100%);
  --gold-bar: linear-gradient(90deg, rgba(160, 102, 15, 0), #A87318 10%, #F2C95C 30%, #FFFBE8 50%, #F2C95C 70%, #A87318 90%, rgba(160, 102, 15, 0));
  --gold-edge: linear-gradient(160deg, #FFF8DA 0%, #F6D06A 22%, #C8901F 46%, #7E5410 52%, #E2B04A 64%, #FFF0B0 82%, #B07A22 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--midnight); color: var(--body); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(1400px, 100% - 64px); margin-inline: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--gold); color: var(--midnight); padding: .5rem 1rem; border-radius: 6px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(5, 12, 26, .97); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold-bar); box-shadow: 0 0 10px rgba(247, 216, 120, .45); pointer-events: none; }
.bar { width: min(1250px, 100% - 64px); margin-inline: auto; min-height: clamp(72px, 5.5vw, 88px); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: clamp(10px, 1.3vw, 20px); text-decoration: none; }
.brand img { width: clamp(52px, 4.7vw, 76px); height: auto; filter: drop-shadow(0 0 8px rgba(217, 173, 67, .35)); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.wordmark { font-family: var(--display); font-weight: 800; letter-spacing: 0; padding: .04em .08em .16em; margin: -.04em -.08em -.16em;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand .wordmark { font-size: clamp(34px, 3.4vw, 56px); filter: drop-shadow(0 2px 0 #5E3D0B); }
.brand .tagline { font-family: var(--script); font-style: normal; font-weight: 400; color: var(--gold-light); font-size: clamp(16px, 1.55vw, 26px); margin: .1em 0 0 .25em; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(26px, 3.6vw, 60px); }
.nav a { position: relative; text-decoration: none; color: var(--body); font-weight: 500; font-size: clamp(15px, 1.05vw, 17px); text-transform: uppercase; padding: .55rem 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-light); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -6px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #C8901F, #F7D878, #C8901F); box-shadow: 0 0 8px rgba(247, 216, 120, .5); }
.menu-btn { display: none; align-items: center; gap: .5rem; background: transparent; color: var(--gold-light); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; font: 600 .95rem var(--sans); cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .6rem 2.2rem; border-radius: 999px;
  font: 600 clamp(15px, 1.12vw, 18px)/1.2 var(--sans); text-decoration: none; text-align: center; white-space: nowrap; border: 1.5px solid var(--gold); transition: transform .2s, box-shadow .2s, background-color .2s; }
.btn svg { width: 1em; height: 1em; flex: none; }
.btn-gold, .btn-ink { background: linear-gradient(180deg, #FDE9A6 0%, #F1CC6A 40%, #D9A73C 75%, #C08A27 100%); color: #16110A; border-color: #F7D878;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 20px rgba(217, 173, 67, .25), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn-gold:hover, .btn-ink:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(0, 0, 0, .55), 0 0 28px rgba(217, 173, 67, .38), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn-line { background: rgba(5, 12, 26, .55); color: var(--ivory); border-color: #E2B954; }
.btn-line:hover { background: rgba(217, 173, 67, .14); color: var(--gold-light); }
.btn-off { border-style: dashed; border-color: rgba(217, 173, 67, .5); color: var(--muted); background: transparent; cursor: default; }
.actions { display: flex; gap: 1.1rem; flex-wrap: wrap; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate;
  background: #061326 url("/assets/img/hero-burst.jpg") 50% 45% / cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 90px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, #061326); }
/* Decorative layers never catch clicks and always sit below the content */
.hero-books, .hero-art, .hero-phone { pointer-events: none; }
.hero-bible, .hero-books { filter: saturate(1.2) brightness(1.12); }
.hero-books { position: absolute; right: 0; top: 0; z-index: 0; height: 100%; width: auto; max-width: none; object-fit: cover; object-position: left center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }

.hero-grid { position: relative; display: grid; grid-template-columns: 33.5vw minmax(390px, 31vw) minmax(0, 1fr); align-items: center; min-height: 29.8vw; }
.hero-art { grid-column: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-icon { position: relative; z-index: 1; width: clamp(140px, 11.6vw, 190px); height: auto; margin: 0 0 -1.6vw 39%; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .55)) drop-shadow(0 0 18px rgba(247, 216, 120, .28)); }
.hero-bible { width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent), linear-gradient(180deg, transparent, #000 30%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 72%, transparent), linear-gradient(180deg, transparent, #000 30%); mask-composite: intersect; }
.hero-text { grid-column: 2; position: relative; z-index: 3; padding: clamp(10px, 1vw, 18px) 0 clamp(24px, 2.4vw, 40px); }
.hero-logo { margin: 0; line-height: 1; }
.hero-logo .wordmark { display: inline-block; font-size: clamp(80px, 7.5vw, 124px); line-height: 1.05;
  filter: drop-shadow(0 3px 0 #5E3D0B) drop-shadow(0 0 22px rgba(255, 196, 80, .45)); }
.hero-logo { display: flex; flex-direction: column; align-items: flex-start; }
.hero-logo .tagline { display: inline-block; margin: -.05em 0 0 .7em; padding: 0 .2em .3em; font-family: var(--script); font-style: normal; font-weight: 400;
  font-size: clamp(30px, 2.65vw, 44px); line-height: 1.1; color: var(--ivory);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, #F7D878 0%, rgba(217, 173, 67, .7) 45%, transparent 75%) no-repeat 0 100% / 110% 3px; }
.hero h1 { font-size: clamp(26px, 2.2vw, 36px); line-height: 1.18; padding-bottom: .08em; letter-spacing: -.005em; margin: clamp(10px, 1.1vw, 18px) 0 clamp(8px, .7vw, 12px);
  background: var(--cream-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); }
.hero h1 span { display: block; }
.lede { font-size: clamp(14.5px, 1.03vw, 17px); line-height: 1.3; color: #FFFFFF; max-width: 31em; margin: 0 0 clamp(16px, 1.15vw, 20px); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.hero .actions { gap: clamp(12px, 1.2vw, 20px); }
@media (min-width: 1101px) { .hero .actions { flex-wrap: nowrap; } .hero .btn { padding-inline: clamp(18px, 2.3vw, 38px); } }
.fine { margin: clamp(18px, 1.7vw, 28px) 0 0; color: var(--gold-light); font-size: clamp(13.5px, .98vw, 16px); font-weight: 500; }

.hero-phone { grid-column: 3; z-index: 2; display: flex; justify-content: flex-start; padding: clamp(14px, 1.4vw, 24px) 0 clamp(14px, 1.4vw, 24px) clamp(16px, 3.6vw, 60px); }
.hero-phone .device { width: clamp(210px, 16vw, 262px); filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .65)) drop-shadow(0 0 30px rgba(255, 196, 80, .35)); }

/* Device: rendered phone-frame PNG laid over the real screenshot */
.device { position: relative; width: 100%; aspect-ratio: 608 / 1174; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .6)); }
.device .frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; z-index: 2; }
.screen { position: absolute; left: 5.592%; top: 2.3%; width: 88.816%; height: 95.4%; container-type: inline-size; overflow: hidden;
  border-radius: 11.5% / 5.55%; background: #1C2232; }
.screen::after { content: ""; position: absolute; left: 34%; right: 34%; bottom: 2.2cqw; height: 1.1cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .55); }
.statusbar { display: flex; align-items: center; justify-content: space-between; height: 11.8cqw; padding: 1.4cqw 7cqw 0 9.5cqw; background: #1C2232;
  font: 600 5.4cqw/1 var(--sans); color: #FFFFFF; letter-spacing: .02em; }
.sb-icons { display: flex; align-items: center; gap: 1.6cqw; }
.sb-icons svg { height: 4.4cqw; width: auto; }
.battery { display: inline-grid; place-items: center; min-width: 9cqw; height: 4.8cqw; padding: 0 1.2cqw; border-radius: 1.5cqw; background: #34C759; color: #FFFFFF; font: 700 3.4cqw/1 var(--sans); }
.screen img { width: 100%; height: auto; display: block; }

/* ---------- Section heading with gold rules ---------- */
.ruled { display: flex; align-items: center; gap: clamp(14px, 1.3vw, 22px); margin: 0 auto; }
.ruled::before, .ruled::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, rgba(217, 173, 67, 0), #D9AD43 35%, #F7D878); box-shadow: 0 0 6px rgba(247, 216, 120, .35); }
.ruled::after { background: linear-gradient(90deg, #F7D878, #D9AD43 65%, rgba(217, 173, 67, 0)); }
.ruled h2 { margin: 0; white-space: nowrap; line-height: 1.2; padding: 0 .06em .12em;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(94, 61, 11, .9)); }

/* ---------- What's Inside ---------- */
.inside { padding: 2px 0 clamp(14px, 1.1vw, 20px); background: linear-gradient(180deg, #061326, #071731); }
.inside .ruled { max-width: 1220px; margin-bottom: clamp(4px, .4vw, 8px); }
.inside .ruled h2 { font-size: clamp(30px, 2.5vw, 42px); }
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.features > li { position: relative; text-align: center; padding: 0 clamp(8px, .9vw, 16px); }
.features > li + li::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(217, 173, 67, 0), rgba(217, 173, 67, .55) 30%, rgba(217, 173, 67, .55) 70%, rgba(217, 173, 67, 0)); }
.f-icon { width: clamp(52px, 3.95vw, 64px); height: clamp(52px, 3.95vw, 64px); margin: 0 auto clamp(4px, .35vw, 6px); border-radius: 50%; display: grid; place-items: center;
  border: 3px solid #E2B954; background: radial-gradient(circle, #0B1E3B 55%, #071328); box-shadow: 0 0 14px rgba(247, 216, 120, .4), inset 0 0 8px rgba(247, 216, 120, .2); }
.f-icon svg { width: 56%; height: 56%; }
.features h3 { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.25; margin: 0 0 .1em; padding-bottom: .1em; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.features p { font-size: clamp(12.5px, .86vw, 14px); line-height: 1.22; color: #FFFFFF; margin: 0; }

/* ---------- A Look Inside + trial ---------- */
.lower { padding: clamp(10px, .9vw, 16px) 0 clamp(14px, 1.1vw, 20px); background: linear-gradient(180deg, #071731, #061326); }
.lower-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); align-items: center; }
.look .ruled { margin-bottom: clamp(8px, .55vw, 10px); }
.look .ruled h2 { font-size: clamp(20px, 1.62vw, 27px); }
.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 56px); }
.shots figure { margin: 0; }
.shots .device { max-width: 190px; margin: 0 auto; }
.shots figcaption { margin-top: clamp(10px, .9vw, 14px); text-align: center; font-size: clamp(12.5px, .86vw, 14px); line-height: 1.25; color: #FFFFFF; }

.trial { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(20px, 1.6vw, 26px) clamp(20px, 2.2vw, 36px) clamp(22px, 1.8vw, 30px);
  border: 2px solid #E2B954; border-radius: 4px; outline: 1px solid rgba(247, 216, 120, .55); outline-offset: -8px;
  background: linear-gradient(180deg, rgba(9, 27, 51, .97), rgba(6, 19, 38, .98)); box-shadow: 0 0 26px rgba(247, 216, 120, .28), 0 20px 50px rgba(0, 0, 0, .5); }
.trial h2 { font-size: clamp(24px, 2.05vw, 34px); line-height: 1.2; margin: 0 0 .45em; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(94, 61, 11, .9)); }
.trial p { margin: 0 auto clamp(14px, 1.1vw, 18px); max-width: 32em; font-size: clamp(14.5px, 1.03vw, 17px); line-height: 1.3; color: #FFFFFF; }
.store-list { list-style: none; margin: 0 0 clamp(16px, 1.3vw, 22px); padding: 0; text-align: left; }
.store-list > li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid rgba(217, 173, 67, .25); }
.store-list > li:first-child { border-top: 0; padding-top: 4px; }
.s-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #E2B954; background: #0B1E3B; box-shadow: 0 0 10px rgba(247, 216, 120, .3); }
.s-icon svg { width: 22px; height: 22px; }
.store-list h3 { margin: 0 0 2px; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.status { font: 600 12px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(247, 216, 120, .6); color: var(--gold-light); -webkit-text-fill-color: var(--gold-light); background: rgba(217, 173, 67, .08); }
.status.live { color: #0B1A10; -webkit-text-fill-color: #0B1A10; background: #8FD9A0; border-color: #8FD9A0; }
.store-list p { margin: 0; max-width: none; text-align: left; font-size: clamp(14px, .98vw, 16px); line-height: 1.35; color: var(--body); }
.trial .actions { justify-content: center; gap: clamp(10px, 1.1vw, 18px); }
.trial .btn { min-height: 38px; padding: .45rem 1.6rem; font-size: clamp(14.5px, 1.03vw, 17px); }

/* ---------- Inner pages ---------- */
.page-head { position: relative; overflow: hidden; isolation: isolate; padding: 4.25rem 0 3.5rem; border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse 45% 90% at 85% 20%, rgba(255, 186, 60, .32), transparent 65%), linear-gradient(180deg, #071630, #061326); }
.page-head::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 1300px; height: 1300px; left: 85%; top: 20%; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 3deg, rgba(255, 214, 120, .16) 0 .8deg, transparent .8deg 6deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 5%, transparent 55%); mask-image: radial-gradient(closest-side, #000 5%, transparent 55%); }
.page-head h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.2; margin: 0 0 .6rem; padding-bottom: .1em;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(94, 61, 11, .9)); }
.page-head p { margin: 0; color: var(--ivory); font-size: 1.1rem; max-width: 46rem; }
.page-body { padding: 4rem 0 5rem; background: linear-gradient(180deg, #071731, #061326); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.card { border: 1.5px solid var(--line); border-radius: 6px; padding: 2rem; display: flex; flex-direction: column;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(217, 173, 67, .1), transparent 70%), linear-gradient(180deg, rgba(16, 37, 65, .9), rgba(6, 19, 38, .95)); }
.card h2 { font-size: 1.4rem; line-height: 1.3; margin: 0 0 .7rem; padding-bottom: .08em; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card p { color: var(--body); margin: 0 0 1.4rem; }
.card .actions { margin-top: auto; }
.card a:not(.btn) { color: var(--gold-light); }
.stack { display: grid; gap: 1.5rem; }
.trial.left { text-align: left; padding: 2rem 2.25rem 2.25rem; }
.trial.left h2 { font-size: 1.9rem; }
.trial.left p { margin: 0; max-width: 46rem; }

.app-listing { display: grid; grid-template-columns: 120px 1fr auto; gap: 2rem; align-items: center; }
.app-listing img { width: 120px; height: 120px; filter: drop-shadow(0 0 20px rgba(217, 173, 67, .35)); }
.app-listing p { margin: 0 0 .5rem; }
.app-listing .actions { margin: 0; }
.after-note { margin: 2.25rem auto 0; text-align: center; color: var(--body); max-width: 44rem; }
.after-note a { color: var(--gold-light); }

.contact { max-width: 54rem; margin: 0 auto; }
.contact-rows { list-style: none; margin: 0; padding: 0; }
.contact-rows > li { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid rgba(217, 173, 67, .22); }
.contact-rows > li:first-child { border-top: 0; padding-top: 0; }
.contact-rows > li:last-child { padding-bottom: 0; }
.contact-rows h2 { font-size: 1.15rem; margin: .1rem 0 0; color: var(--gold-light); }
.contact-rows p { margin: 0 0 1rem; color: var(--body); }
.contact-rows p:last-child { margin-bottom: 0; }
.contact .btn, .prose .actions .btn { white-space: normal; overflow-wrap: anywhere; }

/* Legal text */
.prose { max-width: 48rem; margin: 0 auto; color: var(--body); line-height: 1.7; }
.prose h2 { font-size: 1.3rem; line-height: 1.35; color: var(--gold-light); margin: 2.4rem 0 .8rem; }
.prose li { margin: .4rem 0; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose strong { color: var(--ivory); }
.prose a:not(.btn) { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.prose .updated { color: var(--muted); font-style: italic; }
.prose .actions .btn { overflow-wrap: anywhere; }
.note { margin-top: 2.5rem; padding: 1.4rem 1.5rem; border-left: 3px solid var(--gold); background: rgba(217, 173, 67, .09); border-radius: 0 10px 10px 0; }
.note p { margin: 0 0 .4rem; }
.note p:last-child { margin: 0; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: #040B18; padding: clamp(16px, 1.3vw, 22px) 0; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold-bar); box-shadow: 0 0 10px rgba(247, 216, 120, .4); }
.foot { display: flex; justify-content: center; align-items: center; gap: .6rem clamp(40px, 9.4vw, 150px); flex-wrap: wrap; font-size: clamp(13px, .86vw, 14px); }
.foot p { margin: 0; color: #FFFFFF; }
.foot p a { text-decoration: none; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem clamp(16px, 1.75vw, 28px); }
.foot nav a { color: #FFFFFF; text-decoration: none; }
.foot a:hover { color: var(--gold-light); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .lower-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .trial { max-width: 40rem; margin: 0 auto; width: 100%; }
  .lower { padding-bottom: 3rem; }
}
@media (max-width: 1100px) {
  .hero { padding-top: 1.5rem; background-image: url("/assets/img/hero-burst-mid.jpg"); background-position: 50% 0; background-size: 100% 100%; }
  .hero-books { display: none; }
  .hero-grid { width: min(1400px, 100% - 48px); margin-inline: auto; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); min-height: 0; column-gap: 1.5rem; }
  .hero-art { grid-column: 1 / -1; justify-self: center; align-items: center; width: min(440px, 100%); margin-bottom: -1.5rem; }
  .hero-icon { margin: 0 0 -28px; width: 150px; }
  .hero-bible { -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); -webkit-mask-composite: source-over; mask-composite: add; }
  .hero-text { grid-column: 1; }
  .hero-phone { grid-column: 2; justify-content: center; padding: 1rem 0 2.5rem; }
  .hero-phone .device { width: min(250px, 100%); }
  .features { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1.75rem; }
  .features > li:nth-child(5)::before { display: none; }
  .inside { padding-top: 1.5rem; padding-bottom: 2rem; }
  .inside .ruled { margin-bottom: 1.25rem; }
}
@media (max-width: 950px) {
  .cards { grid-template-columns: 1fr; }
  .app-listing { grid-template-columns: 96px 1fr; }
  .app-listing img { width: 96px; height: 96px; }
  .app-listing .actions { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .js .menu-btn { display: inline-flex; }
  .js .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: .1rem;
    padding: .75rem 24px 1.25rem; background: #050C1A; border-bottom: 1px solid var(--line); }
  .js .menu-open .nav { display: flex; }
  .js .nav a { padding: .75rem 0; }
  .js .nav a[aria-current="page"]::after { left: 0; right: auto; width: 2.5rem; bottom: .35rem; }
  .nav { gap: 1.25rem; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .wrap, .bar { width: min(1400px, 100% - 32px); }
  .hero { padding-top: 1rem; background-image: url("/assets/img/hero-burst-tall.jpg"); }
  .hero-grid { width: min(1400px, 100% - 32px); grid-template-columns: 1fr; }
  .hero-art { width: min(360px, 100%); margin-bottom: -1rem; }
  .hero-icon { width: 128px; margin-bottom: -22px; }
  .hero-text { text-align: center; padding-bottom: .5rem; }
  .hero-logo .tagline { margin-left: 0; }
  .lede { margin-inline: auto; }
  .hero .actions { justify-content: center; }
  .actions .btn { flex: 1 1 200px; }
  .hero-phone { grid-column: 1; padding: 2rem 0 3rem; }
  .hero-phone .device { width: min(250px, 72%); }

  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features > li:nth-child(odd)::before { display: none; }
  .features > li:nth-child(5)::before { display: none; }
  .features p { font-size: 14px; line-height: 1.4; }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
  .shots figcaption { font-size: 14px; }
  .trial, .card { padding-inline: 1.4rem; }
  .page-head { padding: 3.25rem 0 2.5rem; }
  .page-body { padding: 3rem 0 4rem; }
  .contact-rows > li { grid-template-columns: 1fr; gap: .6rem; }
  .foot { flex-direction: column; gap: .75rem; }
}
@media (max-width: 480px) {
  .brand .tagline { display: none; }
  .features { grid-template-columns: 1fr; row-gap: 0; }
  .features > li { display: grid; grid-template-columns: 56px 1fr; column-gap: 1rem; text-align: left; padding: 1rem 0; border-top: 1px solid rgba(217, 173, 67, .22); }
  .features > li:first-child { border-top: 0; }
  .features > li + li::before { display: none; }
  .f-icon { grid-row: span 2; width: 54px; height: 54px; margin: 0; }
  .features h3 { align-self: end; }
  .features p { grid-column: 2; }
  .ruled h2 { white-space: normal; text-align: center; }
  .app-listing { grid-template-columns: 1fr; }
  .contact .btn { font-size: .95rem; padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
@media (max-width: 400px) { .btn { white-space: normal; padding-inline: 1.2rem; } }

/* =========================================================
   High-gloss finish: polished gold text, glossy buttons and lines
   ========================================================= */
/* Gold display text: polished metal with a bright edge and depth */
.wordmark, .ruled h2, .page-head h1, .trial h2, .features h3, .card h2, .store-list h3 { -webkit-text-stroke: .35px rgba(255, 243, 200, .35); }
.hero-logo .wordmark { filter: drop-shadow(0 1px 0 #FFF4C8) drop-shadow(0 3px 0 #5E3D0B) drop-shadow(0 0 24px rgba(255, 200, 90, .5)); }
.brand .wordmark { filter: drop-shadow(0 1px 0 rgba(255, 244, 200, .6)) drop-shadow(0 2px 0 #5E3D0B); }
.ruled h2, .page-head h1, .trial h2 { filter: drop-shadow(0 1px 0 rgba(255, 244, 200, .45)) drop-shadow(0 2px 0 rgba(94, 61, 11, .95)) drop-shadow(0 0 14px rgba(247, 216, 120, .3)); }
.features h3, .card h2, .store-list h3 { filter: drop-shadow(0 0 8px rgba(247, 216, 120, .3)); }

/* Taglines become polished gold too; the hero swoosh moves to its own layer */
.brand .tagline, .hero-logo .tagline { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .05em .3em .2em .15em; margin-right: -.3em; }
.brand .tagline { filter: drop-shadow(0 1px 0 rgba(60, 38, 6, .9)); }
.hero-logo .tagline { position: relative; filter: drop-shadow(0 2px 0 rgba(60, 38, 6, .9)) drop-shadow(0 0 12px rgba(247, 216, 120, .35)); padding-bottom: .35em; }
.hero-logo .tagline::after { content: ""; position: absolute; left: 4%; right: 2%; bottom: 0; height: 3px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(90deg, transparent, #C8901F 15%, #FFF6D0 50%, #C8901F 85%, transparent); box-shadow: 0 0 10px rgba(255, 220, 130, .6); }

/* Prose and small gold text */
.prose h2 { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; filter: drop-shadow(0 0 8px rgba(247, 216, 120, .25)); }
.fine, .nav a[aria-current="page"], .after-note a, .card a:not(.btn), .contact-rows a:not(.btn), .prose a:not(.btn), .status { text-shadow: 0 0 10px rgba(247, 216, 120, .45); }
.status { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.status.live { text-shadow: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 10px rgba(143, 217, 160, .35); }

/* Buttons: glass highlight on the top half, bevelled edge, sheen on hover */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; top: 2px; height: 48%; border-radius: 999px 999px 40% 40% / 999px 999px 30% 30%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .12)); }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transition: left .6s ease; }
.btn:hover::after, .btn:focus-visible::after { left: 125%; }
.btn-gold, .btn-ink { border: 1px solid #FFEDB0;
  background: linear-gradient(180deg, #FFF3C4 0%, #FCE08A 20%, #F3C552 44%, #D29528 50%, #DEA537 60%, #F3C95F 84%, #FFE49A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -3px 6px rgba(130, 78, 6, .45), 0 2px 0 #7A5112, 0 8px 18px rgba(0, 0, 0, .5), 0 0 24px rgba(247, 216, 120, .38); }
.btn-gold:hover, .btn-ink:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -3px 6px rgba(130, 78, 6, .45), 0 2px 0 #7A5112, 0 12px 22px rgba(0, 0, 0, .55), 0 0 34px rgba(247, 216, 120, .55); }
.btn-gold::before, .btn-ink::before { background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .15)); }
.btn-line { border: 1.5px solid transparent; color: var(--ivory);
  background: linear-gradient(180deg, #1C3358 0%, #0B1A33 48%, #050D1C 52%, #0A1830 100%) padding-box, var(--gold-edge) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 18px rgba(0, 0, 0, .45), 0 0 18px rgba(247, 216, 120, .22); }
.btn-line::before { background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .02)); }
.btn-line:hover { color: var(--gold-light); background: linear-gradient(180deg, #243F6B 0%, #102244 48%, #07122A 52%, #0E2040 100%) padding-box, var(--gold-edge) border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px rgba(0, 0, 0, .45), 0 0 26px rgba(247, 216, 120, .4); }
.btn-off { border: 1.5px dashed rgba(247, 216, 120, .55); background: linear-gradient(180deg, rgba(40, 60, 100, .35), rgba(5, 13, 28, .6)); }
.btn-off::before { background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent); }
.btn-off::after { display: none; }
.menu-btn { border: 1.5px solid transparent; background: linear-gradient(180deg, #1C3358, #050D1C) padding-box, var(--gold-edge) border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 12px rgba(247, 216, 120, .2); }

/* Lines: bright polished gold with a white-hot centre and soft glow */
.site-header::after, .site-footer::before { height: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 70%), var(--gold-bar); box-shadow: 0 0 12px rgba(255, 220, 130, .6), 0 0 2px rgba(255, 245, 210, .8); }
.ruled::before { background: linear-gradient(90deg, rgba(217, 173, 67, 0), #B8801E 30%, #F7D878 75%, #FFFBE8); box-shadow: 0 0 8px rgba(255, 220, 130, .55); }
.ruled::after { background: linear-gradient(90deg, #FFFBE8, #F7D878 25%, #B8801E 70%, rgba(217, 173, 67, 0)); box-shadow: 0 0 8px rgba(255, 220, 130, .55); }
.features > li + li::before { width: 1px; background: linear-gradient(180deg, rgba(217, 173, 67, 0), #C8901F 25%, #FFF4C8 50%, #C8901F 75%, rgba(217, 173, 67, 0)); box-shadow: 0 0 6px rgba(255, 220, 130, .45); }
.nav a[aria-current="page"]::after { background: linear-gradient(180deg, #FFFCEB, #F7D878 45%, #B8801E 55%, #F2C95C); box-shadow: 0 0 10px rgba(255, 220, 130, .7); }
.page-head { border-bottom: 0; }
.page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 70%), var(--gold-bar); box-shadow: 0 0 12px rgba(255, 220, 130, .55); }
.contact-rows > li + li, .store-list > li + li { border-top: 1px solid; border-image: linear-gradient(90deg, rgba(217, 173, 67, 0), #E9BE55 30%, #FFF4C8 50%, #E9BE55 70%, rgba(217, 173, 67, 0)) 1; }
.note { border-left: 3px solid; border-image: linear-gradient(180deg, #FFF4C8, #E2B04A 40%, #8A5A12 55%, #F2C95C) 1; }

/* Gold frames: polished metallic borders */
.f-icon, .s-icon { border-color: transparent; background: radial-gradient(circle at 50% 35%, #12305A, #071328 70%) padding-box, var(--gold-edge) border-box;
  box-shadow: 0 0 16px rgba(247, 216, 120, .45), inset 0 2px 6px rgba(255, 255, 255, .12); }
.card { border: 1.5px solid transparent; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(217, 173, 67, .12), transparent 70%) padding-box, linear-gradient(180deg, rgba(16, 37, 65, .96), rgba(6, 19, 38, .98)) padding-box, var(--gold-edge) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 18px rgba(247, 216, 120, .14); }
.trial { border: 2px solid transparent; background: linear-gradient(180deg, rgba(9, 27, 51, .98), rgba(6, 19, 38, .99)) padding-box, var(--gold-edge) border-box;
  outline-color: rgba(255, 236, 170, .6); box-shadow: 0 0 30px rgba(247, 216, 120, .32), inset 0 1px 0 rgba(255, 255, 255, .1), 0 20px 50px rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } }

/* =========================================================
   No drop shadows: dark and offset shadows removed everywhere.
   Gloss (gradients, inset highlights) and gold glows stay.
   ========================================================= */
.brand .wordmark, .brand .tagline, .hero h1 { filter: none; }
.hero-logo .wordmark { filter: drop-shadow(0 0 24px rgba(255, 200, 90, .5)); }
.hero-logo .tagline { filter: drop-shadow(0 0 12px rgba(247, 216, 120, .35)); }
.ruled h2, .page-head h1, .trial h2 { filter: drop-shadow(0 0 14px rgba(247, 216, 120, .3)); }
.lede { text-shadow: none; }
.hero-icon { filter: drop-shadow(0 0 18px rgba(247, 216, 120, .28)); }
.device, .shots .device { filter: none; }
.hero-phone .device { filter: drop-shadow(0 0 30px rgba(255, 196, 80, .35)); }
.btn-gold, .btn-ink { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -3px 6px rgba(130, 78, 6, .45), 0 0 24px rgba(247, 216, 120, .38); }
.btn-gold:hover, .btn-ink:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -3px 6px rgba(130, 78, 6, .45), 0 0 34px rgba(247, 216, 120, .55); }
.btn-line { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 18px rgba(247, 216, 120, .22); }
.btn-line:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 26px rgba(247, 216, 120, .4); }
.trial { box-shadow: 0 0 30px rgba(247, 216, 120, .32), inset 0 1px 0 rgba(255, 255, 255, .1); }

/* Hero icon sits about 1/8 inch (12px) higher above the Bible */
.hero-icon { margin-bottom: calc(-1.6vw + 12px); }
@media (max-width: 1100px) { .hero-icon { margin-bottom: -16px; } }
@media (max-width: 760px) { .hero-icon { margin-bottom: -10px; } }

/* =========================================================
   Crisp gold text: no stroke, glow or blur on any gold text
   except the "Lights" wordmarks. A smooth gold gradient keeps
   it golden while staying sharp and legible.
   ========================================================= */
:root { --gold-crisp: linear-gradient(180deg, #FFEDB0 0%, #F7D36A 45%, #E8B544 100%); }
.ruled h2, .page-head h1, .trial h2, .features h3, .card h2, .store-list h3, .prose h2,
.brand .tagline, .hero-logo .tagline {
  background: var(--gold-crisp); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 0; filter: none; text-shadow: none; }
.hero h1 { background: linear-gradient(180deg, #FFFBEA 0%, #FCEBB8 55%, #F5D27A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; }
.fine, .nav a[aria-current="page"], .after-note a, .card a:not(.btn), .contact-rows a:not(.btn), .prose a:not(.btn), .status { text-shadow: none; }