:root{--ground:#080706;--ink:#10110f;--paper:#f0eee6;--gold:#dcc88d;--line:rgba(220,200,141,.22);--muted:#aaa99f;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Barlow',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--ground);color:var(--paper);font-family:var(--sans);font-size:17px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{display:block;max-width:100%}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #c89b34;outline-offset:6px}.wrap{width:min(1320px,calc(100% - 112px));margin:auto}.nav{height:103px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:13px;font-size:13px;font-weight:600;letter-spacing:2px}.brand small{display:block;font-size:8px;letter-spacing:2.7px;margin-top:6px;color:var(--muted)}.brand-mark{font-size:42px;font-weight:400;color:var(--gold)}.nav nav{display:flex;gap:30px;font-size:14px;color:#c5c4ba}.nav nav a:hover{color:var(--gold)}.nav-buy{padding:12px 0;font-size:14px;background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-size:100% 1px;background-position:0 calc(100% - 6px)}.nav-buy span{margin-left:28px;color:var(--gold)}.hero{position:relative;display:grid;grid-template-columns:1fr 1.03fr;min-height:750px;align-items:center}.hero-copy{position:relative;z-index:3;padding:64px 0 100px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.3px;line-height:1.6;margin:0 0 30px;color:var(--gold)}.eyebrow>span{display:inline-block;background:var(--gold);width:5px;height:5px;margin:0 9px 2px 0;border-radius:100%}h1,h2,h3,h4,p{margin-top:0}h1{font-family:var(--serif);font-weight:400;font-size:clamp(76px,7.6vw,116px);line-height:.9;letter-spacing:-4px;margin:0 0 27px}em{font-family:var(--serif);font-weight:400;color:var(--gold)}.hero-intro{font-size:24px;line-height:1.4;margin-bottom:20px;font-weight:500}.hero-description{max-width:340px;color:var(--muted);line-height:1.6;font-size:16px}.hero-actions{display:flex;gap:25px;align-items:center;margin-top:30px}.button{display:inline-flex;align-items:center;gap:12px;cursor:pointer;min-height:56px;padding:10px 20px 10px 10px;border:0;box-sizing:border-box;border-radius:12px;color:#0E0E12;font-weight:800;letter-spacing:-.025em;line-height:1;background:linear-gradient(to bottom right,#e5d6a8,#DCC88D,#B8A46E);box-shadow:0 10px 32px -8px rgba(220,200,141,.55),0 0 0 1px rgba(220,200,141,.25);transition:all .15s}.button .tile{display:inline-flex;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#2d2d2d;border:1px solid #2d2d2d;color:#DDC990;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.button .tile svg{width:19px;height:19px}.button .btn-label{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;text-transform:uppercase;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:800;font-size:clamp(17px,1.75vw,26px);white-space:nowrap;text-shadow:0 1px 1px rgba(255,255,255,.18)}.button .btn-label small{margin-top:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:clamp(8px,.8vw,11px);letter-spacing:.14em;text-transform:uppercase;opacity:.7;text-shadow:none}.button:hover{background:linear-gradient(to bottom right,#f0e3b8,#DCC88D,#c5b074);box-shadow:0 14px 40px -8px rgba(220,200,141,.75),0 0 0 1px rgba(220,200,141,.4);transform:translateY(-2px)}.button:active{transform:translateY(0)}.button-ghost{background:none;border:1px solid rgba(220,200,141,.45);box-shadow:none;color:#DCC88D}.button-ghost:hover{background:rgba(220,200,141,.08);border-color:rgba(220,200,141,.75);box-shadow:none}.button-ghost .tile{background:none;border:0;box-shadow:none;width:auto;height:auto;color:#DCC88D}.button-ghost .tile svg{width:17px;height:17px}.button-ghost{padding-left:18px;gap:10px}.button-ghost .btn-label{text-shadow:none}.text-link{font-size:13px;background:none;border:0;color:inherit;padding:10px 0;border-bottom:1px solid var(--line)}.text-link span{margin-left:12px}.reader-mini{display:flex;gap:16px;align-items:center;margin-top:34px}.avatars{display:flex;padding-left:8px}.avatars img{width:35px;height:35px;object-fit:cover;border-radius:50%;border:2px solid var(--ground);margin-left:-8px}.reader-mini p{font-size:12px;line-height:1.5;margin:0}.reader-mini small{display:block;color:var(--muted);font-size:11px}.book-stage{position:relative;align-self:stretch;isolation:isolate;min-width:0;perspective:1100px}.halo{position:absolute;z-index:-3;width:925px;height:925px;top:-109px;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse closest-side at 55% 44%,#ddbc6d32,#9a834c13 60%,#9a834c00 100%);pointer-events:none}.stage-word{font:700 clamp(120px,14vw,220px)/1 'Barlow Condensed',sans-serif;letter-spacing:-5px;position:absolute;top:255px;left:48%;transform:translateX(-50%);color:rgba(224,210,170,.09);z-index:-2}.orbit{position:absolute;border:1px solid rgba(220,200,141,.17);border-radius:50%;width:510px;height:510px;left:52%;top:98px;transform:translateX(-50%) rotate(-24deg) scaleX(1.02);z-index:-1}.orbit:before,.orbit:after{content:'';position:absolute;background:var(--gold);width:5px;height:5px;border-radius:50%;left:50%;top:-3px;box-shadow:0 0 15px #dcc88d}.orbit:after{left:auto;top:auto;right:20%;bottom:10%}.orbit-two{width:605px;height:400px;top:165px;transform:translateX(-50%) rotate(-43deg);border-color:rgba(220,200,141,.1)}.book-object{position:relative;width:400px;max-width:83%;margin:52px auto 0;animation:book-arrive 1.5s cubic-bezier(.2,.6,.2,1) both;filter:drop-shadow(18px 30px 22px #0009)}.hero-book{width:100%;height:auto}.book-object:after{content:'';position:absolute;inset:2%;background:linear-gradient(120deg,transparent 10%,#fff1 40%,transparent 65%);pointer-events:none}.stage-caption{position:absolute;z-index:3;bottom:110px;left:4%;right:-1%;display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:2px;line-height:1.7;color:var(--gold)}.stage-caption strong{font-weight:500;color:var(--paper)}.caption-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.edition-label{position:absolute;right:-22px;top:260px;writing-mode:vertical-rl;letter-spacing:3px;font-size:8px;color:var(--muted)}.hero-foot{position:absolute;bottom:27px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px;color:var(--muted);padding-top:23px}.hero-foot a{font-size:11px;letter-spacing:.5px}.hero-foot a span{padding-left:40px;color:var(--gold)}.discipline-strip{background:#181818;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.discipline-strip>div{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:24px 0;font-size:10px;letter-spacing:2px;color:#c7c5ba}.discipline-strip i{font-size:13px;color:var(--gold);font-style:normal}.section{padding:110px 0}.paper{background:var(--paper);color:var(--ink)}.paper em{color:#807041}.paper .eyebrow{color:#746238}.section-top{display:flex;justify-content:space-between}.tiny{font-size:9px;letter-spacing:1.7px;color:#727269}h2{font:400 clamp(48px,4.8vw,74px)/1.02 var(--serif);letter-spacing:-2px;margin-bottom:26px}.method-heading{display:grid;grid-template-columns:1.35fr 1fr;gap:100px;align-items:center}.method-heading>p{line-height:1.65;font-size:17px;color:#66685f;margin:0}.principles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:68px;border-top:1px solid #c7c6b9}.principles article{padding:35px 36px 0 0}.principles article+article{border-left:1px solid #c7c6b9;padding-left:36px}.number{font:italic 35px var(--serif);color:#9c916f}.principles h3{font:500 33px/1.1 var(--serif);margin:22px 0 16px;letter-spacing:-.7px}.principles p{font-size:15px;line-height:1.65;color:#66685f}.principles a{font-size:11px;font-weight:600;display:flex;justify-content:space-between;margin-top:26px}.author-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.author-photo{position:relative;padding:0 0 28px 28px}.author-photo:before{content:'';position:absolute;left:0;bottom:0;right:28px;top:28px;border:1px solid var(--line)}.author-photo>img{position:relative;width:100%;aspect-ratio:4/4.7;object-fit:cover;filter:grayscale(1)}.author-photo>span{display:block;position:relative;margin-top:22px;font-size:8px;letter-spacing:2px;color:var(--muted)}.author-copy p:not(.eyebrow):not(.large-copy){font-size:16px;line-height:1.65;color:var(--muted)}.author-copy .large-copy{font-size:23px;color:var(--paper);margin-bottom:28px}.signature-row{display:flex;gap:24px;align-items:center;margin:28px 0}.signature-row img{width:100px;max-height:55px;object-fit:contain}.signature-row>span{font-size:15px}.signature-row small{display:block;font-size:8px;letter-spacing:1.5px;margin-top:8px;color:var(--muted)}.watch{color:var(--gold);text-align:left;line-height:1.6}.inside-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:110px;margin-top:22px}.inside-intro>p{color:#66685f;line-height:1.65;max-width:300px}.inside-book{margin:45px 0 35px 65px;width:210px;perspective:800px}.inside-book{position:relative;aspect-ratio:2/3;perspective:none}.inside-book img{position:absolute;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-60%)}.inside-intro .book-note{font-size:12px;line-height:1.7;color:#7b7c72}.chapter-tabs{display:flex;border-bottom:1px solid #b5b5a8;gap:20px}.chapter-tabs button{border:0;background:none;font-size:12px;color:#77796d;padding:14px 0 18px;border-bottom:2px solid transparent}.chapter-tabs button[aria-selected=true]{color:var(--ink);border-color:#86723a;font-weight:600}.chapter{border-bottom:1px solid #d1d1c5}.chapter summary{display:flex;align-items:center;gap:18px;padding:23px 0;cursor:pointer;list-style:none}.chapter summary>span{font-size:11px;color:#8d805e;width:20px;flex:none}.chapter h3{font:500 22px/1.1 var(--serif);margin:0;flex:1}.chapter summary b,.faq b,.bulk b{font-size:20px;font-weight:400;color:#8c7950}.chapter>div{padding:0 28px 22px 38px;font-size:14px;line-height:1.7;color:#66685f}.chapter>div p{margin-bottom:8px}.chapter-hook{font-weight:600;color:#30352b}.chapter-foot{font-size:11px;color:#77796d;margin-top:20px}.readers h2{margin-bottom:52px}.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.quotes figure{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:25px}.quote-mark{font:70px/.8 var(--serif);color:var(--gold);height:42px}.quotes blockquote{font:400 24px/1.35 var(--serif);margin:10px 0 32px;flex:1}.quotes figcaption{display:flex;align-items:center;gap:14px;font-size:13px}.quotes figcaption img{width:42px;height:42px;border-radius:50%;object-fit:cover;filter:grayscale(1)}.quotes figcaption small{display:block;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:6px}.results-note{color:var(--muted);font-size:11px;margin:38px 0 0}.editions>.wrap>h2,.editions>.wrap>.eyebrow,.edition-intro{text-align:center}.edition-intro{color:#66685f}.edition-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;max-width:960px;margin:50px auto 0}.edition-card{background:#e6e4db;padding:32px 35px}.edition-card.print{background:#dedacb;border:1px solid #bfb391}.edition-card-top{display:flex;justify-content:space-between}.edition-card-top .eyebrow{font-size:8px;letter-spacing:1.7px;margin-bottom:20px}.edition-card-top>span:last-child{font-size:10px;color:#807041}.edition-card h3{font:500 39px/1.1 var(--serif);margin-bottom:10px}.edition-card>p{font-size:14px;color:#68695f}.product-display{height:235px;display:flex;align-items:center;justify-content:center;margin:12px 0 20px}.product-display img{height:100%;width:auto;filter:drop-shadow(10px 15px 10px #0003)}.product-display.digital img{height:95%;transform:rotate(7deg)}.price-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-top:1px solid #bfc0b4}.price{font:500 44px/1 var(--serif)}.price-row>span:last-child{font-size:8px;letter-spacing:1px;text-align:right;max-width:120px}.edition-card .button{width:100%}.edition-card .delivery-note{text-align:center;font-size:11px;margin:12px 0 0}.bonuses{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:35px;margin-top:65px;padding:45px 0;border-top:1px solid #c7c6b9;border-bottom:1px solid #c7c6b9}.bonuses .eyebrow{font-size:8px;margin-bottom:18px}.bonuses h3{font:500 32px/1.1 var(--serif);margin:0}.bonuses>div>span{font-size:10px;color:#897b54}.bonuses h4{font-weight:500;font-size:17px;line-height:1.4;margin:20px 0 10px}.bonuses p{font-size:13px;line-height:1.6;color:#676a5d;margin:0}.guarantee{display:flex;gap:32px;align-items:center;max-width:790px;margin:55px auto}.guarantee-number{border:1px solid #a29777;border-radius:50%;width:100px;height:100px;flex:none;display:flex;align-items:center;justify-content:center;flex-direction:column;font:500 48px/1 var(--serif)}.guarantee-number small{font:500 9px var(--sans);letter-spacing:2px;margin-top:5px}.guarantee h3{font:500 28px var(--serif);margin-bottom:10px}.guarantee p{font-size:13px;line-height:1.65;color:#676a5d;margin:0}.bulk{border-top:1px solid #c7c6b9;border-bottom:1px solid #c7c6b9;padding:25px 0}.bulk summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;font:500 26px var(--serif)}.bulk summary small{display:block;font:400 12px var(--sans);color:#676a5d;margin-top:8px}.bulk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}.bulk-grid>a{padding:20px;border:1px solid #c7c6b9}.bulk-grid h4{font:500 24px var(--serif);margin-bottom:15px}.bulk-grid strong{font:400 30px var(--serif)}.bulk-grid p,.bulk>p{font-size:13px;line-height:1.6;margin-top:15px}.bulk-grid span{font-size:12px}.faq-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:100px}.faq{border-bottom:1px solid var(--line)}.faq:first-child{border-top:1px solid var(--line)}.faq summary{display:flex;justify-content:space-between;align-items:center;gap:25px;list-style:none;cursor:pointer;font-size:16px;padding:24px 0}.faq p{font-size:14px;color:var(--muted);line-height:1.7;padding-right:30px;margin-bottom:25px}details[open]>summary b{transform:rotate(45deg)}summary::-webkit-details-marker{display:none}.final-cta{text-align:center;padding:95px 0 110px;background:radial-gradient(ellipse at 50% 100%,#33301f,transparent 70%);border-top:1px solid var(--line)}.final-cta h2{font-size:clamp(54px,6vw,90px);margin-bottom:37px}footer{padding-top:40px;padding-bottom:35px}footer>.brand{font-size:10px}footer>p{font-size:12px;color:var(--muted);max-width:410px;line-height:1.6;margin:16px 0 30px}.footer-links{display:flex;gap:18px;flex-wrap:wrap;font-size:10px;color:var(--muted);padding-top:25px;border-top:1px solid var(--line)}.footer-links>span{margin-right:auto}.skip{position:absolute;left:15px;top:-100px;padding:15px;background:var(--paper);color:var(--ink);z-index:99}.skip:focus{top:10px}dialog{background:#121212;border:1px solid var(--line);color:var(--paper);width:min(1000px,95vw);padding:16px}dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}.close-dialog{display:block;margin:0 0 16px auto;color:var(--paper);background:transparent;border:0;padding:10px}.video-frame{aspect-ratio:16/9}.video-frame iframe{border:0;width:100%;height:100%}[hidden]{display:none!important}@keyframes book-arrive{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.book-object{width:435px}.hero{min-height:810px}.stage-caption{bottom:120px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.nav nav{gap:20px}.hero{min-height:720px}h1{font-size:85px}.book-object{margin-top:95px;width:340px}.orbit{width:400px;height:440px;top:120px}.orbit-two{width:470px;height:340px;top:180px}.hero-actions{gap:18px}.text-link{font-size:12px}.stage-caption{bottom:140px;font-size:8px}.hero-description{max-width:310px}.method-heading{gap:50px}.author-grid,.inside-grid,.faq-grid{gap:50px}.bonuses{gap:20px}.tiny{display:none}.edition-label{right:-13px}.book-stage .halo{width:709px;height:827px;top:-101px}.quotes{gap:27px}.quotes blockquote{font-size:22px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.nav{height:80px}.brand{font-size:10px;letter-spacing:1.2px;gap:9px}.brand-mark{font-size:34px}.brand small{font-size:7px;letter-spacing:1.7px}.nav nav{display:none}.nav-buy{font-size:12px}.nav-buy span{margin-left:15px}.hero{display:flex;flex-direction:column;min-height:0;align-items:stretch}.hero-copy{padding:45px 0 0}.eyebrow{font-size:9px;letter-spacing:1.7px;margin-bottom:23px}h1{font-size:clamp(66px,15vw,102px);line-height:.94;letter-spacing:-2.5px;margin-bottom:20px}.hero-intro{font-size:22px}.hero-intro br{display:none}.hero-description{max-width:390px;font-size:15px}.hero-actions{margin-top:25px}.reader-mini{margin-top:24px}.book-stage{height:500px;margin:0 -20px;overflow:hidden}.book-object{width:290px;margin-top:36px;max-width:70%}.stage-word{font-size:132px;top:190px;letter-spacing:-4px}.book-stage .halo{top:-65px;width:711px;height:661px}.orbit{width:350px;height:350px;top:45px;left:50%}.orbit-two{width:430px;height:260px;top:95px;left:50%}.stage-caption{bottom:32px;left:25px;right:25px;font-size:8px;letter-spacing:1.5px}.edition-label{right:13px;top:130px;font-size:7px}.hero-foot{position:relative;bottom:auto;gap:25px;padding:20px 0;margin-top:0}.hero-foot>span{font-size:7px;max-width:140px;line-height:1.7}.hero-foot a{font-size:10px}.hero-foot a span{padding-left:15px}.discipline-strip>div{flex-wrap:wrap;justify-content:center;padding:22px 0;font-size:8px;gap:16px}.discipline-strip i{font-size:10px}.section{padding:65px 0}h2{font-size:47px;letter-spacing:-1.4px}.method-heading{display:block}.method-heading>p{font-size:15px}.principles{display:block;margin-top:35px}.principles article,.principles article+article{padding:25px 0;border-left:none;border-bottom:1px solid #c7c6b9;position:relative}.principles .number{position:absolute;right:0;top:25px}.principles h3{font-size:30px;margin:0 0 15px}.principles p{max-width:400px}.principles a{margin-top:20px;margin-bottom:5px}.author-grid{display:flex;flex-direction:column;gap:40px}.author-photo{width:min(450px,100%)}.author-photo>img{aspect-ratio:1/1}.author-copy{width:100%}.author-copy p:not(.eyebrow):not(.large-copy){font-size:15px}.signature-row{gap:20px}.inside-grid{display:block;margin-top:0}.inside-book,.book-note{display:none}.inside-intro>p{max-width:100%;font-size:15px}.chapter-browser{margin-top:30px}.chapter-tabs{gap:22px}.chapter-tabs button{font-size:11px}.chapter summary{padding:21px 0}.chapter h3{font-size:22px}.quotes{display:block}.quotes figure{padding-top:25px;margin-top:30px}.quotes blockquote{font-size:25px}.quotes figcaption{margin-bottom:5px}.readers h2{margin-bottom:30px}.results-note{font-size:10px}.edition-cards{grid-template-columns:1fr;max-width:460px;margin-top:35px;gap:20px}.edition-card{padding:28px}.edition-intro{font-size:15px}.edition-card h3{font-size:36px}.product-display{height:220px}.bonuses{grid-template-columns:1fr;gap:25px;margin-top:40px;padding:30px 0}.bonuses>div:not(:first-child){padding-top:20px;border-top:1px solid #c7c6b9;display:grid;grid-template-columns:30px 1fr;column-gap:10px}.bonuses h4{margin:0 0 10px;font-size:18px}.bonuses h4 br{display:none}.bonuses p{grid-column:2}.bonuses p br{display:none}.guarantee{gap:20px;align-items:flex-start;margin:35px 0}.guarantee-number{width:66px;height:66px;font-size:34px}.guarantee-number small{font-size:7px}.guarantee h3{font-size:25px}.guarantee p{font-size:12px}.bulk-grid{grid-template-columns:1fr 1fr;gap:12px}.bulk-grid>a{padding:15px}.bulk-grid h4{font-size:21px}.faq-grid{display:block}.faq-grid>div:first-child{margin-bottom:30px}.faq-grid h2 br{display:none}.faq summary{font-size:15px}.final-cta{padding:65px 0 70px}.final-cta h2{font-size:57px}.footer-links{gap:16px;line-height:1.5}.footer-links>span{flex-basis:100%}.section-top{display:block}}
@media(max-width:370px){.wrap{width:calc(100% - 32px)}.hero-actions{gap:15px}.button{height:70px;padding:0 20px 0 12px;gap:10px}.hero-intro{font-size:19px}.brand{font-size:8px}.book-stage{margin:0 -16px}.chapter-tabs{gap:15px}.chapter-tabs button{font-size:10px}.stage-caption{font-size:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Contain decorative hero layers without narrowing the page viewport. */
main{overflow-x:clip}
.brand-mark svg{display:block;width:42px;height:42px}.signature-row img{filter:invert(1)}
@media(max-width:760px){
.hero{display:flex}.hero-copy{display:contents}.hero-copy>.eyebrow{order:1;margin-top:36px}.hero-copy>h1{order:2}.hero-intro{order:3;margin-bottom:0}.book-stage{order:4;height:395px}.book-object{width:240px;margin-top:25px}.orbit{width:305px;height:305px;top:29px}.orbit-two{width:365px;height:235px;top:70px}.stage-word{font-size:115px;top:143px}.stage-caption{bottom:17px}.edition-label{top:105px}.hero-actions{order:5;margin-top:8px}.hero-description{order:6;margin-top:23px;margin-bottom:0}.reader-mini{order:7;margin:22px 0 25px}.hero-foot{order:8}.brand-mark svg{width:33px;height:33px}
}

@media(max-width:370px){h1{font-size:58px}.book-stage{height:375px}.book-object{width:225px}}
/* Scroll opens the real cover, then expands the revealed paper into the next section. */
.book-journey{position:relative;--open:0;--copy-opacity:1;--page-opacity:0;--page-clip:inset(45% 25% 45% 65%);--book-x:0px;--book-y:0px;--book-scale:1;--book-rotate:-8deg}
.journey-pin{position:sticky;top:0;height:100svh;min-height:720px;isolation:isolate;overflow:hidden}
.journey-pin .hero{height:100%;min-height:0}.journey-pin .hero-copy{opacity:var(--copy-opacity)}
.book-object{width:330px;height:auto;aspect-ratio:2/3;max-width:75%;margin-top:65px;animation:none;transform:translate(var(--book-x),var(--book-y)) rotate(var(--book-rotate)) scale(var(--book-scale));transform-origin:center;filter:drop-shadow(15px 30px 25px #0009);will-change:transform;z-index:4}
.book-object:after{display:none}.book-shell{width:100%;height:100%;position:relative;transform-style:preserve-3d;perspective:1800px;transform:rotateY(-12deg)}
.book-inside{position:absolute;inset:0;background:#f0eee6;border-radius:1px 5px 5px 1px;box-shadow:4px 1px 0 #bab8ab,7px 2px 0 #eeeade,10px 3px 0 #282922;display:flex;flex-direction:column;justify-content:space-between;padding:28px;color:#303328;overflow:hidden}
.book-inside:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0003,transparent 10%,transparent 92%,#0001);pointer-events:none}

.book-leaf{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:left center;transform:rotateY(calc(-155deg * var(--open)));will-change:transform}.book-leaf .hero-book{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;object-fit:cover;border-radius:1px 3px 3px 1px}.cover-back{position:absolute;inset:0;backface-visibility:hidden;transform:rotateY(180deg);background:#e8e5d9;color:#978b6b;display:grid;place-items:center;box-shadow:inset -10px 0 25px #0002}
.opening-page{position:absolute;inset:0;z-index:8;display:flex;align-items:center;clip-path:var(--page-clip);opacity:var(--page-opacity);pointer-events:none;will-change:clip-path,opacity}.opening-page .method-heading{margin-top:35px}/* Not a border. A border cannot paint thinner than one device pixel, so while
   the spread is zoomed down to a fifth the rule held a full pixel while the
   type around it shrank with the zoom, and it read as a heavy bar. A
   background fill is antialiased instead, so it thins out with everything
   else. Sized in em so it tracks the type rather than the screen: .07em is
   the 1px it was at the spread's own size. */
.opening-page .section-top{padding-bottom:5px;background-image:linear-gradient(#c7c6b9,#c7c6b9);background-repeat:no-repeat;background-position:0 100%;background-size:100% .07em}.opening-page h2{font-size:clamp(52px,5.3vw,84px)}.book-journey.is-open .opening-page{pointer-events:auto}.journey-pin .hero-foot,.journey-pin .hero-claim{opacity:var(--copy-opacity)}.scroll-invitation,.more-reviews button,.watch-cue{display:flex;align-items:center;gap:18px;color:var(--gold);font-size:8px;letter-spacing:2px;cursor:pointer}.scroll-invitation{position:absolute;z-index:6;bottom:25px;left:50%;transform:translateX(-50%);opacity:var(--copy-opacity)}.hero-foot>a{visibility:hidden}.hero-foot{padding-top:21px}.method-principles{padding-top:55px}.method-principles .principles{margin-top:0}.stage-caption,.edition-label{opacity:var(--copy-opacity)}
@media(max-width:1100px){.book-object{width:300px;margin-top:85px}.opening-page .method-heading{gap:50px}}
@media(max-width:760px){.journey-pin{min-height:710px;height:100svh}.journey-pin .hero{justify-content:flex-start}.journey-pin .hero-copy>.eyebrow{margin-top:18px;margin-bottom:14px}.journey-pin h1{font-size:64px;margin-bottom:18px}.journey-pin .hero-intro{font-size:18px;line-height:1.5}.journey-pin .book-stage{height:auto;flex:0 1 300px;min-height:0;overflow:visible}.journey-pin .book-object{width:210px;max-width:none;margin-top:28px;aspect-ratio:2/3}.journey-pin .hero-description,.journey-pin .reader-mini,.journey-pin .hero-foot{display:none}.journey-pin .hero-actions{margin:16px 0 auto;justify-content:flex-start;gap:10px}.journey-pin .stage-caption{bottom:0;display:none}.journey-pin .edition-label{font-size:6px}.journey-pin .orbit{width:280px;height:280px;top:35px}.journey-pin .orbit-two{width:350px;height:220px;top:75px}.journey-pin .stage-word{top:140px;font-size:108px}.scroll-invitation{bottom:18px;font-size:7px;white-space:nowrap}.book-inside{padding:20px}.opening-page .method-heading{margin-top:35px}.opening-page h2{font-size:49px}.opening-page .method-heading>p{font-size:17px;line-height:1.7}.opening-page .wrap{padding:35px 0}.method-principles{padding-top:25px}}
@media(max-width:370px){.journey-pin h1{font-size:57px}.journey-pin .hero-intro{font-size:16px}.journey-pin .book-object{width:195px}.journey-pin .hero-actions{gap:12px}.journey-pin .hero-actions .text-link{font-size:10px}.opening-page h2{font-size:43px}.opening-page .method-heading>p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.book-journey{height:auto!important}.journey-pin{position:relative;height:auto;overflow:visible}.journey-pin .hero{height:auto;min-height:730px}.opening-page{position:relative;clip-path:none;opacity:1;padding:70px 0;pointer-events:auto}.scroll-invitation{display:none}.book-object{transform:none!important}.book-leaf{transform:none!important}}
@media(max-width:760px){.journey-pin .hero-copy>*{opacity:var(--copy-opacity)}}
@media(prefers-reduced-motion:reduce){.journey-pin .hero-copy,.journey-pin .hero-copy>*,.stage-caption,.edition-label,.hero-foot{opacity:1!important}}
/* The section lives physically inside the book. The entire book scales toward the reader. */
.book-shell{transform:rotateY(var(--book-yaw,-12deg))}
.book-inside{padding:0}.book-inside:after{opacity:calc(1 - var(--open));z-index:3}
.book-inside .opening-page{inset:auto;left:50%;top:50%;width:var(--view-width,100vw);height:var(--view-height,100vh);transform:translate(-50%,-50%) scale(var(--content-scale,.28));transform-origin:center;clip-path:none;opacity:1;will-change:auto;max-width:none}
.opening-page:before,.opening-page:after{content:'THE ART OF PRACTICE';position:absolute;left:56px;top:-220px;color:#82775c;font-size:22px;letter-spacing:5px}
.opening-page:after{content:'LAIDO DITTMAR';top:auto;bottom:-220px}
@media(max-width:760px){.opening-page:before,.opening-page:after{display:none}}
@media(prefers-reduced-motion:reduce){.reduced-method:before,.reduced-method:after{display:none}.journey-pin .hero{height:auto}.book-inside .opening-page{display:none}.book-journey .reduced-method{display:block;padding:70px 0}.book-journey .reduced-method .method-heading{margin-top:25px}}
@media(prefers-reduced-motion:reduce){.book-journey>.reduced-method{position:relative;inset:auto;width:auto;height:auto;transform:none;clip-path:none;opacity:1;pointer-events:auto}}
.book-inside{z-index:0;isolation:isolate}.book-leaf{z-index:2}

/* End the 3D camera move on native, untransformed live text. */
.journey-pin>.native-method{position:absolute;inset:0;width:100%;height:100%;transform:none;clip-path:none;opacity:1;filter:none;will-change:auto;z-index:9;pointer-events:auto}
/* Refined edition: original photographed cover pose, with its hinge at the spine. */
.book-object{width:360px;max-width:83%;aspect-ratio:1042/1400;margin-top:52px;filter:drop-shadow(18px 30px 22px #0009)}
.book-shell{transform:none}.book-leaf{transform-origin:20% center}.book-leaf .hero-book{object-fit:contain;border-radius:0;box-shadow:none}
.book-inside{inset:4% 2% 1% 20%;opacity:var(--inside-opacity,0);border-radius:1px 3px 3px 1px;box-shadow:3px 1px 0 #bbb8aa,6px 2px 0 #e6e1d4,8px 3px 0 #20221c}
.cover-back{inset:4% 2% 1% 20%;background:linear-gradient(90deg,#ece9dd,#e4e0d3);box-shadow:inset -12px 0 25px #0002}
.journey-pin .hero{align-items:start}.journey-pin .hero-copy{padding-top:80px}
.journey-pin .book-stage{height:100%}.journey-pin .hero h1{font-size:clamp(82px,7.7vw,118px)}
.hero-description{font-size:17px;line-height:1.65;max-width:365px}.hero-intro{font-weight:400;letter-spacing:-.3px}
.hero-copy>.eyebrow{letter-spacing:2.5px}.hero-copy h1 em{background:linear-gradient(100deg,#bca061,#eee2b7 55%,#c4ae73);background-clip:text;-webkit-background-clip:text;color:transparent}
/* A sheen across "Natural.", made of the word's own light stop (#eee2b7, the
   55% of the gradient underneath) so nothing new is introduced. It is a second
   layer, transparent except for a narrow band, sliding over a base that never
   moves: one pass takes four seconds and then it waits, which is why it reads
   as light catching the letter rather than an effect running. Parked off the
   word at rest, so with motion reduced it looks exactly as it did. */
.hero-copy h1 em{background-image:linear-gradient(105deg,transparent 28%,#eee2b7 50%,transparent 72%),linear-gradient(100deg,#bca061,#eee2b7 55%,#c4ae73);background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:135% 0,0 0;animation:natural-sheen 8s ease-in-out infinite}
@keyframes natural-sheen{0%,14%{background-position:135% 0,0 0}64%,100%{background-position:-45% 0,0 0}}
@media(prefers-reduced-motion:reduce){.hero-copy h1 em{animation:none}}



.nav nav a,.text-link{transition:color .2s}.nav nav a:hover,.text-link:hover{color:#e8d9af}
.reader-mini{margin-top:32px}.reader-mini p{font-size:13px}.reader-mini small{font-size:12px}.avatars img{width:38px;height:38px}
.halo{background:radial-gradient(ellipse closest-side at 55% 44%,#ddbc6d32,#9a834c13 60%,#9a834c00 100%)}
.orbit-one{border-color:#dcc88d30}.orbit-two{border-color:#dcc88d1c}.stage-word{color:#e0d2aa12;letter-spacing:-6px}
.stage-caption{font-size:10px;bottom:125px}.edition-label{font-size:9px;letter-spacing:2.6px}.scroll-invitation{font-size:9px;letter-spacing:2.6px;gap:22px;bottom:28px}
.scroll-invitation>span:last-child{font-size:16px}.hero-foot{bottom:25px}.hero-foot>span{font-size:9px;letter-spacing:2px}
.paper{background-color:#f0eee6;background-image:radial-gradient(ellipse at 0% 10%,#fff5,transparent 65%)}
.section-top>.eyebrow{margin-bottom:22px}.tiny{font-size:10px;letter-spacing:1.8px}.eyebrow{font-size:11px}
.method-heading>p{font-size:18px;line-height:1.75;color:#5d6055}.principles article{padding-top:40px}.principles h3{font-size:37px;line-height:1.08}.principles p{font-size:16px;color:#5d6055}.principles a{font-size:12px;padding:10px 0;border-bottom:1px solid #bdb39355}
.author{background:radial-gradient(ellipse at 5% 60%,#b3995220,transparent 55%),var(--ground)}.author-grid{gap:100px}.author-photo{padding:0 0 34px 24px}.author-photo>img{aspect-ratio:4/4.8;object-position:center 35%}.author-photo:before{border-color:#dcc88d38;right:35px;top:35px}.author-photo>span{font-size:9px;letter-spacing:2.1px;margin-top:25px}.author-copy p:not(.eyebrow):not(.large-copy){font-size:17px;line-height:1.75;color:#b4b4a9}.signature-row small{font-size:9px}.watch{font-size:14px;line-height:1.6;padding-bottom:14px}
#inside .inside-intro{align-self:start;position:sticky;top:50px}.inside-intro>p{font-size:17px;max-width:340px}.inside-book{width:245px;margin:55px 0 45px 70px}.chapter-tabs{gap:28px}.chapter-tabs button{font-size:13px;padding-bottom:22px}.chapter h3{font-size:25px}.chapter summary{padding:24px 0}.chapter>div{font-size:15px}.chapter-foot,.book-note{font-size:12px}.chapter[open]{background:#e3dfd133}.chapter summary b{transition:transform .2s}.chapter summary:hover h3{color:#887342}
.readers{background:var(--ground)}.readers .quotes{grid-template-columns:1.25fr 1fr;column-gap:70px;row-gap:40px}.readers .quotes figure:first-child{grid-row:span 2;border-color:#dcc88d66;padding-right:40px}.readers .quotes figure:first-child .quote-mark{font-size:125px;height:80px;margin-top:12px}.readers .quotes figure:first-child blockquote{font-size:clamp(32px,3.5vw,49px);line-height:1.14;letter-spacing:-.6px;color:#e0d2aa}.readers .quotes figcaption{font-size:14px}.readers .quotes figcaption img{width:48px;height:48px}.readers .quotes figcaption small{font-size:9px}.readers .results-note{font-size:12px}
.edition-cards{gap:30px;max-width:1320px}.edition-card{padding:30px 34px;border:1px solid #c8c6b866;background:linear-gradient(145deg,#f8f6ef,#e6e4db);box-shadow:0 25px 40px -30px #35352366}.edition-card.print{background:linear-gradient(135deg,#ece6d4,#dcd5c1);border-color:#b9a773}.edition-card h3{font-size:24px}.edition-card-top .eyebrow{font-size:10px}.product-display{height:255px;position:relative}.product-display:before{content:'';position:absolute;inset:20% 0 0;background:radial-gradient(ellipse,#fff9,transparent 70%);pointer-events:none}.product-display img{position:relative;transition:transform .5s}.edition-card:hover .product-display img{transform:translateY(-5px)}.edition-card:hover .product-display.digital img{transform:translateY(-5px) rotate(5deg)}.product-display.app img{transform:none;height:112%}.product-display.bundle img{width:108%;height:auto}.edition-card{display:flex;flex-direction:column}.edition-card .price-row{margin-top:auto}.edition-card:hover .product-display.app img{transform:translateY(-5px)}.price{font-size:49px}.price-row>span:last-child{font-size:10px}.edition-card .delivery-note{font-size:12px}.edition-card .button{width:100%}
.bonuses{grid-template-columns:repeat(3,1fr);gap:34px;padding:48px 0 44px}.bonuses>div:first-child{grid-column:1/-1;display:flex;align-items:end;justify-content:space-between;margin-bottom:0}.bonuses>div:first-child h3{font-size:40px}.bonuses>div:first-child h3 br{display:none}.bonuses .eyebrow{font-size:10px;margin-bottom:6px}.bonus-visual{height:205px;margin-bottom:25px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#d3ccb980,transparent 70%);overflow:hidden}.bonus-visual img{max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 12px 10px #16190f18)}.bonus-01{background:#d7d3c7}.bonus-01 img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(1)}.bonuses h4{font-size:21px;line-height:1.35;margin-top:16px}.bonuses p{font-size:15px;line-height:1.7}.bonuses>div>span{font-size:11px}.guarantee{max-width:880px;margin:65px auto}.guarantee p{font-size:14px;line-height:1.75}.guarantee h3{font-size:32px}.faq summary{font-size:17px;padding:26px 0}.faq p{font-size:16px;color:#b4b4a9}.final-cta{background:radial-gradient(ellipse at 50% 120%,#75623b70,transparent 65%),var(--ground);padding:110px 0 125px}.final-cta h2{font-size:clamp(60px,6.7vw,102px)}.footer-links{font-size:12px;row-gap:14px}
@media(min-width:1500px){.book-object{width:435px}}
@media(max-width:1100px) and (min-width:761px){.book-object{width:340px;margin-top:75px}.journey-pin .hero-copy{padding-top:65px}.journey-pin .hero h1{font-size:83px}.hero-description{font-size:16px;max-width:310px}.hero-actions{gap:18px}.author-grid{gap:55px}.readers .quotes{gap:35px}.readers .quotes figure:first-child{padding-right:10px}.bonus-visual{height:160px}}
@media(max-width:760px){.journey-pin .hero{align-items:stretch}.journey-pin .hero-copy{padding:0}.journey-pin .hero h1{font-size:clamp(60px,13.8vw,83px)}.journey-pin .book-object{width:270px;aspect-ratio:1042/1400;margin-top:24px}.journey-pin .book-stage{min-height:365px;flex:0 0 auto;height:min(43svh,430px);display:flex;align-items:center;justify-content:center}.journey-pin .book-stage .book-object{margin:0}.journey-pin .hero-actions{margin-top:16px;margin-bottom:44px;justify-content:flex-start;gap:24px}.journey-pin .hero-copy>.eyebrow{font-size:9px;margin-top:24px}.journey-pin .hero-intro{font-size:18px}.journey-pin .edition-label{font-size:8px;top:85px;right:16px}.journey-pin .orbit{width:310px;height:310px;top:20px}.journey-pin .orbit-two{width:370px;height:255px;top:70px}.journey-pin .stage-word{top:135px;font-size:123px}.scroll-invitation{font-size:8px;bottom:20px}.journey-pin{min-height:780px}.section{padding:70px 0}.method-principles{padding-top:25px}.principles h3{font-size:31px}.principles article,.principles article+article{padding-top:30px}.author-grid{gap:40px}.author-photo{padding:0 0 25px 18px}.author-photo>img{aspect-ratio:1/1.08}.author-copy p:not(.eyebrow):not(.large-copy){font-size:16px}.author-photo>span{font-size:8px}#inside .inside-intro{position:static}.inside-intro>p{font-size:16px}.chapter h3{font-size:23px}.chapter-tabs{gap:22px}.chapter-tabs button{font-size:12px}.readers .quotes{display:block}.readers .quotes figure:first-child{padding-right:0}.readers .quotes figure:first-child .quote-mark{font-size:90px;height:60px}.readers .quotes figure:first-child blockquote{font-size:35px;line-height:1.18}.readers .quotes figure{margin-top:35px;padding-top:27px}.readers .quotes figure+figure blockquote{font-size:25px}.edition-card{padding:28px}.edition-card h3{font-size:38px}.product-display{height:240px}.edition-card-top .eyebrow{font-size:9px}.bonuses{display:grid;grid-template-columns:1fr;padding:35px 0;gap:30px}.bonuses>div:first-child{display:block}.bonuses>div:first-child h3{font-size:35px}.bonuses .eyebrow{margin-bottom:16px}.bonuses>div:not(:first-child){display:block}.bonus-visual{height:230px;margin-bottom:20px}.bonuses h4{margin:12px 0}.bonuses h4 br{display:none}.bonuses p{font-size:15px}.guarantee{margin:40px 0;gap:20px}.guarantee h3{font-size:27px}.guarantee p{font-size:13px}.faq summary{font-size:16px}.faq p{font-size:15px}.final-cta{padding:80px 0 90px}.final-cta h2{font-size:62px}.footer-links{font-size:11px}.opening-page .method-heading>p{font-size:17px}}
@media(max-width:370px){.journey-pin .hero h1{font-size:56px}.journey-pin .hero-intro{font-size:16px}.journey-pin .book-object{width:240px}.journey-pin .book-stage{min-height:335px}.journey-pin .hero-actions{gap:15px}.journey-pin{min-height:740px}.journey-pin .hero-actions .text-link{font-size:11px}.chapter-tabs{gap:16px}.chapter-tabs button{font-size:11px}}
/* Match the original photographed cover’s tapered page block as the hinge opens. */
.book-inside,.cover-back{inset:0 5% 0 20%;clip-path:polygon(0 calc(8% * (1 - var(--open))),100% 0,100% 100%,0 calc(100% - 2% * (1 - var(--open))))}
/* The cover and interior share one projective plane matching the original mockup. */
.book-static{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:5;pointer-events:none;opacity:var(--static-opacity,1)}
.book-shell{position:absolute;left:20%;top:0;width:74%;height:100%;transform-origin:0 0;transform:var(--book-projection,none);perspective:1800px}
.book-inside,.cover-back{inset:.9% 1.7% .9% 0;clip-path:none;opacity:1}
.book-leaf{transform-origin:left center}.book-leaf .hero-book{object-fit:fill}
@media(prefers-reduced-motion:reduce){.book-static{opacity:1}.book-shell{visibility:hidden}}
.book-shell{opacity:calc(1 - var(--static-opacity,1))}
.opening-page{background-image:none}

/* One artwork throughout: rectify the original mockup inside its hinged plane. */
.cover-front{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;background:var(--ground)}.book-leaf .cover-front .hero-book{position:absolute;left:0;top:0;width:var(--mockup-width);height:var(--mockup-height);max-width:none;transform-origin:0 0;transform:var(--cover-unproject);object-fit:fill}

.book-shell{opacity:1}.book-inside{opacity:var(--open);box-shadow:none}.book-inside:after{opacity:calc(1 - var(--open))}
@media(max-width:760px){.journey-pin .book-object{width:250px}}
.bonuses>div:first-child h3 em{margin-left:.18em}
/* Content-led spacing: keep related elements together at every screen height. */
@media(min-width:761px){
 .journey-pin{height:min(100svh,820px)}
 .journey-pin .hero-copy{padding-top:48px;padding-bottom:70px}
 .journey-pin .book-stage{align-self:start;height:auto}
 /* The caption sits on the readers row, his ruling. It had drifted 15px high as
   the copy column changed around it, so the margin takes those 15 back. */
.stage-caption{position:relative;inset:auto;margin:53px 4% 0;gap:18px}
 .hero-foot{bottom:22px}
 .section{padding:80px 0}
 .method-principles{padding-top:38px;padding-bottom:72px}
 .author-grid{gap:72px}
 .author-photo>img{aspect-ratio:4/4.3}
 .inside-grid{gap:72px}
 .inside-book{width:210px;margin:30px 0 30px 55px}
 .readers h2{margin-bottom:34px}
 .readers .quotes{column-gap:48px;row-gap:28px;align-items:start}
 .readers .quotes figure:first-child blockquote{font-size:clamp(32px,3vw,43px);flex:initial}
 .readers .quotes figure:first-child{padding-right:20px}
 .readers .quotes figure:first-child .quote-mark{font-size:90px;height:52px;margin-top:0}
 .quotes blockquote{margin-bottom:24px}
 .results-note{margin-top:28px}
 .edition-cards{margin-top:34px}
 .bonuses{margin-top:44px;padding:34px 0;gap:28px}
 .guarantee{margin:42px auto}
 .faq-grid{grid-template-columns:1fr 1.75fr;gap:64px;align-items:start}
 .faq-grid>div:first-child{position:sticky;top:40px}
 .faq summary{padding:21px 0}
 .final-cta{padding:76px 0 84px}
}
@media(max-width:760px){
 .journey-pin{height:min(100svh,820px)}
 .section{padding:54px 0}
 .method-principles{padding-top:20px;padding-bottom:45px}
 .author-grid{gap:30px}
 .readers h2{margin-bottom:24px}
 .readers .quotes figure{margin-top:26px;padding-top:24px}
 .readers .quotes figure:first-child .quote-mark{height:48px}
 .quotes blockquote{margin-bottom:22px}
 .results-note{margin-top:26px}
 .edition-cards{margin-top:28px}
 .bonuses{margin-top:30px;padding:28px 0;gap:24px}
 .bonus-visual{height:190px;margin-bottom:18px}
 .guarantee{margin:30px 0}
 .final-cta{padding:56px 0 64px}
}
@media(min-width:761px){
 .readers .quotes{grid-template-columns:1fr 1fr}
 .readers .quotes figure:first-child{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:minmax(0,1fr) 190px;column-gap:40px;padding-right:0}
 .readers .quotes figure:first-child .quote-mark{grid-column:1/-1;height:42px}
 .readers .quotes figure:first-child blockquote{margin:8px 0 0;font-size:clamp(30px,2.7vw,39px)}
 .readers .quotes figure:first-child figcaption{align-self:end;padding-bottom:5px}
}

/* Rasterize live text at its displayed size throughout the camera zoom. */
.journey-pin>.zoom-method{position:absolute;left:var(--reading-left);top:var(--reading-top);right:auto;bottom:auto;width:var(--view-width);height:var(--view-height);zoom:var(--reading-scale);transform:none;clip-path:none;opacity:1;filter:none;will-change:auto;z-index:9;pointer-events:none}
.journey-pin>.zoom-method{background:transparent}

/* Keep the original page block and rear board behind the hinged cover. */
.book-body{position:absolute;inset:0;z-index:0;pointer-events:none}
.book-body img{position:absolute;left:0;top:0;width:var(--mockup-width);height:var(--mockup-height);max-width:none;transform-origin:0 0;transform:var(--cover-unproject);clip-path:polygon(94% 3%,100% 3%,100% 97%,94% 100%)}
.book-inside{opacity:calc((var(--open,0) - .05) * 14)}

/* The camera uses the entire viewport; only the resting hero stays compact. */
@media(prefers-reduced-motion:no-preference){.journey-pin{height:100svh}.journey-pin .hero{height:min(100%,820px)}}
/* Back to the blur this always had. I widened it to 44px to get a shadow onto
   the gold button, but the reason there was none is that the book was painting
   UNDER the button, which the stage's z-index fixed. A 44px blur at low alpha
   over a near-black ground bands at 8-bit precision, and the edge of the
   filter's own surface reads as a faint rectangle around the book. */
.book-object{filter:drop-shadow(18px 30px 22px rgb(0 0 0 / var(--book-shadow-alpha,.6)))}
.cover-back{box-shadow:inset -12px 0 25px rgb(0 0 0 / var(--page-shadow-alpha,.13))}

/* Retain the photographed floor shadow separately from the opening cover. */
.book-cast-shadow{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none;clip-path:inset(0 80% 0 0);opacity:var(--baked-shadow-opacity,0)}

/* Use the same layout zoom before and after the page leaves the 3D plane. */
/* zoom re-lays the spread out every frame, and inside the book that lands the
   text on a coarse grid: measured steps of 0, -2.9 and -5.8px between frames
   3px of scroll apart. Down there the type is a third of its size and nobody
   is reading it, so it scales by transform instead and simply glides. zoom
   takes over from .4, where the spread is large enough to read. */
.book-inside .opening-page{left:50%;top:50%;zoom:1;transform:translate(-50%,-50%) scale(var(--content-scale));transform-origin:center;background:transparent}
/* Phone: both hero buttons sit side by side above the fold. The hero is capped
   at what is actually visible at scroll 0 (the nav takes 80px of it) and the
   book stage takes every pixel left over, instead of leaving it black. */
@media(max-width:760px){
.hero-copy>.eyebrow,.hero h1,.hero-intro{text-align:center}
.hero-actions{align-items:center}
.hero-actions .button{position:relative;width:min(100%,286px);margin:0 auto;padding:7px 14px;min-height:50px;gap:0}
.hero-actions .button .tile{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:7px}
.hero-actions .button .tile svg{width:18px;height:18px}
.hero-actions .button .btn-label{flex:1;font-size:18px;letter-spacing:0}
.journey-pin .hero{max-height:calc(100svh - 120px)}
.journey-pin .book-stage{height:auto;flex:1 1 auto;min-height:0}
.journey-pin .hero-actions{margin:10px 0 14px;gap:8px;flex-direction:column;align-items:center;justify-content:center}
.journey-pin .book-object{width:250px}
}
/* The tagline is a display line, so it takes the page's display serif like
   every other one (h1, h2, card titles, prices) rather than the body face. */
.hero-intro{font-family:var(--serif);font-weight:400;letter-spacing:0;line-height:1.3;font-size:30px}
@media(max-width:760px){.journey-pin .hero-intro,.hero-intro{font-size:20px}}
@media(max-width:370px){.hero-intro{font-size:21px}}
/* A tapered gold rule under the last phrase, drawn as a background so the
   face, weight and size are untouched. Same gradient language as .caption-line. */
.hero-intro .underscore{background-image:linear-gradient(90deg,#dcc88d00,#dcc88d 14%,#dcc88d 86%,#dcc88d00);background-repeat:no-repeat;background-size:100% 2px;background-position:0 calc(100% - 2px);padding-bottom:0}
@media(max-width:760px){.hero-intro .underscore{background-size:100% 1.5px;background-position:0 calc(100% - 1.5px);padding-bottom:0}}
/* Line the stage caption up with the readers row: it sat 35px above it.
   The book drops the same 35px so the composition holds. Desktop only, the
   phone hero is capped to the fold and has no room to give. */
@media(min-width:761px){
.book-object{margin-top:87px}
}
/* Wide screens have their own book width and caption position, so the desktop
   alignment above does not reach them. 435 -> 391 keeps the book in proportion
   with the 360 used below 1500, and the margin closes the last 13px. */
@media(min-width:1500px){.book-object{width:391px;margin-top:74px}}
/* The secondary is gold text on transparent, so at the hero's fade opacity it
   still reads against black while the filled primary has gone dark. It takes
   --copy-opacity a second time, squaring it, so the pair clears together. */
.button-ghost{opacity:var(--copy-opacity,1)}
/* The foot rule was pinned to the hero's bottom, so its distance from the
   readers line moved with the viewport (89px at 1600, 116px at 1340). In flow
   under both columns it keeps one gap at any size: 48px, matching the nav
   rule's distance from the eyebrow. */
@media(min-width:761px){
.journey-pin .hero-copy,.hero-copy{padding-bottom:0}
.hero-foot{position:static;grid-column:1/-1;margin-top:48px;align-self:start}
.hero{align-content:start}
}
/* The pin is 100svh but starts below the nav, so its bottom is a nav's height
   past the fold and anything anchored there goes with it: the invitation sat
   75px out of sight at rest. Lifted clear, about 60px under the foot rule. */
/* Centred in the band the reader actually sees: between the foot row and the
   fold. page.js measures both and publishes the midpoint, because at rest the
   pin has not stuck yet and its bottom is a nav-height past the fold, so no
   fixed offset from it can be the middle of anything. */
@media(min-width:761px){.scroll-invitation{top:var(--invite-centre,760px);bottom:auto;transform:translate(-50%,-50%)}
/* space-between centres nothing: the strapline and the link are different
   lengths, so the middle child lands off centre. Equal outer columns put the
   ticker dead centre on the page and leave the two ends where they were. */
.hero-foot{display:grid;grid-template-columns:minmax(288px,1fr) minmax(0,768px) minmax(288px,1fr);align-items:start;column-gap:16px}
.hero-foot>a{justify-self:end}}
/* The outer tracks reserve the strapline's full one line (281px measured)
   so it never wraps; equal tracks keep the ticker centred. Under 1100 the
   middle would be a sliver, so the ticker steps out and the row is the two
   ends again. */
@media(max-width:1100px){.ticker{display:none}.hero-foot{display:flex}}
/* Nothing shares the slider's line: the strapline and the link both sit on the
   row above, beside the label. So the ticker stops being a box in the middle
   column and hands its two parts straight to the row, the label centred in the
   middle track and the slider spanning the section edge to edge. */
@media(min-width:1101px){.ticker{display:contents}
.hero-foot>span{grid-column:1;grid-row:1}
.ticker-window{grid-column:1/-1;grid-row:1}}
/* The label that used to hold the row open above the slider is gone, and the
   link is shorter than it was, so the slider would have risen 10px. It keeps
   the y it had. */
/* Audience ticker, ported from the funnel landing's AudienceTicker
   (src/components/Hero.sales.jsx): the same 13 disciplines doubled for the
   loop, the same 32s marquee, mask and label rules. It rides in the foot row,
   below the rule, between the strapline and the link, and takes that row's
   --copy-opacity fade with it rather than declaring its own. */
.ticker{width:100%;max-width:768px;margin:0 auto;pointer-events:none}
.ticker-label{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:10px}
.ticker-rule{width:40px;height:1px;background:linear-gradient(90deg,transparent,#dcc88d66)}
.ticker-rule-r{background:linear-gradient(270deg,transparent,#dcc88d66)}
.ticker-cap{font-family:var(--sans);font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:2px;color:var(--muted)}
.ticker-window{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.ticker-row{display:flex;width:max-content;align-items:center;gap:24px;animation:marquee 72s linear infinite}
.ticker-row span{display:flex;align-items:center;gap:24px;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.24em;color:#8a8a95}
.ticker-row i{display:block;width:4px;height:4px;border-radius:50%;background:#dcc88d;flex:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){.ticker{display:none}}

/* At rest the pin has not stuck yet, so its bottom sits a nav-height below
   the fold and anything anchored there goes with it. On the phone the
   invitation leaves the corner and simply follows the hero in flow, which is
   what "below Explore the book" means. The hero gives up 40px for it, which
   the book does not pay for: its width is fixed, so a shorter stage never
   shrinks it. */
@media(max-width:760px){.scroll-invitation{position:static;transform:none;margin:14px auto 0;justify-content:center}}
/* Phone only. The book is centred on its BOX, but the mockup carries the page
   edges down its right side, so the artwork reads right of centre. It moves
   6px left, which is as far as it can go: the orbit dot sits 8px off the
   cover at 375 and the shift must not swallow it. Only the right margin
   changes, so the width and the vertical position are untouched.
   The tagline sat 18px under "a Natural." and flush against the stage. It
   takes 6px off the top and gives the same 6px back underneath, so it centres
   in that gap while the heading and the book stay exactly where they are. */
@media(max-width:760px){
.journey-pin .book-stage .book-object{margin:0 12px 0 0}
.journey-pin h1{margin-bottom:12px}
.journey-pin .hero-intro{margin-bottom:6px}
}
/* space-between only centres the middle when the two ends match, and they do
   not: the brand is 222px against 121px of "Get the book", which pushed the
   links 50px right. Equal outer tracks centre them on the page; the buy link
   still sits at the far end. Desktop only: the phone hides the links, and with
   two items in three tracks the buy link fell into the middle one. */
@media(min-width:761px){.nav{display:grid;grid-template-columns:1fr auto 1fr}
.nav-buy{justify-self:end}}
/* The arrow is a pointer, not part of the line, so counting it in the box
   pulled the words 18px left of centre. It leaves the flow on desktop and
   hangs off the end at the same 22px, so the centring lands on the text. */
@media(min-width:761px){.scroll-invitation>span:last-child{position:absolute;left:100%;margin-left:22px;top:0;bottom:0;display:flex;align-items:center}}
/* The invitation is the one thing on the page asking to be used, so it moves:
   a slow rise and fall, the words and the arrow on the same beat so the line
   moves as one. The positioning transform lives on the parent and the motion on
   the two spans, so they never fight. Clicking it runs the same glide as the
   nav links do. The phone keeps the line exactly as it was, still: no float
   there, same box, same place. */
@keyframes invite-float{0%,100%{transform:translate3d(0,-3px,0)}50%{transform:translate3d(0,4px,0)}}
@media(min-width:761px){.scroll-invitation>span{animation:invite-float 3.6s ease-in-out infinite;will-change:transform;backface-visibility:hidden}
.scroll-invitation:hover{color:#f0e3b8}}
@media(prefers-reduced-motion:reduce){.scroll-invitation>span{animation:none}}
/* The stage carries isolation:isolate, so the book's z-index 4 is spent inside
   it and the stage itself paints at auto, before the buttons that follow it in
   the column. That put the book, and the shadow it casts, UNDER the gold
   plate: the bottom of the cover was simply cut off. The stage paints above
   the actions now, and gives up pointer events so the buttons stay clickable
   where the book crosses them. Phone only: on desktop they sit in separate
   columns and never meet. */
@media(max-width:760px){.journey-pin .book-stage{z-index:2;pointer-events:none}
.journey-pin .hero-actions{position:relative;z-index:1}}
/* The funnel's CTA is 26px, but inside an 80px button with a second line under
   it. The hero pair is 56px with nothing under it, so the same 26px reads as
   shouting. They take the phone's treatment, which is the proportion that
   reads right: a step smaller and no negative tracking. The edition cards keep
   the clamp, since those buttons do carry the second line. */
@media(min-width:761px){.hero-actions .button .btn-label{font-size:19px;letter-spacing:0}}
/* No scrollbar on the page: the book fills the viewport and a track down the
   edge of an open spread reads as part of the page. */
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
/* The claim keeps its place at the left but steps over the rule, so the line
   reads as the end of the hero rather than the top of the ticker. It leaves
   the row's flow to do it, which is why the link takes the right end on its
   own below 1101. */
/* The claim is its own line above the rule now, not a member of the row below
   it, so the rule reads as the end of the hero. The 48px he set between the
   readers line and the rule is unchanged; the claim sits inside it, 10px clear
   of the rule. */
.hero-claim{margin:0;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px;color:var(--muted)}
@media(min-width:761px){.hero-claim{grid-column:1/-1;align-self:start;margin-top:27px}
/* The rule sits the same 10px clear of the claim above it and the disciplines
   below it, so it reads as a divider between the two rather than the lid of
   the ticker. The link rides the claim's line, which is where it always was. */
.hero-foot{margin-top:10px;padding-top:10px}}
@media(max-width:760px){.journey-pin .hero-claim{display:none}}
/* The two hairlines ran the full wrap and stopped dead at each end, which is
   what read as being cut off on the right. They are drawn as a gradient now
   rather than a border, so each one arrives out of nothing and leaves into
   nothing. Same colour, same 1px, same place: the nav keeps its 103px and the
   foot's padding takes back the pixel the border used to hold. */
.nav,.hero-foot{background-image:linear-gradient(90deg,transparent,var(--line) 10%,var(--line) 90%,transparent);background-repeat:no-repeat;background-size:100% 1px}
.nav{background-position:0 100%}
.hero-foot{background-position:0 0}
@media(min-width:761px){.hero-foot{padding-top:11px}}
/* The warmer ground, and the two things that have to come with it.
   #0a0908 is a four percent lift, warm, R >= G > B so it can never drift back
   toward the green that was thrown out. One value: --ground, and the cover
   plate follows it.
   The halo is why the lift failed twice, and the cause was its sizing. A
   radial-gradient defaults to farthest-corner, so with the centre off at 55% 44%
   the ramp reached zero only at the far corner and every nearer edge of the box
   cut it mid-fade: a hard line at the box edge, measured at x=500 against a box
   starting at 504. closest-side ends the ramp at the nearest edge instead, but
   on the old box that also made the glow smaller than it was. So the box grew
   to suit the glow rather than the other way round: 780 to 925 square, moved up
   to hold the same centre, which gives closest-side the same 415px reach the
   farthest-corner ramp used to have, and the stop that sat at 248px sits at 248
   still. Same colour, same peak, same size, and zero everywhere the box stops.
   The grain is the other half, and it is not decoration here: a glow this
   faint quantises to one-level steps on a near-black ground, and noise is
   what dithers those out. 3.5%, one fixed layer, no clicks. If a boundary is
   still visible after this, the answer is --ground back to #000 rather than
   another pass at the halo. */
body:after{content:'';position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.0275;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");background-size:180px 180px}
/* The nav names the three things you can actually get, and each one lands on
   its own card. It reads in the page's own label voice rather than the button
   voice: Barlow at 600, small, wide tracking, caps, champagne, which is the
   treatment the eyebrow, the stage caption and the card labels already share.
   Barlow Condensed 800 belongs to buttons and nowhere else, so borrowing it
   here made three links look like three small CTAs beside the one real one. */
.nav nav{font-weight:600;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);gap:38px}
.nav nav a:hover{color:#f0e3b8}
/* A slim champagne ring on the reader avatars. The dark border stays: that is
   what separates them where they overlap, so the ring sits outside it as a
   1px shadow rather than replacing it. Held under full strength so it reads
   as a rim and not an outline. */
.avatars img{box-shadow:0 0 0 1px rgba(220,200,141,.55)}
/* The header centres its children against the whole brand block, and the brand
   is two lines: the title with the byline hanging 16px under it. So everything
   else centred 8px below the title's line. Giving the nav and the buy link the
   byline's own height as a bottom margin makes the same centring land them on
   the title's row. */
@media(min-width:761px){.nav nav,.nav-buy{margin-bottom:16px}}
/* The App centres on the page, not the group. Three items of different widths
   packed in a row put the GROUP's centre on the page's, which left The App
   21px off, exactly half the 41px between The Book and The Workshop. As a
   grid with flexible outer tracks the two ends are sized equal to each other
   by the spec, so the middle lands on centre and the ends arrange around it.
   Desktop only; the phone hides the links. */
@media(min-width:761px){.nav nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:38px}
.nav nav a:first-child{justify-self:end}
.nav nav a:last-child{justify-self:start}}
/* The contents, as the book sets them: two pages, the real part names, the real
   page numbers, and a leaf that turns. The two leaves share one grid cell and
   pivot about the same left edge, so one sweeps away while the next sweeps in;
   backface-visibility means only ever one face is toward the reader, which is
   why neither needs a background to hide the other. */
.toc{display:block;margin-top:22px}
.toc-leaf{transform:none}
.toc-leaf[data-leaf="2"] .toc-head{display:none}
.toc-head{font-size:10px;font-weight:600;letter-spacing:2.3px;text-transform:uppercase;color:#746238;margin:0 0 4px;display:flex;gap:10px;align-items:baseline}
.toc-head span{font-size:9px;letter-spacing:1.6px;color:#8d805e;font-weight:400;font-style:italic;text-transform:none}
.toc-list{list-style:none;margin:0;padding:0}
.toc-part{margin:20px 0 6px;font-size:9px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:#8d805e;border-bottom:1px solid #c7c6b9;padding-bottom:7px}
.toc-part:first-child{margin-top:0}
.toc-row .chapter{border-bottom:1px solid #e0dfd4}
.toc-row:last-child .chapter{border-bottom:0}
.toc-row summary{display:flex;align-items:baseline;gap:12px;padding:11px 0;cursor:pointer;list-style:none}
.toc-row .ch-num{font-size:10px;color:#8d805e;width:18px;flex:none;text-align:right;font-variant-numeric:tabular-nums}
/* width:auto and an explicit flex because the old chapter rule still matches
   these spans and pins every one of them to 20px. */
.toc-row .ch-title{font:500 19px/1.25 var(--serif);color:var(--ink);width:auto;flex:0 1 auto;min-width:0}
.toc-row .ch-leader{flex:1;min-width:14px;height:1px;background-image:radial-gradient(circle,#b9b8aa 1px,transparent 1px);background-size:5px 1px;background-repeat:repeat-x;background-position:0 100%;transform:translateY(-3px)}
.toc-row .ch-page{font-size:11px;color:#8d805e;flex:none;width:auto;font-variant-numeric:tabular-nums}
.toc-row .chapter>div{padding:0 0 16px 30px;font-size:14px;line-height:1.7;color:#66685f;max-width:52ch}
.toc-row .chapter[open] .ch-title{color:#5d5330}
.toc-front .ch-title{font-style:italic}
.toc-turn{display:none;align-items:center;justify-content:flex-end;gap:16px;margin-top:20px;padding-top:14px;border-top:1px solid #c7c6b9}
.toc-turn button{background:none;border:1px solid #c2c1b3;color:#5d5330;width:34px;height:34px;border-radius:50%;font-size:14px;line-height:1;cursor:pointer;transition:all .15s}
.toc-turn button:hover:not(:disabled){border-color:#8d805e;background:#0000000a}
.toc-turn button:disabled{opacity:.3;cursor:default}
.toc-folio{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#8d805e;margin-right:auto}
@media(max-width:760px){.toc{perspective:1200px}.toc-row .ch-title{font-size:17px}.toc-row summary{gap:9px;padding:10px 0}.toc-row .chapter>div{padding-left:0}}
@media(prefers-reduced-motion:reduce){.toc-leaf{transition:none}}
/* The extent. A buyer of a physical book wants to know whether 49.99 buys 90
   pages or 233, and the page never said. Read off the print-ready interior. */
.book-spec{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:baseline;column-gap:16px;row-gap:11px;width:max-content;max-width:100%;margin:22px 0 0;padding-top:16px;border-top:1px solid #c7c6b9}.book-spec b{font:500 20px/1 var(--serif);font-variant-numeric:lining-nums;letter-spacing:0;color:#2f342a}.book-spec span{font-size:10px;letter-spacing:1.4px;line-height:1;text-transform:uppercase;color:#8d805e}

/* THE PAGES THAT TURN INSIDE THE BOOK
   Three leaves hinged at the spine over the right-hand page. Leaf one carries
   the title page and the first contents page; leaf two the second; leaf m is
   the phone's, which reads one page at a time. The book opens flat, so a turned
   leaf is coplanar with the cover and the pile is ordered by how far it is
   lifted off the page, which is zero until it starts to turn: a leaf lifted at
   rest prints a bright edge down the side of the closed book. */
/* A leaf has to be UNDER the cover while the book is shut and OVER it once the
   cover has swung past, and both states are coplanar, so z-index alone cannot
   do it. The cover simply drops behind at the halfway point, where it is
   edge-on and invisible, so the swap cannot be seen. */
.book-leaf{z-index:9}
.book-journey.book-open .book-leaf{z-index:1}
.page-stack{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.page-leaf{position:absolute;inset:.9% 1.7% .9% 0;transform-style:preserve-3d;transform-origin:left center;transform:translateZ(calc(var(--pile,1px) * var(--turn,0) + 9px * var(--bend,0))) rotateY(calc(-153deg * var(--turn,0))) scaleX(calc(1 - .055 * var(--bend,0)));will-change:transform;pointer-events:none;opacity:var(--leaf-opacity,0)}
.page-leaf[data-leaf="m"]{display:none;z-index:5;--turn:var(--turn-m,0);--bend:var(--bend-m,0);--pile:2px}
.page-leaf[data-leaf="2"]{z-index:4;--turn:var(--turn-2,0);--bend:var(--bend-2,0);--pile:3px}
@media(max-width:760px){.page-leaf[data-leaf="m"]{display:block}}
.leaf-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:#f0eee6;border-radius:1px calc(3px + 9px * var(--bend,0)) calc(3px + 9px * var(--bend,0)) 1px;clip-path:polygon(0 0,calc(100% - 2.4% * var(--bend,0)) 0,100% 50%,calc(100% - 2.4% * var(--bend,0)) 100%,0 100%);box-shadow:inset 3px 0 12px #00000008}
.leaf-back{transform:rotateY(180deg);border-radius:calc(3px + 9px * var(--bend,0)) 1px 1px calc(3px + 9px * var(--bend,0));clip-path:polygon(0 50%,calc(2.4% * var(--bend,0)) 0,100% 0,100% 100%,calc(2.4% * var(--bend,0)) 100%)}
/* The light across a curved sheet: shaded into the spine, catching along
   the middle of the bow, falling away again at the free edge. */
.leaf-face:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--bend,0);background:linear-gradient(90deg,rgb(0 0 0/.15) 0%,rgb(0 0 0/.055) 13%,rgb(0 0 0/0) 34%,rgb(255 255 255/.34) 57%,rgb(0 0 0/.03) 82%,rgb(0 0 0/.115) 100%)}
.leaf-back:after{background:linear-gradient(90deg,rgb(0 0 0/.115) 0%,rgb(0 0 0/.03) 19%,rgb(255 255 255/.30) 44%,rgb(0 0 0/0) 68%,rgb(0 0 0/.055) 86%,rgb(0 0 0/.15) 100%)}
.cover-back:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--bend-cover,0);background:linear-gradient(90deg,rgb(0 0 0/.115) 0%,rgb(0 0 0/.03) 19%,rgb(255 255 255/.30) 44%,rgb(0 0 0/0) 68%,rgb(0 0 0/.055) 86%,rgb(0 0 0/.15) 100%)}
/* The shadow the lifted sheet throws on the page under it. */
.page-leaf:before{content:"";position:absolute;inset:0;border-radius:2px;box-shadow:8px 10px 28px rgb(0 0 0/.26);opacity:var(--bend,0);pointer-events:none}

/* Laid out at the size it is actually shown at, so the book's own type sizes
   are the sizes on screen instead of a web column scaled down past reading. */
.book-page{position:absolute;left:50%;top:50%;width:var(--page-layout-width,420px);height:var(--page-layout-height,760px);transform:translate(-50%,-50%) scale(var(--page-layout-scale,1));transform-origin:center;padding:9.5% 11%;box-sizing:border-box;color:#171614;font-family:var(--serif);font-size:calc(var(--page-layout-height,760px) / 57)}
.book-title-page{display:flex;flex-direction:column;align-items:center;justify-content:center}
.bp-title-line{margin:0;font:400 2.08em/1.35 var(--serif);letter-spacing:.12em;color:#2a2823}
.bp-title-line em{font-style:italic;color:#3a382f}
.bp-rule{width:3.5em;height:1px;background:#b9b6aa;margin:1.7em 0 1.25em}
.bp-strap{margin:0 0 2.3em;font-family:var(--sans);font-size:.58em;letter-spacing:.32em;color:#6f6c61}
/* Set as the book sets it: small-cap heading, bold entry, dot leader, bold
   folio, and the chapter's own line in italic underneath. Those subtitles are
   what fill a contents page; without them it sits in the top half. */
.bp-head{margin:0 0 1.5em;font:400 1.46em/1 var(--serif);font-variant:small-caps;letter-spacing:.06em;text-align:center;color:#171614}
.bp-head.bp-blank{visibility:hidden}
.bp-list{list-style:none;margin:0;padding:0}
.bp-part{margin:1.15em 0 .7em;font:400 .96em/1.3 var(--serif);color:#171614}
.bp-part b{font-variant:small-caps;font-weight:400;letter-spacing:.4px}
.bp-part em{font-style:italic;color:inherit}
.bp-row{margin:0 0 .77em}
.bp-line{display:flex;align-items:baseline}
.bp-num{font:700 .96em/1 var(--serif);width:1.75em;flex:none;text-align:right;padding-right:.65em;font-variant-numeric:tabular-nums}
.bp-title{font:700 1em/1.3 var(--serif);flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-leader{flex:1;min-width:.5em;align-self:stretch;background-image:radial-gradient(circle,#171614 .55px,transparent .55px);background-size:.28em 100%;background-repeat:repeat-x;background-position:0 82%}
.bp-page{font:700 1em/1.3 var(--serif);flex:none;padding-left:.08em;font-variant-numeric:tabular-nums}
.bp-sub{margin:.08em 0 0 2.4em;font:italic 400 .77em/1.35 var(--serif);color:#3c3a33}
@media(prefers-reduced-motion:reduce){.page-leaf{display:none}}
/* The book's pages are white, the way the print file is, so the contents and
   the chapter it opens onto are the same paper. Other paper sections keep the
   page's warm stock; this is scoped to the book. */
.journey-pin>#method.zoom-method{background-color:transparent}
.cover-back{background:linear-gradient(90deg,#efece1,#e8e5d9);overflow:hidden}
.book-leaf{z-index:9}
.book-journey.book-open .book-leaf{z-index:1}
/* THE SHARE RAIL, as the funnel landing page has it.
   Ported from src/components/ShareRail.jsx, the component src/App.jsx mounts on
   thenaturalsmethod.com, with its own values kept: 44px buttons, the champagne
   border at 28%, the gold gradient on hover, the count in JetBrains Mono, and
   the slim edge handle that brings it back. Desktop only, at the same 1024px
   the original's lg: breakpoint uses. */
.share-rail,.share-handle{display:none}
@media(min-width:1280px){
.share-rail{position:fixed;left:8px;top:50%;z-index:40;display:flex;flex-direction:column;align-items:center;gap:12px;transform:translate(0,-50%);opacity:1;transition:transform .3s ease-out,opacity .3s ease-out;will-change:transform}
.share-rail[data-collapsed="1"]{transform:translate(-150%,-50%);opacity:0;pointer-events:none}
.share-btn{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(220,200,141,.28);background:rgb(255 255 255/.04);color:#DCC88D;backdrop-filter:blur(4px);transition:transform .2s,border-color .2s,color .2s,background .2s,box-shadow .2s}
.share-btn:hover{transform:translateY(-2px) scale(1.1);border-color:transparent;color:#0E0E12;background:linear-gradient(135deg,#e5d6a8,#DCC88D 52%,#B8A46E);box-shadow:0 10px 26px -8px rgba(220,200,141,.6)}
.share-tip{position:absolute;left:100%;margin-left:12px;white-space:nowrap;border-radius:6px;border:1px solid rgba(220,200,141,.3);background:#141418;padding:4px 10px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#DCC88D;opacity:0;box-shadow:0 10px 15px -3px #0000001a;transition:opacity .2s;pointer-events:none}
.share-btn:hover .share-tip{opacity:1}
.share-count{margin-top:4px;display:flex;flex-direction:column;align-items:center;line-height:1}
.share-n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:15px;font-weight:700;letter-spacing:.02em;color:#DCC88D}
.share-l{margin-top:4px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.26em;color:rgb(220 200 141/.55)}
.share-hide{margin-top:2px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:0;background:none;border-radius:50%;color:rgb(220 200 141/.45);cursor:pointer;transition:color .2s}
.share-hide:hover{color:#DCC88D}
.share-handle{position:fixed;left:0;top:50%;z-index:40;display:flex;align-items:center;justify-content:center;border:1px solid rgba(220,200,141,.28);border-left:0;border-radius:0 8px 8px 0;background:rgb(20 20 24/.95);padding:16px 4px 16px 2px;color:rgb(220 200 141/.8);box-shadow:0 4px 6px -1px #0000001a;backdrop-filter:blur(4px);cursor:pointer;transform:translate(-100%,-50%);opacity:0;pointer-events:none;transition:transform .3s ease-out,opacity .3s ease-out,background-color .3s,color .2s;will-change:transform}
.share-handle[data-shown="1"]{transform:translate(0,-50%);opacity:1;pointer-events:auto}
.share-handle:hover{background:#1b1b21;color:#DCC88D}}
@media(prefers-reduced-motion:reduce){.share-rail,.share-handle{will-change:auto;transition:none}}
/* THE PHONE'S LEFT-HAND PAGE is the half title, not the first contents page,
   which the phone already shows on the right. Desktop is untouched: there the
   half title is not rendered and the left page carries the contents. */
.cover-half{display:none}
@media(max-width:760px){
.cover-half{display:block;text-align:center;font:400 28px/1.6 var(--serif);letter-spacing:2px;color:#978b6b}
.cover-half em{color:#877953}
.cover-back>.book-page{display:none}}
/* At the hinge the cover's plane passes through z 0, which is exactly where the
   pages sit, so the two are coplanar there and the cream page can win the tie:
   a light line down the spine of a book that is barely open. The pages sit a
   few pixels behind that plane, so the cover is in front of them the whole way
   across. The turned leaves still clear the cover by their two degrees. */
.book-inside{transform:translateZ(-4px)}
.page-stack{transform:translateZ(-2px)}
/* THE STICKY FOOTER, the funnel's own bar, ported from src/components/StickyBar.jsx
   with its values kept: the gold gradient button with its dark tile, the opaque
   #0E0E12 ground and champagne hairline, the avatars and TRUSTED BY on the left.
   It comes up from below once the book has landed, rather than sitting there
   from the start. The right-hand column carries no price: this page does not
   sell from the bar, so it carries the book's own proof and its guarantee. */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#0E0E12;border-top:1px solid rgba(220,200,141,.18);
 background-image:linear-gradient(to bottom,rgba(220,200,141,.06) 0 1px,rgba(0,0,0,0) 1px);
 transform:translateY(112%);opacity:0;transition:transform .78s cubic-bezier(.16,.86,.24,1),opacity .5s ease-out;will-change:transform,opacity}
.sticky-cta[data-up="1"]{transform:translateY(0);opacity:1}
.scta-btn{display:inline-flex;align-items:center;gap:12px;border-radius:12px;text-decoration:none;color:#0E0E12;
 background:linear-gradient(135deg,#e5d6a8 0%,#DCC88D 50%,#B8A46E 100%);
 box-shadow:0 10px 28px -8px rgba(220,200,141,.55),0 0 0 1px rgba(220,200,141,.25);transition:transform .15s}
.scta-tile{display:inline-flex;align-items:center;justify-content:center;flex:none;background:#2d2d2d;border:1px solid #2d2d2d;color:#DDC990;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.scta-label{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;text-shadow:0 1px 1px rgba(255,255,255,.18)}
.scta-row{display:none}
/* the phone: the button alone on the bar, as the original has it */
@media(max-width:639px){
.sticky-cta{display:flex;align-items:center;justify-content:center;padding:6px 12px calc(env(safe-area-inset-bottom,0px) + 6px)}
.scta-btn{height:42px;padding:0 15px 0 7px}
.scta-tile{width:28px;height:28px;border-radius:7px}
.scta-tile svg{width:18px;height:18px}
.scta-label{font-size:clamp(13px,3.4vw,16px)}
.scta-spacer{display:none}}
@media(min-width:640px) and (max-width:1023px){.sticky-cta{display:none}}
/* the desktop: the button centred over a row, avatars left, the book's own
   proof right where the workshop's price sits */
@media(min-width:1024px){
.sticky-cta{display:block}
.scta-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:46px;width:340px;
 display:grid;grid-template-columns:auto 1fr auto;padding:0 12px;z-index:10}
.scta-btn:hover{transform:translate(-50%,calc(-50% - 2px))}
.scta-tile{width:32px;height:32px;border-radius:7px}
.scta-tile svg{width:19px;height:19px}
.scta-label{font-size:16px;text-align:center}
.scta-spacer{width:32px}
.scta-row{display:flex;align-items:center;justify-content:space-between;gap:24px;height:62px;max-width:1280px;margin:0 auto;padding:0 32px}
.scta-left{display:flex;align-items:center;gap:10px;flex:none}
.scta-left .avatars img{width:24px;height:24px;border-width:2px;margin-left:-7px}
.scta-left .avatars img:first-child{margin-left:0}
.scta-left p{margin:0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;line-height:1.35;color:#8a8a95}
.scta-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;line-height:1.2}
.scta-eyebrow{margin:0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:#8a8a95}
.scta-big{margin:0;font-family:'Barlow Condensed',system-ui,sans-serif;font-size:21px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1;color:#E8E6E1;transform:translateY(-1px)}
.scta-big span{background-image:linear-gradient(180deg,#F1E3B6 0%,#DCC88D 55%,#C9B47A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;padding-bottom:.12em;margin-bottom:-.12em}
.scta-note{margin:0;display:flex;align-items:center;gap:5px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:#8a8a95}}
@media(prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* The load-more control is the hero's own ghost button, centred under the
   section. The revealed quotes are ordinary .quotes figures, so they carry the
   style the three featured ones already have. */
.more-reviews{display:flex;justify-content:center;margin-top:46px}.more-reviews button{background:none;border:0;padding:14px 0}
@media(max-width:760px){.more-reviews{margin-top:32px}}
/* and the invitation's desktop refinement: same type scale, same 16px arrow,
   same hover. Its idle float stays with the invitation. */
.more-reviews button{font-size:12px;letter-spacing:3.2px;gap:26px}
.more-reviews button>span:last-child{font-size:21px}
.more-reviews button:hover{color:#f0e3b8}
/* The champagne mark the landing page puts on the line that matters in a
   testimonial: its own ground, ink, ring and radius. */
.quotes mark{background:rgba(220,200,141,.22);color:#F1E3B6;box-shadow:0 0 0 1px rgba(220,200,141,.2);border-radius:4px;padding:0 4px}
/* The champagne ring the landing page puts round a testimonial portrait. It
   sits on a wrapper, not the image: the portraits are greyscale, and a filter
   desaturates the element's own border with it. */
.quotes figcaption .portrait{flex:none;display:block;border-radius:50%;box-shadow:0 0 0 1px rgba(220,200,141,.55)}
/* The contents rows were the only thing on the page that opens without
   saying so. The FAQ's own marker, sized for an 11px row. */
.toc-row summary b{flex:none;font-size:15px;line-height:1;margin-left:2px;color:#a89a6d;transform-origin:center;transition:transform .28s cubic-bezier(.22,.68,.2,1),color .2s}
.toc-row summary:hover b{color:#887342}
.toc-row .chapter[open] summary b{transform:rotate(45deg);color:#887342}
/* The hero copy carried z-index 3 and so painted over the book. Once the cover
   swings left it crosses the buttons, and on a short wide window it gets there
   at 0.165 of the journey while the copy is still at 72%, so the label read
   through the contents page. The stage goes above it; nothing else moves. */
.journey-pin .book-stage{z-index:4}
/* The practice itself, answering the portrait across the spread. The portrait's
   own hairline sits 28px down and left of it; this one sits 28px down and
   right, so the two lean into each other. Greyscale at rest like the portrait,
   and the colour arrives as it runs. */
.author-film{position:relative;margin:34px 0 32px;padding:0 28px 28px 0}
.author-film:before{content:'';position:absolute;left:28px;top:28px;right:0;bottom:0;border:1px solid var(--line)}
.film-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0b0b09 center/cover no-repeat;filter:grayscale(1);transition:filter 1.6s ease}
.author-film.is-playing .film-frame{filter:grayscale(0)}
.film-media{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}.author-film.is-playing .film-media,.author-film.is-static .film-media{opacity:1}
.film-media iframe{display:block;width:100%;height:100%;border:0}
.author-film:not(.is-static) .film-media iframe{pointer-events:none}
.author-film figcaption{position:relative;margin-top:22px;font-size:8px;letter-spacing:2px;color:var(--muted)}
@media(max-width:760px){.author-film{margin:26px 0 24px;padding:0 20px 20px 0}.author-film:before{left:20px;top:20px}}
/* Muted while it loops itself, and a press turns the sound on. The press also
   hands the player back its controls, since by then it is being watched on
   purpose rather than running as a backdrop. */
.film-sound{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-start;background:none;border:0;padding:0;cursor:pointer;opacity:0;transition:opacity .6s ease}
.author-film.is-playing .film-sound{opacity:1}
.film-cue{display:inline-flex;align-items:center;gap:9px;margin:0 0 15px 15px;padding:9px 14px;border:1px solid rgba(220,200,141,.45);border-radius:999px;background:rgba(8,7,6,.55);color:var(--gold);font-size:8px;letter-spacing:2px;transition:background .2s,border-color .2s}
.film-sound:hover .film-cue{background:rgba(8,7,6,.85);border-color:rgba(220,200,141,.85)}
.film-cue svg{width:13px;height:13px;flex:none}
.author-film.is-live .film-sound{display:none}
.author-film.is-live .film-media iframe{pointer-events:auto}
@media(max-width:760px){.film-cue{margin:0 0 11px 11px;padding:8px 12px}}
/* The portrait starts at the top of the section and rides the scroll to its
   end, rather than sitting centred against a right column that is now taller
   than it. Static on the phone, where the two stack and there is nothing to
   ride alongside. */
.author-photo{align-self:start;position:sticky;top:40px}
/* relative, not static: the portrait's offset hairline is an absolutely
   positioned :before, and taking the positioning off entirely let it resolve
   against the page and draw a champagne frame around the whole site. */
@media(max-width:760px){.author-photo{position:relative;top:auto}}
/* A second plate under the portrait, the same 16:9 as the film across the
   spread, sharing the portrait's frame and its greyscale. */
.author-photo>img.author-scene{position:relative;width:100%;height:auto;margin-top:26px;aspect-ratio:auto;object-fit:fill;filter:grayscale(1)}
@media(max-width:760px){.author-scene{margin-top:20px}}
/* The conversation opens on the page's own ground rather than a grey box:
   rounded, a champagne hairline, the picture rounded inside it, and the close
   in the same gold caps the rest of the page uses. The player keeps its
   controls on screen instead of hiding them, tinted to the page's gold. */
#video-dialog{background:#0E0E12;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 40px 90px -30px #000c}
#video-dialog .video-frame{border-radius:12px;overflow:hidden;background:#000}
#video-dialog .close-dialog{margin:0 4px 12px auto;padding:6px 2px;font-size:9px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);transition:color .2s}
#video-dialog .close-dialog:hover{color:#f0e3b8}#video-dialog:focus,#video-dialog:focus-visible{outline:none}
@media(max-width:760px){#video-dialog{border-radius:14px;padding:10px}#video-dialog .video-frame{border-radius:9px}}
/* The doors are closed, so no card carries a price and no card sells. */
.edition-card .price{display:none}.edition-card:not(.print) .price-row{display:none}.edition-card{display:flex;flex-direction:column}.edition-card .button{margin-top:auto}.edition-card.print .price-row{justify-content:center}.edition-card.print .price-row>span:last-child{max-width:none;text-align:center}
.button-soon{justify-content:center;min-height:56px;background:none;border:1px solid #bfb391;box-shadow:none;color:#6f7166;cursor:default}
.button-soon .btn-label{text-shadow:none}

/* The waiting list, the /book card's own words and fields in this page's
   materials. It opens on a curve rather than appearing. */
#waitlist-dialog{width:min(460px,92vw);background:#0E0E12;border:1px solid var(--line);border-radius:18px;padding:18px 18px 22px;box-shadow:0 40px 90px -30px #000c}
#waitlist-dialog{max-height:92vh;max-height:92dvh;overflow:auto;scrollbar-width:none}#waitlist-dialog::-webkit-scrollbar{display:none}#waitlist-dialog:focus,#waitlist-dialog:focus-visible{outline:none}
#waitlist-dialog .close-dialog{margin:0 0 4px auto;padding:6px 2px;font-size:9px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold)}
#waitlist-dialog .close-dialog:hover{color:#f0e3b8}
.wl-badge{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto;width:fit-content;padding:6px 13px;border:1px solid rgba(220,200,141,.3);border-radius:999px;background:rgba(220,200,141,.06);font-size:9px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold)}
.wl-badge>span{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(220,200,141,.8);animation:wl-pulse 2s ease-in-out infinite}
@keyframes wl-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* The mockup carries its own shadow, so the file's centre is not the book's: the solid pixels sit 10.08% of the width to the right of it (measured on the alpha channel, 214-1038 of 1042). Centre the book, not the plate. */
.wl-book{width:min(238px,64%);height:auto;margin:16px auto 2px;transform:translateX(-10.08%);filter:drop-shadow(0 18px 34px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(220,200,141,.2))}
.wl-eyebrow{margin:14px 0 0;text-align:center;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold)}
#waitlist-dialog h3{margin:7px 0 0;text-align:center;font:400 27px/1.1 var(--serif);letter-spacing:-.5px;color:var(--paper)}
.wl-sub{margin:9px 0 0;text-align:center;font-size:14px;line-height:1.5;color:#c2c2c8}
.wl-sub>span{display:block}
#waitlist-form{margin-top:14px;display:grid;gap:9px}
#waitlist-form input{width:100%;padding:12px 18px;border:1px solid #2a2620;border-radius:999px;background:#0b0b0f;color:var(--paper);font:inherit;font-size:15px}
#waitlist-form input::placeholder{color:#6b6d75}
#waitlist-form input:focus{border-color:var(--gold);outline:none}
#waitlist-form .wl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#waitlist-dialog .button{width:100%;justify-content:center;padding:10px 20px}
#waitlist-dialog .button[disabled]{opacity:.7;cursor:default}
.wl-error{margin:0;font-size:12px;font-weight:600;color:#f0a9a9}
.wl-note,.wl-readers{display:flex;align-items:center;justify-content:center;gap:7px;margin:11px 0 0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:#8a8a95}
.wl-note svg{width:12px;height:12px;flex:none}
.wl-readers{margin-top:7px;color:#c2c2c8}
.wl-readers>span{display:inline-flex;gap:1px}
.wl-readers svg{width:11px;height:11px}
.wl-done{text-align:center;padding:6px 0 4px}
.wl-tick{display:grid;place-items:center;width:56px;height:56px;margin:14px auto 0;border:1px solid rgba(220,200,141,.5);border-radius:50%;box-shadow:0 0 40px -8px rgba(220,200,141,.5)}
.wl-tick svg{width:26px;height:26px}
.wl-done strong{color:var(--paper);font-weight:600}
/* The sub-line on the waiting-list button ran 14px past its own edge, because
   .btn-label holds every label on one line. This one may wrap. */
.waitlist-cta .btn-label small>span{white-space:nowrap}
.waitlist-cta .btn-label small{white-space:normal;font-size:9.5px;letter-spacing:.08em;line-height:1.45;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* The cards take the page's corner: the same radius its buttons and dialogs
   already use, carried through to the art inside them. */
.edition-card{border-radius:16px}
.edition-card .product-display img{border-radius:6px}
.button-soon{border-radius:12px}
@media(max-width:760px){.edition-card{border-radius:14px}}
/* The bulk block was still selling: four live checkouts from $129 to $2,999
   behind its summary, under a card that says Sold out. While the doors are
   closed the waiting list is the only door. One line to bring it back. */
.bulk{display:none}
/* The mockup's baked shadow puts its ink about 10% right of its own box, so on
   the phone the book sits right of centre. It moves left until its edge is
   just clear of the orbit dot beside it: the dot's centre is at 103, its edge
   at 105.5, and the book's ink lands at 110. Any further and it covers it. */
@media(max-width:760px){.journey-pin .book-object{left:-6px}}
/* The titles were the page's serif at 500 with no tracking, which reads wider
   and heavier than every other heading on it. Set the way the page sets its
   own headings: 400, tight, with the leading closed up. */
/* One row, whatever the card is doing. The page's own condensed face is the
   only one that holds these titles on a single line at a real size: 28 to 30px
   against 23 to 25 for the serif or the plain sans, measured on the longest of
   the three. Sized off the card's own width rather than the viewport's, so the
   line holds at every breakpoint instead of at one. */
.edition-card{container-type:inline-size}
.edition-card h3{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:600;font-size:clamp(19px,7.8cqw,30px);line-height:1.1;letter-spacing:-.2px;margin-bottom:12px}

/* And the cards read as cards: a hairline and a soft shadow on the cream
   ground, with the product sitting on the same champagne glow the bonuses
   already use rather than on nothing. */
.edition-card{border:1px solid #d6d2c2;box-shadow:0 18px 40px -26px rgba(40,38,28,.45)}
.edition-card.print{border-color:#bfb391}
.edition-card .product-display{background:radial-gradient(ellipse at 50% 55%,#d3ccb966,transparent 68%)}
/* No rule under the bonuses: the dark section that follows is its own edge. */
.bonuses{border-bottom:0}
/* The bonuses were bare: an image, a number and some text on the ground. They
   take the edition cards' own chrome, so the page has one kind of card rather
   than two kinds of block, and their titles take the same condensed face sized
   off the card. */
.bonuses>div:not(:first-child){padding:30px 34px 32px;background:linear-gradient(145deg,#f8f6ef,#e6e4db);border:1px solid #d6d2c2;border-radius:16px;box-shadow:0 18px 40px -26px rgba(40,38,28,.45);container-type:inline-size}
.bonuses h4{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:600;font-size:clamp(18px,7.6cqw,27px);line-height:1.12;letter-spacing:-.2px;margin:16px 0 10px}
.bonuses>div:not(:first-child) .bonus-visual{margin-bottom:18px}
@media(max-width:760px){.bonuses>div:not(:first-child){padding:26px 28px 28px;border-radius:14px}}
/* Cards two and three lost their price row, so their art was floating above a
   hole with the button pinned to the foot. The product box takes that space
   instead and the art is fitted to it, so every card's art fills the room it
   actually has. */
.edition-card .product-display{flex:1 1 auto;height:auto;min-height:235px;max-height:300px}
.edition-card .product-display img{height:auto;width:auto;max-height:100%;max-width:100%}
/* From the tablet up the waiting list lies down: 16:9, the cover on the left
   and the asking on the right, so it fits the screen whole and never scrolls.
   The phone is tall, which is what pushed the portrait version past the
   viewport and put a bar down its side. */
@media(min-width:761px){
 #waitlist-dialog{width:min(880px,92vw);aspect-ratio:16/9;max-height:none;overflow:visible;padding:0}
 #waitlist-dialog .close-dialog{position:absolute;top:13px;right:18px;margin:0;z-index:2}
 /* a 1fr row grows to its content, so the cover has to sit in a row that */
 /* cannot: minmax(0,1fr) lets object-fit do the fitting instead */
 .wl-body{display:grid;grid-template-columns:.58fr 1fr;grid-template-rows:auto minmax(0,1fr);align-items:center;column-gap:30px;height:100%;padding:26px 32px 30px;box-sizing:border-box}
 .wl-badge{grid-column:1;grid-row:1;margin:0 auto}
 /* width auto so the box is the picture, not a box with the picture inside:
    no dead space either side and the proportion is the file's own. */
 .wl-book{grid-column:1;grid-row:2;align-self:center;justify-self:center;width:auto;height:72%;max-width:100%;max-height:none;object-fit:contain;margin:0;transform:none}
 .wl-ask,.wl-done{grid-column:2;grid-row:1/-1;align-self:center;width:100%}
 .wl-eyebrow{margin-top:0}
 #waitlist-dialog h3{font-size:30px}
 .wl-sub{font-size:15px}
 .wl-done{text-align:center}
 .wl-tick{margin-top:0}
}
/* On the phone it stays stacked, but the cover is capped so the whole card
   fits the screen and nothing scrolls there either. */
@media(max-width:760px){.wl-book{max-height:28vh;width:auto;margin-inline:auto}#waitlist-dialog{padding:16px 18px 20px}.wl-badge{font-size:8px;padding:5px 11px}#waitlist-dialog h3{font-size:24px}}
/* A little more of the champagne on the cover: on this ground a black phone
   against a black card has nothing to separate it. */
.wl-book{filter:drop-shadow(0 18px 34px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(220,200,141,.3))}
/* Every video testimonial the funnel runs, under the last call to action.
   Thumbnails only until one is pressed, so the section costs nothing to load. */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px;margin-top:70px}
.vid{display:block;background:none;border:0;padding:0;color:inherit;cursor:pointer;font:inherit}
.vid-shot{display:block;position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#0b0b09;transition:border-color .2s,transform .2s}
.vid:hover .vid-shot{border-color:rgba(220,200,141,.6);transform:translateY(-2px)}
.vid-shot img{width:100%;height:100%;object-fit:cover;display:block}
.vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:rgba(8,7,6,.62);border:1px solid rgba(220,200,141,.7);display:grid;place-items:center;transition:background .2s}
.vid:hover .vid-play{background:rgba(8,7,6,.85)}
.vid-play svg{width:15px;height:15px;margin-left:2px;fill:var(--gold)}
.vid-dur{position:absolute;right:7px;bottom:7px;padding:2px 6px;border-radius:4px;background:rgba(8,7,6,.78);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.06em;color:#d8d6cf}
.vid h4{margin:12px 0 3px;font:600 15px/1.25 var(--sans);color:var(--paper)}
.vid p{margin:0;font-size:12px;line-height:1.45;color:var(--muted)}
.vd-who{margin:0 0 10px;font-size:13px;color:var(--muted)}
.vd-who strong{display:block;font:600 17px/1.3 var(--sans);color:var(--paper)}
@media(max-width:1100px){.vids{grid-template-columns:repeat(2,1fr);margin-top:56px}}
@media(max-width:760px){.vids{grid-template-columns:1fr;gap:26px;margin-top:44px}.vid h4{font-size:13px;margin-top:9px}.vid p{font-size:11px}.vid-play{width:34px;height:34px}}
/* The last call to action is not a sale any more, it introduces the twelve
   films underneath it, in the funnel's own words for that section and the
   page's own invitation treatment rather than a second gold button. */
.watch-cue{justify-content:center;margin:34px 0 0;font-size:12px;letter-spacing:3.2px;text-transform:uppercase;cursor:default}
.watch-cue>span:last-child{font-size:21px}
@media(max-width:760px){.watch-cue{margin-top:26px;font-size:11px;letter-spacing:2.6px;gap:16px}}

/* The F.A.Q. is the page's second list of questions. The first one, the
   contents, sets its titles in the serif; these were the page's only
   question list left in the body sans. Same family and weight now, sized
   up because Cormorant reads lighter than Barlow at the same pixel. */
.faq summary{font:500 23px/1.3 var(--serif);letter-spacing:-.2px}
@media(max-width:760px){.faq summary{font-size:20px}}

/* The label centres on the button's OWN width, not on what is left over
   beside the icon. The icon leaves the flex flow and sits over the left
   inset, exactly as .hero-actions .button already does on the phone, and
   the two insets match so the centre of the text is the centre of the
   button. Only the card buttons, whose width is fixed by the card. */
.edition-card .button{position:relative;padding-left:20px}
.edition-card .button>.tile{position:absolute;left:10px;top:50%;transform:translateY(-50%)}
/* The waiting-list line is 226.8px wide and the icon holds the first 46px
   at either end, so it only fits on one row once the button is about 335px
   wide. Capping it at the room between the two insets lets it sit on one
   row on the wide card and break over two on the narrow one, centred
   either way, instead of running under the tile. */
.edition-card .button>.tile+.btn-label small{white-space:normal;max-width:calc(100% - 68px);text-align:center}

/* The popup cover centres on its SOLID pixels, never on its shadow.
   Measured from each file's alpha channel: book-mockup.webp bakes its
   shadow into the canvas and its solid pixels sit 10.077% of the width
   right of the frame's centre, so the picture is pulled back by exactly
   that and the book, not the shadow, sits under the pill.
   screen-dashboard.webp measures -0.070%, so it never moves. */
.wl-book{transform:none}
.wl-book[src$="book-mockup.webp"]{transform:translateX(-10.077%)}

/* The card title and its line under it centre, like the strapline and the
   button already do. The eyebrow row above keeps its two ends. */
.edition-card h3,.edition-card>p{text-align:center}
.edition-card h3{text-transform:uppercase}

@media(max-width:760px){
 /* The book comes back on the phone, where it sits in the reading order it
    already has: under "The tools to make it your own." and above the
    233 pages line. The note under it stays hidden. */
 #inside .inside-book{display:block;width:min(210px,56%);margin:32px auto 36px}
}

@media(max-width:760px){
 /* The hero on a phone. The book was a fixed 270px wide, so on a short
    screen it stood taller than the box holding it and spilled 32px up into
    "Any skill." and 29px down into the buttons, because the box was a fixed
    fraction of the screen while the book was a fixed 270px. The box is the
    book's own height now, so the book keeps its size and nothing overlaps,
    and the buttons follow it down into the space the scroll cue was using.
    The cue is gone: the book opening on scroll does not need announcing. */
 .journey-pin .scroll-invitation{display:none}
 .journey-pin .book-stage{height:auto;min-height:0;flex:0 0 auto;padding:22px 0 0}
 .journey-pin .hero-actions{margin-top:28px;margin-bottom:20px}
 /* Half the air on each side of the rule under the brand, which is what buys
    the first button its place on the screen. */
 .nav{height:64px}
 .journey-pin .hero-copy>.eyebrow{margin-top:12px;margin-bottom:7px}
 /* Half the air above and below the headline: measured 14px and 12px. */
 .journey-pin h1{margin-bottom:6px}
 /* One column, never broken across two. */
 .edition-label{white-space:nowrap}
}

/* THE SPREAD IS TYPE, NOT A PICTURE OF TYPE.
   will-change:transform asks the browser to rasterise an element once and
   reuse that bitmap for every later transform. On these two it was the reason
   the book's text went soft:
   .book-object is what the camera scales, up to 4.4x on a desktop, so one
   rasterisation was being stretched over the whole zoom;
   .book-leaf carries the left page at rotateY(-155deg), so its page was a
   bitmap resampled through a 3D rotation while the right page, a plain 2D
   scale, stayed sharp. That is why only the left half looked blurred.
   Without the hint both re-rasterise at the size they are actually drawn, and
   the chapter titles and their italic subtitles are legible from the moment
   the book opens. It costs raster work on the frames where the scale changes,
   which is the right trade for type the reader is meant to read. */
.journey-pin .book-object,.journey-pin .book-leaf{will-change:auto}

/* The contents inside the book, 30% larger type on exactly the same rows.
   Everything in the spread is sized in em off one page font-size, so raising
   that would push every chapter down the page. Instead each glyph size goes up
   by 1.3 and its line-height and margins are divided by the same 1.3, which
   leaves every row's box the height it already had: bigger letters, the rows
   where they were. The leader's minimum shrinks so a longer title takes the
   space from the dots rather than losing its end to an ellipsis. His measure
   for how big: three dots left after the longest line, "Dreamers Have Goals,
   Winners Have Systems", before its page number on a phone. The leader's
   minimum is those three dots (.28em pitch, so .84em) and 1.3 is the size that
   lands on it: measured 3.1 dots at 375, with nothing truncated. 1.35 cuts
   that title. */
.journey-pin .bp-title,.journey-pin .bp-page{font-size:1.3em;line-height:1}
.journey-pin .bp-sub{font-size:1.001em;line-height:1.0385;margin-top:.0615em;margin-left:1.954em}
.journey-pin .bp-part{font-size:1.248em;line-height:1;margin:.8846em 0 .5385em}
/* The chapter number column was 1.75em wide with .65em of padding, room the
   titles need more than the numbers do: they are never more than two digits.
   Narrowing it gives the titles that room back, which is what keeps the
   longest ones whole at this size on a phone: at the old width his own
   screenshot showed "Just Work Hard and Love What You Do" being cut. */
.journey-pin .bp-num{font-size:1.248em;line-height:.7692;width:1.25em;padding-right:.4em}
/* The dots ride the text's baseline. The leader used to be stretched to the
   whole row and its dots placed at 82% of that height, so changing the line
   height moved them off the type. Aligned to the baseline instead, a box whose
   bottom edge IS the baseline, the dots sit on it whatever the type does. It
   keeps a short run of them rather than being squeezed to nothing. */
.journey-pin .bp-leader{align-self:baseline;height:.18em;background-position:0 100%;min-width:.84em}

/* Crisp while it moves, not just once it stops.
   A filter or a will-change:transform makes the browser draw an element into a
   texture once and reuse it, so the camera magnifies pixels instead of redrawing
   type. .book-object carried a drop-shadow filter over the whole book, and the
   turning leaves carried will-change, which is why the pages softened while the
   zoom was in flight. The shadow is dropped only after p=.6, by which point the
   book's own cast shadow has already faded, so nothing visible is lost. */
.journey-pin .page-leaf{will-change:auto}
.book-journey.is-flat .book-object{filter:none}