/* Peak Masculine v3 (Dex). Premium editorial, TYX dark + gold. Mobile-first. */
/* ===== FONT TOKENS: the only place fonts are set. To swap a face, change these @font-face rules + --serif/--sans. =====
   Headings: Source Serif 4 (roman + italic, variable wght). Body/UI: Archivo (variable). Per Tess's spec. */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/SourceSerif4-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/SourceSerif4-italic.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/Archivo-normal.woff2) format('woff2')}
:root{--serif:'Source Serif 4',Georgia,'Times New Roman',serif;--sans:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
/* ===== end font tokens ===== */
:root{
 --ink:#0d0c0a;--ink2:#14130f;--ink3:#1c1a15;--line:rgba(226,190,122,.22);--line2:rgba(243,235,221,.12);
 --gold:#e2be7a;--gold-hi:#f5c569;--gold-dk:#b8924f;--cream:#f3ebdd;--cream2:#cdc3b1;--cream3:#a39a89;
 --ivory:#f6f1e7;--ivory2:#ece4d4;--txt:#1b1813;--txt2:#4a4336;--bronze:#7a5a2b;--rule:#d9cdb6;
 
 --pad:20px;--max:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.12;margin:0}
h1 em,h2 em,h3 em{color:var(--gold);font-style:italic}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:12px 18px;z-index:99}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dot{display:inline-block;width:3px;height:3px;background:currentColor;opacity:.6;margin:0 10px;vertical-align:middle;transform:rotate(45deg)}

/* buttons: squared, arrow, big */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:0 24px;font:600 17px/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;border:1px solid transparent;border-radius:0;transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.btn .ar{flex:none;transition:transform .2s}
.btn:hover .ar{transform:translateX(3px)}
.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.btn-line{background:transparent;color:var(--cream);border-color:rgba(226,190,122,.55)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
.btn.sm{min-height:48px;padding:0 18px;font-size:16px}
.btn.wide{width:100%}
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:48px;color:var(--gold);font-weight:600;font-size:17px;text-decoration:none;border-bottom:1px solid var(--line)}
.tlink:hover{border-color:var(--gold)}
.price{font:400 27px/1 var(--serif);color:var(--cream);display:inline-flex;align-items:baseline;gap:8px}
.price small{font:500 14px/1.2 var(--sans);color:var(--cream2)}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:18px;font-size:15px;color:var(--cream2)}
.rated{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--cream2)}
.stars{display:inline-flex;gap:2px;color:var(--gold)}.stars svg{width:16px;height:16px;fill:currentColor}
.guar{font-size:15px;color:var(--cream2);margin-top:12px;padding-left:22px;position:relative}
.guar::before{content:'';position:absolute;left:0;top:.45em;width:10px;height:10px;border:1px solid var(--gold);transform:rotate(45deg)}

