/* ------------------------------------------------------------------
   Margret Miller ... landing and checkout.

   Section shapes are ported from the Frank Miller build (hero, stats
   bar, offer, dark "what is inside" band, about, FAQ, closing CTA) with
   the Angus refinements on top: the offer detail is one bordered
   container, the main book leads inside it as a card, and the two free
   books carry a solid green FREE badge and a tick.

   Still absent by rule: star ratings, reader counts and countdowns. If a
   class for one of those is not here, that is why. Per-book prices and a
   struck total ARE here: they were added on request and deliberately
   reverse the earlier no-anchor rule.

   Loads on top of styles.css, which holds the palette.
------------------------------------------------------------------ */

/* ---------- image slots ---------- */
/* The photographs are not shot yet. Each frame carries a visible slot
   underneath naming the file it wants; the <img> sits on top and
   removes itself if the file is missing, so the slot shows through and
   the page cannot quietly ship with a broken image. */
.shot{position:relative;background:var(--deep);overflow:hidden;border-radius:3px}
.shot img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2}
.shot .slot{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:1rem;
  border:2px dashed var(--line-strong);color:var(--ink-mute);
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;
}
.shot .slot code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:none;letter-spacing:0;
  font-size:.72rem;color:var(--ink-soft);margin-top:.4rem;
}

/* ---------- hero ---------- */
.hero{padding:2.8rem 0 1.6rem}
.hero-in{display:grid;grid-template-columns:56fr 44fr;grid-template-areas:"text img";column-gap:2.6rem;align-items:start}
.hero-text{grid-area:text;display:flex;flex-direction:column;align-items:flex-start}
.hero-media{grid-area:img;justify-self:center;width:100%;max-width:24rem}
.hero-frame{background:var(--tile);border:1px solid var(--line);border-radius:3px;padding:.7rem}
.hero-cover{width:100%;aspect-ratio:4/5}
.hero h1{max-width:16ch;margin-bottom:.9rem}
.best{font-size:1.06rem;line-height:1.6;color:var(--ink-soft);max-width:44ch;margin:0 0 1.3rem}

.hero-points{list-style:none;margin:0 0 1.5rem;padding:0;max-width:34ch}
.hero-points li{position:relative;padding:.28rem 0 .28rem 1.7rem;font-size:.96rem;color:var(--ink-soft)}
.hero-points li::before{
  content:"";position:absolute;left:.15rem;top:.72rem;
  width:.72rem;height:.38rem;border-left:2.4px solid var(--sage);border-bottom:2.4px solid var(--sage);
  transform:rotate(-45deg);
}
.top-cta{margin-top:0}
.cta-note{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.62rem;color:var(--ink-mute);margin:.9rem 0 0;
}

/* guarantee badge */
.assure{margin-top:1rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.badge{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;
  color:var(--sage);border:2px solid var(--sage);border-radius:999px;
  padding:.6rem 1.2rem;background:rgba(94,115,85,.06);
}
.badge svg{width:1.15rem;height:1.15rem;flex:none;fill:currentColor}
.badge svg .tick{stroke:var(--paper);fill:none}
.assure-sub{font-size:.85rem;color:var(--ink-mute);margin:0}

/* ---------- stats bar ---------- */
.statsbar{padding:0 0 1.6rem}
.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.75rem 0;
}
.hs{padding:0 1rem;text-align:center}
.hs + .hs{border-left:1px solid var(--line)}
.hs b{display:block;font-family:var(--display);font-weight:700;font-size:1.65rem;line-height:1;color:var(--accent)}
.hs span{
  display:block;font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.53rem;color:var(--ink-mute);margin-top:.35rem;
}

/* ---------- offer ---------- */
.offer{border-top:1px solid var(--line);padding-top:2.6rem}
.offer-top{margin-bottom:1.8rem}
.offer-h{font-size:2.7rem;line-height:1.05;margin-bottom:.8rem}
.offer-lede{font-size:1.02rem;color:var(--ink-soft);max-width:46ch}

