/* Shared by the two book pages and the books index.
 *
 * These tokens are lifted from the new site David Liprini built, read off the
 * live build on 10 Oct 2026, so the book pages and the main site are the same
 * design rather than two things that merely look similar. Where a value here
 * already matched his, it was already right: the navy, the teal, Manrope and
 * the eyebrow were identical before any of this.
 *
 * Note on naming: his set has a token this house cannot use the name of, so
 * the equivalent here is --dim. Same value, allowed name. */
:root{
  --navy:#262e3b; --navy-deep:#1b222d; --navy-lift:#333e52; --white:#fff;
  --teal:#18c0c0; --teal-glow:#7ff0ee; --teal-ink:#0a7676;
  --gold:#e8a33d; --gold-glow:#f7cf8e; --gold-ink:#8a5a0f;
  --accent:var(--gold); --accent-ink:var(--gold-ink);
  --muted:#ffffffa8; --dim:#ffffff8f;
  --hairline:#ffffff29; --glass-line:#ffffff1a;
  --surface:#ffffff0f; --surface-line:#ffffff38;
  --glass:linear-gradient(135deg,#262e3ba8 0%,#1e253094 100%);
  --lift:inset 0 1px 0 #ffffff1a;
  --r-field:14px; --r-card:16px; --r-inner:18px; --r-lg:26px; --r-media:28px;
  --sh-card:0 24px 60px #0000004d;
  --sh-card-hover:0 30px 70px #0000005c, 0 0 40px #18c0c01a;
  --sh-media:0 30px 70px #00000073, 0 0 60px #18c0c01f;
  --ease:cubic-bezier(.16,1,.3,1);
  /* kept: the older pages still reference it */
  --line:var(--glass-line);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  background:radial-gradient(ellipse at 26% 22%,#333E52 0%,var(--navy) 56%,var(--navy-deep) 100%);
  color:var(--white);min-height:100vh;-webkit-font-smoothing:antialiased;
  padding:72px 24px 96px;overflow-x:hidden;
}
body::before{content:'';position:fixed;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px}
.orb{position:fixed;border-radius:50%;pointer-events:none;filter:blur(60px);z-index:0}
.orb.a{width:560px;height:560px;left:-220px;top:12%;
  background:radial-gradient(circle,rgba(24,192,192,.15),rgba(24,192,192,0) 65%)}
.orb.b{width:640px;height:640px;right:-260px;top:58%;
  background:radial-gradient(circle,rgba(24,192,192,.12),rgba(24,192,192,0) 65%)}
.wrap{position:relative;max-width:900px;margin:0 auto;z-index:1}

.eyebrow{font-weight:500;font-size:14px;letter-spacing:5px;text-transform:uppercase;
  color:var(--teal);margin-bottom:20px}
h1{font-weight:800;font-size:clamp(34px,5vw,54px);line-height:1.1;letter-spacing:-.7px}
h1 .teal{color:var(--teal)}
.sub{font-weight:300;font-size:clamp(18px,2.4vw,22px);line-height:1.4;color:var(--muted);
  margin-top:16px;letter-spacing:-.2px}

/* hero: words left, cover right */
.hero{display:grid;grid-template-columns:1fr 260px;gap:52px;align-items:start;margin-bottom:10px}
@media (max-width:780px){.hero{grid-template-columns:1fr;gap:32px}}
.cover{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 70px rgba(0,0,0,.5)}
.cover img{display:block;width:100%;height:auto}
.cover.type{background:linear-gradient(150deg,#2E3948,#1B222D);padding:38px 26px;
  min-height:330px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.cover.type b{font-weight:800;font-size:24px;line-height:1.16;letter-spacing:-.6px}
.cover.type span{font-size:12.5px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--teal);font-weight:700}
.cover.type i{font-style:normal;font-size:13px;color:rgba(255,255,255,.5);font-weight:600;margin-top:auto}

.pull{margin:34px 0 0;border-left:3px solid var(--teal);padding:8px 0 8px 20px;
  font-size:clamp(17px,2.2vw,20px);line-height:1.55;font-weight:300;color:rgba(255,255,255,.92);max-width:56ch}
.pull b{font-weight:700;color:#fff}

.say{font-weight:300;font-size:17px;line-height:1.7;color:var(--muted);margin-top:22px;max-width:60ch}
.say b{color:var(--white);font-weight:600}

/* the buy block */
.buy{margin-top:44px;border:1px solid rgba(24,192,192,.3);border-radius:24px;
  padding:32px 34px;background:rgba(24,192,192,.055);max-width:640px}
@media (max-width:640px){.buy{padding:24px 22px}}
.price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.price .amt{font-weight:800;font-size:42px;letter-spacing:-1.4px}
.price .what{font-size:14.5px;color:var(--muted);font-weight:600}
.gets{list-style:none;margin:22px 0 26px}
.gets li{font-size:16px;line-height:1.5;color:rgba(255,255,255,.88);padding:9px 0 9px 30px;position:relative}
.gets li::before{content:'';position:absolute;left:2px;top:16px;width:8px;height:8px;
  border-radius:50%;background:var(--teal)}
.gets li span{display:block;font-size:13.5px;color:rgba(255,255,255,.45);margin-top:3px;font-weight:500}
.btn{display:inline-block;padding:17px 30px;border-radius:var(--r-field);cursor:pointer;
  background:var(--teal);color:var(--navy);text-decoration:none;border:none;letter-spacing:.2px;
  font-family:inherit;font-weight:800;font-size:17px;
  transition:transform .15s ease,filter .15s ease}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:rgba(255,255,255,.06);color:var(--white);
  border:1px solid rgba(255,255,255,.18);font-weight:600;font-size:16px}
.btn.ghost:hover{border-color:var(--teal);filter:none}
.btn.pending{background:rgba(255,255,255,.12);color:rgba(255,255,255,.5);cursor:not-allowed}
.fine{margin-top:16px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.42);max-width:52ch}

/* contents */
.sect{display:flex;align-items:center;gap:18px;margin:64px 0 24px}
.sect span{font-weight:700;font-size:13px;letter-spacing:4px;text-transform:uppercase;
  color:rgba(255,255,255,.55);white-space:nowrap}
.sect::after{content:'';height:1px;flex:1;
  background:linear-gradient(90deg,rgba(24,192,192,.5),rgba(255,255,255,.06))}
.toc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.toc{grid-template-columns:1fr}}
.ch{border:1px solid var(--line);border-radius:16px;padding:18px 20px;
  background:rgba(255,255,255,.03)}
.ch .n{font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;font-weight:800;
  color:var(--teal);margin-bottom:7px}
.ch .t{font-weight:700;font-size:16px;line-height:1.35;letter-spacing:-.2px}
.ch .s{font-size:13.5px;color:rgba(255,255,255,.5);margin-top:5px;font-weight:500}

.note{max-width:64ch}
.note p{font-weight:300;font-size:17px;line-height:1.75;color:var(--muted);margin-bottom:18px}
.note p b{color:var(--white);font-weight:600}
.sign{margin-top:26px;font-size:16px;color:rgba(255,255,255,.8);font-weight:500}

footer{margin-top:80px;padding-top:36px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
footer img{width:44px;height:44px;display:block}
footer .who{font-size:14px;color:var(--muted);line-height:1.5}
footer .who b{color:var(--white)}
footer nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
footer nav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500}
footer nav a:hover{color:var(--teal)}

@keyframes m-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.m-in{animation:m-rise .8s cubic-bezier(.16,1,.3,1) both}
.eyebrow.m-in{animation-delay:.05s}
h1.m-in{animation-delay:.14s}
.sub.m-in{animation-delay:.26s}
.pull.m-in{animation-delay:.38s}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.m-in{animation:none}}

