/* ==========================================================================
   Lisa V Green Inspires - free prayer guide landing page
   Vercel serves everything under assets/ as immutable for a year, so a changed
   picture needs a changed filename. Reusing one leaves every returning visitor
   on the old image with no way to revalidate. Name the file for what is in it.
   Palette sampled from the approved guide PDF and the month one master approval.
   Type: Cormorant Garamond (display, high contrast) + Jost (geometric UI).
   ========================================================================== */

:root{
  --deep:#0a241a;        /* darkest green, hero and dark bands */
  --forest:#123c2a;      /* heading green on cream */
  --gold:#c6a252;
  --gold-lt:#dcc287;
  --gold-dk:#8f6f31;
  --cream:#f7f4ee;
  --ink:#1b1c17;
  --body:#46514a;        /* body copy on cream */
  --body-dark:#a9bbae;   /* body copy on green */
  --rule:rgba(198,162,82,.30);
  --rule-lt:rgba(26,32,27,.14);

  --display:"Cormorant Garamond",Baskerville,Georgia,serif;
  --ui:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1200px;
  --gut:clamp(22px,5vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:var(--ui);
  font-weight:300;
  font-size:17.5px;
  line-height:1.78;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--deep)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.center{text-align:center}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--forest);margin:0}

h2{
  font-size:clamp(2.35rem,5vw,3.9rem);
  font-weight:300;line-height:1.06;letter-spacing:-.015em;
}
h3{
  font-family:var(--display);font-size:1.55rem;font-weight:500;
  line-height:1.22;letter-spacing:-.005em;color:var(--forest);
}
.on-dark{color:var(--cream)}

/* small caps label with a leading hairline */
.eyebrow{
  font-family:var(--ui);font-size:.7rem;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold-dk);
  margin:0 0 1.5rem;display:flex;align-items:center;gap:1rem;
}
.eyebrow::before{
  content:"";width:44px;height:1px;background:currentColor;opacity:.6;flex:none;
}
.eyebrow--gold{color:var(--gold)}

.lede{
  font-size:1.15rem;font-weight:300;max-width:56ch;margin:1.6rem 0 0;color:var(--body);
}
.lede--dark{color:var(--body-dark)}

/* outlined, not a filled marketing blob */
.badge{
  display:inline-block;background:none;color:var(--gold-lt);
  font-family:var(--ui);font-size:.68rem;font-weight:400;
  letter-spacing:.32em;text-transform:uppercase;
  padding:.72rem 1.5rem;border:1px solid var(--rule);border-radius:1px;
}

/* --------------------------------------------------------------------------
   Buttons: flat, near-square, wide tracking. No chunky shadows.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;font-family:var(--ui);font-weight:400;
  font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;
  padding:1.35rem 3.1rem;border-radius:2px;text-decoration:none;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.btn--gold{background:var(--gold);color:var(--deep)}
.btn--gold:hover{background:var(--gold-lt)}
.btn--ghost{background:none;color:var(--forest);border:1px solid var(--rule-lt)}
.btn--ghost:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;isolation:isolate;background:var(--deep);overflow:hidden}

.hero__art{
  position:absolute;inset:0;z-index:0;
  background:url("assets/hero-devotional.jpg") left center / cover no-repeat;
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    100deg,
    rgba(10,36,26,0) 22%,
    rgba(10,36,26,.52) 36%,
    rgba(10,36,26,.88) 47%,
    rgba(10,36,26,.95) 58%,
    rgba(10,36,26,.96) 100%);
}

.hero__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);margin:0 auto;padding:38px var(--gut) 64px;
  min-height:min(86vh,760px);
  display:flex;flex-direction:column;
}

.wordmark{
  font-family:var(--ui);font-size:.68rem;font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
  margin:0 0 auto;align-self:flex-start;
}

.hero__copy{width:min(100%,580px);margin-left:auto;padding-top:18px}

.hero h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.7rem,5.4vw,4.35rem);
  line-height:1.03;letter-spacing:-.022em;color:var(--cream);
  margin:1.5rem 0 0;
}
.hero h1 em{font-style:italic;font-weight:400;color:var(--gold)}

.hero__sub{
  font-size:1.06rem;font-weight:300;color:var(--body-dark);
  margin:1.3rem 0 0;max-width:44ch;
}

/* --------------------------------------------------------------------------
   Opt-in: underline fields, no boxed inputs
   -------------------------------------------------------------------------- */
