:root{
  --bg:#1c1020; --bg2:#26152c;
  --ink:#f7f1e4; --mut:#d8c9bc; --mut2:#ae9ca6;
  --gold:#d6b570; --gold2:#ecd198; --gold-ink:#241428; --mari:#e2a53c; --wine:#6b1d3f;
  --glass:rgba(255,244,230,.065); --glass-h:rgba(255,244,230,.11);
  --bdr:rgba(255,240,220,.14); --bdr-h:rgba(214,181,112,.5);
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --ui:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --rad:18px; --pad:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.55;
     -webkit-font-smoothing:antialiased;padding:0 var(--pad) calc(44px + env(safe-area-inset-bottom));overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:10px}

/* ---------- the glimmer: slow drifting light behind everything ---------- */
.aurora{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%)}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(60px)}
.aurora .a1{width:520px;height:430px;left:-8%;top:-90px;background:rgba(214,181,112,.30);animation:drift1 26s ease-in-out infinite alternate}
.aurora .a2{width:460px;height:380px;right:-12%;top:60px;background:rgba(226,165,60,.22);animation:drift2 34s ease-in-out infinite alternate}
.aurora .a3{width:620px;height:360px;left:18%;top:520px;background:rgba(122,32,72,.55);animation:drift3 42s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(70px,60px,0) scale(1.15)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-80px,70px,0) scale(.92)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(90px,-50px,0) scale(1.2)}}
@keyframes sweep{0%{transform:translateX(-130%)}28%,100%{transform:translateX(130%)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.wrap{position:relative;z-index:1;max-width:560px;margin:0 auto}

/* ---------- glass ---------- */
.glass{background:linear-gradient(160deg,rgba(255,244,230,.10),rgba(255,244,230,.035) 70%);
  border:1px solid var(--bdr);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 24px 60px -34px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}

/* ---------- hero ---------- */
header{padding-top:22px}
.hero{position:relative;border-radius:24px;padding:6px;overflow:hidden;animation:rise .7s cubic-bezier(.2,.75,.3,1) both}
.hero img{width:100%;height:auto;border-radius:19px}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:24px;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 48%,transparent 58%);
  transform:translateX(-130%);animation:sweep 9s ease-in-out 1.6s infinite}
.intro{text-align:center;padding:18px 2px 0}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(31px,8.6vw,44px);line-height:1.08;letter-spacing:-.015em;margin:4px 0 0}
h1 .w{display:inline-block;animation:rise .62s cubic-bezier(.2,.75,.3,1) both}
h1 .w:nth-child(1){animation-delay:.10s}h1 .w:nth-child(2){animation-delay:.18s}h1 .w:nth-child(3){animation-delay:.26s}
h1 .w:nth-child(4){animation-delay:.34s}h1 .w:nth-child(5){animation-delay:.42s}
h1 em{font-style:italic;color:var(--gold)}
.lede{color:var(--mut);font-size:15.5px;margin:10px auto 0;max-width:430px;animation:rise .6s cubic-bezier(.2,.75,.3,1) .5s both}
.lede b{color:var(--ink);font-weight:600}
.cred{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:500;
  animation:rise .6s cubic-bezier(.2,.75,.3,1) .58s both}
.cred svg{color:var(--gold)}

/* ---------- chips ---------- */
.jump{position:sticky;top:0;z-index:6;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
  margin:18px 0 4px;padding:10px 0;transition:background .2s,box-shadow .2s}
/* the stuck bar paints edge to edge with a shadow, so it never widens the page */
.jump.stuck{background:rgba(28,16,32,.9);box-shadow:0 0 0 100vmax rgba(28,16,32,.9),0 1px 0 100vmax var(--bdr);clip-path:inset(0 -100vmax -1px)}
.chip{min-width:0;min-height:40px;display:flex;align-items:center;justify-content:center;padding:0 6px;border-radius:999px;border:1px solid var(--bdr);
  background:var(--glass);font-size:13.5px;font-weight:500;color:var(--mut);white-space:nowrap;transition:all .18s ease-out}
.chip.on,.chip:hover{color:var(--gold-ink);background:var(--gold);border-color:var(--gold)}

section{scroll-margin-top:72px;margin-top:38px}
.lab{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.lab::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(214,181,112,.45),transparent)}
.h2{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1.2;margin:0 0 6px;letter-spacing:-.005em}
.note{color:var(--mut2);font-size:14.5px;margin:0 0 16px}

