/* ── Lamplight tokens ──────────────────────────────────────────────── */
:root {
  --night:#0D0906; --bg:#120D09; --bg2:#160F0B; --ember:#1E1610; --hearth:#2A1F16; --hearth2:#35281C;
  --cream:#F3E9D6; --cream2:#E2D5BE; --muted:#BDAA8B; --brass:#E2B66B; --brass-hi:#F2D193; --amber:#C8923E; --brass-lo:#8F6326;
  --line:rgba(226,182,107,.24); --line2:rgba(226,182,107,.5);
  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --text:"Spectral", Georgia, serif;
  --sans:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; background:var(--bg) }
body { margin:0; background:var(--bg); color:var(--cream); font:400 19.5px/1.65 var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
img { display:block; max-width:100% }
a { color:inherit }
.wrap { max-width:1240px; margin:0 auto; padding:0 32px }
h1, h2, h3 { margin:0; font-family:var(--display); font-weight:600; line-height:1.06; letter-spacing:-.005em; color:var(--cream); text-wrap:balance; font-variant-numeric:lining-nums }
h1 em, h2 em { font-style:italic; font-weight:500; color:var(--brass) }
.eyebrow { display:inline-flex; align-items:center; gap:12px; margin:0; text-wrap:balance; font:700 14.5px/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--brass) }
.eyebrow::before { content:""; flex:none; width:30px; height:1px; background:currentColor; opacity:.75 }
.center { text-align:center }
.center .eyebrow::after { content:""; flex:none; width:30px; height:1px; background:currentColor; opacity:.75 }
p, li, blockquote, figcaption { text-wrap:pretty }
.nw { white-space:nowrap }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:58px; padding:0 30px; border-radius:12px; border:0; cursor:pointer; text-decoration:none;
  font:700 18.5px/1.15 var(--sans); letter-spacing:.01em; color:#1C130B; text-align:center;
  background:linear-gradient(180deg, #F3D293 0%, #E2B66B 50%, #C8923E 100%);
  box-shadow:inset 0 1px 0 rgba(255,246,224,.8), inset 0 -2px 0 rgba(110,70,20,.35), 0 14px 32px -14px rgba(232,170,90,.7);
  transition:transform .2s ease-out, box-shadow .2s ease-out, filter .2s ease-out, background-color .2s ease-out }
.btn:hover { transform:translateY(-2px); filter:brightness(1.06); box-shadow:inset 0 1px 0 rgba(255,246,224,.8), inset 0 -2px 0 rgba(110,70,20,.35), 0 20px 42px -14px rgba(232,170,90,.85) }
.btn:active { transform:translateY(0) }
.btn.ghost { background:rgba(243,233,214,.05); color:var(--cream); box-shadow:inset 0 0 0 1.5px rgba(243,233,214,.6) }
.btn.ghost:hover { filter:none; background:rgba(243,233,214,.12); box-shadow:inset 0 0 0 1.5px var(--cream) }
.btn.line { background:transparent; color:var(--brass-hi); box-shadow:inset 0 0 0 1.5px var(--brass) }
.btn.line:hover { filter:none; background:rgba(226,182,107,.13) }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, .env:focus-visible { outline:3px solid var(--brass-hi); outline-offset:3px }
.txtlink { color:var(--brass-hi); font-weight:600; font-size:18px; text-decoration:underline; text-decoration-color:rgba(242,209,147,.4); text-underline-offset:5px; transition:text-decoration-color .2s }
.txtlink:hover { text-decoration-color:var(--brass-hi) }

/* mockup notes */

/* scroll fade: content is visible by default; on the visitor's first scroll, anything still below
   the screen is hidden (.pre) and fades in (.in) as it arrives, so a capture without scrolling shows it all */
.reveal { transition:opacity .9s ease-out, transform .9s ease-out }
.reveal.pre:not(.in) { opacity:0; transform:translateY(22px); transition:none }
.reveal.in { opacity:1; transform:none }
.hero-copy { animation:rise 1s ease-out both }
@keyframes rise { from { opacity:0; transform:translateY(18px) } }

/* ── Launch bar + header ───────────────────────────────────────────── */
.topbar { background:var(--night); color:var(--cream2); text-align:center; text-wrap:balance; padding:10px 16px; font-size:16.5px; line-height:1.45; border-bottom:1px solid rgba(226,182,107,.14) }
.topbar svg { width:12px; height:16px; vertical-align:-2px; margin-right:9px }
.topbar .p-book { color:var(--brass-hi); font-weight:700 }
.topbar .p-after { color:var(--cream); font-weight:600 }
.hdr { position:sticky; top:0; z-index:20; background:rgba(14,10,7,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid rgba(226,182,107,.16) }
.hdr .wrap { display:flex; align-items:center; gap:16px; min-height:84px }
.brand { display:flex; align-items:center; gap:13px; text-decoration:none }
.brand svg { width:46px; height:46px; flex:none }
.brand b { display:block; font:700 27px/1 var(--display); color:var(--cream) }
.brand small { display:block; margin-top:6px; font:600 12.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }
.nav { margin-left:auto; display:flex; align-items:center; gap:30px }
.nav a:not(.btn) { text-decoration:none; font-weight:600; font-size:17px; color:var(--cream2); transition:color .2s }
.nav a:not(.btn):hover { color:var(--brass-hi) }
.nav .btn { min-height:54px; padding:0 24px; font-size:17px }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero { position:relative; display:flex; align-items:center; min-height:clamp(620px, 55.8vw, 900px); overflow:hidden; background:var(--bg) }
.hero-media, .porch { position:absolute; inset:0; overflow:hidden; container-type:size }
.scene { --ar:1.7921; --ra:.558; --fx:.1; --fy:.45; position:absolute;
  width:max(100cqw, calc(var(--ar) * 100cqh)); height:max(100cqh, calc(var(--ra) * 100cqw));
  left:calc((100cqw - max(100cqw, calc(var(--ar) * 100cqh))) * var(--fx)); top:calc((100cqh - max(100cqh, calc(var(--ra) * 100cqw))) * var(--fy)) }
.scene img { width:100%; height:100%; object-fit:cover }
.hero .scene img { filter:sepia(.12) saturate(1.05) brightness(.93) }
.lampglow { position:absolute; left:51.7%; top:56%; width:44%; aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,216,150,.55) 0%, rgba(246,182,96,.24) 12%, rgba(222,150,70,.09) 30%, transparent 60%); animation:flicker 6s ease-in-out infinite alternate }
@keyframes flicker { 0% { opacity:.84 } 30% { opacity:1 } 55% { opacity:.9 } 80% { opacity:.98 } 100% { opacity:.92 } }
.shade { position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(15,10,7,.96) 0%, rgba(15,10,7,.9) 24%, rgba(15,10,7,.68) 37%, rgba(15,10,7,.28) 48%, rgba(15,10,7,0) 59%),
  radial-gradient(ellipse 80% 95% at 70% 46%, transparent 52%, rgba(10,7,4,.62) 100%),
  linear-gradient(180deg, rgba(15,10,7,.38) 0%, transparent 16%, transparent 74%, var(--bg) 100%) }