/* look inside: the spread that proves the book is designed */
.inside{margin-top:26px}
.inside img{display:block;width:100%;height:auto;border-radius:16px;
  border:1px solid rgba(255,255,255,.10);box-shadow:0 24px 60px rgba(0,0,0,.34)}
.inside figcaption{margin-top:14px;font-size:14.5px;line-height:1.6;
  color:rgba(255,255,255,.5);font-weight:500;max-width:60ch}

.warn{margin-top:14px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.5);
  font-weight:500;max-width:52ch}

/* The free ebook gate, added 30 Sep 2026 when Responsibility became the lead
   magnet. The buy block used to be a price and a button; it is now a price
   that says Free and two fields. Styled here rather than inline so the other
   book keeps a single stylesheet. */
#gift{display:grid;gap:14px;margin-top:18px;text-align:left}
#gift label{display:grid;gap:7px;font-size:14px;font-weight:700;color:#fff}
#gift input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:14px 15px;color:#fff;font-family:inherit;font-size:16.5px;font-weight:400}
#gift input::placeholder{color:rgba(255,255,255,.34)}
#gift input:focus{outline:none;border-color:#18C0C0;background:rgba(24,192,192,.10)}
#gift .btn{width:100%;margin-top:4px}
#gift .btn[disabled]{opacity:.6;cursor:default}
.msg{display:none;font-size:16px;line-height:1.6;margin-top:14px}
.msg.on{display:block}
.msg.ok{color:#18C0C0}
.msg.err{color:#E4737A}

/* ---------- The buy box with the one-click course added (10 Oct 2026) ----------
   Rebuilt the same day after Francois said the bump was not clear enough:
   "It's not really saying add anything." He was right. The shape now follows
   three of Maria Wendt's live checkouts rather than a guess. The bump sits
   OUTSIDE the order list in its own block, because a name-and-price row under
   the book reads as an invoice line and the eye takes it as already charged. */
.buybox{margin-top:44px;border:1px solid rgba(24,192,192,.3);border-radius:24px;
  padding:30px 32px;background:linear-gradient(180deg,rgba(24,192,192,.07),rgba(255,255,255,.015))}
.bx-row,.bx-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-size:16.5px;color:var(--muted)}
.bx-row{padding-bottom:20px}
.bx-amt{font-weight:800;color:var(--white);white-space:nowrap;letter-spacing:-.4px}

/* The bump, set apart on purpose. */
.bx-bump-wrap{border:1px solid rgba(24,192,192,.4);border-radius:16px;padding:20px 22px;
  margin:0 0 22px;background:rgba(24,192,192,.06);transition:border-color 160ms ease,background 160ms ease}
.buybox.has-bump .bx-bump-wrap{border-color:var(--teal);background:rgba(24,192,192,.13)}
.bx-flag{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.bx-bump-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:10px}
.bx-bump-head strong{color:var(--white);font-size:19px;font-weight:800;letter-spacing:-.3px;line-height:1.25}
.bx-bump-img{display:block;width:100%;max-width:260px;border-radius:10px;margin:0 0 14px}
.bx-bump-body{margin:0 0 16px;font-size:15.5px;line-height:1.58;color:var(--muted);font-weight:500}

/* The tick says what ticking does, so the box says it twice. */
.bx-tick{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  font-size:16px;font-weight:700;color:var(--white);line-height:1.4}
.bx-tick input{margin:2px 0 0;width:19px;height:19px;accent-color:var(--teal);flex:none;cursor:pointer}

.bx-total{border-top:1px solid var(--line);padding-top:18px;font-size:18px;color:var(--white)}
.bx-total .bx-amt{font-size:26px}

.bx-fields{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 14px}
.bx-fields input{flex:1 1 180px;min-width:0;font:inherit;font-size:16px;padding:14px 16px;
  border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.2);color:var(--white)}