/* ---------- chooser ---------- */
.quiz{position:relative;margin-top:18px;border-radius:22px;padding:16px 14px 12px;border-color:rgba(214,181,112,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 4px rgba(214,181,112,.06),0 26px 60px -30px rgba(0,0,0,.75);
  animation:rise .6s cubic-bezier(.2,.75,.3,1) .62s both}
.quiz .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 10px}
.quiz .top b{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.2}
.quiz .top span[hidden]{display:none}
.quiz .top span{flex:none;font-size:12px;font-weight:500;color:var(--gold)}
.browse{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:10px;font-size:14px;color:var(--mut)}
.browse:hover{color:var(--gold)}
.browse svg{transform:rotate(90deg)}
.extra{display:block;text-align:center;margin-top:10px;font-size:14px;color:var(--mut)}
.extra u{color:var(--gold);text-decoration:none;font-weight:600}
.cq{font-size:15px;color:var(--mut);margin:2px 0 12px}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:11px 15px;border-radius:14px;cursor:pointer;
  border:1px solid var(--bdr);background:rgba(255,244,230,.05);text-align:left;font-size:15.5px;font-weight:500;transition:all .18s ease-out}
.opt:hover{border-color:var(--bdr-h);background:var(--glass-h)}
.opt:active{transform:scale(.98)}
.opt svg{margin-left:auto;color:var(--gold);flex:none}
.step-in{animation:rise .35s ease-out both}
.back{margin-top:10px;background:none;border:0;padding:6px 0;color:var(--mut2);font-size:14px;cursor:pointer}
.back:hover{color:var(--gold)}
.result{display:flex;gap:14px;align-items:stretch}
.result img{width:96px;height:136px;object-fit:cover;border-radius:9px;flex:none;box-shadow:0 12px 30px -12px rgba(0,0,0,.6)}
.result .rt{flex:1;min-width:0;display:flex;flex-direction:column}
.result .tier{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.result b{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.2;margin:4px 0 5px}
.result p{font-size:14px;color:var(--mut);margin:0;line-height:1.45}
.result + .btn{margin-top:14px}
.plan{margin-top:14px;padding-top:12px;border-top:1px solid var(--bdr)}
.plan a{display:flex;align-items:center;gap:11px;padding:8px 0;text-align:left}
.plan a + a{border-top:1px solid var(--bdr)}
.plan img{width:34px;height:48px;object-fit:cover;border-radius:5px;flex:none}
.plan .pt{flex:1;min-width:0}
.plan .st{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.plan b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;margin-top:2px}
.plan em{display:block;font-style:normal;font-size:12.5px;color:var(--mut2);margin-top:1px}
.plan a:hover b{color:var(--gold)}
.plan svg{flex:none;color:var(--mut2)}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 18px;
  border-radius:14px;background:linear-gradient(150deg,var(--gold2),var(--gold));color:var(--gold-ink);font-weight:600;font-size:16px;
  transition:transform .15s ease-out,box-shadow .2s}
.btn:hover{box-shadow:0 14px 36px -14px rgba(214,181,112,.8)}
.btn:active{transform:scale(.97)}
.btn.sm{min-height:48px;font-size:15.5px}
.btn.ghost{background:rgba(255,244,230,.06);color:var(--ink);box-shadow:inset 0 0 0 1px var(--bdr)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--bdr-h)}

/* ---------- shelves ---------- */
.shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
/* odd number of guides on a two column phone grid: the first one goes full width, no gap */
.shelf > .book:first-child:nth-last-child(odd){grid-column:1 / -1;flex-direction:row}
.shelf > .book:first-child:nth-last-child(odd) .cover{flex:0 0 42%;align-self:flex-start}
.shelf > .book:first-child:nth-last-child(odd) .in{padding:14px 14px 15px;justify-content:center}
.shelf > .book:first-child:nth-last-child(odd) b{font-size:19px}
.shelf > .book:first-child:nth-last-child(odd) .s{flex:none;font-size:14px}
.plist{display:flex;flex-direction:column;gap:9px}
.prow{display:flex;align-items:center;gap:13px;min-width:0;padding:9px 14px 9px 9px;border-radius:16px;transition:all .2s ease-out}
.prow:hover{border-color:var(--bdr-h);background:var(--glass-h)}
.prow:active{transform:scale(.985)}
.prow .th{flex:0 0 52px;height:74px;border-radius:7px;overflow:hidden;background:#2a1830;box-shadow:0 8px 20px -10px rgba(0,0,0,.7)}
.prow .th img{width:100%;height:100%;object-fit:cover}
.prow .txt{flex:1;min-width:0}
.prow .txt b{display:block;font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.25}
.prow .txt > span{display:block;font-size:13.5px;color:var(--mut);line-height:1.4;margin-top:3px}
.prow .new{position:static;vertical-align:2px;margin-left:4px;font-family:var(--ui);font-size:10px;padding:2px 7px}
.prow .lk{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--gold);background:rgba(214,181,112,.12);box-shadow:inset 0 0 0 1px rgba(214,181,112,.3)}
.book{position:relative;display:flex;flex-direction:column;border-radius:var(--rad);border:1px solid var(--bdr);overflow:hidden;
  background:linear-gradient(170deg,rgba(255,244,230,.08),rgba(255,244,230,.03));transition:transform .22s ease-out,border-color .22s,box-shadow .22s}