/* announcement + masthead */
.ann{background:var(--ink2);border-bottom:1px solid var(--line2);font-size:14px;color:var(--cream2)}
.ann .wrap{display:flex;justify-content:center;gap:16px;align-items:center;min-height:40px;flex-wrap:wrap}
.ann-a{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-weight:600;text-decoration:none}
.ann span{display:none}
.mast{background:var(--ink);border-bottom:1px solid var(--line2);position:relative;z-index:20}
.mast-in{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:20px}
.logo{display:inline-flex;align-items:center;color:var(--cream);text-decoration:none;min-height:48px}
.logo-svg{height:26px;width:auto;max-width:60vw;display:block}
.mast .logo-svg g:first-of-type>path:first-child,.ftr .logo-svg g:first-of-type>path:first-child{fill:var(--gold)}
.menu{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;background:transparent;color:var(--cream);border:1px solid var(--line);font:500 16px var(--sans);cursor:pointer}
.menu i{width:18px;height:10px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.nav{display:none}
.mast.open .nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:1px solid var(--line);padding:8px var(--pad) 24px}
.nav a{min-height:52px;display:flex;align-items:center;color:var(--cream);text-decoration:none;font-size:18px;border-bottom:1px solid var(--line2)}
.nav a[aria-current]{color:var(--gold)}
.nav .btn{margin-top:16px;border-bottom:1px solid var(--gold)}
.nav-call{color:var(--cream2)!important}
.cats{border-top:1px solid var(--line2);background:var(--ink)}
.cats .wrap{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.cats .wrap::-webkit-scrollbar{display:none}
.cats a{display:inline-flex;align-items:center;min-height:46px;color:var(--cream2);text-decoration:none;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.cats a:hover{color:var(--gold)}

/* sections */
.sec{padding:64px 0}
.shd{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:28px;padding-top:22px;border-top:1px solid var(--line)}
.shd h2{font-size:32px}
.shd p{color:var(--cream2);max-width:44ch}
.meta{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--cream3)}
.meta .cat{color:var(--gold);text-decoration:none}

/* hero */
.hero{padding:28px 0 0}
.hero-in{display:grid;gap:28px}
.hero h1{font-size:34px;line-height:1.1}
.hero h1 a{text-decoration:none}
.hero h1 a:hover{color:var(--cream)}
.hero-dek{font-size:19px;color:var(--cream2);margin:18px 0 14px;max-width:46ch}
.hero-act{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.hero-act .btn{width:100%}
.hero-ai{margin-top:14px;font-size:15px;color:var(--cream2)}
.hero-ai a{color:var(--gold)}
.hero-fig{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(160deg,#25211a,#0d0c0a)}
.hero-fig img{width:100%;height:100%;object-fit:cover;object-position:68% 50%;filter:saturate(.9) contrast(1.03)}
.hero-fig::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(226,190,122,.18);pointer-events:none}
.paths{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.paths li+li{border-top:1px solid var(--line2)}
.paths a{display:grid;grid-template-columns:44px 1fr 24px;align-items:center;gap:14px;min-height:76px;padding:12px 0;text-decoration:none}
.paths b{font:italic 400 22px/1 var(--serif);color:var(--gold)}
.paths strong{display:block;font-weight:600;font-size:18px}
.paths small{display:block;color:var(--cream2);font-size:15px}
.paths .ar{color:var(--gold)}

/* situations */
.sit-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sit-list li{border-bottom:1px solid var(--line2)}
.sit-list a{display:grid;grid-template-columns:40px 1fr;gap:4px 14px;padding:22px 0;text-decoration:none}
.sit-list b{grid-row:span 3;font:italic 400 21px/1 var(--serif);color:var(--gold)}
.sit-list strong{font:400 22px/1.15 var(--serif)}
.sit-list span{color:var(--cream2)}
.sit-list i{font-style:normal;display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-weight:600;font-size:15px;margin-top:6px}
.nstep{margin-top:32px;padding:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(226,190,122,.07),rgba(226,190,122,.02));display:grid;gap:18px}
.nstep p{font-size:18px;color:var(--cream2)}
.nstep strong{display:block;font:400 21px/1.15 var(--serif);color:var(--cream);margin-bottom:4px}
.nstep-a{display:flex;flex-direction:column;gap:10px}
.nstep-a .btn{width:100%}

/* cards / magazine grid */
.card{display:flex;flex-direction:column}
.card-img{display:block;aspect-ratio:1200/630;overflow:hidden;background:linear-gradient(160deg,#25211a,#0d0c0a)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.03)}
.card-bd{padding-top:16px}
.card h3{font-size:22px;line-height:1.12;margin-top:8px}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--gold)}
.card .dek{color:var(--cream2);margin-top:10px;font-size:17px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mag{display:grid;gap:36px}
.mag-side{display:grid;gap:28px}
.card.row{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start;padding-top:24px;border-top:1px solid var(--line2)}
.card.row .card-img{aspect-ratio:1/1}
.card.row .card-bd{padding-top:0}
.card.row h3{font-size:18px}
.card.row .dek{display:none}
.card.lead h3{font-size:27px}
.grid3{display:grid;gap:40px;margin-top:40px}

/* TYX panel (dark + gold) */
.tyx{background:radial-gradient(120% 80% at 80% 0%,#2a2214 0%,#110f0b 55%,#0d0c0a 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0;overflow:hidden}
.tyx-in{display:grid;gap:40px}
.tyx-brand{font-weight:600;color:var(--gold);font-size:16px;margin-bottom:12px}
.tyx h2{font-size:32px}
.tyx .body{color:var(--cream2);margin:18px 0 22px;max-width:56ch}
.steps{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--line)}
.steps li{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line2)}
.steps b{font:italic 400 18px/1 var(--serif);color:var(--gold);min-width:28px}
.tyx-buy,.p-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.tyx-buy .btn{flex:1 1 260px}
.tyx-shots{position:relative;height:520px;max-width:520px;margin:0 auto;width:100%}
.shot{position:absolute;width:52%;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(226,190,122,.25)}
.shot img{width:100%}
.shot.s1{left:0;top:60px;transform:rotate(-4deg);opacity:.85}
.shot.s2{left:24%;top:0;z-index:2}
.shot.s3{right:0;top:80px;transform:rotate(4deg);opacity:.85}

/* topics */
.topic-grid{display:grid;gap:40px}
.topic{display:grid;align-content:start;gap:16px;border-top:1px solid var(--line2);padding-top:20px}
.topic-img{display:block;aspect-ratio:1200/630;overflow:hidden;background:linear-gradient(160deg,#25211a,#0d0c0a)}
.topic-img img{width:100%;height:100%;object-fit:cover}
.topic h3{font-size:26px}.topic h3 a{text-decoration:none}
.topic-corner{margin:8px 0 6px;font-size:19px;font-weight:600}
.topic-corner a{text-decoration:none;color:var(--gold)}
.topic ul{list-style:none;margin:0 0 6px;padding:0}
.topic li a{display:block;padding:10px 0;color:var(--cream2);text-decoration:none;border-bottom:1px solid var(--line2)}
.topic li a:hover{color:var(--cream)}

/* books strip */
.bs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bs li{display:flex;flex-direction:column;gap:8px}
.bs-c{text-decoration:none;display:flex;flex-direction:column;gap:8px}
.bs img{background:transparent}
.bs-t{font:400 20px/1.15 var(--serif)}
.bs-p{font-size:15px;color:var(--cream2)}
.bs .btn{padding:0 10px;font-size:15px}

/* coach */
.coach{padding:64px 0;background:var(--ink2);border-top:1px solid var(--line)}
.coach-in{display:grid;gap:22px}
.coach-rule{width:56px;height:1px;background:var(--gold)}
.coach h2{font-size:30px;max-width:20ch}
.coach-r{display:grid;gap:20px}
.coach-r p{color:var(--cream2);font-size:19px;max-width:48ch}

/* footer */
.ftr{background:var(--ink);border-top:1px solid var(--line);padding:56px 0 calc(28px + env(safe-area-inset-bottom))}
.ftr-top{display:grid;gap:36px}
.ftr-brand p{font:italic 400 18px/1.2 var(--serif);color:var(--cream2);margin-top:12px}
.ftr-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ftr h2{font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li a{display:flex;align-items:center;min-height:44px;color:var(--cream2);text-decoration:none;font-size:16px}
.ftr li a:hover{color:var(--cream)}
.ftr-bot{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid var(--line2);font-size:14px;color:var(--cream3)}
.ftr-bot nav{display:flex;flex-wrap:wrap;gap:0 20px}
.ftr-bot a{color:var(--cream2);min-height:44px;display:inline-flex;align-items:center}

/* cookie bar: Accept and Reject equal */
.cc,.ckb{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 12px calc(12px + env(safe-area-inset-bottom))}
.cc[hidden],.ckb[hidden]{display:none}
.cc-in,.ckb-in{max-width:980px;margin:0 auto;background:var(--ink3);border:1px solid var(--line);padding:14px 16px;display:grid;gap:12px;box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.cc p,.ckb p{font-size:15px;line-height:1.5;color:var(--cream2)}
.cc p a,.ckb p a{color:var(--gold)}
.cc-b,.ckb-b{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ckbtn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--gold);border-radius:0;font:600 17px/1.2 var(--sans);cursor:pointer}
.ckbtn:hover{background:var(--gold);color:var(--ink)}
.cc-b .btn,.ckbtn{min-height:48px;width:100%;border-color:var(--gold);color:var(--cream)}

/* crumbs */
.crumbs ol{list-style:none;margin:0;padding:18px 0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:15px;color:var(--cream3)}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:'/';margin:0 10px;opacity:.5}
.crumbs a{color:var(--cream2);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--gold)}

/* ---------- reading pages: warm ivory surface ---------- */
.read{background:var(--ivory);color:var(--txt)}
.read .crumbs ol{color:var(--txt2)}.read .crumbs a{color:var(--txt2)}.read .crumbs a:hover{color:var(--bronze)}
.rd{max-width:860px}
.ahead{padding:8px 0 28px}
.ahead h1{font-size:35px;line-height:1.1;color:var(--txt)}
.ahead .stand{font-size:20px;color:var(--txt2);margin-top:16px}
.answer{margin-top:24px;padding:20px 22px;background:#fff;border-left:3px solid var(--gold-dk);font-size:19px;line-height:1.6}
.answer strong{color:var(--txt)}
.byl{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:18px;border-top:1px solid var(--rule)}
.byl .logo-svg{width:40px;height:40px;flex:none}
.byl .logo-svg g{fill:var(--bronze)}
.byl p{font-size:15px;color:var(--txt2);display:flex;flex-wrap:wrap;align-items:center}
.byl a{color:var(--txt);font-weight:600}
.ahero{margin:0 auto;max-width:1200px;aspect-ratio:1200/630;background:#d8cfbf;overflow:hidden}
.ahero img{width:100%;height:100%;object-fit:cover}
.agrid{display:block;max-width:1200px;padding-top:36px;padding-bottom:56px}
.toc{display:none}
.toc-m{margin:0 0 28px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.toc-m summary{min-height:56px;display:flex;align-items:center;font-weight:600;cursor:pointer;list-style:none;font-size:18px}
.toc-m summary::after{content:'+';margin-left:auto;font-size:24px;color:var(--bronze)}
.toc-m[open] summary::after{content:'\2212'}
.toc-m ol,.toc ol{margin:0 0 16px;padding-left:22px}
.toc-m li,.toc li{padding:6px 0}
.toc-m a,.toc a{color:var(--txt2);text-decoration:none}
.toc-m a:hover,.toc a:hover{color:var(--bronze);text-decoration:underline}
.prose{max-width:68ch;font-size:19px;line-height:1.65;color:var(--txt)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:29px;line-height:1.1;margin-top:1.8em;padding-top:.8em;border-top:1px solid var(--rule);scroll-margin-top:20px}
.prose h3{font:700 21px/1.3 var(--sans);margin-top:1.6em;scroll-margin-top:20px}
.prose a{color:var(--bronze);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{color:var(--txt)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.5em}
.prose li::marker{color:var(--gold-dk)}
.prose blockquote{margin:1.6em 0;padding:0 0 0 20px;border-left:2px solid var(--gold-dk);color:var(--txt2)}
.prose .pull{border:0;padding:26px 0;margin:2em 0;border-top:1px solid var(--gold-dk);border-bottom:1px solid var(--gold-dk);text-align:left}
.prose .pull p{font:italic 400 26px/1.2 var(--serif);color:var(--txt)}
.prose .more{list-style:none;padding:0}
.prose .more a{display:grid;grid-template-columns:56px 1fr 24px;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--txt)}
.prose .more img{width:56px;height:auto}
.prose .more b{display:block}.prose .more small{display:block;font-size:16px;color:var(--txt2)}
.prose .more .ci{width:56px;height:80px;background:var(--ink3)}
.authb{display:flex;align-items:center;gap:14px;margin-top:40px;padding-top:20px;border-top:1px solid var(--rule)}
.authb .logo-svg{width:36px;height:36px}.authb .logo-svg g{fill:var(--bronze)}
.authb a{color:var(--txt);font-weight:600}
.tlist{list-style:none;padding:0!important}
.tlist a{display:flex;justify-content:space-between;align-items:center;min-height:56px;border-bottom:1px solid var(--rule);text-decoration:none!important;color:var(--txt)!important;font-size:20px}

/* product panels inside articles (dark + gold on the ivory page) */
.panel{background:var(--ink);color:var(--cream);padding:24px;margin:2em 0!important;border:1px solid #2b261c;position:relative;font-size:17px;line-height:1.55}
.panel::before{content:'';position:absolute;left:0;top:0;width:64px;height:2px;background:var(--gold)}
.panel a{color:inherit;text-decoration:none}
.panel .btn{color:var(--ink)}.panel .btn-line{color:var(--cream)}
.panel .p-k{font-weight:600;color:var(--gold);font-size:15px;margin-bottom:6px}
.panel h3{font:400 22px/1.12 var(--serif);color:var(--cream);margin-bottom:12px}
.panel .steps{margin:12px 0 20px}
.panel .steps li{padding:10px 0;font-size:16px}
.panel .price{font-size:24px}
.panel .guar{font-size:14px}
.panel .trust{font-size:14px;margin-top:14px}
.p-early{display:grid;gap:14px;border-color:var(--gold-dk)}
.p-early p b{display:block;color:var(--gold);font-size:15px;margin-bottom:2px}
.p-early .btn{flex:1 1 240px}
.p-ai{display:grid;gap:20px}
.p-ai .p-shot{display:none}
.p-ai .btn,.p-end .btn{flex:1 1 240px}
.p-book{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:start}
.p-book p{color:var(--cream2);font-size:16px}
.p-book .p-row{margin-top:14px}
.p-book .price{font-size:18px}
.p-end h3 em{color:var(--gold)}

/* sticky article CTA (mobile) */
.stk{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:10px;background:rgba(13,12,10,.97);border-top:1px solid var(--gold-dk);padding:10px 12px calc(10px + env(safe-area-inset-bottom));backdrop-filter:blur(6px)}
.stk[hidden]{display:none}
.stk p{flex:1;min-width:0;font-size:14px;line-height:1.25;color:var(--cream2)}
.stk p b{display:block;color:var(--cream);font-size:15px}
.stk .btn{min-height:48px;padding:0 14px;font-size:15px;gap:8px}
.stk-x{flex:none;width:44px;height:48px;background:transparent;border:0;color:var(--cream2);font-size:26px;cursor:pointer}
body.has-stk .ftr{padding-bottom:110px}

/* listings */
.lhead{padding:12px 0 28px}
.lhead h1{font-size:42px}
.lhead p{font-size:20px;color:var(--cream2);margin-top:12px;max-width:52ch}
.tabs{display:flex;gap:8px 24px;overflow-x:auto;white-space:nowrap;border-bottom:1px solid var(--line2);margin-bottom:32px;scrollbar-width:none}
.tabs a{display:inline-flex;align-items:center;min-height:48px;color:var(--cream2);text-decoration:none;font-size:16px;border-bottom:2px solid transparent}
.tabs a[aria-current]{color:var(--gold);border-color:var(--gold)}
.lhero{margin:0 auto 40px;max-width:var(--max);aspect-ratio:1200/630;max-height:520px;overflow:hidden;background:linear-gradient(160deg,#25211a,#0d0c0a)}
.lhero img{width:100%;height:100%;object-fit:cover}
.mag-l .card.lead{display:grid;gap:0}

/* books index + book pages (dark commercial) */
.store{background:var(--ink)}
.bks{display:grid;gap:44px;padding-bottom:64px}
.bk{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start;padding-top:24px;border-top:1px solid var(--line)}
.bk-cov{display:block}
.bk h2{font-size:24px}.bk h2 a{text-decoration:none}
.bk .tag{color:var(--gold);font-size:16px;margin-top:8px;font-weight:500}
.bk p{color:var(--cream2);margin-top:8px;font-size:16px}
.bk-buy{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-top:14px}
.bk-buy .price{font-size:22px}
.incl{font-size:14px;color:var(--gold)}
.bk-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:16px;grid-column:1/-1}
.bk-act .btn{flex:1 1 200px}
.bhero{padding:4px 0 40px}
.bhero-in{display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:start}
.bcov img{width:100%}
.binfo h1{font-size:29px;line-height:1.1}
.binfo .tag{color:var(--gold);font-size:16px;margin-top:8px;font-weight:500}
.binfo .rated{margin-top:8px}
.binfo .lede{color:var(--cream2);margin-top:14px;font-size:17px}
.buybox{grid-column:1/-1;margin-top:4px;padding:20px;border:1px solid var(--line);background:var(--ink2)}
.bhero-in .buybox{order:-0}
.fmt{border:0;margin:0 0 14px;padding:0}
.fmt legend{font-size:14px;color:var(--cream3);margin-bottom:8px;letter-spacing:.08em;text-transform:uppercase}
.opt{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;min-height:56px;padding:0 14px;border:1px solid var(--line2);cursor:pointer;font-size:17px}
.opt+.opt{margin-top:8px}
.opt input{position:absolute;opacity:0}
.rad{width:20px;height:20px;border:1.5px solid var(--cream3);border-radius:50%;position:relative}
.opt input:checked~.rad{border-color:var(--gold)}
.opt input:checked~.rad::after{content:'';position:absolute;inset:4px;background:var(--gold);border-radius:50%}
.opt:has(input:checked){border-color:var(--gold);background:rgba(226,190,122,.06)}
.opt input:focus-visible~.rad{outline:2px solid var(--gold-hi);outline-offset:3px}
.pp{font:400 19px/1 var(--serif)}
.buybox .btn{justify-content:space-between}
.js-price{font-weight:700}
.dl{font-size:14px;color:var(--cream2);margin-top:12px}
.bdesc .dcol{max-width:68ch}
.bdesc h2{font-size:29px;margin-bottom:18px}
.bdesc p{color:var(--cream2)}
.chk{list-style:none;padding:0;margin:20px 0;border-top:1px solid var(--line)}
.chk li{padding:16px 0 16px 30px;border-bottom:1px solid var(--line2);position:relative}
.chk li::before{content:'';position:absolute;left:2px;top:24px;width:10px;height:10px;border:1px solid var(--gold);transform:rotate(45deg)}
.chk b{display:block;font-size:18px;color:var(--cream)}
.chk span{color:var(--cream2)}
.close{margin-top:18px;color:var(--cream)!important}
.inl{font:500 15px var(--sans);color:var(--cream2)}
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:10px;align-items:center;background:rgba(13,12,10,.97);border-top:1px solid var(--gold-dk);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.sbar .sel{flex:1;min-width:0}
.sbar select{width:100%;min-height:48px;background:var(--ink2);color:var(--cream);border:1px solid var(--line);padding:0 10px;font:500 15px var(--sans)}
.sbar .btn{min-height:48px;padding:0 16px}
.sb-t{flex:1;font-size:14px;color:var(--cream2)}.sb-t b{display:block;color:var(--cream)}
.bookpg ~ .ftr,.bookpg+.coach+.sbar~*{}
body:has(.sbar) .ftr{padding-bottom:110px}
body:has(.cc:not([hidden])) .sbar,body:has(.ckb:not([hidden])) .sbar{bottom:auto;top:-200px}
.rel .card h3{font-size:19px}
.read+.coach,.list+.coach{}
.list{background:var(--ink)}

@media (max-width:429px){.stk p{display:none}.stk .btn{flex:1;justify-content:center}}
/* ---------- tablet / desktop ---------- */
@media (min-width:760px){
 :root{--pad:40px}
 body{font-size:19px}
 .ann span{display:inline}
 .hero h1{font-size:50px}
 .hero-act{flex-direction:row;flex-wrap:wrap}.hero-act .btn{width:auto}
 .paths{display:grid;grid-template-columns:repeat(3,1fr)}
 .paths li+li{border-top:0;border-left:1px solid var(--line2)}
 .paths a{padding:16px 22px}
 .paths li:first-child a{padding-left:0}
 .sit-list{grid-template-columns:repeat(2,1fr);column-gap:40px}
 .nstep{grid-template-columns:1fr auto;align-items:center;padding:28px 32px}
 .nstep-a{flex-direction:row;align-items:center;gap:22px}.nstep-a .btn{width:auto}
 .grid3{grid-template-columns:repeat(3,1fr);gap:36px}
 .grid3.g2{grid-template-columns:repeat(2,1fr)}
 .topic-grid{grid-template-columns:repeat(2,1fr);gap:48px 40px}
 .bs{gap:36px}
 .bs-t{font-size:26px}
 .bs .btn{width:max-content;padding:0 18px}
 .coach-in{grid-template-columns:1fr 1fr;align-items:end;column-gap:60px}
 .coach-rule{grid-column:1/-1}
 .coach h2{font-size:38px}
 .ftr-cols{grid-template-columns:repeat(3,1fr)}
 .cc-in,.ckb-in{grid-template-columns:1fr auto;align-items:center;padding:20px 24px}
 .cc-b .btn,.ckbtn{min-width:150px}
 .ahead h1{font-size:48px}
 .prose{font-size:20px}
 .prose h2{font-size:34px}
 .panel{padding:30px 32px}
 .p-ai{grid-template-columns:1fr 170px;align-items:center}
 .p-ai .p-shot{display:block;box-shadow:0 20px 40px rgba(0,0,0,.5)}
 .p-early{grid-template-columns:1fr auto;align-items:center}
 .p-book{grid-template-columns:130px 1fr}
 .bks{grid-template-columns:repeat(2,1fr);column-gap:56px}
 .bk{grid-template-columns:180px 1fr;gap:28px}
 .bk-act{grid-column:2}
 .bhero-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 56px;align-items:end}
 .bcov{grid-row:1/3;align-self:center}
 .bhero-in .buybox{grid-column:2;align-self:start;margin-top:0}
 .binfo h1{font-size:48px}
 .binfo .lede{font-size:19px}
 .buybox{grid-column:auto;margin-top:26px}
 .lhead h1{font-size:58px}
 .card.row{grid-template-columns:200px 1fr}
 .card.row .card-img{aspect-ratio:1200/630}
}
@media (min-width:1080px){
 .ann{font-size:14px}
 .menu{display:none}
 .nav{display:flex;align-items:center;gap:30px}
 .nav a{border:0;min-height:48px;font-size:16px}
 .nav .btn{margin:0;border-bottom:1px solid var(--gold)}
 .mast-in{min-height:88px}
 .logo-svg{height:34px}
 .cats .wrap{justify-content:center;gap:40px}
 .hero{padding-top:40px}
 .hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
 .hero h1{font-size:58px}
 .hero-fig{aspect-ratio:auto;height:580px}
 .hero-dek{font-size:20px}
 .sec{padding:96px 0}
 .shd h2{font-size:43px}
 .mag{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px}
 .mag.mag-l{grid-template-columns:1fr}
 .card.lead h3{font-size:35px}
 .mag-l .card.lead{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center;margin-bottom:56px}
 .mag-l .card.lead .card-bd{padding:0}
 .card.row{grid-template-columns:180px 1fr}
 .tyx{padding:110px 0}
 .tyx-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
 .tyx h2{font-size:43px}
 .tyx-shots{height:640px;max-width:none}
 .topic-grid{grid-template-columns:repeat(6,1fr)}
 .topic{grid-column:span 2;align-content:start}
 .topic:nth-child(-n+2){grid-column:span 3}
 .agrid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:72px;justify-content:center}
 .toc{display:block;position:sticky;top:24px;align-self:start;font-size:16px;padding-top:6px}
 .toc h2{font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin-bottom:14px}
 .toc ol{padding-left:18px}
 .toc-m{display:none}
 .rd{max-width:1060px}
 .ahead h1{font-size:58px;max-width:16ch}
 .answer,.ahead .stand{max-width:62ch}
 .stk{display:none!important}
 body.has-stk .ftr{padding-bottom:28px}
 .sbar{display:none}
 body:has(.sbar) .ftr{padding-bottom:28px}
 .bks{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* =====================================================================================
   v3b LAYER (Dex, 26 Oct 2026). Colour + sectioning pass after Joey's review:
   "everything is the same colour ... too blended ... hard to differentiate action buttons and links
    ... no sectioning/white space ... the cta button has white text on a light button".
   Everything above this line is v3.css unchanged. Same class names and markup, CSS only.
   ===================================================================================== */
:root{
 --charcoal:#161514;
 --paper:#FAF6EF;          /* light section A */
 --sand:#F3EADB;           /* light section B */
 --act:#E2BE7A;            /* primary action fill (gold is for actions) */
 --act-hover:#D4AC62;      /* charcoal on it: 8.6:1 */
 --act-press:#C99A45;      /* charcoal on it: 7.1:1 */
 --act-edge:#B8924F;
 --on-act:#161514;         /* text on gold: 10.3:1 */
 --sec-y:64px;
}
@media (min-width:760px){:root{--sec-y:88px}}
@media (min-width:1080px){:root{--sec-y:112px}}

/* ---------- light sections: remap the text tokens so every v3 component reads dark-on-light ---------- */
.home .sits,.home .topics,.read,.bdesc,.store:not(.bookpg),.list{
 --cream:#161514;--cream2:#4A4336;--cream3:#665D4D;--line:rgba(22,21,20,.18);--line2:rgba(22,21,20,.10);
 --gold:#7A5A2B;--gold-hi:#5E4420;   /* gold TEXT becomes bronze on light (5.3:1+); buttons use --act */
 background:var(--paper);color:var(--charcoal)}
.home .latest,.home .bshelf,.rel{
 --cream:#161514;--cream2:#4A4336;--cream3:#665D4D;--line:rgba(22,21,20,.18);--line2:rgba(22,21,20,.10);
 --gold:#7A5A2B;--gold-hi:#5E4420;
 background:var(--sand);color:var(--charcoal)}
.read{--ivory:var(--paper)}
.read .rel{background:var(--sand)}

/* ---------- section rhythm: generous padding + a visible edge between bands ---------- */
.sec,.tyx,.coach{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.home .sits,.home .latest,.home .topics,.home .bshelf,.rel,.bdesc{border-top:1px solid rgba(22,21,20,.08)}
.home .sits{border-top:0}
.shd{border-top:0;padding-top:0;margin-bottom:40px}
.shd h2{position:relative;padding-top:22px}
.shd h2::before{content:'';position:absolute;left:0;top:0;width:48px;height:2px;background:var(--act-edge)}
.hero{padding-bottom:var(--sec-y)}
.hero .paths{margin-top:56px}
.tyx{border-top:0;border-bottom:0}
.coach{background:#1C1A15;border-top:2px solid var(--act-edge)}
.ftr{background:#0D0C0A;border-top:1px solid rgba(243,235,221,.08)}
.agrid{padding-bottom:var(--sec-y)}
.bhero{padding-bottom:var(--sec-y)}

/* ---------- buttons: primary = solid gold + dark text, secondary = outline, never white-on-gold ---------- */
.btn{transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s,transform .08s}
.btn-gold,a.btn-gold,.nav a.btn-gold,.panel .btn-gold,.stk .btn-gold,.sbar .btn-gold,.buybox .btn-gold{
 background:var(--act);border-color:var(--act);color:var(--on-act)!important;font-weight:700;
 box-shadow:0 1px 0 rgba(0,0,0,.25),0 8px 22px -10px rgba(226,190,122,.55)}
.btn-gold:hover,.nav a.btn-gold:hover{background:var(--act-hover);border-color:var(--act-hover);color:var(--on-act)!important;box-shadow:0 1px 0 rgba(0,0,0,.25),0 12px 26px -10px rgba(226,190,122,.7)}
.btn-gold:active{background:var(--act-press);border-color:var(--act-press);transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.22)}
.btn-gold:focus-visible{outline:2px solid var(--act);outline-offset:3px}
/* gold on a light band: add a darker edge so the button never melts into the background */
.home .sits .btn-gold,.home .topics .btn-gold,.home .latest .btn-gold,.home .bshelf .btn-gold,.rel .btn-gold,.bdesc .btn-gold,.store:not(.bookpg) .btn-gold,.list .btn-gold{
 border-color:var(--act-edge);box-shadow:0 1px 0 rgba(22,21,20,.18),0 10px 22px -12px rgba(122,90,43,.55)}
.btn-gold:focus-visible{outline-color:var(--act-edge)}
.btn-line{background:transparent;color:var(--cream);border:1.5px solid currentColor}
.btn-line:hover{background:rgba(243,235,221,.08);color:var(--cream);border-color:currentColor}
.btn-line:active{transform:translateY(1px)}
.panel .btn-line{color:#F3EBDD}
/* outline on light */
.home .sits .btn-line,.home .topics .btn-line,.home .latest .btn-line,.home .bshelf .btn-line,.rel .btn-line,.bdesc .btn-line,.store:not(.bookpg) .btn-line,.list .btn-line{color:var(--charcoal)}
.home .sits .btn-line:hover,.home .topics .btn-line:hover,.home .latest .btn-line:hover,.home .bshelf .btn-line:hover,.rel .btn-line:hover,.bdesc .btn-line:hover,.store:not(.bookpg) .btn-line:hover,.list .btn-line:hover{background:var(--charcoal);color:var(--paper)}

/* ---------- links: underlined text, never button-shaped ---------- */
.tlink{display:inline;min-height:0;border:0;padding:0;font-weight:600;color:var(--gold);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.tlink .ar{display:inline-block;vertical-align:-4px;margin-left:6px}
.tlink:hover{color:var(--cream);text-decoration-thickness:2px}
.ann-a{text-decoration:underline;text-underline-offset:4px}
.hero-ai a{text-decoration:underline;text-underline-offset:4px}
.topic-corner a{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.topic-corner a:hover{color:var(--cream)}
.sit-list i{text-decoration:underline;text-underline-offset:4px}
.ftr li a:hover,.ftr-bot a:hover{text-decoration:underline}
.prose a:not(.btn){color:#7A5A2B;text-decoration-thickness:1.5px}
.prose a:not(.btn):hover{color:var(--charcoal)}
.panel a:not(.btn){text-decoration:underline;text-underline-offset:3px}

/* ---------- gold off the decoration, so it means "action" ---------- */
.meta .cat{color:var(--cream2)}
.paths b,.sit-list b,.steps b{color:var(--cream3)}
.sit-list a:hover strong,.card h3 a:hover{color:var(--gold);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.nav a[aria-current]:not(.btn){color:var(--cream);text-decoration:underline;text-decoration-color:var(--act);text-underline-offset:8px;text-decoration-thickness:2px}

/* ---------- light-band components ---------- */
.home .sits .sit-list li{border-color:rgba(22,21,20,.12)}
.home .sits .nstep,.home .topics .nstep,.list .nstep{background:#fff;border:1px solid rgba(22,21,20,.10);border-left:3px solid var(--act-edge);box-shadow:0 18px 40px -28px rgba(22,21,20,.35)}
.nstep strong{color:var(--charcoal)}
.topic li a:hover{color:var(--charcoal);text-decoration:underline}
.card .dek{color:var(--cream2)}
.bs img{filter:drop-shadow(0 18px 24px rgba(22,21,20,.28))}
.bk-cov img{filter:drop-shadow(0 18px 24px rgba(22,21,20,.28))}

/* books index: header band in sand, list on paper */
.store:not(.bookpg),.list{padding-bottom:var(--sec-y)}
.store:not(.bookpg) .crumbs,.store:not(.bookpg) .lhead,.list .crumbs,.list .lhead{background:var(--sand);box-shadow:0 0 0 100vmax var(--sand);clip-path:inset(0 -100vmax)}
.store:not(.bookpg) .lhead,.list .lhead{padding-bottom:48px;margin-bottom:48px}
.store:not(.bookpg) .bk{border-top:1px solid rgba(22,21,20,.14)}
.store:not(.bookpg) .incl{color:#7A5A2B}

/* book page: dark buybox hero stays (price + Buy above the fold), description reads on paper */
.bookpg .bhero{background:var(--ink)}
.bdesc .chk li{border-color:rgba(22,21,20,.12)}
.bdesc .close{color:var(--charcoal)!important}
.buybox{background:#1C1A15;border-color:rgba(226,190,122,.35)}

/* article: light reading surface, dark product panels give the CTA contrast */
.read .ahead{padding-bottom:40px}
.answer{border-left-color:var(--act-edge);box-shadow:0 1px 0 rgba(22,21,20,.06)}
.panel{border-color:#2b261c;box-shadow:0 24px 50px -30px rgba(22,21,20,.6)}
.panel .p-k,.p-early p b{color:var(--act)}
.panel .steps b{color:#A39A89}
.authb{margin-bottom:0}

/* Tess's v3-extra.css: keep her reassurance line legible on the dark coach band */
.coach .ctasub{color:#CDC3B1}
.store:not(.bookpg) .ckb p,.read .ckb p{color:#CDC3B1}
.ckb,.cc{--cream:#F3EBDD;--cream2:#CDC3B1;--gold:#E2BE7A}
.ckbtn{border-width:1.5px}
.ckbtn:hover{color:var(--on-act)}
/* article header band: sand behind crumbs + title + short answer, so the page opens with a clear section */
.read>.wrap.rd{background:var(--sand);box-shadow:0 0 0 100vmax var(--sand);clip-path:inset(0 -100vmax)}
.read .ahead{padding-bottom:48px}
.read .answer{background:#fff}
/* dark islands inside light bands get the dark tokens back */
.panel,.tyx,.stk,.sbar,.read .ckb,.read .cc{--cream:#F3EBDD;--cream2:#CDC3B1;--cream3:#A39A89;--line:rgba(226,190,122,.22);--line2:rgba(243,235,221,.12);--gold:#E2BE7A;--gold-hi:#F5C569;color:var(--cream)}
.bk-act .btn{flex:0 1 auto;white-space:nowrap}
@media (max-width:429px){.bk-act .btn{white-space:normal;flex:1 1 100%}}
.prose .panel a:not(.btn){color:inherit}
.prose .panel a:not(.btn):hover{color:var(--act)}
@media (min-width:760px){.nstep{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px}.nstep-a{flex-wrap:wrap;gap:12px 22px}}

/* App phone fan + post panel phone, v2 styling (Dex, 26 Oct 2026). Append after v3b.css. */
.tyx-shots{isolation:isolate;perspective:1400px}
.tyx-shots::before{content:"";position:absolute;z-index:0;left:50%;top:44%;width:92%;height:72%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(226,184,106,.46),rgba(226,184,106,.16) 55%,rgba(226,184,106,0) 100%);filter:blur(28px);pointer-events:none}
.tyx-shots::after{content:"";position:absolute;z-index:0;left:18%;right:18%;bottom:2%;height:34px;background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,0));filter:blur(8px);pointer-events:none}
.shot{display:block;padding:6px;border-radius:30px;background:linear-gradient(160deg,#3a3127 0%,#14110d 38%,#0c0a08 100%);box-shadow:inset 0 0 0 1px rgba(255,236,200,.10),0 0 0 1px rgba(226,190,122,.22)}
.shot img{display:block;width:100%;height:auto;border-radius:24px}
.shot.s1,.shot.s3{z-index:1;opacity:1;filter:brightness(.62) saturate(.8) blur(.4px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.35) 76%,transparent 96%);mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.35) 76%,transparent 96%)}
.shot.s1{transform:translateZ(-60px) rotateY(16deg) rotate(-5deg)}
.shot.s3{transform:translateZ(-60px) rotateY(-16deg) rotate(5deg)}
.shot.s2{z-index:3;box-shadow:inset 0 0 0 1px rgba(255,236,200,.12),0 0 0 1px rgba(226,190,122,.35),0 2px 4px rgba(0,0,0,.4),0 18px 36px rgba(0,0,0,.45),0 46px 90px rgba(0,0,0,.6),0 0 70px rgba(226,184,106,.22);
  -webkit-box-reflect:below 10px linear-gradient(to bottom,transparent 86%,rgba(255,255,255,.07) 100%)}
.p-ai .p-shot{position:relative;padding:5px;border-radius:24px;background:linear-gradient(160deg,#3a3127 0%,#14110d 38%,#0c0a08 100%)}
.p-ai .p-shot img{display:block;width:100%;height:auto;border-radius:19px}
@media (min-width:760px){
 .p-ai .p-shot{display:block;box-shadow:inset 0 0 0 1px rgba(255,236,200,.10),0 0 0 1px rgba(226,190,122,.28),0 16px 32px rgba(0,0,0,.5),0 0 48px rgba(226,184,106,.18)}
 .p-ai .p-shot::after{content:"";position:absolute;inset:5px;border-radius:19px;background:linear-gradient(to bottom,rgba(12,10,8,0) 62%,rgba(12,10,8,.6) 100%);pointer-events:none}
}
@media (max-width:759px){
 .shot{padding:4px;border-radius:22px}.shot img{border-radius:18px}
}
@media (prefers-reduced-motion:reduce){.shot{transition:none}}