.optin{margin-top:2rem}
.optin input{
  width:100%;font-family:var(--ui);font-size:1rem;font-weight:300;
  color:var(--cream);background:transparent;
  border:0;border-bottom:1px solid rgba(198,162,82,.42);border-radius:0;
  padding:.95rem .2rem;margin-bottom:1.05rem;
  transition:border-color .25s ease,background .25s ease;
}
.optin input::placeholder{color:rgba(233,240,234,.5);letter-spacing:.04em}
.optin input:focus{
  outline:none;border-bottom-color:var(--gold);background:rgba(255,255,255,.05);
}
.optin input[aria-invalid="true"]{border-bottom-color:#d08a74}

.optin button{
  width:100%;cursor:pointer;font-family:var(--ui);
  font-size:.78rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;
  color:var(--deep);background:var(--gold);border:0;border-radius:2px;
  padding:1.3rem 1rem;margin-top:.7rem;
  transition:background .3s ease;
}
.optin button:hover{background:var(--gold-lt)}
.optin button:disabled{opacity:.55;cursor:progress}

.optin__note{
  display:flex;align-items:center;gap:.6rem;
  font-size:.8rem;font-weight:300;letter-spacing:.02em;
  color:rgba(169,187,174,.85);margin:1.1rem 0 0;
}
.lock{
  width:11px;height:13px;flex:none;border:1px solid var(--gold);border-radius:1px;
  position:relative;margin-top:-3px;
}
.lock::before{
  content:"";position:absolute;left:1.5px;top:-6px;width:6px;height:6px;
  border:1px solid var(--gold);border-bottom:0;border-radius:4px 4px 0 0;
}

.optin__msg{margin:1rem 0 0;font-size:.88rem;font-weight:300;min-height:1px}
.optin__msg--err{color:#e3a893}

/* Honeypot. Off screen rather than display:none, which some bots detect. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.thanks{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:2.4rem 0;margin-top:2.6rem;
}
.thanks h3{
  font-family:var(--display);font-weight:300;font-size:2rem;
  color:var(--cream);margin-bottom:.7rem;letter-spacing:-.01em;
}
.thanks p{color:var(--body-dark);margin:0;font-size:1rem;font-weight:300}
.thanks__get{margin:1.6rem 0 1.2rem !important}
.thanks__get .btn{width:100%;text-align:center}
.thanks__fine{font-size:.86rem !important;color:rgba(169,187,174,.8) !important}

/* ==========================================================================
   BANDS
   ========================================================================== */
.band{padding:clamp(88px,11vw,158px) 0}
.band--cream{background:var(--cream)}
.band--deep{background:var(--deep)}

/* ---------- pull quote ---------- */
.band--quote{
  background:var(--forest);padding:clamp(76px,10vw,126px) 0;text-align:center;
}
.band--quote blockquote{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.75rem,3.9vw,2.85rem);line-height:1.3;letter-spacing:-.012em;
  color:var(--cream);margin:0 auto;max-width:28ch;
}
.band--quote .attrib{
  font-family:var(--ui);font-size:.66rem;font-weight:400;
  letter-spacing:.38em;text-transform:uppercase;
  color:var(--gold);margin:2.4rem 0 0;
}
.band--quote .attrib::before{
  content:"";display:block;width:36px;height:1px;background:var(--rule);
  margin:0 auto 1.6rem;
}

/* ---------- the twelve ---------- */
.twelve{
  list-style:none;margin:4.5rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(2.5rem,5vw,5rem);
}
.twelve li{
  display:flex;gap:1.5rem;align-items:baseline;
  font-family:var(--display);font-size:1.42rem;font-weight:400;
  line-height:1.34;letter-spacing:-.005em;color:var(--forest);
  padding:1.5rem 0;border-bottom:1px solid var(--rule-lt);
}
.twelve li span{
  font-family:var(--display);font-size:1.05rem;font-weight:400;font-style:italic;
  color:var(--gold-dk);flex:none;width:1.6rem;
}
#the-twelve .center{margin-top:4.2rem}

/* ---------- inside every page ---------- */
.anatomy{
  display:grid;grid-template-columns:1fr .72fr;gap:clamp(3rem,7vw,6rem);
  align-items:start;margin-top:4.2rem;
}
.step{
  display:grid;grid-template-columns:3.4rem 1fr;gap:0 1.4rem;
  padding:2rem 0;border-top:1px solid var(--rule);
}
.step:first-child{border-top:0;padding-top:0}
.step__n{
  grid-row:1 / span 2;
  font-family:var(--display);font-size:2.15rem;font-weight:300;font-style:italic;
  line-height:1;color:var(--gold);opacity:.9;
}
.step h3{color:var(--cream);margin-bottom:.5rem;font-weight:400}
.step p{color:var(--body-dark);margin:0;font-size:1rem;font-weight:300}

.anatomy__proof{margin:0}
.anatomy__proof img{
  border-radius:2px;box-shadow:0 30px 70px rgba(0,0,0,.42);
  border:1px solid rgba(198,162,82,.2);
}
.anatomy__proof figcaption{
  font-size:.84rem;font-weight:300;color:rgba(169,187,174,.9);
  margin-top:1.4rem;text-align:center;letter-spacing:.02em;
}

/* ---------- letter from Lisa ---------- */
.letter{
  display:grid;grid-template-columns:.58fr 1fr;gap:clamp(3rem,7vw,6rem);
  align-items:start;
}
.letter__photo img{border-radius:2px;filter:saturate(.94)}
.letter__cred{
  font-family:var(--ui);font-size:.68rem;font-weight:400;line-height:2.1;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dk);
  margin:1.6rem 0 0;padding-top:1.4rem;border-top:1px solid var(--rule-lt);
}
.letter__body p{margin:0 0 1.35rem}
.letter__body h2{margin-bottom:2.2rem}
.letter__body .pull{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:1.7rem;line-height:1.36;letter-spacing:-.01em;color:var(--forest);
  padding:2rem 0;margin:2.4rem 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.letter__body .pull em{font-style:italic}
.sign{
  margin:2.4rem 0 0 !important;font-family:var(--display);
  font-style:italic;font-weight:400;font-size:1.3rem;color:var(--forest);
}
.sign--name{
  font-style:normal;font-family:var(--ui);font-size:.68rem;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold-dk);
  margin-top:.6rem !important;
}