.book:hover{transform:translateY(-3px);border-color:var(--bdr-h);box-shadow:0 22px 50px -26px rgba(214,181,112,.55)}
.book:active{transform:scale(.98)}
.cover{position:relative;aspect-ratio:1/1.4142;overflow:hidden;background:#2a1830}
.cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease-out}
.book:hover .cover img{transform:scale(1.035)}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);
  transform:translateX(-130%);transition:transform .8s ease-out;pointer-events:none}
.book:hover .cover::after{transform:translateX(130%)}
.flag,.new,.pop{position:absolute;top:9px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.3;display:inline-flex;align-items:center;gap:4px}
.flag{right:9px;background:var(--gold);color:var(--gold-ink)}
.flag.gift{background:rgba(28,16,32,.86);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(214,181,112,.5)}
.flag.paid{background:rgba(28,16,32,.86);color:var(--ink);box-shadow:inset 0 0 0 1px var(--bdr)}
.new{left:9px;background:var(--mari);color:var(--gold-ink)}
.pop{left:9px;background:var(--ink);color:var(--gold-ink)}
.new[hidden],.pop[hidden]{display:none}
.locked .cover img{filter:saturate(.85) brightness(.9)}
.book .in{padding:11px 12px 13px;display:flex;flex-direction:column;flex:1}
.book b{font-family:var(--serif);font-weight:600;font-size:16.5px;line-height:1.22}
.book .s{font-size:13.5px;color:var(--mut);line-height:1.45;margin-top:5px;flex:1}
.book .go{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--gold)}

/* ---------- newsletter card ---------- */
.feat{position:relative;overflow:hidden;display:block;border-radius:22px;padding:22px 20px 20px;border:1px solid rgba(214,181,112,.4);
  background:linear-gradient(145deg,rgba(214,181,112,.2),rgba(214,181,112,.05) 55%,rgba(255,244,230,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 60px -30px rgba(0,0,0,.7)}
.feat::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.16) 47%,transparent 60%);
  transform:translateX(-130%);animation:sweep 7s ease-in-out 2.2s infinite}
.feat .h2{font-size:23px}
.feat p{color:var(--mut);font-size:15px;margin:6px 0 16px}
.feat ul{list-style:none;padding:0;margin:0 0 16px}
.feat li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;padding:5px 0;color:var(--ink)}
.feat li svg{color:var(--gold);flex:none;margin-top:3px}
.small{font-size:13px;color:var(--mut2);text-align:center;margin:10px 0 0}

/* ---------- rows ---------- */
.rows{display:flex;flex-direction:column;gap:10px}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
.topics a{padding:7px 13px;border-radius:999px;border:1px solid var(--bdr);background:var(--glass);
  font-size:13.5px;font-weight:500;color:var(--mut);transition:all .18s ease-out}
.topics a:hover{color:var(--gold);border-color:var(--bdr-h)}
.row{display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:16px;min-height:68px;transition:all .2s ease-out}
.row:hover{border-color:var(--bdr-h);background:var(--glass-h)}
.row:active{transform:scale(.985)}
.row .ico{flex:0 0 40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(214,181,112,.28),rgba(214,181,112,.1));color:var(--gold)}
.row .txt{flex:1;min-width:0}
.row .txt b{display:block;font-size:15.5px;font-weight:600;line-height:1.3}
.row .txt span{display:block;font-size:13.5px;color:var(--mut);line-height:1.4;margin-top:2px}
.row .chev{flex:none;color:var(--mut2)}