.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:start}
.offer-shot .shot{aspect-ratio:3/2;background:transparent;border:0}
.offer-shot .shot img{object-fit:contain}
.offer-shot .shot .slot{position:static;aspect-ratio:3/2;background:var(--tile)}

/* The whole right column is one bordered container: the three books, the
   price and the guarantee all inside the same rule, which is the Angus
   arrangement. */
.offer-detail{border:2px solid var(--line-strong);border-radius:3px;padding:1.6rem;background:var(--tile)}
.offer-detail h3{font-size:1.7rem;margin-bottom:.5rem}
.offer-detail > p{font-size:.96rem;color:var(--ink-soft);max-width:none}

.stack-head{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:.62rem;color:var(--accent);margin:1.1rem 0 .5rem;
}
.stack{list-style:none;margin:0;padding:.85rem 1rem;border:2px solid var(--line-strong);border-radius:3px;background:var(--paper)}
.stack li{
  position:relative;padding:.5rem 0 .5rem 1.8rem;border-bottom:1px solid var(--line);
  font-size:.92rem;line-height:1.4;color:var(--ink-soft);
}
.stack li:last-child{border-bottom:0}
/* Every row carries the same green tick, the lead card included, so the
   block reads as three things you get and not as one book with two
   labels hanging off it. */
.stack li::before{
  content:"";position:absolute;left:.15rem;top:.92rem;
  width:.75rem;height:.4rem;border-left:2.4px solid var(--sage);border-bottom:2.4px solid var(--sage);
  transform:rotate(-45deg);
}
.stack li b{color:var(--ink)}
/* Right hand price column. Per-book prices and a struck total were added on
   request, replacing the earlier no-anchor arrangement. The struck figure is
   the sum of the five book prices, not an invented "was". */
.stack li{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline}
.stack li > span{flex:1 1 auto;min-width:0}
.stack li em{
  font-style:normal;flex:none;white-space:nowrap;
  font-family:var(--ui);font-weight:700;font-size:.86rem;color:var(--ink-mute);
}
.stack li.total{
  border-bottom:0;border-top:2px solid var(--ink);margin-top:.35rem;padding-top:.6rem;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;color:var(--ink);
}
.stack li.total::before{content:none}
.stack li.total{padding-left:0}
.stack li.total em{font-size:1rem;color:var(--ink)}
.stack li.total em s{color:var(--ink-mute);text-decoration-thickness:.1em;margin-right:.45rem;font-weight:400}
.stack li.total em b{color:var(--accent);font-size:1.15rem}
.stack li.audio em{color:var(--free-green)}
.stack li.lead{
  background:var(--tile);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:3px;padding:.85rem 1rem .85rem 2.4rem;margin-bottom:.5rem;border-bottom:0;
}
.stack li.lead::before{left:.95rem;top:1.45rem}
.stack li.lead b{display:block;font-family:var(--display);font-size:1.22rem;line-height:1.2;margin:.35rem 0 .2rem}
/* The lead row's blurb is an <i>, not an <em>: <em> is the price column on
   every row including this one, so the two cannot share a tag. */
.stack li.lead i{display:block;font-style:normal;font-size:.9rem;color:var(--ink-soft);line-height:1.45}
.stack li.lead em{align-self:flex-start;margin-top:.15rem}
.lead-tag{
  display:inline-block;background:var(--accent);color:#FFF8F2;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.56rem;padding:.18rem .5rem;border-radius:2px;vertical-align:.1em;
}
/* Solid green, with the tick beside it. Everything else on the row is
   terracotta or ink, so FREE is the only green thing and reads as a
   giveaway rather than as a second button. */
.free-tag{
  display:inline-block;background:var(--free-green);color:#fff;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.54rem;padding:.14rem .45rem;border-radius:2px;margin-right:.5rem;vertical-align:.12em;
}