.bx-fields input::placeholder{color:rgba(255,255,255,.3)}
.bx-fields input:focus{outline:none;border-color:var(--teal)}

.buybox .btn{width:100%;justify-content:center;text-align:center}
.bx-err{color:#E8B551;font-size:14.5px;margin:12px 0 0;min-height:1px}
.bx-fine{margin-top:16px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.42)}
.bx-why{margin:18px 2px 0;font-size:15.5px;line-height:1.62;color:rgba(255,255,255,.6);max-width:62ch}

@media(max-width:560px){.buybox{padding:24px 20px}.bx-bump-wrap{padding:18px 16px}}

/* The course panel on a thank-you page, shown only when the buyer added one.
   Gold rather than teal, so the thing they paid extra for is the brightest
   thing on the page. */
.opened{margin-top:34px;max-width:640px;border:1px solid rgba(246,195,92,.45);border-radius:22px;
  padding:34px 36px;background:linear-gradient(180deg,rgba(246,195,92,.14),rgba(246,195,92,.04));
  box-shadow:0 12px 44px rgba(246,195,92,.12)}
.opened .kick{font-weight:500;font-size:11px;letter-spacing:4px;text-transform:uppercase;
  color:#F6C35C;margin-bottom:10px}
.opened .big{font-weight:800;font-size:clamp(21px,3vw,27px);letter-spacing:-.5px;line-height:1.25}
.opened p{font-size:16px;line-height:1.65;color:rgba(255,255,255,.72);margin-top:12px;font-weight:300}
.opened .btn{margin-top:22px;background:#F6C35C;color:#14202B}
@media (max-width:640px){.opened{padding:26px 22px}}

/* The buy box labels. They were placeholder-only, which reads fine and
   autofills badly: a browser decides whether to offer a saved card and
   address from the form's labels and field names, so the labels earn their
   place even though the placeholder repeats them. */
.bx-lab{display:block;font-size:12px;font-weight:600;letter-spacing:.4px;
  color:rgba(255,255,255,.52);margin:14px 0 6px}
.bx-lab:first-child{margin-top:0}
/* One field per line now that each has a label above it. The old two-up
   row made the labels sit beside the wrong boxes, and a checkout that asks
   three short things reads better as three short things. */
.bx-fields{display:block;margin:20px 0 0}
.bx-fields input{display:block;width:100%;flex:none}
.bx-fields .bx-go{margin-top:18px;width:100%}

/* The one-click offer after payment. Deliberately plainer than the course
   panel above it: this is a second ask, not the thing they came for, and it
   should not shout over what they have just bought. */
.oneclick{margin-top:30px;max-width:640px;border:1px solid var(--glass-line);border-radius:var(--r-lg);
  padding:30px 32px;background:var(--glass);box-shadow:var(--lift)}
.oneclick .kick{font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.56);margin-bottom:10px}
.oneclick .big{font-weight:800;font-size:clamp(19px,2.6vw,23px);letter-spacing:-.5px;line-height:1.25}
.oneclick p{font-size:15.5px;line-height:1.65;color:var(--muted);margin-top:10px;font-weight:300}
.oneclick .btn{margin-top:20px}
.oneclick .btn:disabled{opacity:.6;cursor:default}
.oneclick .oc-note{font-size:13.5px;color:var(--gold);margin-top:12px;font-weight:500}
.oneclick.done{border-color:rgba(24,192,192,.4)}
@media (max-width:640px){.oneclick{padding:24px 22px}}