/* ============================================================
   Unseen Truth — book funnel pages
   Dark cover-world hero that breaks into dawn on scroll.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Nunito:wght@600;700;800;900&display=swap');

:root{
  --dawn-1:#FFF6E6; --dawn-2:#FFE9DD; --dawn-3:#FFF1F0;
  --paper:#FFFCF7;
  --sun:#F4A623; --sun-deep:#E2851A;
  --coral:#F2725A; --sky:#3FA7D6;
  --ink:#43342A; --ink-soft:#8B7563; --line:#F0E2D0;
  --night:#160f0a; --night-2:#241812;
  --shadow:0 18px 44px -22px rgba(120,70,20,.45);
  --shadow-lift:0 34px 70px -26px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Nunito',system-ui,sans-serif; color:var(--ink);
  background:var(--paper); -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; line-height:1.06; font-weight:600; margin:0}
a{color:inherit}
img{display:block; max-width:100%}
:focus-visible{outline:3px solid var(--sky); outline-offset:3px; border-radius:8px}

/* ---------------- HERO : the cover world ---------------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:64px 22px 92px; overflow:hidden; color:#fff;
  background:var(--night);
}
.hero-bg{
  position:absolute; inset:-8% -8% -8% -8%; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(34px) brightness(.42) saturate(1.05); transform:scale(1.12);
}
.hero::after{ /* vignette + dawn hint at the very bottom */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 32%, transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.28) 0%, transparent 26%, transparent 66%, var(--paper) 100%);
}
.hero-inner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; max-width:760px}
.eyebrow{
  font-weight:800; letter-spacing:.34em; text-transform:uppercase;
  font-size:.68rem; color:var(--sun); margin-bottom:22px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before,.eyebrow::after{content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--sun),transparent)}
