/* Product page + thank-you page. One job: the buy button.
   Colour: cream and white, plum text. Gold ONLY on buy buttons.
   First screen on a phone: the books, one headline, one button. Same pattern as the pages that sell prayer PDFs and the big DTC brands.
   Toggles (Son/Daughter/Both from the URL, text size, bump) work with :has() and need no JavaScript. */
@font-face{font-family:Fraunces;font-style:normal;font-weight:600 700;font-display:swap;src:url(/fonts/fraunces-opsz-latin.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/nunito-sans-latin.woff2) format("woff2")}
:root{--plum:#2F1F48;--plum2:#432D66;--cream:#FAF4E6;--honey:#F2B33D;--ink:#150E20;--muted:#5B4B6E;--line:#E7DFD0;--green:#1F7A4D;--focus:#7A4FD6;--fs:1;--base:18px;--r:20px;--shadow:0 16px 36px -18px rgba(47,31,72,.35)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:12px}
html[data-fs="2"]{--fs:1.14}
html[data-fs="3"]{--fs:1.28}
body:has(#fs2:checked){--fs:1.14}
body:has(#fs3:checked){--fs:1.28}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--plum);font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:calc(var(--base) * var(--fs));line-height:1.5}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,figure,ul{margin:0}
.fh{font-family:Fraunces,Georgia,serif;font-weight:700;line-height:1.1;letter-spacing:-.012em;font-optical-sizing:auto;margin:0}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding-left:22px;padding-right:22px}
.s{padding-top:56px;padding-bottom:56px}
.alt{background:#fff}
.s-in{display:flex;flex-direction:column;gap:22px}
.h2{font-size:1.8em}
.muted{color:var(--muted)}
.sm{font-size:.88em}
.skip{position:absolute;left:-9999px;top:0;background:var(--honey);color:var(--ink);padding:12px 16px;font-weight:800;z-index:100}
.skip:focus{left:8px;top:8px}
.pick{position:absolute;opacity:0;width:1px;height:1px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,.pick:focus-visible+label{outline:3px solid var(--focus);outline-offset:3px}
a.lnk{color:inherit;font-weight:700}
.ic{width:1.5em;height:1.5em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-f{fill:currentColor;stroke:none}
.ic-s{width:1.2em;height:1.2em}
.ib{display:flex;align-items:center;color:var(--plum);flex:none}
.ib .ic{width:1.9em;height:1.9em}
.row{display:flex;gap:14px;align-items:center}
.rowt{display:flex;flex-direction:column;gap:2px;min-width:0}
.rowt b{font-size:1.02em}
.rowt span{font-size:.92em;color:var(--muted)}

/* ---------- THE button. Gold is used for nothing else. ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;min-height:58px;border-radius:999px;font-weight:800;font-size:1.1em;line-height:1.2;text-decoration:none;padding:14px 28px;border:0;cursor:pointer;font-family:inherit;color:inherit;transition:transform .15s,box-shadow .15s}
.btn-honey{background:linear-gradient(180deg,#F7C25A,var(--honey));color:var(--ink);box-shadow:0 10px 22px -10px rgba(227,159,28,.9),inset 0 -2px 0 rgba(0,0,0,.08)}
.btn-honey:hover{transform:translateY(-1px)}
.btn[aria-busy=true]{opacity:.7;pointer-events:none}
.textlink{color:var(--plum);font-weight:700;text-decoration:underline;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:48px}
.buy.textlink{background:none;padding:0;border:0;font-size:1em}

/* ---------- header: name only ---------- */
.hdr{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:30}
.hdr-in{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px}
.brand{font-size:1.05em;white-space:nowrap}
.hdr-r{display:flex;align-items:center;gap:14px}
.hdr-free,.hdr-cta{display:none}
.fs-cycle{display:none;min-width:48px;min-height:48px;border:2px solid var(--plum);border-radius:14px;background:transparent;color:var(--plum);font-weight:800;font-family:Fraunces,serif;font-size:1.05em;cursor:pointer}
.js .fs-cycle{display:inline-flex;align-items:center;justify-content:center}
.fsl{display:inline-flex;gap:6px;align-items:center}
.fsl label{cursor:pointer;border:2px solid var(--cream);color:var(--cream);border-radius:12px;min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
body:has(#fs1:checked) label[for=fs1],body:has(#fs2:checked) label[for=fs2],body:has(#fs3:checked) label[for=fs3]{background:var(--cream);color:var(--plum)}
.fsl-wrap{display:flex;align-items:center;gap:12px;font-weight:700}

/* ---------- hero: books, headline, button ---------- */
.hero-grid{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:22px;padding-bottom:40px;text-align:center}
.hero-media{order:1;width:100%}
.hero-top{order:2}
.hero-cta{order:3;width:100%;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.hero h1{font-size:1.8em;line-height:1.1}
.hv{display:none}
body:has(#h-both:checked) .hv-both,body:has(#h-son:checked) .hv-son,body:has(#h-dau:checked) .hv-dau{display:inline}
.hvf{display:none}
body:has(#h-both:checked) .hvf-both,body:has(#h-son:checked) .hvf-son,body:has(#h-dau:checked) .hvf-dau{display:flex}
.hero-cta .btn-honey{min-height:64px;font-size:1.15em}
.note-line{font-size:.88em;color:var(--muted)}
.covers{display:flex;justify-content:center;align-items:flex-end}
.covers img{width:128px;height:192px;border-radius:8px;box-shadow:0 18px 30px -10px rgba(21,14,32,.55)}
.covers img:first-child{transform:rotate(-4deg) translateX(10px)}
.covers img:last-child{transform:rotate(4deg) translateX(-10px)}

/* three things you get, one quiet row */
.bens{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center}
.bens>div{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:700;font-size:.92em;line-height:1.25}

/* ---------- photos ---------- */
.ph-fig{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:#EFE9DD;box-shadow:var(--shadow)}
.ph-fig img{width:100%;height:100%;object-fit:cover}
.r1610{aspect-ratio:16/10}
.r169{aspect-ratio:16/9}
.r45{aspect-ratio:4/5}
.ai-tag{position:absolute;left:10px;bottom:10px;background:rgba(21,14,32,.78);color:#fff;font-size:.86em;font-weight:700;border-radius:999px;padding:2px 10px}
.ai-note{font-size:.88em;color:var(--muted)}

/* ---------- video (small, below the hero) ---------- */
.vsl{position:relative;width:100%;border-radius:var(--r);overflow:hidden;background:var(--plum);box-shadow:var(--shadow)}
.vsl.portrait{max-width:260px;margin:0 auto}
.vsl button.vsl-go{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:inherit}
.vsl img,.vsl video,.vsl iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.vsl video{background:#000;object-fit:contain}
.play{position:relative;width:72px;height:72px;border-radius:50%;background:#fff;color:var(--plum);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.4)}
.play .ic{width:30px;height:30px;margin-left:4px}
.badge{position:absolute;display:inline-flex;gap:6px;align-items:center;background:rgba(21,14,32,.8);color:#fff;border-radius:999px;padding:5px 12px;font-weight:700;font-size:.86em}
.badge .ic{width:1.1em;height:1.1em}

/* ---------- text blocks ---------- */
.lead{font-size:1.12em;color:var(--plum);max-width:34em}
.pain-list{display:flex;flex-direction:column;gap:10px}
.pain-list .row{background:var(--cream);border-radius:16px;padding:12px 14px}
.pain-note{font-size:1.08em}
.statline{display:flex;flex-wrap:wrap;gap:6px 22px;font-weight:700}
.statline b{font-family:Fraunces,serif;font-size:1.3em}
.pages{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 22px 14px;margin:0 -22px;scrollbar-width:thin;list-style:none}
.pages li{flex:none;width:64%;scroll-snap-align:center}
.pages img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:12px;box-shadow:var(--shadow);background:#fff}

/* ---------- pricing: one card ---------- */
.card{background:#fff;border-radius:var(--r);padding:22px;border:1px solid var(--line)}
.price-card{display:flex;flex-direction:column;gap:14px;border:3px solid var(--plum);box-shadow:var(--shadow);max-width:540px;width:100%}
.price{font-size:2.4em;font-weight:800;line-height:1}
.pr-b{display:none}
body:has(#bump:checked) .pr-a{display:none}
body:has(#bump:checked) .pr-b{display:inline}
.chk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.chk li{display:flex;gap:10px;align-items:center}
.yes::before{content:"\2713";flex:none;font-weight:800;color:var(--green);width:1.2em}
.no::before{content:"\2715";flex:none;font-weight:800;color:#6E6080;width:1.2em}
.bump-wrap{display:none}
.js .bump-wrap{display:block}
.bump{display:flex;gap:14px;align-items:center;border:2px dashed var(--plum);background:var(--cream);border-radius:16px;padding:14px;cursor:pointer;min-height:56px}
.bump input{width:30px;height:30px;accent-color:var(--plum);flex:none;margin:0}
.callout{display:flex;align-items:center;gap:8px;background:var(--cream);border-radius:12px;padding:8px 12px;font-size:.88em}
.mini-line{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.9em;font-weight:700;text-align:center}
.others{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;font-weight:700}
.others .textlink{white-space:nowrap}
.js .plan-solo{display:none}
.plan-card{display:flex;flex-direction:column;gap:12px;max-width:540px}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:16px 0;font-weight:800;display:flex;gap:12px;min-height:56px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-size:1.5em;line-height:1;color:var(--muted)}
details[open] summary::after{content:"\2212"}
details p{margin:0 0 16px 38px;color:#3F2F55;font-size:.97em}
.faq-grid{display:grid;gap:14px}

/* ---------- final ---------- */
.final{text-align:center}
.final .s-in{align-items:stretch;gap:16px}
.final h2{font-size:1.9em}

/* ---------- optional sections (switched off by default) ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{background:#fff;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;border:1px solid var(--line)}
.stat b{font-family:Fraunces,Georgia,serif;font-size:1.8em;line-height:1}
.stat b.stat-t{font-size:1.15em}
.stat span.stat-d{font-size:.9em;color:var(--muted)}
.chg{display:flex;flex-direction:column;gap:14px}
.chg .card{display:flex;flex-direction:column;gap:10px}
.chg h3{font-size:1.2em}
.fd{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fd label{display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 12px;border:2px solid var(--line);border-radius:16px;background:#fff;font-weight:700;font-size:.94em;cursor:pointer}
.fr{display:none}
.fdres{display:none;flex-direction:column;gap:12px}
.fdbox:has(.fdp:checked) .fdres{display:flex}
.fdbox:has(.fdp:checked) .fdhint{display:none}
.fdbox:has(#f1:checked) .fr1,.fdbox:has(#f2:checked) .fr2,.fdbox:has(#f3:checked) .fr3,.fdbox:has(#f4:checked) .fr4,.fdbox:has(#f5:checked) .fr5,.fdbox:has(#f6:checked) .fr6,.fdbox:has(#f7:checked) .fr7,.fdbox:has(#f8:checked) .fr8{display:inline}
.fdbox:has(#f1:checked) label[for=f1],.fdbox:has(#f2:checked) label[for=f2],.fdbox:has(#f3:checked) label[for=f3],.fdbox:has(#f4:checked) label[for=f4],.fdbox:has(#f5:checked) label[for=f5],.fdbox:has(#f6:checked) label[for=f6],.fdbox:has(#f7:checked) label[for=f7],.fdbox:has(#f8:checked) label[for=f8]{border-color:var(--plum)}
.chips{display:flex;gap:8px;overflow-x:auto;list-style:none;margin:0;padding:0 0 4px}
.chip{display:inline-flex;gap:6px;align-items:center;border:2px solid var(--line);border-radius:999px;padding:6px 14px 6px 10px;font-weight:700;font-size:.9em;white-space:nowrap;background:#fff}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-weight:700}
.facts>div{display:flex;align-items:center;gap:10px}
.usage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cmp>div{border-radius:18px;padding:18px 16px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);background:#fff}
.qband{position:relative;color:#fff;background:var(--ink);overflow:hidden}
.qband .ph-fig{position:absolute;inset:0;border-radius:0;box-shadow:none;aspect-ratio:auto}
.qband .ph-fig img{opacity:.5}
.qband-in{position:relative;z-index:1;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;padding-top:80px;padding-bottom:56px}
.quote{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:1.6em;line-height:1.18}
.trust-list{display:flex;flex-direction:column;gap:16px}
.share-in,.share-btns{display:flex;flex-direction:column;gap:14px}
.btn-line{background:transparent;color:var(--plum);border:2px solid var(--plum)}
.btn-plum{background:var(--plum);color:#fff}
.proof{display:flex;flex-direction:column;gap:12px}

/* ---------- forms, sheet ---------- */
.field{min-height:54px;border-radius:14px;border:2px solid var(--plum);padding:0 16px;font-size:1em;font-family:inherit;background:#fff;color:var(--plum);width:100%}
.field-label{font-weight:700;font-size:.92em}
.form-msg{font-size:.9em;font-weight:700}
.sheet{display:none;position:fixed;inset:0;z-index:50;background:rgba(21,14,32,.6);align-items:flex-end;justify-content:center}
.sheet:target{display:flex}
.sheetin{width:100%;max-width:520px;background:var(--cream);border-radius:28px 28px 0 0;padding:22px 20px 28px;display:flex;flex-direction:column;gap:12px;max-height:92vh;overflow:auto;font-size:calc(var(--base) * var(--fs));line-height:1.5}
.sheet-x{min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;color:var(--plum)}

/* ---------- footer, bottom bar, consent ---------- */
.foot{background:var(--ink);color:#D9CFE6;padding-top:32px;padding-bottom:40px;font-size:.95em}
.foot .wrap{display:flex;flex-direction:column;gap:14px}
.foot a{color:#fff;font-weight:700;min-height:48px;display:inline-flex;align-items:center}
.foot-links{display:flex;flex-wrap:wrap;gap:0 20px}
.foot small{font-size:.9em;color:#B9AECB}
.sticky{position:sticky;bottom:0;z-index:20;padding:10px 14px 12px;background:linear-gradient(to top,var(--cream) 78%,rgba(250,244,230,0));display:flex;flex-direction:column;gap:4px;align-items:stretch;transition:opacity .2s,transform .2s}
.sticky .s-line{text-align:center;font-size:.86em;font-weight:700;color:var(--plum);display:flex;align-items:center;justify-content:center;gap:6px;min-height:26px}
.sticky .s-line a{color:var(--plum)}
.js .sticky.sticky-off{visibility:hidden;opacity:0;transform:translateY(12px);pointer-events:none}
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:center;padding:10px}
.consent[hidden]{display:none}
.consent-in{max-width:460px;width:100%;background:var(--plum);color:#fff;border-radius:22px;padding:16px;box-shadow:0 12px 40px rgba(21,14,32,.45);font-size:.92em;display:flex;flex-direction:column;gap:12px}
.consent-in a{color:#fff;font-weight:700}
.consent-btns{display:flex;gap:8px}
.consent-btns .btn{flex:1;min-height:48px;font-size:1em}
.consent-btns .btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}

/* ---------- thank-you ---------- */
.big-mail{background:#fff;color:var(--plum);border:2px solid var(--plum);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow);text-align:left}
.big-mail .fh{font-size:1.5em}
.steps{display:flex;flex-direction:column;gap:18px}
.step{display:flex;gap:14px;align-items:center}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.timeline li{display:flex;gap:12px}
.timeline b{min-width:5.5em}

/* =====================================================================
   DESKTOP (960px and up)
   ===================================================================== */
@media (min-width:960px){
  :root{--base:19px}
  .wrap{padding-left:40px;padding-right:40px}
  .s{padding-top:88px;padding-bottom:88px}
  .h2{font-size:2.3em}
  .hdr-in{min-height:72px}
  .brand{font-size:1.3em}
  .hdr-free{display:inline-flex;align-items:center;min-height:48px;color:var(--plum);font-weight:700;text-decoration:underline;text-underline-offset:4px}
  .hdr-cta{display:block}
  .hdr-cta .btn{min-height:50px;padding:8px 24px;font-size:1em;white-space:nowrap}
  .hdr{position:sticky;top:0}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"top media" "cta media";column-gap:80px;row-gap:28px;align-items:center;text-align:left;padding-top:72px;padding-bottom:96px;grid-template-rows:auto auto}
  .hero-top{grid-area:top;align-self:end}
  .hero-media{grid-area:media}
  .hero-cta{grid-area:cta;max-width:480px;align-self:start}
  .hero h1{font-size:3.2em;line-height:1.05}
  .covers img{width:220px;height:330px}
  .bens{max-width:760px;margin:0 auto}
  .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
  .inside-top{max-width:760px}
  .faq-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:80px;align-items:start}
  .faq-grid>div:first-child{position:sticky;top:110px}
  .pages{overflow:visible;margin:0;padding:6px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .pages li{width:auto}
  .swipe{display:none}
  .sticky{display:none}
  .vsl.portrait{max-width:300px}
  .final .s-in{max-width:560px;margin:0 auto}
  .final h2{font-size:2.6em}
  .foot .wrap{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .ty-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
  .chg{display:grid;grid-template-columns:repeat(3,1fr)}
  .glance-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .finder-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
  .fdres{grid-column:1/-1;flex-direction:row;align-items:center}
  .trust-list{display:grid;grid-template-columns:repeat(4,1fr)}
  .share-in{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px}
}
