/* Workbook product pages (/workbooks/<slug>/), generated by tools/build_workbooks.py.
   Scoped to .pp. Each page sets --brand, --brand2, --gold, --kicker and --soft inline
   from data/product_pages.json, so the hero matches the book's cover. */
.pp{--ink:#0f172a;--muted:#475569;--line:#e2e8f0;--brand:#0b3954;--brand2:#082c42;--gold:#f5b82e;--kicker:#0284c7;--soft:#eef4f8}
.pp{color:var(--ink)}
.pp section{margin:0}
.pp .crumbs{font-size:.88rem;color:var(--muted);margin:0 0 .9rem}
.pp .crumbs a{color:var(--ink)}
/* HERO */
.pp-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2.2rem;align-items:center;
  background:linear-gradient(140deg,var(--brand) 0%,var(--brand2) 100%);color:#fff;border-radius:22px;padding:2.2rem}
.pp-hero .eyebrow{color:rgba(255,255,255,.72);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin:0 0 .6rem}
.pp-hero h1{font-size:clamp(1.8rem,4.2vw,2.75rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 .8rem;color:#fff}
.pp-hero h1 em{font-style:normal;color:var(--gold)}
.pp-hero .sub{font-size:1.08rem;line-height:1.55;color:rgba(255,255,255,.9);margin:0 0 1.1rem}
.pp-hero ul{list-style:none;padding:0;margin:0 0 1.3rem;display:grid;gap:.45rem}
.pp-hero li{padding-left:1.6rem;position:relative;color:#fff;line-height:1.45}
.pp-hero li:before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-weight:800}
.pp-cta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.pp .btn-gold{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.8rem 1.4rem;border-radius:12px;
  background:var(--gold);color:#2a1700;font-weight:800;text-decoration:none;font-size:1.02rem;box-shadow:0 6px 18px rgba(245,184,46,.35)}
.pp .btn-ghost{display:inline-flex;align-items:center;min-height:50px;padding:.8rem 1.1rem;border-radius:12px;border:1.5px solid rgba(255,255,255,.55);
  color:#fff;text-decoration:none;font-weight:700}
.pp-hero .trust{margin:1rem 0 0;font-size:.86rem;color:rgba(255,255,255,.72)}
.pp-hero .visual{position:relative;min-height:340px}
.pp-hero .visual img{height:auto;max-width:none}
.pp-hero .visual .cover{position:absolute;left:4%;top:4%;width:52%;border-radius:6px;box-shadow:0 22px 50px rgba(0,0,0,.45);transform:rotate(-3deg);z-index:2}
.pp-hero .visual .cover.solo{left:24%;width:52%;transform:rotate(-2deg)}
.pp-hero .visual .page{position:absolute;right:2%;top:12%;width:50%;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.35);transform:rotate(3deg);background:#fff}
@media (max-width:820px){
  .pp-hero{grid-template-columns:1fr;padding:1.4rem;gap:1.2rem}
  .pp-hero .visual{min-height:0;height:210px;order:-1;overflow:hidden}
  .pp-hero .visual .cover{width:34%;left:14%;top:6%}
  .pp-hero .visual .page{width:34%;right:14%;top:10%}
  .pp-hero .visual .cover.solo{width:34%;left:33%}
}
/* GENERIC BLOCKS */
.pp-block{margin:3rem 0 0}
.pp-block h2{font-size:clamp(1.35rem,2.6vw,1.8rem);letter-spacing:-.01em;margin:0 0 .5rem}
.pp-block .kicker{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--kicker);font-weight:800;margin:0 0 .4rem}
.pp-block .intro{color:var(--muted);max-width:44rem;margin:0 0 1.3rem;font-size:1.02rem;line-height:1.6}
/* PAIN */
.pp-pain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
@media (max-width:640px){.pp-pain{grid-template-columns:1fr}}
.pp-pain blockquote{margin:0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--kicker);border-radius:12px;padding:.9rem 1rem;
  font-size:1rem;line-height:1.5;color:#1e293b}
.pp-turn{margin:1.2rem 0 0;padding:1.1rem 1.2rem;background:var(--soft);border-radius:14px;font-size:1.05rem;line-height:1.6}
/* STEPS */
.pp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;counter-reset:s}
@media (max-width:760px){.pp-steps{grid-template-columns:1fr}}
.pp-steps div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem}
.pp-steps b{display:block;color:var(--kicker);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .35rem}
.pp-steps h3{margin:0 0 .35rem;font-size:1.12rem}
.pp-steps p{margin:0;color:var(--muted);line-height:1.55}
/* OUTCOMES */
.pp-out{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem;list-style:none;padding:0;margin:0}
.pp-out li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem .85rem 2.6rem;position:relative;line-height:1.45}
.pp-out li:before{content:"";position:absolute;left:1rem;top:1.05rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px #fdf1d3}
/* GALLERY */
.pp-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
@media (max-width:820px){.pp-gallery{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-1rem;padding-bottom:.4rem}}
.pp-gallery figure{margin:0;scroll-snap-align:start}
.pp-gallery img{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 22px rgba(15,23,42,.10);cursor:zoom-in;background:#fff}
.pp-gallery figcaption{font-size:.86rem;color:var(--muted);margin:.45rem 0 0;line-height:1.4}
.pp-gallery figcaption b{color:var(--ink)}
/* COUNTDOWN */
.pp-count{background:#0b3954;color:#fff;border-radius:18px;padding:1.4rem}
.pp-count h2{color:#fff}
.pp-count label{display:block;font-weight:700;margin:.4rem 0 .4rem}
.pp-count input{font:inherit;padding:.7rem .8rem;border-radius:10px;border:0;min-height:46px}
.pp-count .res{margin:1rem 0 0;padding:1rem;border-radius:12px;background:rgba(255,255,255,.08);line-height:1.6;display:none}
.pp-count .res.on{display:block}
.pp-count .res a{color:var(--gold);font-weight:700}
/* FIT */
.pp-fit{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:640px){.pp-fit{grid-template-columns:1fr}}
.pp-fit div{border-radius:14px;padding:1.1rem;border:1px solid var(--line);background:#fff}
.pp-fit h3{margin:0 0 .5rem;font-size:1.05rem}
.pp-fit ul{margin:0;padding-left:1.15rem;line-height:1.6}
.pp-fit .no{background:#fafafa}
/* AUTHOR */
.pp-author{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1.1rem;align-items:start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.2rem}
.pp-author img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.pp-author p{margin:.2rem 0 0;color:var(--muted);line-height:1.6}
/* REVIEWS placeholder */
.pp-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
@media (max-width:760px){.pp-reviews{grid-template-columns:1fr}}
.pp-reviews div{border:2px dashed #cbd5e1;border-radius:14px;padding:1rem;color:#64748b;font-size:.92rem;line-height:1.5;background:#fff}
/* OFFER */
.pp-offer{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem;align-items:stretch;max-width:980px}
@media (max-width:820px){.pp-offer{grid-template-columns:1fr}}
.pp-offer > div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.2rem;display:flex;flex-direction:column}
.pp-offer .best{border:2px solid var(--kicker);box-shadow:0 12px 30px rgba(15,23,42,.12);position:relative}
.pp-offer .best:before{content:"Most complete";position:absolute;top:-.75rem;left:1rem;background:var(--kicker);color:#fff;font-size:.72rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:.2rem .6rem;border-radius:999px}
.pp-offer h3{margin:0 0 .2rem;font-size:1.1rem}
.pp-offer .price{font-size:1.6rem;font-weight:800;margin:.3rem 0 .2rem}
.pp-offer .price small{font-size:.85rem;font-weight:600;color:var(--muted)}
.pp-offer ul{padding-left:1.1rem;margin:.6rem 0 1rem;line-height:1.55;color:#334155;flex:1}
.pp-offer .go{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;font-weight:800;text-decoration:none}
.pp-offer .go.primary{background:var(--kicker);color:#fff}
.pp-offer .go.second{border:1.5px solid var(--kicker);color:var(--kicker)}
.pp-offer .go.soon{border:1.5px dashed #94a3b8;color:#475569;cursor:default}
/* FAQ */
.pp-faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;margin:0 0 .55rem}
.pp-faq summary{font-weight:700;cursor:pointer}
.pp-faq p{margin:.6rem 0 0;color:#334155;line-height:1.6}
/* FINAL + STICKY */
.pp-final{margin:3rem 0 1rem;text-align:center;background:linear-gradient(140deg,var(--brand),var(--brand2));color:#fff;border-radius:22px;padding:2rem 1.2rem}
.pp-final h2{color:#fff;margin:0 0 .5rem;font-size:clamp(1.4rem,3vw,2rem)}
.pp-final p{color:rgba(255,255,255,.88);margin:0 auto 1.2rem;max-width:36rem}
.pp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(15,23,42,.10);
  padding:.6rem 1rem;display:none;align-items:center;gap:.8rem;transform:translateY(110%);transition:transform .25s}
.pp-sticky.on{transform:none}
.pp-sticky img{width:34px;border-radius:3px}
.pp-sticky .t{flex:1;font-size:.85rem;line-height:1.25}
.pp-sticky .t b{display:block;font-size:.92rem}
.pp-sticky .go{background:var(--gold);color:#2a1700;font-weight:800;text-decoration:none;border-radius:10px;padding:.65rem .9rem;white-space:nowrap}
@media (max-width:820px){.pp-sticky{display:flex}}
/* lightbox */
.pp-lb{position:fixed;inset:0;background:rgba(15,23,42,.88);display:none;align-items:center;justify-content:center;z-index:60;padding:1rem}
.pp-lb.on{display:flex}
.pp-lb img{max-width:100%;max-height:92vh;border-radius:6px;background:#fff}
.pp-offer .note{font-size:.84rem;color:var(--muted);margin:.5rem 0 0}
.pp-offer .go.primary.gold{background:var(--gold);color:#2a1700}
.pp-free{margin:1rem 0 0;padding:1rem 1.1rem;border-radius:14px;background:var(--soft);line-height:1.55}
.pp-ftc{font-size:.8rem;color:var(--muted);margin:.4rem 0 0}
.pp-reviews blockquote footer{margin-top:.5rem;font-size:.85rem;color:var(--muted)}
/* READER REVIEWS: a sideways-scrolling row of review cards, placed straight after the hero */
.rv{background:linear-gradient(180deg,var(--soft) 0%,#fff 100%);border-radius:22px;padding:1.8rem 1.6rem 1.4rem;margin-top:1.4rem}
.rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1rem}
.rv-head h2{margin:.1rem 0 .3rem}
.rv-sub{margin:0;color:var(--muted);font-size:.98rem}
.rv-sub .rv-stars{font-size:1.1rem;margin-right:.3rem}
.rv-stars{color:#f59e0b;letter-spacing:.06em;font-size:1.05rem;line-height:1}
.rv-stars span{color:#d1d5db}
.rv-nav{display:flex;gap:.5rem;flex:none}
.rv-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1.15rem;cursor:pointer;box-shadow:0 2px 6px rgba(15,23,42,.08)}
.rv-nav button:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.rv-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 .2rem;padding:.3rem .2rem 1rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rv-track:focus-visible{outline:2px solid var(--kicker);outline-offset:4px;border-radius:12px}
.rv-card{flex:0 0 320px;scroll-snap-align:start;display:flex;flex-direction:column;gap:.55rem;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.15rem 1.2rem;box-shadow:0 6px 18px rgba(15,23,42,.07)}
.rv-who{display:flex;align-items:center;gap:.6rem}
.rv-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:700}
.rv-name{font-weight:700;font-size:.97rem}
.rv-meta{display:flex;flex-wrap:wrap;gap:.35rem .6rem;align-items:center;font-size:.8rem;color:var(--muted)}
.rv-badge{font-weight:700}
.rv-ver{color:#c45500}
.rv-arc{color:#0f766e}
.rv-text{margin:0;font-size:1rem;line-height:1.55;color:var(--ink);flex:1}
.rv-link{font-size:.85rem;font-weight:600;color:var(--kicker);text-decoration:none}
.rv-link:hover{text-decoration:underline}
.pp-hero .rv-jump{color:var(--gold);text-decoration:none;font-weight:700}
@media (max-width:760px){.rv{padding:1.3rem 1rem 1rem}.rv-card{flex-basis:84%}.rv-nav{display:none}}