/* ---------- main opt-in ---------- */
.get__grid{
  display:grid;grid-template-columns:.8fr 1fr;gap:clamp(3rem,7vw,6.5rem);
  align-items:center;
}
.get__art{margin:0}
.get__art img{filter:drop-shadow(0 34px 60px rgba(0,0,0,.52))}
.get__copy h2{margin:2rem 0 0}
.get__copy .lede{margin-bottom:.5rem}

/* ---------- devotional ---------- */
.next{
  display:grid;grid-template-columns:1fr .58fr;gap:clamp(3rem,7vw,6rem);
  align-items:center;
}
.next__copy p{margin:0 0 1.35rem}
.next__copy h2{margin-bottom:2rem}
.next__note{
  font-family:var(--display);font-size:1.28rem;font-weight:400;line-height:1.5;
  color:var(--forest);padding:1.9rem 0;margin:2.2rem 0 2.6rem;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.next__note strong{font-weight:600;color:var(--gold-dk)}
.next__art{margin:0;text-align:center}
.next__art img{border-radius:2px;box-shadow:0 30px 64px rgba(18,60,42,.24);margin:0 auto}
.next__art figcaption{
  font-family:var(--display);font-size:1.12rem;font-weight:400;line-height:1.4;
  color:var(--forest);margin-top:1.5rem;
}
.next__art figcaption span{
  display:inline-block;margin-top:.7rem;
  font-family:var(--ui);font-size:.64rem;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dk);
}

/* ---------- footer ---------- */
/* The opt-in band is dark and now sits directly on the footer, so without a
   line of its own the two run together into one unbroken dark mass. */
.foot{background:var(--deep);padding:86px 0 72px;text-align:center;
      border-top:1px solid var(--rule)}