/* ---------- paid ---------- */
.perks{border-radius:22px;padding:18px 18px 18px;margin-top:14px}
.perks ul{list-style:none;padding:0;margin:0 0 16px}
.perks li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--bdr);font-size:15px}
.perks li:first-child{border-top:0;padding-top:2px}
.perks li svg{color:var(--gold);flex:none;margin-top:3px}
.perks li span{display:block;color:var(--mut);font-size:13.5px}

.extras{display:none}
.panel{border-radius:20px;padding:16px 18px 14px;margin-top:22px}
.panel .lab{margin-bottom:8px}
.panel ul{list-style:none;padding:0;margin:0}
.panel li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:14.5px;line-height:1.5;color:var(--mut)}
.panel li + li{border-top:1px solid var(--bdr)}
.panel li svg{flex:none;margin-top:3px;color:var(--gold)}
.panel li b{color:var(--ink);font-weight:600}
.panel .plink{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:14px;font-weight:600;color:var(--gold)}
.panel .pl{display:block;padding:9px 0;font-size:14.5px;line-height:1.45;color:var(--mut)}
.panel .pl + .pl{border-top:1px solid var(--bdr)}
.panel .pl b{display:block;color:var(--ink);font-size:15px;font-weight:600;margin-bottom:2px}
.panel .pl:hover b{color:var(--gold)}

.panel .steps{list-style:none;padding:0;margin:0;counter-reset:s}
.panel .steps li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:14.5px;line-height:1.5;color:var(--mut)}
.panel .steps li + li{border-top:1px solid var(--bdr)}
.panel .steps li > span:first-child{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;color:var(--gold-ink);background:var(--gold);margin-top:1px}
.panel .steps b{color:var(--ink);font-weight:600}
.qa details{border-top:1px solid var(--bdr)}
.qa details:first-child{border-top:0}
.qa summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:flex-start;padding:10px 0;font-size:14.5px;font-weight:600}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";margin-left:auto;color:var(--gold)}
.qa details[open] summary{color:var(--gold)}
.qa details[open] summary::after{content:"3"}
.qa p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--mut)}

.quotes{display:grid;gap:12px}
.quote{margin:0;border-radius:18px;padding:18px}
.quote blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5}
.quote figcaption{margin-top:8px;font-size:13px;color:var(--mut2)}

footer{margin-top:44px;padding-top:22px;border-top:1px solid var(--bdr);text-align:center}
.disc{font-size:13px;line-height:1.6;color:var(--mut2);margin:0 auto 14px;max-width:470px}
.legal{display:flex;justify-content:center;gap:18px;font-size:13px;color:var(--mut)}
.legal a:hover{color:var(--gold)}
.cr{font-size:12.5px;color:var(--mut2);margin:4px 0 0}

@media (max-width:374px){.jump{gap:4px}.chip{font-size:12px;padding:0 2px}}
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease-out,transform .55s ease-out}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .aurora i,.hero,.hero::after,.feat::after,h1 .w,.lede,.cred,.quiz{animation:none!important}
  .js .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

@media (min-width:920px){
  body{padding:0 32px 60px}
  .wrap{max-width:1100px;display:grid;grid-template-columns:390px 1fr;gap:56px;align-items:start}
  .rail{padding-top:6px}
  .intro{text-align:left;padding-left:2px}
  .lede{margin-left:0}
  .jump{position:static;margin:20px 0 0;padding:0;background:none!important;box-shadow:none!important}
  .rail .feat{margin-top:24px}
  .main section:first-child{margin-top:28px}
  .shelf{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shelf > .book:first-child:nth-last-child(odd){grid-column:auto;flex-direction:column}
  .shelf > .book:first-child:nth-last-child(odd) .cover{flex:none;aspect-ratio:1/1.4142}
  .shelf > .book:first-child:nth-last-child(odd) .in{padding:11px 12px 13px;justify-content:flex-start}
  .shelf > .book:first-child:nth-last-child(odd) b{font-size:16.5px}
  .shelf > .book:first-child:nth-last-child(odd) .s{flex:1;font-size:13.5px}
  .plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .extras{display:block}
}

/* ================= added for the books, the bundle and the quizzes ================= */
.jump{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- a book for sale: cover, the pain in her words, the promise, the price ---------- */
.books{display:grid;gap:12px}
.bk{display:flex;gap:15px;align-items:stretch;min-width:0;padding:13px;border-radius:20px;transition:transform .22s ease-out,border-color .22s,background .22s}
.bk:hover{border-color:var(--bdr-h);background:var(--glass-h);transform:translateY(-2px)}
.bk:active{transform:scale(.985)}
.bk .cv{flex:0 0 108px;align-self:flex-start;aspect-ratio:1/1.4142;border-radius:6px;overflow:hidden;background:#2a1830;
  box-shadow:0 16px 34px -16px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.06)}
.bk .cv img{width:100%;height:100%;object-fit:cover}
.bk .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.bk .pain{font-family:var(--serif);font-style:italic;font-size:14.5px;line-height:1.4;color:var(--gold2);margin:0 0 7px}
.bk b{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.18}
.bk .pr{font-size:13.5px;color:var(--mut);line-height:1.45;margin:5px 0 0;flex:1}
.bk .buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;margin-top:11px}
.bk .buy .n{font-family:var(--ui);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--mut2);white-space:nowrap}
.bk .buy .go{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 13px;border-radius:999px;
  background:linear-gradient(150deg,var(--gold2),var(--gold));color:var(--gold-ink);font-size:13.5px;font-weight:600;white-space:nowrap}

