/* ============================================================
   BibleGiveaway.com — giveaway prelander styles
   ============================================================ */

:root{
  --yellow:#f4d03f;
  --yellow-dark:#e6c02b;
  --gold:#d4a017;
  --bg:#f5f5f5;
  --card:#ffffff;
  --ink:#1c1c1e;
  --muted:#6e6e73;
  --line:#e5e5e5;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- 1. top bar ---------- */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:14px 20px;
}
.topbar .inner{
  max-width:480px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.topbar img{width:22px;height:22px}
.topbar b{font-size:16px;font-weight:700;letter-spacing:-.2px}

/* ---------- shell ---------- */
.wrap{max-width:480px;margin:0 auto;padding:32px 20px 48px;text-align:center}

/* ---------- 2. hero ---------- */
h1{
  font-size:36px;font-weight:800;line-height:1.15;
  letter-spacing:-1px;text-transform:uppercase;
}
h1 span{color:var(--gold)}
.sub{margin-top:10px;font-size:19px;font-weight:600;color:var(--muted)}

/* ---------- 3. hero image ---------- */
.hero-img{width:200px;height:200px;margin:26px auto 0}

/* ---------- 4. question card ---------- */
.card{
  margin-top:28px;padding:32px 24px;
  background:var(--card);
  border-radius:24px;
  box-shadow:0 4px 24px rgba(0,0,0,.07);
}
.q{font-size:21px;font-weight:500;line-height:1.35;letter-spacing:-.3px}
.q strong{font-weight:800}

/* stacked, full-width pills */
.answers{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.pill{
  width:100%;display:block;border:0;cursor:pointer;
  font-family:inherit;font-size:19px;font-weight:700;color:var(--ink);
  background:var(--yellow);
  border-radius:50px;
  padding:22px 20px;
  box-shadow:0 0 18px rgba(244,208,63,.55);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pill:hover{
  background:var(--yellow-dark);
  transform:translateY(-3px);
  box-shadow:0 8px 26px rgba(244,208,63,.65);
}
.pill:active{transform:translateY(-1px)}

/* ---------- 5. loading state ---------- */
.loading{display:none}
.loading.is-on{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.loading h2{font-size:21px;font-weight:700;line-height:1.4}
.spinner{
  width:52px;height:52px;margin:26px auto;
  border:4px solid #eee;
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.next{font-size:15px;color:var(--muted)}

/* ---------- footer ---------- */
.foot{margin-top:26px;font-size:12px;line-height:1.7;color:#9a9a9f}
.foot a{color:#9a9a9f}

/* ---------- responsive ---------- */
@media (max-width:420px){
  h1{font-size:30px}
  .sub{font-size:17px}
  .hero-img{width:170px;height:170px}
  .card{padding:28px 20px;border-radius:24px}
  .q{font-size:19px}
  .pill{font-size:18px;padding:20px 18px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition:none !important}
  .spinner{animation:spin 1.2s linear infinite !important}
}