.paytoday{
  display:flex;justify-content:space-between;align-items:center;gap:1.2rem;
  background:rgba(156,91,60,.09);border:2px solid var(--line-strong);border-radius:3px;
  padding:.55rem 1rem;margin:.9rem 0 .7rem;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;
}
.paytoday b{font-family:var(--display);font-size:1.9rem;line-height:1;color:var(--accent);letter-spacing:0}

.guarantee-inline{
  display:flex;gap:.8rem;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--sage);
  border-radius:3px;padding:.8rem .9rem;margin:.7rem 0 .2rem;
}
.guarantee-inline .seal{
  flex:none;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--sage);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;text-align:center;
}
.guarantee-inline .seal b{font-family:var(--display);font-size:1rem}
.guarantee-inline .seal span{font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.36rem;margin-top:.12rem}
.guarantee-inline h3{font-size:.95rem;line-height:1.25;margin:0 0 .2rem}
.guarantee-inline p{font-size:.82rem;line-height:1.45;color:var(--ink-soft);margin:0;max-width:none}

.trustline{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.6rem;color:var(--ink-mute);margin:.6rem 0 0;
}

/* payment strip under the offer */
.paybar{margin:2.6rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line);text-align:center}
.lockline{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.62rem;color:var(--ink-mute);margin:0 0 .7rem;max-width:none;
}
.pays{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;justify-content:center}
.pay-mark{
  display:inline-flex;align-items:center;justify-content:center;height:1.9rem;min-width:3rem;padding:0 .5rem;
  background:#fff;border:1px solid var(--line);border-radius:2px;
}
.pay-mark svg{height:1.05rem;width:auto;display:block}
.pay-label{font-family:var(--ui);font-weight:700;font-size:.66rem;letter-spacing:.06em;color:#1A1F6B}
.pay-label.ap{display:inline-flex;align-items:center;gap:.12rem;color:#111;letter-spacing:0}
.helpbar{text-align:center;font-size:.8rem;color:var(--ink-mute);margin:.9rem auto 0;max-width:none}

/* ---------- promise band ---------- */
.aside-in{display:flex;flex-direction:column;align-items:flex-start}
.promise{
  font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.35;color:var(--ink);
  max-width:32ch;margin:0 0 1rem;padding-left:1.1rem;border-left:5px solid var(--accent);
}
p.lede{font-size:1.08rem;color:var(--ink-soft);max-width:44ch}

/* ---------- positioning strip ---------- */
.strip{background:var(--ink);color:#fff;padding:1.4rem 0}
.strip-in{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;flex-wrap:wrap}
.strip p{
  margin:0;max-width:none;color:#fff;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1rem;
}
.strip span{color:#9AA093;font-size:.95rem}

/* ---------- the three books ---------- */
.section-head{margin-bottom:2rem;max-width:52ch}
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.bk{
  background:var(--tile);border:1px solid var(--line);border-top:5px solid var(--sage);
  border-radius:4px;padding:1.4rem;
  transition:transform .18s ease,box-shadow .18s ease;
  box-shadow:0 1px 2px rgba(34,39,31,.04),0 6px 16px -12px rgba(34,39,31,.3);
}
.bk:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(34,39,31,.06),0 14px 24px -14px rgba(34,39,31,.4)}
.bk.main{border-top-color:var(--accent)}
.bk h3{font-size:1.1rem;margin-bottom:.2rem}
.bk-sub{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  font-size:.6rem;color:var(--sage);margin:0 0 .8rem;
}
.bk p{font-size:.92rem;color:var(--ink-soft);margin:0;max-width:none}
.bk-tag{
  display:inline-block;font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.54rem;padding:.14rem .45rem;border-radius:2px;margin-left:.4rem;vertical-align:.2em;
}
.bk-tag.free{background:var(--free-green);color:#fff}
.bk-tag.main-tag{background:var(--accent);color:#FFF8F2}

.getlist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 2.4rem;margin-top:2rem}
.gi{display:flex;gap:1rem;align-items:baseline;padding:.85rem .5rem;border-bottom:1px solid var(--line)}
.gi b{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  font-size:.72rem;color:var(--accent);flex:none;width:8.5rem;
}
.gi span{font-size:.94rem;color:var(--ink-soft)}

/* ---------- what is inside (dark) ---------- */
.inside-head{max-width:46ch;margin-bottom:1.8rem}
.tally{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid #3A4136;border-bottom:1px solid #3A4136;margin-bottom:2rem;
}
.ty{padding:1rem .8rem;text-align:center}
.ty + .ty{border-left:1px solid #3A4136}
.ty b{display:block;font-family:var(--display);font-weight:700;font-size:1.8rem;line-height:1;color:var(--accent-lift)}
.ty span{
  display:block;font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.56rem;color:#8E9487;margin-top:.35rem;
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{
  position:relative;overflow:hidden;background:#2A2F26;border:1px solid #3A4136;border-radius:4px;
  padding:1.2rem 1.2rem 1.3rem;transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--sage);background:#2F352B}
.card-no{
  position:absolute;top:.15rem;right:.6rem;font-family:var(--display);font-weight:700;font-size:3rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px #4A5144;
}
.card:hover .card-no{-webkit-text-stroke-color:#6E7566}
.card h3{color:#fff;font-size:1.02rem;margin:0 2.6rem .5rem 0;line-height:1.25}
.card p{font-size:.86rem;color:#A2A899;margin:0;max-width:none}
.inside-cta{margin-top:2rem;padding-top:1.8rem;border-top:1px solid #3A4136;text-align:center}
.inside-cta .btn{margin-inline:auto}
.inside-cta p{font-size:.84rem;color:#8E9487;margin:.9rem auto 0}

/* ---------- how a recipe is written ---------- */
.recipe{
  background:var(--paper);border:2px solid var(--line-strong);border-radius:4px;
  padding:1.6rem 1.7rem;max-width:34rem;
}
.recipe-kicker{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  font-size:.58rem;color:var(--sage);margin:0 0 .3rem;
}
.recipe h3{font-size:1.4rem;margin-bottom:.7rem}
.ratio{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  background:rgba(94,115,85,.09);border:1px solid var(--line);border-radius:3px;
  padding:.55rem .8rem;margin:0 0 1rem;
}
.ratio span{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.56rem;color:var(--sage);
}
.ratio b{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink)}
.recipe ol{margin:0;padding-left:1.3rem}
.recipe li{margin-bottom:.5rem;font-size:.94rem;color:var(--ink-soft)}
.recipe li:last-child{margin-bottom:0}
.recipe-note{font-size:.84rem;color:var(--ink-mute);margin:1rem 0 0;max-width:none;font-style:italic}
.howgrid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start}

/* ---------- the method (three rules) ---------- */
.tricks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.trick{
  background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--sage);
  border-radius:3px;padding:1.3rem;
}
.trick h3{font-size:1.02rem;margin-bottom:.35rem}
.trick p{font-size:.92rem;margin:0;color:var(--ink-soft);max-width:none}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:start}
.about .shot{aspect-ratio:1/1}
.pull{
  font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.4;
  border-left:5px solid var(--accent);padding-left:1.2rem;margin:1.6rem 0;max-width:38ch;
}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 2.4rem}
.faq h3{font-size:1.05rem;margin-bottom:.25rem}
.faq p{font-size:.94rem;margin:0;color:var(--ink-soft)}

/* ---------- closing ---------- */
.closing-cta{text-align:center}
.closing-cta h2{font-size:2.3rem;max-width:22ch;margin-inline:auto}
.closing-cta p{margin-inline:auto}
.closing-cta .btn-row{justify-content:center}
.reassure{font-size:.88rem;color:var(--ink-mute);margin:.9rem 0 0}

/* ---------- exit intent ---------- */
.xi{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:1.2rem;background:rgba(23,27,21,.74)}
.xi.open{display:flex}
.xi-box{
  position:relative;background:var(--paper);border:2px solid var(--ink);border-radius:4px;
  max-width:32rem;width:100%;padding:1.8rem 1.7rem 1.6rem;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55);
}
.xi h2{font-size:1.35rem;line-height:1.25;margin:0 0 .55rem;padding-right:2rem}
.xi p{font-size:.94rem;line-height:1.5;color:var(--ink-soft);margin:0 0 .6rem;max-width:none}
.xi-guar{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.6rem;color:var(--free-green);margin:0 0 1rem;
}
.xi .btn{width:100%;margin:0}
.xi-close{
  position:absolute;top:.3rem;right:.4rem;background:none;border:0;font-size:1.6rem;line-height:1;
  color:var(--ink-mute);cursor:pointer;padding:.35rem .55rem;min-width:44px;min-height:44px;
}
.xi-close:hover{color:var(--accent)}

/* ---------- sticky CTA, phones only ---------- */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:.8rem;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background:var(--paper);border-top:2px solid var(--line-strong);
  box-shadow:0 -8px 20px -12px rgba(34,39,31,.5);
}
.sticky-price{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--accent);flex:none}
.stickybar .btn{flex:1;min-height:52px;padding:.6rem 1rem;font-size:.82rem;margin:0;width:auto}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .offer-h{font-size:2.1rem}
  .offer-grid{grid-template-columns:1fr;gap:1.8rem}
  .cards{grid-template-columns:repeat(2,1fr)}
  .howgrid{grid-template-columns:1fr;gap:1.8rem}
  .about,.faq{grid-template-columns:1fr;gap:2rem}
  .books,.tricks,.getlist{grid-template-columns:1fr;gap:1.2rem}
  .gi{flex-direction:column;gap:.2rem}
  .gi b{width:auto}
}
@media (max-width:820px){
  .hero-in{grid-template-columns:1fr;grid-template-areas:"img" "text";row-gap:1.6rem;text-align:center}
  .hero-media{max-width:none}
  .hero-text{align-items:center}
  .hero h1{max-width:none}
  .hero-cover{aspect-ratio:4/3}
  .best,.hero-points,p.lede,.offer-lede{margin-inline:auto}
  .hero-points{text-align:left}
  .btn-row{justify-content:center}
  .assure{align-items:center}
  .promise{margin-inline:auto}
  .aside-in{align-items:center;text-align:center}
  .stickybar{display:flex}
  body{padding-bottom:4.6rem}
}
@media (max-width:620px){
  .cards{grid-template-columns:1fr}
  .tally{grid-template-columns:repeat(2,1fr)}
  .ty:nth-child(3){border-left:0}
  .ty:nth-child(n+3){border-top:1px solid #3A4136}
  .offer-detail{padding:1.1rem}
  .stack{padding:.7rem .8rem}
  .hs{padding:0 .4rem}
  .hs b{font-size:1.35rem}
  .hs span{font-size:.48rem;letter-spacing:.07em}
  .strip-in{flex-direction:column;align-items:flex-start;gap:.4rem}
  .closing-cta h2{font-size:1.8rem}
}

/* ---------- audiobook chip ---------- */
/* Outlined rather than solid so it reads as a format label and never competes
   with a price or a button. */
.audio-tag{
  display:inline-flex;align-items:center;gap:.35em;
  background:transparent;color:var(--accent);
  border:1px solid var(--accent);border-radius:2px;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.54rem;padding:.12rem .45rem;margin-right:.5rem;vertical-align:.12em;
}
.audio-tag svg{width:.95em;height:.95em;flex:none}

/* ---------- price line above the button ---------- */
.price-row{
  display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:.7rem 0;margin:.9rem 0 .2rem;
}
.p-now{font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;color:var(--accent)}
.p-was{font-size:1rem;color:var(--ink-mute);text-decoration:line-through;text-decoration-thickness:.08em}
.p-note{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.6rem;color:var(--ink-mute);
}

@media (max-width:620px){
  .stack li{flex-direction:row;gap:.7rem}
  .stack li em{font-size:.8rem}
}