.shelfcard{position:relative;overflow:hidden;display:flex;gap:16px;align-items:center;margin-top:12px;padding:16px;border-radius:20px;
  border:1px solid rgba(214,181,112,.4);background:linear-gradient(145deg,rgba(214,181,112,.2),rgba(214,181,112,.05) 55%,rgba(255,244,230,.04))}
.shelfcard img{flex:0 0 92px;width:92px;height:auto;border-radius:6px;box-shadow:0 14px 30px -14px rgba(0,0,0,.8)}
.shelfcard .tx{flex:1;min-width:0}
.shelfcard b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.2}
.shelfcard span{display:block;font-size:13.5px;color:var(--mut);margin:4px 0 11px;line-height:1.45}
.shelfcard .btn{min-height:44px;font-size:15px}
.member{margin:12px 2px 0;font-size:13.5px;color:var(--mut2);text-align:center}
.member a{color:var(--gold);font-weight:600}

/* ---------- quiz ---------- */
.opt span{flex:1;min-width:0}
.opts.two{flex-direction:row}
.opts.two .opt{justify-content:center;font-weight:600;min-height:56px}
.qbar{height:4px;border-radius:4px;background:rgba(255,244,230,.1);overflow:hidden;margin:0 0 14px}
.qbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .3s ease-out}
.claim{font-family:var(--serif);font-size:19px;line-height:1.38;margin:0 0 16px}
.claim.sm{font-size:15.5px;color:var(--mut);margin-bottom:12px}
.verdict{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:14px;border:1px solid var(--bdr);
  background:rgba(255,244,230,.05);font-size:14.5px;line-height:1.5;color:var(--mut);margin-bottom:14px}