.foot__mark{
  font-family:var(--ui);font-size:.68rem;font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin:0 0 2.4rem;
}
.foot__nav{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem 2.6rem;
  padding-bottom:2.2rem;margin-bottom:2.2rem;
  border-bottom:1px solid rgba(198,162,82,.16);
}
.foot__nav a{
  color:var(--body-dark);text-decoration:none;font-size:.78rem;font-weight:300;
  letter-spacing:.16em;text-transform:uppercase;transition:color .25s ease;
}
.foot__nav a:hover{color:var(--gold)}
.foot__legal{
  font-size:.8rem;font-weight:300;color:rgba(169,187,174,.8);
  margin:0 auto;max-width:60ch;letter-spacing:.02em;
}
.foot__legal--fine{font-size:.74rem;margin-top:1.4rem;line-height:1.75;opacity:.85}


/* ==========================================================================
   MODAL: the 31 day devotional summary
   ========================================================================== */
/* .btn is used on both <a> and <button>, so the button needs its own reset. */
button.btn{font-family:var(--ui);border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
button.btn--ghost{border:1px solid var(--rule-lt)}

.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
/* Must out-specify the rule above. The UA sheet's [hidden]{display:none} loses to
   any author display declaration, so without this the dialog is always visible. */
.modal[hidden]{display:none}
.modal__veil{position:absolute;inset:0;background:rgba(6,22,16,.72);backdrop-filter:blur(2px)}
.modal__box{
  position:relative;width:min(100%,680px);max-height:min(86vh,860px);
  background:var(--cream);border-radius:2px;
  box-shadow:0 40px 90px rgba(6,22,16,.45);
  display:flex;flex-direction:column;
}
.modal__scroll{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(34px,5vw,54px) clamp(26px,4.5vw,58px) clamp(34px,5vw,54px);
}
.modal__box h2{font-size:clamp(1.75rem,3.6vw,2.5rem);margin-bottom:1.5rem}
.modal__scroll p{margin:0 0 1.2rem;font-size:1.02rem;line-height:1.72}
.modal__ask{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:1.38rem !important;line-height:1.42 !important;color:var(--forest);
  padding-bottom:1.5rem;margin-bottom:1.6rem !important;border-bottom:1px solid var(--rule);
}
.modal__quote{
  margin:2rem 0 0;padding:1.9rem 0 0;border-top:1px solid var(--rule);
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:1.42rem;line-height:1.42;color:var(--forest);
}
.modal__quote cite{
  display:block;margin-top:1.1rem;font-family:var(--ui);font-style:normal;
  font-size:.66rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dk);
}
.modal__x{
  position:absolute;top:10px;right:10px;z-index:2;
  width:46px;height:46px;line-height:1;font-size:30px;
  background:var(--cream);color:var(--gold-dk);border:0;border-radius:50%;
  cursor:pointer;transition:color .2s ease,background .2s ease;
}
.modal__x:hover{background:var(--forest);color:var(--cream)}
.modal:focus-visible,.modal__x:focus-visible,button.btn:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;
}
/* Keeps the page behind from scrolling while the dialog is open. */
body.modal-open{overflow:hidden}

@media (max-width:620px){
  .modal{padding:0}
  .modal__box{max-height:100vh;height:100%;width:100%;border-radius:0}
  .modal__scroll{padding:62px 22px 44px}
  .modal__x{top:8px;right:8px}
}


/* ==========================================================================
   BOOK PAGE
   ========================================================================== */
.topbar{background:var(--deep);padding:20px 0;border-bottom:1px solid rgba(198,162,82,.16)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.wordmark--link{text-decoration:none}
.topbar__back{
  font-family:var(--ui);font-size:.7rem;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--body-dark);text-decoration:none;
  transition:color .25s ease;
}
.topbar__back:hover{color:var(--gold)}

