/* ==========================================================
   Holy Bible Giveaway — prelander
   ========================================================== */

:root{
  --navy:#1a2332;
  --cream:#faf7f0;
  --green:#2d6b45;
  --green-hi:#35804f;
  --gold:#c4a44a;
  --olive:#a39770;
  --olive-hi:#8f8461;
  --ink:#2c3340;
  --muted:#6b7280;
  --faint:#9aa1ab;
  --line:#e6e0d4;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

body{
  font-family:'Open Sans',system-ui,-apple-system,sans-serif;
  background:var(--navy);
  min-height:100vh;
  color:var(--ink);
  padding:24px 14px 40px;
  line-height:1.55;
}

#crd00{
  max-width:520px;
  margin:0 auto;
  background:var(--cream);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}

/* ---------- 1. top banner ---------- */
#ban01{
  background:linear-gradient(135deg,#3a4453 0%,#2b3341 100%);
  padding:14px 18px;
  text-align:center;
}
#bnt01{
  font-family:'Merriweather',Georgia,serif;
  font-size:1rem;
  font-weight:700;
  color:#fff;
  line-height:1.35;
}
#bnt02{
  margin-top:3px;
  font-size:.78rem;
  font-weight:600;
  color:#aeb6c2;
}

/* ---------- 2. header bar ---------- */
#hdr01{
  position:relative;
  background:#fff;
  padding:13px 16px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#hdr01::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:3px;
  background:linear-gradient(90deg,var(--green) 0%,var(--gold) 50%,var(--green) 100%);
}
#brd01{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:'Merriweather',Georgia,serif;
  font-size:.98rem;
  font-weight:700;
  color:var(--ink);
}
#brc01{color:var(--gold);font-size:1.05rem;line-height:1}
#bdw01{display:flex;gap:6px;flex-shrink:0}
.bdg{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 9px;
  border-radius:6px;
  font-size:.68rem;
  font-weight:700;
  white-space:nowrap;
}
#bg101{color:var(--green);border:1px solid rgba(45,107,69,.45);background:rgba(45,107,69,.07)}
#bg102{color:#8a7020;border:1px solid rgba(196,164,74,.55);background:rgba(196,164,74,.1)}

/* ---------- 3. value line ---------- */
#val01{
  padding:11px 16px;
  text-align:center;
  font-size:.85rem;
  font-weight:700;
  color:var(--green);
  border-bottom:1px solid var(--line);
}

/* ---------- 4. image ---------- */
#fig01{display:block;background:#f2ede2}
#img01{width:100%;height:auto;display:block}

/* ---------- 5. CTA ---------- */
#cta00{padding:22px 20px 24px;text-align:center}
#ctt01{
  font-family:'Merriweather',Georgia,serif;
  font-size:1.35rem;
  font-weight:900;
  line-height:1.35;
  color:var(--ink);
  margin-bottom:18px;
}
#ctw01{
  color:var(--ink);
  border-bottom:4px solid var(--gold);
  padding-bottom:1px;
}
.btn{
  display:block;
  width:100%;
  padding:16px 18px;
  border-radius:10px;
  font-family:'Open Sans',sans-serif;
  font-size:1.05rem;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
#ybt01{
  background:var(--green);
  color:#fff;
  box-shadow:0 5px 16px rgba(45,107,69,.32);
  margin-bottom:10px;
  animation:pulse-cta 2s ease-in-out infinite;
}
#ybt01:hover,#ybt01:focus-visible{background:var(--green-hi);box-shadow:0 8px 22px rgba(45,107,69,.42)}
#nbt01{background:var(--olive);color:#fff}
#nbt01:hover,#nbt01:focus-visible{background:var(--olive-hi)}
#nbt01.gone{display:none}

#msg01{
  display:none;
  margin-top:2px;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:.9rem;
  color:var(--muted);
  text-align:center;
  line-height:1.6;
}
#msg01.on{display:block;animation:fade-in .4s ease both}
#mlk01{color:var(--green);font-weight:700;text-decoration:underline;cursor:pointer}

/* ---------- 6. FAQ ---------- */
#faq01{padding:0 20px 22px}
#fqh01{
  font-family:'Merriweather',Georgia,serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--ink);
  text-align:center;
  margin-bottom:13px;
}
.fqc{
  background:#fff;
  border:1px solid var(--line);
  border-left:4px solid var(--gold);
  border-radius:8px;
  padding:13px 15px;
  margin-bottom:9px;
}
.fqc:last-of-type{margin-bottom:0}
.fqq{font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:4px}
.fqa{font-size:.86rem;color:var(--muted);line-height:1.55}

/* ---------- 7. disclaimer ---------- */
#dsc01{
  padding:16px 20px 22px;
  border-top:1px solid var(--line);
  font-size:.7rem;
  line-height:1.65;
  color:var(--faint);
  text-align:center;
}
#dlk01{color:var(--faint);text-decoration:underline}

/* ---------- animations ---------- */
@keyframes pulse-cta{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- mobile ---------- */
@media (max-width:576px){
  body{padding:14px 10px 28px}
  #crd00{border-radius:13px}
  #bnt01{font-size:.9rem}
  #bnt02{font-size:.72rem}
  #hdr01{padding:11px 13px 12px}
  #brd01{font-size:.88rem}
  .bdg{font-size:.62rem;padding:3px 7px}
  #val01{font-size:.78rem;padding:9px 13px}
  #cta00{padding:18px 15px 20px}
  #ctt01{font-size:1.12rem;margin-bottom:15px}
  .btn{font-size:.95rem;padding:14px 15px}
  #faq01{padding:0 15px 18px}
  #fqh01{font-size:.95rem}
  .fqc{padding:11px 12px}
  .fqq{font-size:.86rem}
  .fqa{font-size:.8rem}
  #dsc01{padding:14px 15px 18px;font-size:.66rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}