.hero-cover{
  width:min(58vw, 250px); aspect-ratio:2/3; border-radius:6px; overflow:hidden;
  box-shadow:var(--shadow-lift), 0 0 0 1px rgba(255,255,255,.08);
  margin-bottom:28px; animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.hero-cover img{width:100%; height:100%; object-fit:cover}
.hero h1{
  color:#fff; font-size:clamp(2.1rem,7vw,3.6rem); font-weight:600;
  letter-spacing:-.01em; text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.hero .tagline{
  font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  color:#F6D9A6; font-size:clamp(1.02rem,3.4vw,1.35rem);
  margin:16px 0 4px; max-width:30ch; text-wrap:balance;
}
.hero .byline{margin-top:14px; font-weight:800; letter-spacing:.05em; color:#E9D9C7; font-size:.92rem}
.hero-cta{margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:12px; width:100%}
.scrollcue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2;
  color:var(--ink-soft); font-weight:800; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:7px; opacity:.9;
}
.scrollcue .chev{width:11px; height:11px; border-right:2px solid var(--sun-deep); border-bottom:2px solid var(--sun-deep);
  transform:rotate(45deg); animation:bob 1.6s ease-in-out infinite}

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:1.02rem;
  padding:16px 30px; border-radius:999px; border:0; cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease; line-height:1;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn-free{background:var(--sun); color:#3a2410; box-shadow:0 16px 34px -14px rgba(244,166,35,.8)}
.btn-free:hover{background:var(--sun-deep)}
.btn-buy{background:var(--coral); color:#fff; box-shadow:0 16px 34px -14px rgba(242,114,90,.7)}
.btn-buy:hover{background:#e85b41}
.btn-ghost{background:transparent; color:var(--ink); border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--sun); background:#fff}
.btn-lg{font-size:1.1rem; padding:18px 38px}
.free-tag{background:#fff; color:var(--sun-deep); font-size:.66rem; font-weight:900; letter-spacing:.06em; padding:4px 9px; border-radius:999px}
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.34)}
.hero .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}

/* ---------------- DAWN : the funnel body ---------------- */
.dawn{
  background:
    radial-gradient(130% 70% at 50% 0%, var(--dawn-1) 0%, var(--dawn-3) 34%, var(--paper) 66%);
  padding:8px 22px 0;
}
.wrap{max-width:680px; margin:0 auto}
.hook{
  font-family:'Fraunces',serif; font-weight:400; font-size:clamp(1.24rem,4.2vw,1.62rem);
  line-height:1.5; color:var(--ink); text-align:center; text-wrap:pretty;
  padding:52px 0 8px;
}
.hook .drop{color:var(--coral); font-weight:600}
.comps{
  text-align:center; color:var(--ink-soft); font-weight:700; font-size:.95rem;
  margin:26px auto 0; max-width:40ch;
}
.comps b{color:var(--ink)}
.cta-row{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center;
  padding:38px 0 10px;
}
.microcopy{text-align:center; color:var(--ink-soft); font-weight:700; font-size:.86rem; margin:6px 0 0}

/* ---------------- ANCHOR band (the free hook) ---------------- */
.anchor{
  margin:64px auto 0; max-width:680px;
  background:linear-gradient(135deg, #2a1c12, #160f0a);
  color:#fff; border-radius:20px; padding:38px 30px; text-align:center;
  box-shadow:var(--shadow);
}
.anchor .mini{display:flex; justify-content:center; margin-bottom:16px}
.anchor .mini img{width:74px; aspect-ratio:2/3; object-fit:cover; border-radius:4px;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.8); transform:rotate(-4deg)}
.anchor h2{color:#fff; font-size:clamp(1.3rem,4.6vw,1.7rem)}
.anchor p{color:#E9D9C7; font-weight:600; margin:10px auto 22px; max-width:38ch; line-height:1.55}
.anchor .tag2{font-family:'Fraunces',serif; font-style:italic; color:#F6D9A6; margin-top:14px; font-size:1.02rem}

/* ---------------- PASS IT ON (the heart) ---------------- */
.passiton{
  max-width:600px; margin:58px auto 0; padding:46px 32px 42px; text-align:center;
  background:radial-gradient(120% 95% at 50% 0%, #FFF6E6 0%, var(--paper) 72%);
  border-radius:22px; border:1px solid var(--line);
}
.passiton .ray{ margin:0 auto 16px; display:block }
.passiton .kicker{
  font-family:'Nunito',sans-serif; font-weight:800; letter-spacing:.3em; text-transform:uppercase;
  font-size:.66rem; color:var(--sun-deep); margin-bottom:14px;
}
.passiton h2{ font-family:'Fraunces',serif; font-weight:600; color:var(--ink);
  font-size:clamp(1.4rem,4.8vw,1.9rem); margin-bottom:18px; }
.passiton p{ font-family:'Fraunces',serif; font-weight:400; color:#5a4a3d;
  font-size:clamp(1.02rem,3.3vw,1.18rem); line-height:1.66; margin:0 auto 16px; max-width:44ch; text-wrap:pretty; }
.passiton p em{ color:var(--ink); font-style:italic }
.passiton .signoff{ font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  color:var(--sun-deep); font-size:clamp(1.2rem,4vw,1.5rem); margin-top:22px; }

/* ---------------- FOOTER ---------------- */
.foot{
  max-width:680px; margin:56px auto 0; padding:34px 0 46px; text-align:center;
  border-top:1px solid var(--line);
}
.foot .more{display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--ink);
  text-decoration:none; font-size:1.04rem}
.foot .more:hover{color:var(--sun-deep)}
.foot .brand{margin-top:20px; font-family:'Fraunces',serif; font-weight:700; color:var(--ink)}
.foot .fine{margin-top:8px; color:var(--ink-soft); font-size:.82rem; font-weight:600}

/* ---------------- reader overlay (Betrayer's Cup) ---------------- */
#reov{display:none; position:fixed; inset:0; z-index:99999; background:#F3E3CF}
#reov iframe{width:100%; height:100%; border:0; display:block}
.reov-bar{position:fixed; top:12px; left:0; right:0; z-index:100000; display:flex; justify-content:center; gap:10px; pointer-events:none}
.reov-bar button{pointer-events:auto; font-family:'Nunito',sans-serif; font-weight:800; border:0; cursor:pointer;
  padding:10px 20px; border-radius:999px; font-size:.9rem; box-shadow:0 8px 20px -8px rgba(120,70,20,.5)}
#reFull{background:var(--sun); color:#3a2410}
#reClose{background:#fff; color:var(--ink)}

@keyframes rise{from{opacity:0; transform:translateY(26px) scale(.97)} to{opacity:1; transform:none}}
@keyframes bob{0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(5px)}}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto !important}
  .btn:hover{transform:none}
}
@media (max-width:560px){
  .btn{width:100%; max-width:340px}
  .cta-row .btn{width:100%; max-width:340px}
}