.buy{padding:clamp(56px,8vw,104px) 0}
.buy__grid{
  display:grid;grid-template-columns:.74fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
.buy__art{margin:0}
.buy__art img{
  width:100%;height:auto;border-radius:2px;
  box-shadow:0 34px 70px rgba(0,0,0,.5);
}
.buy__copy h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.1rem,4.2vw,3.1rem);line-height:1.06;letter-spacing:-.018em;
  color:var(--cream);margin:0 0 .7rem;
}
.buy__byline{
  font-family:var(--ui);font-size:.68rem;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-dk);margin:0 0 1.8rem;
}
.buy__ask{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:1.46rem;line-height:1.4;color:var(--gold-lt);
  padding:1.5rem 0;margin:0 0 1.5rem;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.buy__intro{font-size:1.04rem;font-weight:300;color:var(--body-dark);margin:0 0 2.4rem}

/* ---------- the order form ---------- */
.order__group{border:0;padding:0;margin:0 0 1.8rem}
.order__legend{
  font-family:var(--ui);font-size:.68rem;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);padding:0;margin-bottom:1rem;
}
.opt{
  display:flex;align-items:center;gap:1rem;cursor:pointer;
  padding:1.15rem 1.3rem;margin-bottom:.7rem;
  border:1px solid rgba(198,162,82,.26);border-radius:2px;
  background:rgba(255,255,255,.02);transition:border-color .2s ease,background .2s ease;
}
.opt:hover{border-color:rgba(198,162,82,.55)}
.opt input{accent-color:var(--gold);width:18px;height:18px;flex:none;cursor:pointer}
.opt:has(input:checked){border-color:var(--gold);background:rgba(198,162,82,.09)}
.opt__body{display:flex;flex-direction:column;flex:1;min-width:0}
.opt__name{
  font-family:var(--display);font-size:1.26rem;font-weight:400;color:var(--cream);
  line-height:1.25;
}
.opt__desc{font-size:.84rem;font-weight:300;color:var(--body-dark);margin-top:.15rem}
.opt__price{
  font-family:var(--display);font-size:1.3rem;font-weight:400;color:var(--gold-lt);
  flex:none;
}
.opt input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.order__qty{display:flex;align-items:center;gap:1rem;margin-bottom:1.7rem}
.order__qty label{
  font-family:var(--ui);font-size:.68rem;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);
}
.order__qty select{
  font-family:var(--ui);font-size:1rem;font-weight:300;color:var(--cream);
  background:rgba(255,255,255,.04);border:1px solid rgba(198,162,82,.4);
  border-radius:2px;padding:.7rem 1rem;cursor:pointer;
}
.order__qty select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.order__qty option{background:var(--deep);color:var(--cream)}

.order__total{
  display:flex;flex-direction:column;gap:.3rem;
  padding:1.3rem 0;margin:0 0 1.6rem;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.order__line{font-family:var(--ui);font-size:.92rem;font-weight:300;color:var(--body-dark)}
.order__sum{
  font-family:var(--display);font-size:2rem;font-weight:400;color:var(--cream);
  margin-top:.35rem;
}

.order__go{
  width:100%;cursor:pointer;font-family:var(--ui);
  font-size:.78rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;
  color:var(--deep);background:var(--gold);border:0;border-radius:2px;
  padding:1.4rem 1rem;transition:background .3s ease;
}
.order__go:hover{background:var(--gold-lt)}
.order__go:disabled{opacity:.55;cursor:progress}
.order__go:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.order__note{
  display:flex;align-items:center;gap:.6rem;
  font-size:.8rem;font-weight:300;color:rgba(169,187,174,.85);margin:1.2rem 0 0;
}

/* ---------- what is inside ---------- */
.about-book{max-width:72ch}
.about-book h2{margin-bottom:2rem}
.about-book p{margin:0 0 1.3rem;font-size:1.06rem}
.about-book .modal__quote{margin-top:2.6rem}
.modal__cta{margin:2.2rem 0 0}
.next__actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
@media (max-width:620px){.next__actions{display:block}.next__actions .btn+.btn{margin-top:.8rem}}

/* ---------- order complete ---------- */
.done{min-height:72vh;display:flex;align-items:center;text-align:center}
.done__inner{max-width:60ch;margin:0 auto}
.done h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.08;color:var(--cream);
  margin:1.4rem 0 1.3rem;
}
.done p{color:var(--body-dark);font-size:1.06rem;font-weight:300;margin:0 0 1.2rem}
.done .eyebrow{justify-content:center}
.done__actions{margin-top:2.4rem}
.done__group{
  margin:2.6rem 0 0;padding:2.4rem 1.6rem;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.done__group h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0 0 1rem}
.done__group .eyebrow{justify-content:center;margin-bottom:.9rem}
.done__group .done__actions{margin-top:1.8rem}
.done__also{margin-top:2.2rem !important;font-size:.95rem !important}
.done__also a{color:var(--gold);text-decoration:underline}