.grain { position:absolute; inset:0; pointer-events:none; opacity:.14; mix-blend-mode:overlay; background-image:var(--grain) }
.hero-in { position:relative; z-index:2; width:100%; padding:90px max(28px, 6vw) 110px }
.hero-copy { max-width:min(560px, 46vw) }
.eyebrow.fl::before { display:none }
.eyebrow.fl svg { width:13px; height:18px; flex:none }
.hero h1 { font-size:clamp(46px, 5.3vw, 80px); line-height:1; margin:24px 0 26px; text-shadow:0 2px 30px rgba(0,0,0,.45) }
.hero h1 em { display:block; margin-top:4px; text-shadow:0 0 36px rgba(230,160,80,.38) }
.lead { font-size:21.5px; line-height:1.6; color:var(--cream2); margin:0 0 34px; max-width:540px }
.ctas { display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px }
.ticks { display:flex; flex-wrap:wrap; gap:10px 26px; margin:30px 0 0; padding:0; list-style:none; font-weight:600; font-size:18px; color:var(--cream2) }
.ticks li { display:inline-flex; align-items:center; gap:9px }
.ticks svg { width:20px; height:20px; color:var(--brass) }
.after-hero { padding-top:6px }

/* ── 3D book ───────────────────────────────────────────────────────── */
.bkglow { position:relative; filter:drop-shadow(0 0 26px rgba(240,180,100,.32)) drop-shadow(0 28px 30px rgba(0,0,0,.6)) }
.bk { --w:300px; --d:36px; position:relative; width:var(--w); aspect-ratio:2/3; transform-style:preserve-3d; transform:perspective(1700px) rotateY(24deg) rotateX(1deg); transition:transform .6s cubic-bezier(.2,.7,.2,1) }
.bk .front, .bk .spine, .bk .pages { position:absolute }
.bk .front { inset:0; border-radius:2px 5px 5px 2px; background-color:#3a2a1c; background-size:cover; background-position:center; transform:translateZ(calc(var(--d) / 2)); overflow:hidden;
  box-shadow:inset 4px 0 0 rgba(255,255,255,.16), inset 12px 0 14px -8px rgba(0,0,0,.5) }