.verdict b{color:var(--ink)}
.verdict em{display:block;font-style:normal;font-size:12.5px;color:var(--mut2);margin-top:6px}
.verdict .vi{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.verdict.yes .vi{background:rgba(126,140,84,.25);color:#b9c68c}
.verdict.no .vi{background:rgba(178,34,34,.22);color:#e79a8d}
.rhead{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.22;margin:0 0 7px}
.rwhy{font-size:14.5px;line-height:1.55;color:var(--mut);margin:0 0 15px}
.rnote{font-size:13.5px;line-height:1.5;color:var(--mut);margin:12px 0 0;padding:11px 13px;border-radius:12px;
  border:1px solid rgba(214,181,112,.3);background:rgba(214,181,112,.07)}
.rsmall{font-size:12.5px;line-height:1.5;color:var(--mut2);margin:12px 0 0}
.plan .pa{display:flex;align-items:center;gap:11px;padding:8px 0;text-align:left}
.plan a + .pa,.plan .pa + a{border-top:1px solid var(--bdr)}

/* ---------- a quiz on its own page ---------- */
.qpage .wrap{max-width:560px;display:block}
.qpage header{padding-top:26px}
.qpage .crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut2);margin:0 0 18px}
.qpage .crumb a:hover{color:var(--gold)}
.qpage .intro{text-align:left;padding:0}
.qpage h1{font-size:clamp(32px,8.8vw,46px)}
.qpage .lede{margin-left:0;max-width:none}
.qpage .by{display:flex;align-items:center;gap:9px;margin:14px 0 0;font-size:13px;color:var(--mut2)}
.qpage .by svg{color:var(--gold)}
.qpage .quiz{margin-top:22px}
.others{margin-top:34px}

/* two books side by side only once each card has room for its button */
@media (min-width:1200px){.books{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:920px){
  .bk .cv{flex-basis:96px}
  .qpage .wrap{max-width:620px}
}
@media (max-width:359px){.bk .cv{flex-basis:84px}.bk b{font-size:17px}}

/* ================= a book's own sales page ================= */
.bpage .wrap{max-width:600px;display:block}
.bpage .crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut2);margin:0;padding-top:24px}
.bpage .crumb a:hover{color:var(--gold)}
.bhero{padding-top:14px;text-align:center}
.bhero .shot{position:relative;display:flex;justify-content:center;animation:rise .7s cubic-bezier(.2,.75,.3,1) both}
.bhero .shot img{position:relative;width:min(72%,300px);height:auto;filter:drop-shadow(0 30px 34px rgba(0,0,0,.6))}
/* the one effect on the page: warm light behind the book */
.bhero .halo{position:absolute;left:50%;top:50%;width:130%;max-width:560px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(214,181,112,.42),rgba(214,181,112,.1) 58%,rgba(214,181,112,0))}
.bhero .pain,.final .pain{font-family:var(--serif);font-style:italic;color:var(--gold2);font-size:17px;line-height:1.42;margin:6px 0 10px}
.bhero h1{font-size:clamp(34px,9.4vw,52px);margin:0}
.bhero .lede{margin:10px auto 18px;animation:none}
.bhero .btn{animation:rise .6s cubic-bezier(.2,.75,.3,1) .2s both}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;margin:14px 0 0;font-size:12.5px;color:var(--mut)}
.facts span{padding:5px 11px;border-radius:999px;border:1px solid var(--bdr);background:var(--glass);font-variant-numeric:tabular-nums}
.bhero .by{display:flex;justify-content:center;align-items:center;gap:8px;margin:14px 0 0;font-size:13px;color:var(--mut2)}
.bhero .by svg{color:var(--gold)}
.story p{font-family:var(--serif);font-size:18.5px;line-height:1.62;margin:0 0 16px;color:var(--ink)}
.story p:first-child::first-letter{font-size:3.1em;line-height:.82;float:left;padding:6px 9px 0 0;color:var(--gold);font-weight:600}
.story .sign{font-style:italic;color:var(--gold);margin:0}
.inside{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.inside li{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:15px;border:1px solid var(--bdr);
  background:linear-gradient(160deg,rgba(255,244,230,.08),rgba(255,244,230,.03));font-size:15px;line-height:1.5}
.inside li svg{flex:none;margin-top:3px;color:var(--gold)}
.peek{display:grid;grid-auto-flow:column;grid-auto-columns:62%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 calc(var(--pad) * -1);padding:4px var(--pad) 14px;scrollbar-width:none}
.peek::-webkit-scrollbar{display:none}
.peek img{width:100%;height:auto;border-radius:8px;scroll-snap-align:center;box-shadow:0 18px 40px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
.fit{display:grid;gap:12px}
.fit > div{border-radius:18px;padding:16px 18px}
.fit b{display:block;font-family:var(--serif);font-size:18px;font-weight:600;margin-bottom:8px}
.fit ul{list-style:none;margin:0;padding:0}
.fit li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14.5px;line-height:1.5;color:var(--mut)}
.fit li + li{border-top:1px solid var(--bdr)}
.fit li svg{flex:none;margin-top:3px}
.fit .yes li svg{color:#b9c68c}
.fit .no li svg{color:#e79a8d}
.steps3{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.steps3 li{position:relative;border-radius:16px;padding:14px 16px 14px 56px}
.steps3 li > span{position:absolute;left:16px;top:15px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:700;color:var(--gold-ink);background:var(--gold)}
.steps3 b{display:block;font-size:15.5px;font-weight:600}
.steps3 p{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--mut)}
.who{border-radius:20px;padding:18px}
.who p{font-size:15px;line-height:1.6;color:var(--mut);margin:0 0 10px}
.who .plink{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--gold)}
.bpage .panel.qa{margin-top:10px}
.final{display:flex;gap:16px;align-items:center;padding:18px;border-radius:22px;border:1px solid rgba(214,181,112,.42);
  background:linear-gradient(145deg,rgba(214,181,112,.2),rgba(214,181,112,.05) 55%,rgba(255,244,230,.04))}
.final img{flex:0 0 104px;width:104px;height:auto;border-radius:6px;box-shadow:0 16px 34px -16px rgba(0,0,0,.8)}
.final .tx{flex:1;min-width:0}
.final .pain{font-size:14.5px;margin:0 0 6px}
.final b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2}
.final span{display:block;font-size:14px;color:var(--mut);margin:4px 0 12px;line-height:1.45}
.soft{display:flex;align-items:center;gap:12px;margin-top:12px;padding:13px 16px;border-radius:16px}
.soft .txt{flex:1;min-width:0}
.soft b{display:block;font-size:15px;font-weight:600}
.soft .txt span{display:block;font-size:13.5px;color:var(--mut);margin-top:2px;line-height:1.4}
.soft .chev{color:var(--mut2)}
.soft:hover{border-color:var(--bdr-h)}
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:rgba(28,16,32,.92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--bdr);animation:rise .25s ease-out both}
.buybar[hidden]{display:none}
.buybar > span{flex:1;min-width:0}
.buybar b{display:block;font-family:var(--serif);font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar em{display:block;font-style:normal;font-size:12px;color:var(--mut2)}
.buybar .btn{min-height:44px;padding:0 16px;font-size:14.5px;white-space:nowrap}
.bpage footer{padding-bottom:70px}
.bk .more{font-size:12.5px;color:var(--mut2)}
@media (min-width:920px){
  .bpage .wrap{max-width:980px}
  .bhero{display:grid;grid-template-columns:400px 1fr;gap:52px;align-items:center;text-align:left;padding-top:26px}
  .bhero .shot img{width:340px}
  .bhero .lede{margin-left:0}
  .facts,.bhero .by{justify-content:flex-start}
  .bhero .btn{display:inline-flex;padding:0 30px}
  .bpage section{max-width:720px;margin-left:auto;margin-right:auto}
  .peek{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:4px 0 14px}
  .fit{grid-template-columns:1fr 1fr}
  .steps3{grid-template-columns:repeat(3,1fr)}
  .steps3 li{padding:52px 16px 16px}
  .buybar{justify-content:center}
  .buybar > span{flex:none}
}

/* ---------- the email box: subscribes straight to Substack ---------- */
.subform{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.subform input[type=email]{flex:1 1 200px;min-width:0;min-height:50px;padding:0 16px;border-radius:14px;border:1px solid rgba(214,181,112,.45);
  background:rgba(255,244,230,.07);color:#f7f1e4;font:inherit;font-size:16px;outline:none;transition:border-color .18s,box-shadow .18s}
.subform input[type=email]::placeholder{color:rgba(247,241,228,.5)}
.subform input[type=email]:focus{border-color:#d6b570;box-shadow:0 0 0 3px rgba(214,181,112,.18)}
/* no white autofill box on a dark page */
.subform input:-webkit-autofill,.subform input:-webkit-autofill:hover,.subform input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 100px #2a1830 inset;-webkit-text-fill-color:#f7f1e4;caret-color:#f7f1e4;transition:background-color 9999s}
.subform .btn{flex:0 0 auto;min-height:50px;border:0;cursor:pointer;font-family:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fine,.sub-cta .fine,.feat .fine{font-size:12.5px;line-height:1.5;color:#ae9ca6;margin:10px 0 0;text-wrap:pretty}
.fine a{color:#d6b570}
@media (max-width:420px){.subform .btn{flex:1 1 100%}}
.feat .subform{margin-top:6px}

/* ---------- Substack's own sign up embed ---------- */
.subembed{border-radius:16px;overflow:hidden;border:1px solid rgba(214,181,112,.3);background:#000;margin-top:6px}
.subembed iframe{display:block;width:100%;height:320px;border:0;background:#000}

/* ---------- no flicker on scroll ----------
   Frosted glass (backdrop-filter) on every card, laid over a fixed, blurred, moving background, makes
   the browser repaint all of it on every scroll step, and Chrome shows that as a flicker. The cards are
   already translucent, so they keep their look without the blur. The moving glow gets its own layer so
   it never repaints with the page. Only the bars that float over scrolling text keep their blur. */
.glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.aurora{transform:translateZ(0);will-change:transform;contain:strict}
.aurora i{will-change:transform;transform:translateZ(0)}