@media (max-width:860px){
  .buy__grid{grid-template-columns:1fr}
  .buy__art{max-width:300px;margin:0 auto}
}
@media (max-width:620px){
  .topbar__back{display:none}
  .opt{padding:1rem}
  .opt__name{font-size:1.14rem}
  .order__qty{flex-direction:column;align-items:flex-start;gap:.6rem}
  .order__qty select{width:100%}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .anatomy,.letter,.get__grid,.next{grid-template-columns:1fr}
  .anatomy__proof{max-width:430px;margin:0 auto}
  .letter__photo{max-width:300px}
  .get__art{max-width:380px;margin:0 auto;order:2}
  .next__art{max-width:300px;margin:0 auto}
  .twelve{grid-template-columns:1fr;gap:0}
}

/* The hero overlays its copy on the art, and the book lands underneath that
   copy until about 1125px: measured, by walking the cover maths against the
   580px copy column. So the hero stacks below 1180px, which leaves comfortable
   clearance, rather than at the 1000px the rest of the page uses.
   The wide art stays in use down to 760px, where it is a 2:1 image in a 50vw
   band and therefore shows whole. Only below that does the phone crop apply. */
@media (max-width:1180px){
  .hero{background:var(--deep)}
  .hero__art{
    position:relative;inset:auto;height:clamp(410px,50vw,590px);
    background-image:url("assets/hero-devotional.jpg");
    background-position:left center;
  }
  .hero__scrim{
    inset:auto;position:absolute;top:0;left:0;right:0;
    height:clamp(410px,50vw,590px);
    background:linear-gradient(180deg,
      rgba(10,36,26,.40) 0%,rgba(10,36,26,0) 24%,
      rgba(10,36,26,.55) 76%,var(--deep) 100%);
  }
  .hero__inner{min-height:0;padding:0 var(--gut) 76px;display:block;position:static}
  .wordmark{
    position:absolute;top:28px;left:var(--gut);z-index:3;margin:0;
    font-size:.6rem;letter-spacing:.34em;
  }
  .hero__copy{width:100%;margin:0;padding-top:34px}
  .hero h1{font-size:clamp(2.35rem,9.2vw,3.1rem);margin-top:1.6rem}
}

@media (max-width:760px){
  body{font-size:16.5px}

  .hero__art{
    height:clamp(410px,108vw,560px);
    background-image:url("assets/hero-devotional-mobile.jpg");
    background-position:center top;
  }
  .hero__scrim{height:clamp(410px,108vw,560px)}


  .band--quote blockquote{max-width:none}
  .twelve li{font-size:1.28rem;padding:1.25rem 0}
  .letter__body .pull{font-size:1.44rem}
  .btn{width:100%;text-align:center;padding:1.35rem 1rem;letter-spacing:.24em}
  .eyebrow::before{width:28px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}


/* ==========================================================================
   HERO SELLING THE DEVOTIONAL, AND THE FREE GUIDE DIALOG
   The hero used to carry the opt-in form. It now carries two buttons, and
   the guide moved into a dialog of its own.
   ========================================================================== */
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin:2.8rem 0 0}

/* btn--ghost is drawn for cream bands, so on the hero it is nearly invisible.
   Two classes deep on purpose: button.btn--ghost already sets a border and
   would otherwise win on specificity. */
.btn--ghost.btn--on-dark{color:var(--cream);border-color:var(--rule)}
.btn--ghost.btn--on-dark:hover{
  background:var(--cream);color:var(--deep);border-color:var(--cream);
}

/* A dark dialog, so .optin and .thanks, both drawn for a dark ground, can be
   dropped in with no restyling. */
.modal__box--deep{background:var(--deep)}
.modal__box--deep h2{color:var(--cream)}
.modal__box--deep .modal__scroll > p{color:var(--body-dark)}
.modal__box--deep .modal__x{background:var(--forest);color:var(--cream)}
.modal__box--deep .modal__x:hover{background:var(--cream);color:var(--deep)}

@media (max-width:720px){
  /* Side by side the two buttons wrap into a ragged pair on a phone. */
  .hero__actions{display:grid;grid-template-columns:1fr;gap:.9rem}
  .hero__actions .btn{width:100%;text-align:center;padding-left:1rem;padding-right:1rem}
}