.bk .front::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(102deg, rgba(255,224,170,.26) 0%, transparent 34%, transparent 68%, rgba(0,0,0,.26) 100%) }
.bk .spine { top:0; bottom:0; left:calc(50% - var(--d) / 2); width:var(--d); transform:rotateY(-90deg) translateZ(calc(var(--w) / 2)); border-radius:3px 0 0 3px;
  background:linear-gradient(90deg, #0F0A07 0%, #3B2A1C 42%, #2A1E14 70%, #140D09 100%); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(226,182,107,.15) }
.bk .spine span { writing-mode:vertical-rl; transform:rotate(180deg); font:700 calc(var(--d) * .4) var(--display); color:var(--brass); letter-spacing:.06em; white-space:nowrap; overflow:hidden; max-height:92% }
.bk .pages { top:5px; bottom:5px; left:calc(50% - (var(--d) - 8px) / 2); width:calc(var(--d) - 8px); transform:rotateY(90deg) translateZ(calc(var(--w) / 2 - 5px));
  background:repeating-linear-gradient(90deg, #F6EEDC 0 2px, #D8C8A8 2px 3px) }
.ctitle { position:absolute; left:8%; right:8%; top:6.5%; text-align:center; z-index:2 }
.ctitle .n { font:700 calc(var(--w) * .034)/1 var(--sans); letter-spacing:.32em; padding-left:.32em }
.ctitle .r { width:30%; margin:calc(var(--w) * .03) auto; border-top:1px solid currentColor; opacity:.7 }
.ctitle .tt { font:700 calc(var(--w) * .098)/1.02 var(--display) }
.ctitle .ss { font:italic 600 calc(var(--w) * .043)/1.28 var(--display); margin-top:calc(var(--w) * .028) }
.ink-dark .ctitle { color:#1E1712 }
.ink-light .ctitle { color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35) }
/* the workbook: cream linen with brass and brown ink */
.wbk .front { background:
  repeating-linear-gradient(0deg, rgba(90,60,30,.035) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(90deg, rgba(90,60,30,.035) 0 1px, transparent 1px 3px),
  radial-gradient(ellipse at 30% 10%, #F8EFDC, #EADCC0 75%) }
.wbface { position:absolute; inset:0; z-index:2; padding:16% 11% 10%; display:flex; flex-direction:column; align-items:center; text-align:center; color:#3A2817 }
.wbface::before { content:""; position:absolute; inset:5.5%; border:1px solid rgba(154,107,40,.6); outline:1px solid rgba(154,107,40,.25); outline-offset:-5px }
.wbface .n { font:700 calc(var(--w) * .034)/1 var(--sans); letter-spacing:.3em; color:#8A6430 }
.wbface .tt { font:700 calc(var(--w) * .118)/1.02 var(--display); margin:14% 0 9% }
.wbface svg { width:38%; color:#A8762F }
.wbface .ss { font:italic 600 calc(var(--w) * .05)/1.3 var(--display); color:#5C4329; margin-top:9% }
.wbk .spine { background:linear-gradient(90deg, #A78E66 0%, #D6C4A0 45%, #BBA47D 75%, #9C8460 100%) }
.wbk .spine span { color:#4A3420 }

/* ── The book (product) ────────────────────────────────────────────── */
.booksec { position:relative; padding:110px 0 110px; overflow:hidden; background:radial-gradient(760px 600px at 27% 52%, rgba(214,150,70,.17), transparent 70%), var(--bg) }
.booksec .wrap { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:64px; align-items:center }
.bookstage { position:relative; height:600px; display:flex; align-items:center; justify-content:center }
.halo { position:absolute; left:50%; top:47%; width:640px; aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,212,140,.62) 0%, rgba(240,172,88,.32) 20%, rgba(214,140,60,.12) 40%, rgba(200,130,50,.04) 54%, transparent 66%); animation:flicker 7s ease-in-out infinite alternate }
.floor { position:absolute; left:50%; bottom:40px; width:440px; height:70px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse at center, rgba(0,0,0,.7), transparent 70%) }
.bookstage .bk { --w:340px; --d:42px }
.bookstage .bkglow { filter:drop-shadow(0 0 34px rgba(248,190,110,.5)) drop-shadow(0 30px 32px rgba(0,0,0,.65)) }
.bookcopy h2 { font-size:clamp(40px, 4.6vw, 64px); margin:18px 0 14px }
.bookcopy .subt { font:italic 500 clamp(24px, 2.2vw, 30px)/1.3 var(--display); color:var(--brass); margin:0 0 24px; max-width:560px }
.bookcopy > p:not(.eyebrow):not(.subt) { color:var(--cream2); margin:0 0 34px; max-width:560px }
.counts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); max-width:560px; margin:0 0 40px; padding:0; list-style:none }
.counts li { padding:0 22px; border-left:1px solid var(--line) }
.counts li:first-child { padding-left:0; border-left:0 }
.counts i { display:block; font:italic 600 19px/1 var(--display); color:var(--brass); margin-bottom:4px }
.counts b { display:block; font:700 56px/1 var(--display); color:var(--brass-hi); font-variant-numeric:lining-nums }
.counts span { display:block; margin-top:10px; font-size:16.5px; line-height:1.35; color:var(--muted) }

/* ── Offers ────────────────────────────────────────────────────────── */
.offers { position:relative; padding:100px 0 104px; background:linear-gradient(180deg, var(--bg), var(--bg2) 22%, var(--bg2) 78%, var(--bg)) }
.sec-head { max-width:780px; margin:0 auto 60px }
.sec-head h2 { font-size:clamp(38px, 4.4vw, 60px); margin:16px 0 16px }
.sec-head h2 em { display:block; margin-top:2px }
.sec-head p:not(.eyebrow) { color:var(--cream2); margin:0 auto; max-width:660px; font-size:20px }
.cards { display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:26px; align-items:stretch }
.card { position:relative; display:flex; flex-direction:column; padding:30px 28px 30px; border-radius:20px; background:linear-gradient(180deg, #2A1F16 0%, #1E1610 100%); border:1px solid rgba(226,182,107,.32); box-shadow:0 30px 60px -40px rgba(0,0,0,.95) }
.card::before { content:""; position:absolute; inset:7px; border:1px solid rgba(226,182,107,.12); border-radius:14px; pointer-events:none }
.card.best { margin:-20px 0; padding-top:40px; background:linear-gradient(180deg, #382A1C 0%, #261B12 100%); border:1.5px solid var(--brass); box-shadow:0 0 0 5px rgba(226,182,107,.07), 0 40px 90px -40px rgba(232,160,80,.5) }
.card.best::before { border-color:rgba(226,182,107,.22) }
.ribbon { position:absolute; top:-19px; left:50%; transform:translateX(-50%); z-index:3; filter:drop-shadow(0 8px 12px rgba(0,0,0,.55)) }
.ribbon span { display:block; padding:11px 32px; white-space:nowrap; font:700 13.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:#1C130B;
  background:linear-gradient(180deg, #F6D99D, #E2B66B 55%, #C8923E); clip-path:polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%, 13px 50%) }
.art { position:relative; height:236px; display:flex; align-items:center; justify-content:center; margin:0 0 22px }
.art::before { content:""; position:absolute; left:50%; top:50%; width:320px; max-width:120%; height:250px; transform:translate(-50%, -50%); pointer-events:none; background:radial-gradient(ellipse at center, rgba(232,170,90,.22), transparent 66%) }
.art .bk { --w:134px; --d:20px }
.art .bkglow { filter:drop-shadow(0 0 16px rgba(240,180,100,.22)) drop-shadow(0 18px 16px rgba(0,0,0,.6)) }
.art.duo .bkglow:first-child { z-index:1; transform:translate(4px, 8px) scale(.92) }
.art.duo .bkglow + .bkglow { z-index:2; margin-left:-22px }
.card .kind { font:700 13.5px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--brass) }
.card h3 { font:700 30px/1.1 var(--display); margin:10px 0 8px }
.card .sub { color:var(--muted); font-size:18.5px; line-height:1.5; margin:0 0 18px }
.price { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin:0 }
.price b { font:700 62px/1 var(--display); color:var(--cream); font-variant-numeric:lining-nums }
.best .price b { color:var(--brass-hi) }
.price s { font:600 26px/1 var(--display); color:var(--muted); text-decoration-thickness:2px; font-variant-numeric:lining-nums }
.save { margin:8px 0 0; font-weight:700; font-size:17.5px; color:var(--brass) }
.card ul { list-style:none; margin:22px 0 26px; padding:20px 0 0; border-top:1px solid var(--line); flex:1 }
.card li { position:relative; padding:6px 0 6px 36px; font-size:19px; line-height:1.5; color:var(--cream2) }
.card li::before { content:""; position:absolute; left:0; top:9px; width:24px; height:24px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--brass);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2B66B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/13px no-repeat }
.card .btn { width:100% }
.card small { display:block; margin-top:12px; text-align:center; font-size:15.5px; color:var(--muted) }
.footnote { margin:52px auto 0; max-width:760px; text-align:center; color:var(--muted); font-size:16.5px }
.trust { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; margin:22px 0 0; padding:0; list-style:none; color:var(--cream2); font-weight:600; font-size:16.5px }
.trust li { display:inline-flex; align-items:center; gap:10px }
.trust svg { width:22px; height:22px; color:var(--brass) }

/* ── A note from Jonas ─────────────────────────────────────────────── */
.jonas { position:relative; background:var(--bg) }
.porchwrap { position:relative; height:clamp(420px, 42vw, 640px) }
.porch .scene { --ar:2.3585; --ra:.424; --fx:.55; --fy:.5 }
.porch .scene img { filter:sepia(.2) saturate(.92) brightness(.96) }
.shade2 { position:absolute; inset:0; background:
  linear-gradient(180deg, var(--bg) 0%, rgba(18,13,9,0) 20%, rgba(18,13,9,0) 42%, rgba(18,13,9,.8) 76%, var(--bg) 100%),
  linear-gradient(90deg, rgba(18,13,9,.62) 0%, rgba(18,13,9,.2) 42%, transparent 62%) }
.porch .grain { opacity:.1 }
.porch-in { position:absolute; left:0; right:0; bottom:34px; z-index:2 }
.pquote { margin:16px 0 0; max-width:780px; font:italic 500 clamp(34px, 3.7vw, 54px)/1.14 var(--display); color:var(--cream); text-shadow:0 2px 26px rgba(0,0,0,.7) }
.letter-grid { display:grid; grid-template-columns:380px minmax(0, 1fr); gap:80px; align-items:start; padding-top:56px; padding-bottom:120px }
.portrait { position:relative; margin:0; text-align:center }
.portrait::before { content:""; position:absolute; left:50%; top:42%; width:130%; aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%; background:radial-gradient(circle, rgba(226,160,80,.2), transparent 62%); pointer-events:none }
.portrait img { position:relative; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%; filter:sepia(.22) saturate(.95) brightness(.93) contrast(1.03);
  -webkit-mask-image:radial-gradient(ellipse 50% 52% at 50% 45%, #000 46%, rgba(0,0,0,.55) 74%, transparent 100%); mask-image:radial-gradient(ellipse 50% 52% at 50% 45%, #000 46%, rgba(0,0,0,.55) 74%, transparent 100%) }
.portrait figcaption { position:relative; margin-top:6px }
.portrait figcaption b { display:block; font:italic 600 30px/1.1 var(--display); color:var(--cream) }
.portrait figcaption span { display:block; margin-top:8px; font:700 13px/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }
.letter { max-width:680px }
.letter .first { font:600 clamp(28px, 2.6vw, 34px)/1.3 var(--display); color:var(--cream); margin:0 0 26px }
.letter p { font:400 21px/1.72 var(--text); color:var(--cream2); margin:0 0 20px }
.sig { margin-top:30px; font:italic 600 54px/1 var(--display); color:var(--brass) }
.role { margin-top:10px; font:700 13.5px/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }

/* ── Inside the book ───────────────────────────────────────────────── */
.inside { position:relative; padding:110px 0 110px; border-top:1px solid rgba(226,182,107,.1); background:radial-gradient(900px 560px at 50% 0%, rgba(214,150,70,.17), transparent 70%), var(--bg2) }
.lampart { display:block; width:66px; height:103px; margin:0 auto 22px; color:var(--brass) }
.parts { display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:column; grid-template-rows:repeat(5, auto); column-gap:64px; max-width:1120px; margin:0 auto; padding:0; list-style:none }
.parts li { display:grid; grid-template-columns:56px minmax(0, 1fr); gap:20px; align-items:start; padding:24px 0; border-top:1px solid var(--line) }
.parts .num { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; font:700 25px/1 var(--display); color:var(--brass-hi); font-variant-numeric:lining-nums;
  background:radial-gradient(circle at 35% 30%, rgba(242,209,147,.16), rgba(226,182,107,.04) 70%); box-shadow:inset 0 0 0 1.5px rgba(226,182,107,.65), 0 0 18px rgba(226,170,90,.18) }
.parts b { display:block; font:700 27px/1.15 var(--display); color:var(--cream); margin:3px 0 6px }
.parts span { display:block; font-size:19px; line-height:1.5; color:var(--cream2) }
.buyline { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 24px; margin-top:52px }
.buyline p { margin:0; color:var(--muted); font-size:17px }

/* ── Look inside: cream pages lit on a dark table ──────────────────── */
.look { position:relative; padding:110px 0 104px; overflow:hidden;
  background:
    radial-gradient(ellipse 62% 46% at 50% 44%, rgba(236,174,92,.2), transparent 72%),
    radial-gradient(ellipse 110% 85% at 50% 50%, transparent 48%, rgba(5,3,2,.72) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='600'><filter id='w' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.0018 .26' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .7  0 0 0 0 .5  0 0 0 0 .3  .36 0 0 0 -.16'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>"),
    repeating-linear-gradient(180deg, transparent 0 258px, rgba(0,0,0,.32) 258px 260px, rgba(255,220,170,.025) 260px 261px),
    linear-gradient(180deg, #1B130D, #140E0A) }
.spread { position:relative; display:grid; grid-template-columns:1fr 1fr; max-width:1100px; margin:0 auto 46px; border-radius:4px; box-shadow:0 50px 70px -40px rgba(0,0,0,.95), 0 18px 40px -18px rgba(0,0,0,.7) }
.spread::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:4px;
  background:radial-gradient(ellipse 75% 70% at 35% 12%, rgba(255,242,210,.3), transparent 62%), radial-gradient(ellipse 110% 100% at 50% 45%, transparent 60%, rgba(80,46,14,.24) 100%) }
.pg { position:relative; padding:56px 52px 68px; min-height:640px; font:400 17.5px/1.62 var(--text); color:#2A2017 }
.pg.l { border-radius:4px 0 0 4px; background:linear-gradient(90deg, #F1E5CE 0%, #F6EDDB 70%, #E4D2B1 100%) }
.pg.r { border-radius:0 4px 4px 0; background:linear-gradient(90deg, #E1CFAD 0%, #F4EAD6 13%, #F7EFDE 100%) }
.pg .run { font:700 11.5px/1.2 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:#857258; margin-bottom:30px }
.pg .folio { position:absolute; bottom:26px; font:600 14px var(--sans); color:#857258 }
.pg.l .folio { left:52px } .pg.r .folio { right:52px }
.pg h4 { font:700 40px/1.05 var(--display); color:#1F1710; margin:8px 0 18px }
.pg h5 { font:700 13px/1.2 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:#88581C; margin:24px 0 6px }
.pg p { margin:0 0 10px }
.pg ol { margin:0; padding-left:24px } .pg li { margin:0 0 8px }
.pg .opener { text-align:center; padding-top:30px }
.pg .opener .pn { font:700 12px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:#857258 }
.pg .opener .big { font:600 112px/1 var(--display); color:#9A6B28; margin:14px 0 0 }
.pg .opener h4 { font-size:46px; margin:4px 0 0 }
.pg .orn { margin:22px auto 24px; color:#A97C3B }
.pg .opener p { max-width:380px; margin:0 auto }
.pg .toc { list-style:none; padding:0; margin:0 }
.pg .toc li { display:flex; align-items:baseline; gap:10px; margin:0 0 14px }
.pg .toc li i { flex:1; border-bottom:1.5px dotted #B3A084; transform:translateY(-5px) }
.pg .needs { background:rgba(120,88,48,.08); border-radius:10px; padding:12px 16px }
.pg .mind { border:1.5px solid #B07A2E; border-radius:10px; padding:14px 16px; margin-top:18px; background:rgba(200,146,62,.1) }
.pg .mind h5 { margin-top:0 }
.pg .way { font:700 12px/1.2 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:#88581C }
.orn { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--brass) }
.orn::before, .orn::after { content:""; height:1px; width:70px; background:linear-gradient(90deg, transparent, currentColor) }
.orn::after { transform:scaleX(-1) }
.orn i { width:8px; height:8px; transform:rotate(45deg); border:1.5px solid currentColor }

/* ── Comments (placeholder) ────────────────────────────────────────── */
.proof { padding:104px 0 96px; background:var(--bg) }
.proof .sec-head { margin-bottom:48px }
.quotes { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px }
.quote { position:relative; margin:0; padding:30px 30px 28px; border-radius:18px; background:linear-gradient(180deg, #221911, #1A130D); border:1px solid var(--line) }
.quote .qm { display:block; height:34px; font:700 84px/.9 var(--display); color:var(--brass) }
.quote blockquote { margin:12px 0 22px }
.quote blockquote p { margin:0; font:italic 400 20px/1.55 var(--text); color:var(--cream) }
.quote .who { display:flex; align-items:center; gap:12px; font-size:16px; color:var(--muted) }
.quote .who i { width:40px; height:40px; flex:none; border-radius:50%; background:#2E2218; box-shadow:inset 0 0 0 1.5px var(--line2) }

/* ── Free first part ───────────────────────────────────────────────── */
.free { padding:8px 0 110px; background:var(--bg) }
.freecard { position:relative; max-width:1000px; margin:0 auto; display:grid; grid-template-columns:230px minmax(0, 1fr); gap:52px; align-items:center; padding:46px 52px; border-radius:24px; overflow:hidden;
  background:radial-gradient(520px 320px at 14% 50%, rgba(230,164,82,.2), transparent 70%), linear-gradient(180deg, #2A1F16, #1D150F); border:1px solid var(--line2) }
.fbook { display:flex; justify-content:center }
.fbook .bk { --w:170px; --d:24px }
.freecard h2 { font-size:clamp(34px, 3.6vw, 48px); margin:12px 0 12px }
.freecard p:not(.eyebrow) { color:var(--cream2); margin:0 0 24px }
.freecard form { display:flex; flex-wrap:wrap; gap:12px }
.freecard input { flex:1 1 260px; min-width:0; min-height:58px; border-radius:12px; border:1.5px solid rgba(226,182,107,.45); background:#110C08; color:var(--cream); padding:0 20px; font:400 19px var(--sans) }
.freecard input::placeholder { color:#A39176 }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq { padding:104px 0 96px; border-top:1px solid rgba(226,182,107,.1); background:var(--bg2) }
.faq .wrap { max-width:920px }
.faq .sec-head { margin-bottom:36px }
.faq details { border-bottom:1px solid var(--line) }
.faq details:first-of-type { border-top:1px solid var(--line) }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 4px; cursor:pointer; list-style:none; font:700 27px/1.25 var(--display); color:var(--cream); transition:color .2s }
.faq summary:hover { color:var(--brass-hi) }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:"+"; flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px var(--brass); color:var(--brass); font:400 28px/1 var(--sans) }
.faq details[open] summary::after { content:"–" }
.faq details p { margin:0 4px 24px; max-width:780px; color:var(--cream2); font-size:19.5px }

/* ── Closing ───────────────────────────────────────────────────────── */
.closing { position:relative; padding:150px 0 150px; text-align:center; overflow:hidden; background:var(--bg) }
.closing .bgimg { position:absolute; inset:-14%; background:url("../img/flatlay.jpg") center 42%/cover; filter:sepia(.3) saturate(.85) brightness(.7) }
.closing::before { content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 60% 62% at 50% 52%, rgba(18,13,9,.66), rgba(18,13,9,.84) 62%, rgba(18,13,9,.97) 100%), linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%) }
.closing .wrap { position:relative; z-index:2 }
.closing h2 { font-size:clamp(40px, 5.3vw, 76px); line-height:1.04; max-width:960px; margin:0 auto 38px; text-shadow:0 2px 30px rgba(0,0,0,.6) }
.closing h2 em { display:block; margin-top:6px; text-shadow:0 0 40px rgba(230,160,80,.4) }

/* ── Footer ────────────────────────────────────────────────────────── */
.ft { background:var(--night); border-top:1px solid rgba(226,182,107,.16); padding:58px 0 130px; font-size:16.5px; color:var(--cream2) }
.ft .wrap { display:grid; grid-template-columns:1fr 1.25fr; gap:48px }
.ft nav { display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:24px }
.ft nav a { text-decoration:none; font-weight:600; color:var(--cream2); transition:color .2s }
.ft nav a:hover { color:var(--brass-hi) }
.ft p { margin:0 0 12px; line-height:1.6 }
.ft .disc { color:var(--cream); font-weight:600 }
.ft .copy { color:var(--muted) }

/* ── Sticky buy bar ────────────────────────────────────────────────── */
.sticky { position:fixed; left:50%; bottom:16px; z-index:25; width:min(680px, calc(100% - 24px)); display:flex; align-items:center; gap:16px; padding:10px 10px 10px 12px; border-radius:16px;
  background:rgba(24,17,12,.95); border:1px solid var(--line2); box-shadow:0 24px 50px -16px rgba(0,0,0,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transform:translate(-50%, 170%); visibility:hidden; transition:transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s linear .45s }
.sticky.show { transform:translate(-50%, 0); visibility:visible; transition:transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s }
.sticky .mini { width:40px; height:60px; flex:none; border-radius:2px 4px 4px 2px; background-size:cover; background-position:center; box-shadow:0 4px 12px rgba(0,0,0,.55) }
.sticky b { font:700 32px/1 var(--display); color:var(--brass-hi); font-variant-numeric:lining-nums }
.sticky span { display:block; margin-top:3px; font-size:15px; line-height:1.3; color:var(--cream2) }
.sticky .btn { margin-left:auto; min-height:54px; padding:0 24px; font-size:17px }

/* ── Exit popup ────────────────────────────────────────────────────── */
.modal { position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(8,5,3,.74); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) }
.modal.show { display:flex }
.dialog { position:relative; width:min(900px, 100%); max-height:calc(100% - 8px); overflow:auto; display:grid; grid-template-columns:320px minmax(0, 1fr); border-radius:24px; background:linear-gradient(180deg, #251A12, #1A130D); border:1px solid var(--line2); box-shadow:0 60px 120px -30px #000; animation:pop .35s ease-out }
@keyframes pop { from { opacity:0; transform:translateY(14px) scale(.98) } to { opacity:1; transform:none } }
.dialog .side { position:relative; display:flex; align-items:center; justify-content:center; padding:48px 20px; border-right:1px solid var(--line); background:radial-gradient(circle at 50% 47%, rgba(240,182,100,.34), rgba(200,130,50,.08) 46%, transparent 72%), #140E0A }
.dialog .side .bk { --w:180px; --d:24px }
.dialog .body { padding:52px 44px 38px }
.dialog h2 { font-size:clamp(34px, 3.6vw, 46px); margin:14px 0 12px }
.dialog p { color:var(--cream2); margin:0 0 24px }
.x { position:absolute; top:12px; right:12px; z-index:3; width:54px; height:54px; border-radius:50%; border:1px solid var(--line2); background:rgba(243,233,214,.06); color:var(--cream); font:400 28px/1 var(--sans); cursor:pointer; transition:background .2s }
.x:hover { background:rgba(243,233,214,.15) }
.env { position:relative; height:140px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; overflow:hidden; perspective:700px;
  background:radial-gradient(ellipse at 50% 40%, rgba(226,170,90,.14), transparent 70%), #0F0B08; box-shadow:inset 0 0 0 1.5px var(--line2), inset 0 10px 30px rgba(0,0,0,.6) }
.env .code { font:700 48px/1 var(--display); font-variant-numeric:lining-nums; letter-spacing:.16em; padding-left:.16em; color:var(--brass-hi); text-shadow:0 0 22px rgba(226,170,90,.45) }
.env .cop { font-size:15.5px; color:var(--muted) }
.env .flap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:18px; border-radius:16px; transform-origin:50% 0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px), linear-gradient(180deg, #3D2C1D, #2A1E14); box-shadow:inset 0 0 0 1px rgba(226,182,107,.45), inset 0 -18px 30px rgba(0,0,0,.35);
  transition:transform .8s cubic-bezier(.5,-0.15,.25,1.15), opacity .55s .2s }
.env .flap svg { width:92px; height:92px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)); transition:transform .45s ease-out }
.env:hover .flap svg { transform:rotate(-10deg) translateY(-3px) }
.env .lift { font:700 15px/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--brass-hi) }
.env.open .flap { transform:rotateX(80deg) translateY(-50%); opacity:0; pointer-events:none }
.dialog .btn { width:100%; margin-top:18px }
.dialog small { display:block; margin-top:12px; text-align:center; color:var(--muted); font-size:15px }

/* ── Mockup panel ──────────────────────────────────────────────────── */

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .nav a:not(.btn) { display:none }
}
@media (max-width:980px) {
  .booksec .wrap { grid-template-columns:1fr; gap:20px; text-align:center }
  .bookstage { height:500px }
  .bookstage .bk { --w:270px; --d:34px }
  .halo { width:520px }
  .floor { width:360px; bottom:30px }
  .bookcopy .eyebrow::after { content:""; width:30px; height:1px; background:currentColor; opacity:.75 }
  .bookcopy .subt, .bookcopy > p:not(.eyebrow):not(.subt) { margin-left:auto; margin-right:auto }
  .counts { margin-left:auto; margin-right:auto }
  .bookcopy .ctas { justify-content:center }
  .cards { grid-template-columns:1fr; max-width:580px; margin:0 auto; gap:30px }
  .card.best { order:-1; margin:0 0 6px }
  .letter-grid { grid-template-columns:1fr; gap:26px; padding-top:56px }
  .portrait { max-width:340px; margin:0 auto }
  .letter { margin:0 auto }
  .parts { grid-template-columns:1fr; grid-auto-flow:row; grid-template-rows:none; max-width:680px }
  .spread { grid-template-columns:1fr; gap:18px; box-shadow:none; max-width:640px }
  .spread::after { display:none }
  .pg.l, .pg.r { border-radius:4px; box-shadow:0 30px 50px -30px rgba(0,0,0,.95); background:radial-gradient(ellipse 90% 70% at 30% 0%, #FBF4E6, #F3E8D3 70%, #E9DABD 100%) }
  .pg { min-height:0 }
  .quotes { grid-template-columns:1fr; max-width:640px; margin:0 auto }
  .freecard { grid-template-columns:1fr; gap:26px; text-align:center; padding:40px 28px }
  .freecard .eyebrow::after { content:""; width:30px; height:1px; background:currentColor; opacity:.75 }
  .dialog { grid-template-columns:1fr } .dialog .side { display:none } .dialog .body { padding:40px 24px 28px }
  .ft .wrap { grid-template-columns:1fr; gap:28px }
}
@media (max-width:900px) {
  .hero { display:block; min-height:0 }
  .hero-media { position:relative; inset:auto; height:clamp(300px, 80vw, 540px) }
  .hero .scene { --fx:.8; --fy:.5 }
  .shade { background:
    linear-gradient(180deg, rgba(15,10,7,.3) 0%, transparent 20%, transparent 48%, rgba(18,13,9,.78) 80%, var(--bg) 100%),
    radial-gradient(ellipse 95% 85% at 62% 45%, transparent 55%, rgba(10,7,4,.5) 100%) }
  .hero-in { margin-top:-84px; padding:0 22px 64px }
  .hero-copy { max-width:640px }
  .hero h1 { font-size:clamp(44px, 7vw, 64px) }
  .porchwrap { height:auto }
  .porch { position:relative; inset:auto; height:clamp(260px, 62vw, 440px) }
  .porch .scene { --fx:.88 }
  .shade2 { background:linear-gradient(180deg, var(--bg) 0%, rgba(18,13,9,0) 22%, rgba(18,13,9,0) 55%, rgba(18,13,9,.8) 85%, var(--bg) 100%) }
  .porch-in { position:relative; bottom:auto; margin-top:-36px }
}
@media (max-width:600px) {
  body { font-size:19px }
  .wrap { padding:0 20px }
  .topbar { font-size:15.5px; padding:9px 14px }
  .hdr .wrap { min-height:74px; gap:10px }
  .brand { gap:10px }
  .brand svg { width:38px; height:38px }
  .brand b { font-size:23px }
  .brand small { display:none }
  .nav .btn { padding:0 18px; font-size:16.5px }
  .nav .btn .opt { display:none }
  .hero h1 { font-size:44px; margin:18px 0 20px }
  .lead { font-size:19.5px; margin-bottom:28px }
  .ctas .btn { width:100% }
  .ticks { gap:8px 20px; font-size:17px; margin-top:24px }
  .booksec, .offers, .inside, .look, .proof, .faq { padding-top:76px; padding-bottom:76px }
  .booksec { padding-top:40px }
  .bookstage { height:420px }
  .bookstage .bk { --w:224px; --d:30px }
  .halo { width:420px }
  .floor { width:300px; bottom:26px }
  .counts li { padding:0 16px }
  .counts b { font-size:44px }
  .counts span { font-size:15.5px }
  .center .eyebrow { gap:10px }
  .center .eyebrow::before, .center .eyebrow::after { width:18px }
  .bookcopy .ctas { flex-direction:column; align-items:stretch }
  .sec-head { margin-bottom:44px }
  .sec-head h2 { font-size:38px }
  .sec-head p:not(.eyebrow) { font-size:19px }
  .card { padding:26px 22px 26px }
  .card.best { padding-top:38px }
  .ribbon span { padding:11px 26px; font-size:12.5px; letter-spacing:.14em }
  .card h3 { font-size:28px }
  .price b { font-size:56px }
  .pquote { font-size:32px }
  .letter-grid { padding-bottom:80px }
  .portrait { max-width:290px }
  .letter p { font-size:20px }
  .sig { font-size:46px }
  .parts li { grid-template-columns:48px minmax(0, 1fr); gap:16px; padding:20px 0 }
  .parts .num { width:46px; height:46px; font-size:22px }
  .parts b { font-size:25px }
  .parts span { font-size:18.5px }
  .pg { padding:36px 24px 56px; font-size:17px }
  .pg h4 { font-size:34px }
  .pg .opener .big { font-size:90px }
  .pg .opener h4 { font-size:40px }
  .pg.l .folio { left:24px } .pg.r .folio { right:24px }
  .pg .toc li { font-size:16.5px }
  .quote { padding:26px 22px 24px }
  .free { padding-bottom:76px }
  .freecard { padding:34px 20px }
  .freecard form .btn { width:100% }
  .faq summary { font-size:24px; padding:20px 2px }
  .closing { padding:110px 0 110px }
  .closing h2 { font-size:42px }
  .ft { padding-bottom:120px }
  .sticky { gap:12px; padding:8px 8px 8px 10px; bottom:10px }
  .sticky .mini { width:34px; height:51px }
  .sticky b { font-size:27px }
  .sticky span { font-size:14px }
  .sticky .btn { padding:0 18px; font-size:16.5px }
  .env .code { font-size:38px }
  .dialog h2 { font-size:34px }
}
@media (max-width:380px) {
  .sticky span { display:none }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  .reveal, .reveal.pre:not(.in) { opacity:1; transform:none; transition:none }
  .lampglow, .halo, .dialog, .hero-copy { animation:none }
  .bk, .btn, .env .flap, .sticky { transition:none }
}
/* ── 4c: the countdown ─────────────────────────────────────────────── */
.topbar .cd { display:inline-flex; align-items:center; gap:2px; margin:0 3px; vertical-align:1px }
.topbar .cd b { display:inline-block; min-width:31px; padding:2px 5px; border-radius:5px; text-align:center; font:700 15.5px/1.3 var(--sans); font-variant-numeric:tabular-nums; color:var(--brass-hi);
  background:linear-gradient(180deg, #3A2A1A, #24190F); box-shadow:inset 0 0 0 1px rgba(226,182,107,.45) }
.topbar .cd i { margin:0 5px 0 2px; font-style:normal; font-size:12.5px; color:var(--muted) }
.lead .leadnum { color:var(--brass-hi); font-weight:600; text-decoration:underline; text-decoration-color:rgba(242,209,147,.4); text-underline-offset:4px }

/* ── 4c: the book sells the savings ───────────────────────────────── */
.bookleft { display:flex; flex-direction:column; align-items:center }
.counts.under { margin:-34px auto 0; max-width:460px; text-align:center }
.counts.under li { padding:0 16px } .counts.under b { font-size:42px } .counts.under span { font-size:15px }
.booksec .bookcopy > p.bigline { margin:0 0 24px; max-width:590px; font:600 clamp(24px, 2.3vw, 31px)/1.25 var(--display); color:var(--cream) }
.bookcopy .bigline em { font-style:italic; color:var(--brass-hi) }
.takes { max-width:590px; margin:0 0 24px; padding:18px 24px 14px; text-align:left; border-radius:16px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(243,233,214,.06), rgba(243,233,214,.02)) }
.takes-h { margin:0 0 4px; font:700 13.5px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--brass) }
.takes-h span { margin-left:6px; font-weight:400; font-size:14.5px; letter-spacing:0; text-transform:none; color:var(--muted) }
.takes-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 16px; align-items:center; padding:10px 0; border-bottom:1px dotted rgba(226,182,107,.3) }
.takes-row .t-bill { font:700 20px/1.2 var(--display); color:var(--cream) }
.takes-row .t-way { grid-column:1; font-size:15.5px; line-height:1.35; color:var(--muted) }
.takes-row b { grid-column:2; grid-row:1 / span 2; font:700 22px/1 var(--display); color:var(--brass-hi); white-space:nowrap; font-variant-numeric:lining-nums }
.takes-row sup { font:700 11px var(--sans); color:var(--amber); margin-left:2px }
.takes-total { border-bottom:0; border-top:1.5px solid var(--brass); margin-top:2px }
.takes-total .t-bill { font-size:22px } .takes-total b { grid-row:auto; font-size:27px }
.takes-pay { margin:4px 0 0; font-size:17px; color:var(--cream2) } .takes-pay b { color:var(--brass-hi) }
.booksec .bookcopy > p.pricel { margin:0 0 26px; max-width:590px; font-size:17px; color:var(--cream2) }
.pricel b { margin-right:6px; font:700 30px/1 var(--display); color:var(--brass-hi); vertical-align:-3px }

/* ── 4c: the math (4b's ledger) ───────────────────────────────────── */
.math { position:relative; padding:96px 0 100px; border-top:1px solid rgba(226,182,107,.1); background:radial-gradient(900px 560px at 50% 0%, rgba(214,150,70,.15), transparent 70%), var(--bg2) }
.ledger { max-width:1100px; margin:0 auto; padding:30px 40px 24px; border-radius:6px; color:#2A2017; font:400 18px/1.5 var(--text);
  background:repeating-linear-gradient(180deg, transparent 0 41px, rgba(133,114,88,.13) 41px 42px), linear-gradient(180deg, #F6EDDB, #F0E3CA);
  box-shadow:0 50px 70px -40px rgba(0,0,0,.95), 0 18px 40px -18px rgba(0,0,0,.7) }
.lrow { display:grid; grid-template-columns:1.05fr .9fr 1.55fr 1fr; gap:20px; align-items:baseline; padding:15px 0; border-bottom:1px solid rgba(133,114,88,.32) }
.lhead { font:700 12.5px/1.3 var(--sans); letter-spacing:.15em; text-transform:uppercase; color:#857258; border-bottom:2px solid #B07A2E; padding-top:4px }
.lrow .bill { font:700 23px/1.2 var(--display); color:#1F1710 }
.lrow .amt { font:600 23px/1 var(--display); color:#2A2017; font-variant-numeric:lining-nums tabular-nums }
.lrow .amt small { display:block; margin-top:5px; font:400 13.5px/1.2 var(--sans); color:#6B5A44 }
.lrow .way { font-size:16.5px; line-height:1.45; color:#4A3B2C }
.lrow .cut { font:700 23px/1 var(--display); color:#8A4F12; font-variant-numeric:lining-nums tabular-nums; white-space:nowrap }
.lrow sup { font:700 12px var(--sans); margin-left:3px } .lrow sup a { color:#88581C; text-decoration:none }
.ltotal { border-bottom:0; border-top:2px solid #2A2017; margin-top:2px }
.ltotal .bill { font-size:26px } .ltotal .amt { font-size:26px; font-weight:700 } .ltotal .cut { font-size:28px }
.lnote { margin:14px 0 0; font:400 15px/1.5 var(--sans); color:#6B5A44 }
.times { margin:30px auto 0; text-align:center; font-size:21px; color:var(--cream2) }
.times b { font:700 32px/1 var(--display); color:var(--brass-hi) }
.times span { color:var(--muted) }
.ft .sources { grid-column:1 / -1; margin-top:8px; padding-top:26px; border-top:1px solid rgba(226,182,107,.14) }
.ft .sources ol { margin:14px 0 0; padding-left:22px; columns:2; column-gap:44px; font-size:14.5px; line-height:1.5; color:var(--muted) }
.ft .sources li { break-inside:avoid; margin:0 0 9px } .ft .sources a { color:var(--brass-hi); word-break:break-word }

/* ── 4c: inside the book, Elias's clarity ─────────────────────────── */
.anatomy { max-width:1180px; margin:0 auto 44px; padding:22px 26px 18px; border-radius:16px; border:1px solid var(--line); background:rgba(243,233,214,.03) }
.an-h { margin:0 0 16px; text-align:center; font:700 13.5px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--brass) }
.an { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:14px; margin:0; padding:0; list-style:none }
.an li { padding:4px 6px; text-align:center }
.an-n { display:inline-grid; place-items:center; width:32px; height:32px; margin-bottom:8px; border-radius:50%; font:700 16px/1 var(--display); color:var(--brass-hi); box-shadow:inset 0 0 0 1.2px var(--brass) }
.an b { display:block; font:700 20px/1.2 var(--display); color:var(--cream) }
.an li > span:last-child { display:block; margin-top:4px; font-size:14.5px; line-height:1.35; color:var(--muted) }
.pgrid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; max-width:1180px; margin:0 auto }
.pcard { position:relative; display:flex; flex-direction:column; padding:24px 24px 20px; border-radius:18px; border:1px solid rgba(226,182,107,.3);
  background:linear-gradient(180deg, #2A1F16 0%, #1E1610 100%); box-shadow:0 30px 60px -44px rgba(0,0,0,.95) }
.pcard::before { content:""; position:absolute; inset:6px; border:1px solid rgba(226,182,107,.1); border-radius:13px; pointer-events:none }
.plabel { margin:0 0 10px; font:700 12.5px/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.plabel span { color:var(--brass) }
.pcard h3 { margin:0 0 6px; font:700 27px/1.12 var(--display); color:var(--cream) }
.promise { margin:0 0 14px; font:italic 500 19.5px/1.35 var(--display); color:var(--brass-hi) }
.ways { flex:1; margin:0; padding:0; list-style:none; counter-reset:w }
.ways li { counter-increment:w; display:grid; grid-template-columns:26px minmax(0, 1fr) auto; gap:10px; align-items:baseline; padding:9px 0; border-top:1px dotted rgba(226,182,107,.25); font-size:16.5px; line-height:1.35; color:var(--cream2) }
.ways li::before { content:counter(w, decimal-leading-zero); font:600 13px var(--sans); color:var(--amber) }
.ways em { padding:3px 8px; border-radius:999px; font:600 13px/1.2 var(--sans); font-style:normal; color:var(--brass-hi); white-space:nowrap; box-shadow:inset 0 0 0 1px var(--line2) }
.saves { margin:14px 0 0; padding:10px 12px; border-radius:10px; font-size:15.5px; line-height:1.35; color:#1C130B; background:linear-gradient(180deg, #F3D293, #E2B66B) }
.saves b { font-weight:800 }
.more { margin:32px 0 0; text-align:center; font:italic 500 23px/1.3 var(--display); color:var(--brass-hi) }
.inside .footnote { margin-top:14px }

@media (max-width:1100px) { .pgrid { grid-template-columns:repeat(2, minmax(0, 1fr)) } .an { grid-template-columns:repeat(3, minmax(0, 1fr)) } }
@media (max-width:980px) {
  .counts.under { margin-top:-8px }
  .takes { padding:16px 16px 12px }
  .ledger { padding:22px 20px 18px }
  .lhead { display:none }
  .lrow { grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"bill cut" "amt amt" "way way"; gap:4px 14px; padding:14px 0 }
  .lrow .bill { grid-area:bill } .lrow .cut { grid-area:cut; text-align:right } .lrow .amt { grid-area:amt; font-size:18px } .lrow .way { grid-area:way }
  .lrow .amt::before { content:"An average house pays "; font:400 15px var(--sans); color:#6B5A44 }
  .ltotal .amt::before { content:"Altogether an average house pays " }
  .ft .sources ol { columns:1 }
}
@media (max-width:640px) {
  .pgrid { grid-template-columns:1fr } .an { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .topbar .cd b { min-width:27px; font-size:14px } .topbar .cd i { margin-right:3px }
}

/* ── the real site ── */
[hidden] { display:none !important }
.cv { background-image:url("../img/cover.jpg") }
.legal { max-width:780px; padding-top:56px; padding-bottom:80px }
.legal h1 { font:600 clamp(42px, 6vw, 60px)/1.06 var(--display); margin:0 0 8px; color:var(--cream) }
.legal .upd { margin:0 0 34px; font-size:16px; color:var(--muted) }
.legal h2 { margin:40px 0 10px; font:600 29px/1.2 var(--display); color:var(--brass-hi) }
.legal p, .legal li { color:var(--cream2) }
.legal p { margin:0 0 16px }
.legal a:not(.btn) { color:var(--brass-hi) }
.legal .back { margin-top:48px }
.ft.plain { padding-bottom:58px }