/* ══════════════════════════════════════════════════════════════
   Jack Cole — design system

   Subject matter: a text conversation at 1am.
   So the thread IS the layout system, not a decorative component.

   · Timestamps carry section labels (they encode when he writes — the content itself)
   · Alignment carries voice: his left, hers right, Jack full-width
   · Night ground = his world, the guessing. Light ground = Jack's answer, morning.
   · One motion moment only: the hero thread arrives once, on load.

   Deliberately not used: all-caps eyebrows, uniform card kit, "A · B · C"
   meta strings, arrows in button text, numbered 01/02/03 markers,
   per-section scroll reveals. Those are defaults, not decisions.
   ══════════════════════════════════════════════════════════════ */

:root{
  --night:#10161A;        /* the screen at 1am, petrol-tinted, never neutral black */
  --night-2:#182026;
  --screen:#EDEEEC;       /* chat light-mode ground — not paper, not cream */
  --white:#FFFFFF;
  --him:#DFE2E0;          /* his bubble, light context */
  --him-dark:#232B30;     /* his bubble, night context */
  --her:#1B4D57;          /* her bubble. also every CTA. the one signal colour */
  --her-deep:#123840;
  --her-wash:#E3EAEB;
  --ink:#14181A;
  --ink-2:#4E585D;
  --ink-3:#7E888C;
  --line:#D8DAD7;
  --line-night:rgba(237,238,236,.14);
  --cream:#EDEEEC;
  --ok:#2E5D42;
  --err:#9C2F2B;

  --voice:"Fraunces",Georgia,"Times New Roman",serif;      /* Jack speaking */
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* what a phone renders */
  --read:"Literata",Georgia,serif;                          /* long-form, members only */

  --measure:34rem;
  --max:1120px;
  --shadow:0 18px 40px -22px rgba(16,22,26,.5);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--screen);color:var(--ink);font-family:var(--ui);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--her-deep)}
::selection{background:var(--her);color:#fff}
:focus-visible{outline:3px solid var(--her);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:var(--voice);font-weight:400;font-variation-settings:"SOFT" 22,"WONK" 1;letter-spacing:-.018em;line-height:1.05;text-wrap:balance;margin:0}
h1{font-size:clamp(38px,7.6vw,62px)}
h2{font-size:clamp(29px,5.4vw,42px)}
h3{font-size:clamp(21px,3.4vw,25px);line-height:1.18}
p{margin:0 0 1em}
strong{font-weight:600}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.col{max-width:var(--measure);margin:0 auto;padding:0 22px}
.say{font-family:var(--voice);font-size:clamp(19px,2.6vw,22px);line-height:1.5;font-variation-settings:"SOFT" 18;color:var(--ink-2)}
.small{font-size:14px;color:var(--ink-3);line-height:1.45}
section{padding:72px 0}
@media(min-width:840px){section{padding:104px 0}}

/* ── the timestamp: this replaces every section label on the site ── */
.at{font-family:var(--ui);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-3);margin:0 0 20px;display:block}
.at b{font-weight:600;color:var(--her-deep)}
.night .at{color:rgba(237,238,236,.5)} .night .at b{color:#8FB3B8}

/* ── grounds ── */
.night{background:var(--night);color:var(--cream)}
.night h1,.night h2,.night h3{color:#fff}
.night p,.night .say{color:#C4CCCF}
.night a:not(.btn){color:#DCE6E8}
.light{background:var(--white)}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(237,238,236,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav.on-night{background:rgba(16,22,26,.85);border-bottom-color:var(--line-night)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:60px}
.brand{font-family:var(--voice);font-weight:600;font-size:20px;color:var(--ink);text-decoration:none;margin-right:auto;font-variation-settings:"SOFT" 22,"WONK" 1}
.nav.on-night .brand{color:#fff}
.nav a:not(.brand):not(.btn){font-size:14.5px;color:var(--ink-2);text-decoration:none}
.nav.on-night a:not(.brand):not(.btn){color:#AEB8BB}
.nav .btn{padding:9px 18px;font-size:14.5px;min-height:0}
.nav .links{display:inline-flex;align-items:center;gap:22px}
@media(max-width:700px){.nav .links{display:none}}

/* ── buttons: one shape, one colour, everywhere ── */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--her);color:#fff;text-decoration:none;font-family:var(--ui);font-weight:600;font-size:16.5px;padding:15px 26px;border:0;border-radius:10px;cursor:pointer;min-height:52px;line-height:1.15;transition:background .18s ease}
.btn:hover{background:var(--her-deep)}
.btn.wide{width:100%}
.btn.big{font-size:18px;padding:18px 30px;min-height:58px}
.btn.pale{background:var(--cream);color:var(--her-deep)} .btn.pale:hover{background:#fff}
.btn[aria-disabled="true"]{background:var(--ink-3);cursor:default}
.under{font-size:13.5px;color:var(--ink-3);margin:10px 0 0}
.night .under{color:rgba(237,238,236,.5)}

/* ══ THE THREAD — the site's structural device ══ */
.thread{max-width:var(--measure);margin:0 auto}
.thread.wide{max-width:36rem}
.msg{font-family:var(--ui);font-size:16.5px;line-height:1.4;padding:11px 16px;border-radius:19px;margin:0 0 7px;max-width:78%;width:fit-content;position:relative}
.msg.him{background:var(--him);color:var(--ink);border-bottom-left-radius:5px;margin-right:auto}
.msg.her{background:var(--her);color:#fff;border-bottom-right-radius:5px;margin-left:auto}
.night .msg.him{background:var(--him-dark);color:#DDE3E5}
.stamp{font-family:var(--ui);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-3);margin:0 0 16px}
.stamp.r{text-align:right}
.night .stamp{color:rgba(237,238,236,.42)}
/* the gap between messages, drawn as time — the one bold moment */
.gap{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--ink-3);font-size:12.5px;font-variant-numeric:tabular-nums}
.gap::before,.gap::after{content:"";height:1px;background:var(--line);flex:1}
.night .gap{color:rgba(237,238,236,.5)}
.night .gap::before,.night .gap::after{background:var(--line-night)}
.aside{font-family:var(--voice);font-size:17px;line-height:1.45;color:var(--ink-2);margin:14px 0 0;max-width:30rem;font-variation-settings:"SOFT" 18}
.night .aside{color:#A8B3B6}

/* hero */
.hero{padding:40px 0 64px}
.hero .grid{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.hero{padding:72px 0 96px}.hero .grid{grid-template-columns:1.05fr .95fr;gap:64px}}
.hero h1{margin:0 0 20px}
.hero .say{margin:0 0 30px;max-width:26rem}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ── the three men: identified by what he sends, not by a number ── */
.men{display:grid;gap:20px;margin-top:8px}
@media(min-width:860px){.men{grid-template-columns:repeat(3,1fr);gap:26px}}
.man{display:block;text-decoration:none;color:inherit;padding-top:22px;border-top:2px solid var(--ink)}
.night .man{border-top-color:rgba(237,238,236,.75)}
.man .msg{max-width:100%;margin-bottom:14px;font-size:15.5px}
.man h3{margin:0 0 7px}
.man p{margin:0;color:var(--ink-2);font-size:15.5px}
.night .man p{color:#A8B3B6}
.man:hover h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ── Jack's voice: no container at all ── */
.voice{max-width:var(--measure);margin:0 auto}
.voice p{font-family:var(--voice);font-size:19px;line-height:1.62;font-variation-settings:"SOFT" 18;color:var(--ink-2);margin:0 0 1.1em}
.voice .lead-line{font-size:clamp(25px,4.2vw,32px);line-height:1.22;color:var(--ink);font-variation-settings:"SOFT" 22,"WONK" 1;margin:0 0 .7em}
.night .voice p{color:#C4CCCF} .night .voice .lead-line{color:#fff}
.sign{font-family:var(--voice);font-size:19px;color:var(--ink);margin-top:1.4em}
.night .sign{color:#fff}
.portrait{aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:linear-gradient(168deg,#233038,#10161A);max-width:340px;width:100%;position:relative}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait.empty::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(237,238,236,.035) 12px 13px)}
.story-grid{display:grid;gap:34px}
@media(min-width:900px){.story-grid{grid-template-columns:320px 1fr;gap:56px;align-items:start}}

/* ── comment strip (real Instagram comments) ── */
.strip{overflow:hidden;max-width:100vw;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.night .strip{background:var(--night-2);border-color:var(--line-night)}
.strip .track{display:flex;gap:30px;width:max-content;animation:slide 80s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.strip q{flex:none;font-family:var(--voice);font-size:17px;font-style:italic;color:var(--ink-2);white-space:nowrap;font-variation-settings:"SOFT" 18}
.strip q::before{content:"“"} .strip q::after{content:"”"}
.night .strip q{color:#AEB8BB}
.strip-note{text-align:center;font-size:13px;color:var(--ink-3);margin:14px 0 0}
.night .strip-note{color:rgba(237,238,236,.45)}

/* ── device mocks: the real product pages, at scale ── */
.devices{display:grid;gap:34px;justify-items:center}
@media(min-width:840px){.devices{grid-template-columns:repeat(3,1fr);gap:22px;align-items:end}.devices>:nth-child(2) .device{transform:translateY(-26px)}}
.device{width:min(290px,100%);aspect-ratio:9/18.6;border-radius:34px;background:#05080A;padding:9px;box-shadow:0 34px 60px -30px rgba(5,8,10,.75);position:relative}
.device::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:34%;height:20px;background:#05080A;border-radius:0 0 14px 14px;z-index:2}
.screen{width:100%;height:100%;border-radius:27px;background:var(--white);overflow:hidden;position:relative;font-family:var(--read);font-size:9.3px;line-height:1.55;color:var(--ink)}
.screen .top{height:42px;background:var(--screen);border-bottom:1px solid var(--line);display:flex;align-items:flex-end;padding:0 13px 7px;font-family:var(--ui);font-size:8.5px;color:var(--ink-3)}
.screen .top b{font-family:var(--voice);font-size:11px;font-weight:600;color:var(--ink);margin-right:auto}
.screen .in{padding:13px 14px}
.screen .tm{font-family:var(--ui);font-size:7px;font-weight:600;color:var(--ink-3);margin:0 0 5px}
.screen h4{font-family:var(--voice);font-weight:400;font-size:17px;line-height:1.06;margin:0 0 6px;font-variation-settings:"SOFT" 22,"WONK" 1}
.screen h5{font-family:var(--voice);font-weight:600;font-size:10.5px;color:var(--her-deep);margin:11px 0 3px}
.screen p{margin:0 0 6px}
.screen .b{border-left:2px solid var(--her);padding:0 0 0 8px;margin:8px 0}
.screen .b p{margin:0 0 3px} .screen .b p:last-child{margin:0}
.screen .mm{font-family:var(--ui);font-size:8.5px;padding:6px 9px;border-radius:12px;margin:0 0 4px;width:fit-content;max-width:85%}
.screen .mm.h{background:var(--him)} .screen .mm.s{background:var(--her);color:#fff;margin-left:auto;border-bottom-right-radius:3px}
.screen .go{display:block;background:var(--her);color:#fff;font-family:var(--ui);font-weight:600;font-size:8.5px;text-align:center;border-radius:7px;padding:7px;margin-top:9px}
.screen .fade{position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.device-cap{text-align:center;font-size:13.5px;color:var(--ink-3);margin-top:14px}
.night .device-cap{color:rgba(237,238,236,.5)}

/* ── reels ── */
.reels{display:grid;gap:22px;justify-items:center}
@media(min-width:840px){.reels{grid-template-columns:repeat(3,1fr)}}
.reels .v{width:min(320px,100%);border-radius:14px;overflow:hidden;background:#000}
.reels blockquote.instagram-media{margin:0!important;min-width:0!important;width:100%!important}
.reels .cap{text-align:center;font-size:13.5px;color:rgba(237,238,236,.55);margin-top:10px;max-width:320px}

/* ── the offer: weight, not identical cards ── */
.offer{display:grid;gap:26px;align-items:start}
@media(min-width:900px){.offer{grid-template-columns:1fr 1fr;gap:44px}}
.pick{padding-top:24px;border-top:2px solid var(--ink)}
.pick.main{border-top-width:9px;border-top-color:var(--her)}
.pick .tier{font-size:13px;font-weight:600;color:var(--ink-3);margin:0 0 10px}
.pick.main .tier{color:var(--her-deep)}
.pick h3{margin:0 0 8px}
.pick .what{color:var(--ink-2);margin:0 0 18px;font-size:16px}
.amt{font-family:var(--voice);font-size:clamp(40px,7vw,56px);line-height:1;letter-spacing:-.025em;font-variation-settings:"SOFT" 22,"WONK" 1;margin:0 0 18px;display:block}
.amt small{font-family:var(--ui);font-size:14.5px;color:var(--ink-3);letter-spacing:0;margin-left:10px;font-variation-settings:normal}
.has{list-style:none;padding:0;margin:0 0 22px}
.has li{padding:9px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.has li:first-child{border-top:0}
.has li b{color:var(--ink);font-weight:600}
.has li .inc{font-size:12px;font-weight:600;color:var(--ok);margin-left:6px}

/* ── FAQ, written as the thread ── */
.qa{max-width:var(--measure);margin:0 auto}
.qa .msg.her{margin-bottom:12px}
.qa .ans{font-family:var(--voice);font-size:18px;line-height:1.55;color:var(--ink-2);margin:0 0 34px;font-variation-settings:"SOFT" 18}
.night .qa .ans{color:#C4CCCF}

/* ── forms ── */
label{display:block;font-size:14.5px;font-weight:600;color:var(--ink-2);margin-bottom:8px}
input[type=text],input[type=email]{width:100%;font-family:var(--ui);font-size:16.5px;padding:15px 16px;min-height:52px;border:1.5px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink)}
input:focus{outline:none;border-color:var(--her);box-shadow:0 0 0 3px var(--her-wash)}
.err{color:var(--err);font-size:14.5px;margin:8px 0 0}
.box{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:26px 24px}

/* ── footer + sticky ── */
footer.site{background:var(--night);color:rgba(237,238,236,.55);padding:44px 0 110px;font-size:13.5px;line-height:1.6}
footer.site .row{display:flex;flex-wrap:wrap;gap:14px 22px;margin-bottom:16px}
footer.site a{color:rgba(237,238,236,.8);text-decoration:none}
@media(min-width:760px){footer.site{padding-bottom:56px}}
.bar{position:fixed;z-index:70;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));transform:translateY(115%);transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.bar.up{transform:none}
.bar .wrap{display:flex;align-items:center;gap:14px;padding:0;max-width:var(--max)}
.bar .t{font-weight:600;font-size:15px;margin:0} .bar .s{font-size:13px;color:var(--ink-3);margin:0}
.bar .btn{margin-left:auto;min-height:46px;padding:12px 22px;font-size:15.5px}

/* ── the one motion moment: the hero thread arrives, once ── */
.thread.plays .msg,.thread.plays .stamp,.thread.plays .gap,.thread.plays .aside{opacity:0;animation:say .42s cubic-bezier(.2,.7,.3,1) forwards}
.thread.plays>*:nth-child(1){animation-delay:.15s}
.thread.plays>*:nth-child(2){animation-delay:.3s}
.thread.plays>*:nth-child(3){animation-delay:.75s}
.thread.plays>*:nth-child(4){animation-delay:.9s}
.thread.plays>*:nth-child(5){animation-delay:1.35s}
.thread.plays>*:nth-child(6){animation-delay:1.5s}
.thread.plays>*:nth-child(7){animation-delay:1.65s}
.thread.plays>*:nth-child(8){animation-delay:1.8s}
@keyframes say{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .thread.plays .msg,.thread.plays .stamp,.thread.plays .gap,.thread.plays .aside{opacity:1;animation:none}
  
  .btn,.bar{transition:none}
  html{scroll-behavior:auto}
}

/* ══ members area — a reader, not a marketing page ══ */
body.members{font-family:var(--read);background:var(--white)}
body.members .wrap{max-width:38rem}
.mbar{display:flex;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--screen);font-family:var(--ui);flex-wrap:wrap;position:sticky;top:0;z-index:40}
.mbar .brand{font-size:18px;margin-right:auto}
.mbar nav{display:flex;gap:16px;flex-wrap:wrap}
.mbar nav a{font-size:14px;text-decoration:none;color:var(--her-deep)}
.mbar nav a.locked{color:var(--ink-3)}
.mfoot{max-width:38rem;margin:0 auto;padding:0 22px 48px;font-size:13px;color:var(--ink-3);font-family:var(--ui)}
.lib{display:grid;gap:0;margin-top:26px}
.lib .card{display:block;text-decoration:none;color:inherit;font-family:var(--ui);padding:24px 0;border-top:1px solid var(--line)}
.lib .card .eyebrow{font-size:13px;font-weight:600;color:var(--her-deep);margin:0 0 6px}
.lib .card h2{font-family:var(--voice);font-weight:400;font-size:28px;margin:0 0 8px;font-variation-settings:"SOFT" 22,"WONK" 1}
.lib .card p{margin:0;color:var(--ink-2);font-size:15.5px}
.lib .card.locked{opacity:.65} .lib .card.locked .eyebrow{color:var(--ink-3)}
body.members h1{font-family:var(--voice);font-weight:400;font-size:clamp(32px,7vw,46px);margin:38px 0 12px;font-variation-settings:"SOFT" 22,"WONK" 1}
.product-page{padding:16px 0 80px}
.product-page .eyebrow{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--her-deep);margin:0 0 8px}
.ptitle{font-size:clamp(34px,7.6vw,50px)}
.product-page .sub{font-family:var(--voice);font-size:clamp(18px,3.4vw,21px);color:var(--ink-2);line-height:1.4;margin:14px 0 0}
.product-page h1:not(.ptitle){font-size:clamp(27px,5.6vw,34px);margin:60px 0 16px;padding-top:32px;border-top:2px solid var(--ink)}
.product-page h2{font-family:var(--voice);font-size:clamp(21px,4vw,25px);margin:30px 0 10px;color:var(--her-deep);font-weight:600}
.product-page p{font-size:18px;line-height:1.72;margin:0 0 19px}
.product-page blockquote{margin:16px 0 22px;padding:0 0 0 18px;border-left:3px solid var(--her)}
.product-page blockquote p{margin:0 0 9px} .product-page blockquote p:last-child{margin:0}
.product-page table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15.5px;font-family:var(--ui)}
.product-page th,.product-page td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.product-page th{font-weight:600;color:var(--her-deep)}
.product-page hr{border:0;border-top:1px solid var(--line);margin:38px 0}
.product-page ul,.product-page ol{padding-left:20px} .product-page li{margin:6px 0}
.toc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:28px 0 8px;font-size:15px;font-family:var(--ui)}
.toc-h{font-weight:600;margin:0 0 8px;color:var(--her-deep)}
.toc ol{margin:0;padding-left:0;list-style:none;columns:2;column-gap:26px} .toc li{margin:4px 0} .toc a{text-decoration:none;color:var(--ink-2)}
@media(max-width:540px){.toc ol{columns:1}}

/* ── proof: real comments, laid out like the thread they came from ── */
.proof{display:grid;gap:14px}
@media(min-width:760px){.proof{grid-template-columns:repeat(2,1fr);gap:16px 28px}}
@media(min-width:1040px){.proof{grid-template-columns:repeat(3,1fr)}}
.said{break-inside:avoid;padding:20px 0 0;border-top:1px solid var(--line)}
.night .said{border-top-color:var(--line-night)}
.said q{display:block;font-family:var(--voice);font-size:18px;line-height:1.45;color:var(--ink);font-variation-settings:"SOFT" 18;margin:0 0 12px}
.night .said q{color:#E6EAEB}
.said .who{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-3)}
.night .said .who{color:rgba(237,238,236,.5)}
.said .who a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.said .who a:hover{color:var(--her-deep)}
.night .said .who a:hover{color:#8FB3B8}
.said .ig{width:17px;height:17px;flex:none;opacity:.65}
.proof-note{font-size:13.5px;color:var(--ink-3);margin:34px 0 0;max-width:38rem}
.night .proof-note{color:rgba(237,238,236,.45)}
.counts{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:0 0 48px;max-width:46rem}
@media(min-width:760px){.counts{grid-template-columns:repeat(4,1fr)}}
.counts div b{display:block;font-family:var(--voice);font-size:clamp(34px,5.4vw,46px);line-height:1;letter-spacing:-.025em;font-variation-settings:"SOFT" 22,"WONK" 1;color:var(--ink)}
.counts div span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:7px;line-height:1.4}
.night .counts div b{color:#fff} .night .counts div span{color:rgba(237,238,236,.5)}

/* ══ THE BOOK ═══════════════════════════════════════════════
   A digital book still needs to be an object you can want.
   Built in CSS so it stays crisp at any size and costs nothing.
   Brass appears here and nowhere else on the site — it is the
   foil on the cover, not a brand colour.
   ═══════════════════════════════════════════════════════════ */
:root{ --brass:#A98A54; --brass-2:#C9AE7C; --board:#16222A; --board-2:#0B1216; }

.bookwrap{perspective:1900px;display:flex;justify-content:center;padding:14px 0}
.book{position:relative;width:min(300px,72vw);aspect-ratio:5/7.1;transform:rotateY(-19deg) rotateX(3deg);transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.7,.3,1)}
.bookwrap:hover .book{transform:rotateY(-11deg) rotateX(2deg)}
.book .face{position:absolute;inset:0;border-radius:3px 6px 6px 3px;background:linear-gradient(118deg,#1D2C35 0%,#16222A 44%,#0C1418 100%);box-shadow:0 44px 70px -34px rgba(6,11,14,.85),0 2px 0 rgba(255,255,255,.05) inset;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:12% 11% 11%}
/* cloth grain + the sheen of a printed board */
.book .face::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(94deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),repeating-linear-gradient(4deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);pointer-events:none}
.book .face::after{content:"";position:absolute;inset:0;background:linear-gradient(104deg,rgba(255,255,255,.14) 0%,transparent 26%,transparent 72%,rgba(255,255,255,.05) 100%);pointer-events:none}
/* the spine, turned into 3D */
.book .spine{position:absolute;top:0;bottom:0;left:0;width:26px;transform:translateX(-26px) rotateY(-90deg);transform-origin:right center;background:linear-gradient(180deg,#0E171C,#060B0E);border-radius:3px 0 0 3px}
/* page block on the fore-edge */
.book .edge{position:absolute;top:2%;bottom:2%;right:0;width:9px;transform:translateX(9px) rotateY(90deg);transform-origin:left center;background:repeating-linear-gradient(180deg,#EFEDE6 0 1px,#D6D2C6 1px 2px);border-radius:0 2px 2px 0}
.book .rule{height:1px;background:linear-gradient(90deg,transparent,var(--brass),transparent);opacity:.75;margin:9% 0}
.book .name{font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.24em;color:var(--brass-2);position:relative;z-index:1}
.book .ttl{font-family:var(--voice);font-weight:400;font-variation-settings:"SOFT" 24,"WONK" 1;font-size:clamp(25px,6.4vw,34px);line-height:1;letter-spacing:-.022em;color:#F4EFE4;position:relative;z-index:1;text-wrap:balance}
.book .sub{font-family:var(--voice);font-size:12.5px;line-height:1.35;color:rgba(244,239,228,.62);position:relative;z-index:1;margin:0}
.book .foil{font-family:var(--ui);font-size:9px;font-weight:600;letter-spacing:.2em;color:var(--brass);position:relative;z-index:1}
.book.flat{transform:none;box-shadow:none}
.book.sm{width:118px}
.book.sm .ttl{font-size:15px} .book.sm .name{font-size:6.5px} .book.sm .sub{display:none} .book.sm .foil{font-size:6px}
@media(prefers-reduced-motion:reduce){.book,.bookwrap:hover .book{transition:none}}

/* ── a real page, set as a page ── */
.spread{background:#FBFAF7;border-radius:3px;box-shadow:0 30px 60px -34px rgba(16,22,26,.55),0 0 0 1px rgba(16,22,26,.07);padding:clamp(28px,5vw,54px) clamp(24px,5vw,58px);max-width:38rem;margin:0 auto;position:relative}
.spread::after{content:"";position:absolute;left:0;top:0;bottom:0;width:26px;background:linear-gradient(90deg,rgba(16,22,26,.07),transparent);border-radius:3px 0 0 3px}
.spread .folio{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--ink-3);margin:0 0 22px}
.spread h3{font-family:var(--voice);font-size:clamp(23px,3.6vw,29px);margin:0 0 18px;font-variation-settings:"SOFT" 22,"WONK" 1}
.spread p{font-family:var(--read);font-size:16.5px;line-height:1.74;color:#2A3034;margin:0 0 15px}
.spread .side{border-left:2px solid var(--her);padding-left:16px;margin:20px 0}
.spread .side p{margin:0 0 8px;font-size:16px} .spread .side p:last-child{margin:0}
.spread .pg{text-align:center;font-family:var(--read);font-size:13px;color:var(--ink-3);margin:26px 0 0}

/* ── contents list, set like a book's ── */
.contents{max-width:38rem;margin:0 auto;list-style:none;padding:0}
.contents li{display:flex;align-items:baseline;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}
.night .contents li{border-bottom-color:var(--line-night)}
.contents li:first-child{border-top:1px solid var(--line)}
.night .contents li:first-child{border-top-color:var(--line-night)}
.contents .no{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-3);min-width:26px;font-variant-numeric:tabular-nums}
.night .contents .no{color:rgba(237,238,236,.42)}
.contents .ch{font-family:var(--voice);font-size:19px;line-height:1.25;font-variation-settings:"SOFT" 20}
.contents .dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.night .contents .dots{border-bottom-color:rgba(237,238,236,.22)}
.contents .cnt{font-family:var(--ui);font-size:13px;color:var(--ink-3)}
.night .contents .cnt{color:rgba(237,238,236,.45)}

/* ── the buy block ── */
.buy{max-width:34rem;margin:0 auto;text-align:center}
.buy .amt{display:block;margin:0 0 6px}
.buy .btn{margin-top:18px}
.buy-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:22px 0 0;font-size:14px;color:var(--ink-3)}
.night .buy-facts{color:rgba(237,238,236,.5)}
.buy-facts span{display:inline-flex;align-items:center;gap:7px}
.buy-facts svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* the author, before the book */
.by{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-family:var(--ui);font-size:14px;color:rgba(237,238,236,.62)}
.by img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 50%;flex:none;box-shadow:0 0 0 2px rgba(237,238,236,.28),0 6px 14px -6px rgba(0,0,0,.6)}
.by b{font-weight:600;color:#fff}
.portrait img{transition:none}

/* centred section heading, with room around it */
.mid{text-align:center;max-width:16ch;margin:0 auto 52px}
@media(min-width:840px){.mid{margin-bottom:64px}}
/* the strip carries the proof on its own now — no caption needed */
.strip-note{display:none}

/* ══ PHONE ═══════════════════════════════════════════════════
   Everything arrives from an Instagram DM, so this is the real
   layout and the desktop one is the variation.
   The book must be the first thing on screen — she is buying an
   object, and she cannot want one she has not seen.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:760px){
  section{padding:56px 0}
  .wrap,.col{padding:0 20px}

  .hero{padding:22px 0 40px}
  .hero .grid{gap:26px}
  .hero .bookwrap{order:-1;padding:0}          /* cover first */
  .book{width:170px;transform:rotateY(-13deg) rotateX(2deg)}
  .book .face{padding:13% 11% 12%;box-shadow:0 26px 40px -22px rgba(6,11,14,.9)}
  .book .ttl{font-size:20px}
  .book .sub{font-size:9.5px;line-height:1.3}
  .book .name{font-size:7.5px;letter-spacing:.2em}
  .book .foil{font-size:6.5px;letter-spacing:.16em}
  .book .rule{margin:7% 0}
  .book .spine{width:16px;transform:translateX(-16px) rotateY(-90deg)}
  .book .edge{width:6px;transform:translateX(6px) rotateY(90deg)}

  .by{margin:0 0 14px;font-size:13.5px}
  .by img{width:44px;height:44px}
  .hero h1{font-size:clamp(31px,8.4vw,40px);margin:0 0 12px}
  .hero .say{font-size:17.5px;line-height:1.45;margin:0 0 22px;max-width:none}
  .hero .cta{gap:10px}
  .hero .cta .btn{width:100%}
  .hero .cta .small{width:100%;text-align:center}

  h2{font-size:clamp(26px,7.4vw,34px)}
  .mid{margin-bottom:34px;max-width:14ch}

  .contents li{padding:13px 0;gap:9px;flex-wrap:wrap}
  .contents .ch{font-size:17px}
  .contents .no{min-width:20px;font-size:11px}
  .contents .cnt{font-size:12px}

  .spread{padding:26px 22px;border-radius:2px}
  .spread h3{font-size:22px;margin-bottom:14px}
  .spread p{font-size:15.5px;line-height:1.68}
  .spread .folio{font-size:10px;margin-bottom:16px}

  .story-grid{gap:24px}
  .portrait{max-width:220px}
  .voice .lead-line{font-size:24px}
  .voice p{font-size:17.5px;line-height:1.55}

  .buy .amt{font-size:42px}
  .buy-facts{gap:8px 18px;font-size:13px;margin-top:18px}

  .strip{padding:13px 0}
  .strip q{font-size:15px}
  .strip .track{gap:22px}

  footer.site{padding:34px 0 104px}
}

/* the checkout isn't wired yet — say so quietly instead of looking broken */
.btn[aria-disabled="true"]{background:transparent;color:rgba(237,238,236,.62);box-shadow:inset 0 0 0 1.5px rgba(237,238,236,.28)}
.light .btn[aria-disabled="true"],section:not(.night) .btn[aria-disabled="true"]{color:var(--ink-3);box-shadow:inset 0 0 0 1.5px var(--line)}
.nav .btn[aria-disabled="true"]{box-shadow:inset 0 0 0 1.5px rgba(237,238,236,.28)}

/* On a phone the 3D page block reads as a glitch, not as paper.
   Suggest the pages with an edge highlight on the cover instead, and
   ground the book with a real contact shadow. */
@media(max-width:760px){
  .book .edge,.book .spine{display:none}
  .book .face{box-shadow:
    0 26px 34px -20px rgba(4,8,10,.92),
    2px 0 0 rgba(239,237,230,.92),
    4px 0 0 rgba(198,194,182,.7),
    6px 0 0 rgba(160,156,146,.45);
    border-radius:2px 4px 4px 2px}
  .bookwrap{position:relative}
  .bookwrap::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:150px;height:16px;border-radius:50%;background:radial-gradient(ellipse,rgba(4,8,10,.55),transparent 70%);pointer-events:none}
}

/* Tap targets: 44px minimum. Measured five that missed on a phone —
   the nav button was 35px, the footer links 22px. */
@media(max-width:760px){
  .nav .wrap{height:56px}
  .nav .btn{min-height:44px;padding:11px 18px}
  .brand{display:inline-flex;align-items:center;min-height:44px}
  footer.site .row{gap:4px 22px}
  footer.site .row a{display:inline-flex;align-items:center;min-height:44px}
  .contents .no{font-size:12px}
  .bar .btn{min-height:46px}
}

/* ══ REVIEW FIXES ════════════════════════════════════════════ */

/* a second beat inside the same light stretch, quieter than an h2 */
.sub-mid{font-family:var(--voice);font-size:clamp(23px,4.2vw,30px);line-height:1.15;letter-spacing:-.015em;color:var(--ink);text-align:center;max-width:18ch;margin:76px auto 34px;font-variation-settings:"SOFT" 22,"WONK" 1}
@media(max-width:760px){.sub-mid{margin:52px auto 26px}}

/* Jack: the photo was a hard rectangle floating on the dark.
   Let it sit in the ground — no corners, no border, and the bottom
   edge dissolves into the night so he belongs to the page. */
.portrait{border-radius:0;background:none;max-width:none;aspect-ratio:auto}
.portrait img{width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%)}
.story-grid{align-items:center}
@media(min-width:900px){
  .story-grid{grid-template-columns:minmax(300px,420px) 1fr;gap:64px}
  .voice .lead-line{font-size:clamp(28px,3.4vw,40px)}
}
@media(max-width:899px){
  /* full width, edge to edge — a face at 220px reads as a stock photo */
  .story-grid{gap:8px}
  .portrait{margin:0 -20px;width:calc(100% + 40px)}
  .voice{text-align:center;margin-top:-28px;position:relative;z-index:1}
  .voice .lead-line{font-size:clamp(25px,6.6vw,32px)}
  .voice p{max-width:30ch;margin-left:auto;margin-right:auto}
}

/* contents: the count must never wrap onto its own line */
.contents li{flex-wrap:nowrap}
.contents .ch{flex:0 1 auto;min-width:0}
.contents .cnt{flex:none;white-space:nowrap}
.contents .dots{min-width:14px}

/* hero: keep the buy button above the fold on short screens too */
@media(max-height:700px) and (min-width:761px){
  .hero{padding:34px 0 48px}
  .hero h1{font-size:clamp(34px,4.6vw,48px)}
  .book{width:min(230px,60vw)}
}

/* Reduce Motion is on for a lot of people — it must not turn the marquee
   into a fifteen-line list. Stop the animation, keep the single row, and
   let it be swiped instead. */
@media(prefers-reduced-motion:reduce){
  .strip{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask:none;mask:none}
  .strip::-webkit-scrollbar{display:none}
  .strip .track{animation:none;flex-wrap:nowrap;width:max-content;padding:0 20px}
}
/* a single quote can never be wider than the screen, whatever else happens */
.strip q{max-width:min(92vw,560px);overflow:hidden;text-overflow:ellipsis}
.strip .track{flex-wrap:nowrap}

/* ══════════════════════════════════════════════════════════════
   READER PASS — the audience is 98% women, 45+, most of them 55+.

   What that changes, measured rather than guessed:
   · Body type up to 19px. Presbyopia is near-universal past 45.
   · Muted greys were 3.12:1 and 3.63:1 — below WCAG AA. Every line of
     reassurance before the buy button was the hardest thing to read.
   · Long dark passages are harder for older eyes (halation, astigmatism),
     so the dark is now the hero only. Everything you read is light.
   · Buttons to 56px. Tap accuracy falls with age.
   · Nothing moves. Sliding text is hard to read and easy to dislike.
   ══════════════════════════════════════════════════════════════ */
:root{
  --ink-2:#3E4649;   /* 8.29:1 on the light ground */
  --ink-3:#5C6669;   /* 5.07:1 — small print is now readable */
}
body{font-size:19px;line-height:1.62}
.say{font-size:clamp(20px,2.7vw,23px);line-height:1.48}
.small{font-size:16px;line-height:1.55;color:var(--ink-3)}
.under{font-size:16px;color:var(--ink-3);line-height:1.5}
.night .under,.night .small{color:#AAB4B7}
.night p,.night .say{color:#D8DEE0}
.night .at{color:#AAB4B7}
.btn{font-size:18px;min-height:56px;padding:17px 30px}
.btn.big{font-size:20px;min-height:62px;padding:19px 34px}
.nav .btn{min-height:46px;padding:11px 20px;font-size:16px}
.bar .btn{min-height:52px;font-size:17px}
input[type=text],input[type=email]{font-size:18px;min-height:56px}
label{font-size:16px}
.voice p{font-size:20px;line-height:1.66}
.contents .ch{font-size:20px}
.contents .cnt{font-size:15px;color:var(--ink-3)}
.contents li{padding:17px 0}
.spread p{font-size:18px;line-height:1.76}
.buy-facts{font-size:16px}
footer.site{font-size:15px;color:#AAB4B7}
footer.site a{color:#DDE3E5}

/* proof, standing still */
.quotes{display:grid;gap:22px;max-width:var(--measure);margin:0 auto}
@media(min-width:820px){.quotes{grid-template-columns:repeat(3,1fr);max-width:none;gap:26px}}
.quotes figure{margin:0;padding:22px 0 0;border-top:2px solid var(--line)}
.quotes blockquote{margin:0 0 12px;font-family:var(--voice);font-size:19px;line-height:1.45;color:var(--ink);font-variation-settings:"SOFT" 18}
.quotes figcaption{font-size:15px;color:var(--ink-3)}
.quotes figcaption a{color:var(--ink-3)}

/* how it works — the question this audience actually has */
.steps{display:grid;gap:26px;max-width:var(--measure);margin:0 auto}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr);max-width:none;gap:34px}}
.step{display:flex;gap:16px;align-items:flex-start}
.step .n{flex:none;width:40px;height:40px;border-radius:50%;background:var(--her);color:#fff;display:grid;place-items:center;font-family:var(--voice);font-size:20px;font-weight:600}
.step h3{font-size:20px;margin:6px 0 6px}
.step p{margin:0;font-size:17.5px;line-height:1.55;color:var(--ink-2)}

/* the buy block, rebuilt around what stops a 55-year-old from paying */
.checkout{max-width:32rem;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:34px 30px;text-align:center}
.checkout .amt{display:block;margin:0 0 4px}
.checkout .once{font-size:17px;color:var(--ink-2);margin:0 0 24px}
.checkout .once b{color:var(--ink)}
.checkout .btn{margin-bottom:20px}
.assure{list-style:none;padding:0;margin:0;text-align:left;display:grid;gap:13px}
.assure li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.45;color:var(--ink-2)}
.assure svg{width:22px;height:22px;flex:none;margin-top:1px;stroke:var(--her);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.assure b{color:var(--ink)}
@media(max-width:760px){
  .checkout{padding:28px 22px;border-radius:14px}
  body{font-size:18.5px}
  .btn.big{min-height:60px;font-size:19px}
  .step h3{font-size:19px}
}

/* caption links were 20px tall — still links, still need a thumb */
.contents .no{font-size:14px}

/* the quotes credit their source without naming anyone */
.quotes figcaption{font-size:15px;color:var(--ink-3);letter-spacing:.01em}

/* privacy: present, reachable, not advertised */
footer.site .fineprint{color:inherit;text-decoration:none;border-bottom:1px solid rgba(237,238,236,.28)}
footer.site .fineprint:hover{border-bottom-color:rgba(237,238,236,.6)}

/* ── what she actually gets, in one place ──────────────────────
   Added after a review pointed out she had to assemble this from
   eight places on the page. Set as a list, not a card: the page has
   no card kit and is not getting one. */
.gets{list-style:none;padding:0;margin:40px auto 0;max-width:38rem;display:grid;gap:0}
.gets li{display:flex;gap:13px;align-items:flex-start;padding:13px 0;font-size:17.5px;line-height:1.5;color:var(--ink-2);border-bottom:1px solid var(--line)}
.gets li:first-child{border-top:1px solid var(--line)}
.gets li b{color:var(--ink);font-weight:600}
.gets li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--her-wash);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4D57' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat}

/* provenance said before the quotes, not as a retraction after them */
.provenance{text-align:center;max-width:36rem;margin:-26px auto 34px;font-size:15.5px;line-height:1.5;color:var(--ink-3)}

/* ── the six questions that stop her at the last moment ──────── */
.faq{max-width:38rem;margin:52px auto 0;padding:0}
.faq dt{font-family:var(--voice);font-size:19.5px;line-height:1.3;color:var(--ink);margin:0;padding:24px 0 0;border-top:1px solid var(--line);font-variation-settings:"SOFT" 20}
.faq dt:first-of-type{border-top:0;padding-top:0}
.faq dd{margin:9px 0 24px;font-size:17px;line-height:1.55;color:var(--ink-2)}
.faq dd a{color:var(--her);text-underline-offset:3px}
.faq dd b{color:var(--ink)}

@media(max-width:760px){
  .gets{margin-top:30px}
  .gets li{font-size:16.5px;padding:12px 0}
  .provenance{margin:-18px auto 26px;font-size:15px;text-align:left}
  .faq{margin-top:38px}
  .faq dt{font-size:18.5px;padding-top:20px}
  .faq dd{font-size:16.5px;margin-bottom:20px}
}

/* WCAG 2.2 target size: the footer fine print was 21px tall. Inline links in a
   sentence are exempt, but this reader is 55+ and it costs nothing. */
footer.site .row a,footer.site .fineprint{display:inline-block;padding:6px 0;min-height:24px}
.gets li>span{min-width:0}
.quotes figure{padding-bottom:4px}

/* ── the three facts under the hero button ─────────────────────
   On the night ground, so the colour is the same one .by uses.
   Separators are drawn, not typed: no mid-dot characters. */
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:22px 0 0;padding:0;
  font-family:var(--ui);font-size:14.5px;color:rgba(237,238,236,.62)}
.facts li{padding:0 16px;border-left:1px solid rgba(237,238,236,.2)}
.facts li:first-child{padding-left:0;border-left:0}

/* ── the buy block right after the sample page ─────────────────
   She has just finished reading a whole situation. Until now the
   nearest button was seven screens away. */
.midcta{max-width:38rem;margin:46px auto 0;text-align:center}
.midcta .lead{font-family:var(--voice);font-size:clamp(22px,3.4vw,27px);line-height:1.25;
  margin:0 0 20px;color:var(--ink);font-variation-settings:"SOFT" 20}
.midcta .btn{min-width:min(100%,21rem)}
.midcta .small{display:block;margin:14px auto 0;max-width:26rem;color:var(--ink-3)}

@media(max-width:760px){
  .facts{margin-top:18px;font-size:13.5px}
  .facts li{padding:0 12px}
  .midcta{margin-top:34px}
  .midcta .btn{width:100%}
}

/* the guarantee is bold in the hero, and each quote names the situation in the book it belongs to */
.hero .cta .small b{color:#fff;font-weight:600}
.quotes figcaption.sit{margin-top:4px;color:var(--her-deep);font-weight:600;font-size:15px;font-family:var(--ui)}

/* ── /buy/: Whop's checkout, inside our page ─────────────────────
   One light column. The book, the price, the form, the assurances.
   The iframe is Whop's; the min-height keeps the page from jumping
   while it loads. ── */
.buy-page{padding-top:34px}
.buy-head{display:flex;gap:20px;align-items:center;margin:0 0 26px}
.buy-head .book.sm{flex:none;width:96px;transform:none}
.buy-head .book.sm .ttl{font-size:12.5px} .buy-head .book.sm .foil{font-size:5.5px}
.buy-head h1{font-size:clamp(30px,7vw,40px);margin:0 0 8px}
.buy-head .once{font-size:17px;color:var(--ink-2);margin:0}
.buy-head .once b{color:var(--ink)}
.wco-box{padding:14px;margin:0 0 26px}
.wco{min-height:520px;position:relative}
.wco iframe{width:100%!important;border:0}
.wco-wait{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--ink-3);font-size:16px;text-align:center;padding:20px}
.wco-fallback{margin:14px 4px 4px;font-size:15.5px;color:var(--ink-2);text-align:center}
.wco-fallback a{color:var(--her)}
@media(max-width:760px){
  .buy-page{padding-top:26px}
  .buy-head{gap:16px}
  .buy-head .book.sm{width:78px}
  .wco-box{padding:8px;margin-bottom:22px}
}

/* the PDF, offered once at the top of the book */
.product-page .dl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:22px 0 6px;font-family:var(--ui);font-size:15px;color:var(--ink-3)}
.product-page .dl .btn{min-height:48px;padding:12px 20px;font-size:16px}

/* the order bump on /buy/: one line, one checkbox, shown only when the catalog has a live bundle */
.bump{display:flex;gap:12px;align-items:flex-start;margin:0 0 18px;padding:14px 16px;border:1.5px dashed var(--her);border-radius:12px;background:var(--her-wash);font-size:16.5px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.bump input{width:22px;height:22px;flex:none;margin:2px 0 0;accent-color:var(--her)}
.bump b{color:var(--ink)}

/* /book2/: the bundle and the owner upgrade, side by side on wide screens */
.pair{display:grid;gap:30px;max-width:var(--measure);margin:0 auto}
@media(min-width:840px){.pair{grid-template-columns:1fr 1fr;max-width:52rem;gap:40px}}
.pair .pick h3{font-size:clamp(21px,3vw,25px);line-height:1.2}
.pair .pick .what{font-size:16.5px;line-height:1.5}
.pair .pick .what i{font-style:italic}
.pair .amt{font-size:clamp(34px,5vw,44px);margin:0 0 14px}
.pair .btn.pale{box-shadow:inset 0 0 0 1.5px var(--line)}

/* ── two books, one offer ─────────────────────────────────────────
   Both covers as objects, side by side, one line of what each is,
   one price, one button. The bundle is offered here and at checkout
   (the bump), never as a second equal button next to the main one. */
.duo{max-width:38rem;margin:0 auto;text-align:center}
.duo-books{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 26px}
.duo-books .book.sm{width:118px;transform:none}
.duo-books .book.sm .face{box-shadow:0 22px 34px -20px rgba(4,8,10,.85),2px 0 0 rgba(239,237,230,.92),4px 0 0 rgba(198,194,182,.7)}
.duo-books .plus{font-family:var(--voice);font-size:34px;color:var(--ink-3);line-height:1}
.duo-books.small{margin:0 0 18px}
.duo-books.small .book.sm{width:84px}
.duo-books.small .book.sm .ttl{font-size:11px} .duo-books.small .book.sm .foil{font-size:5px} .duo-books.small .plus{font-size:26px}
.duo-line{font-family:var(--voice);font-size:clamp(19px,2.6vw,22px);line-height:1.5;color:var(--ink-2);font-variation-settings:"SOFT" 18;margin:0 0 20px}
.duo-line b{color:var(--ink);font-weight:600}
.duo-price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 14px;margin:0 0 18px}
.duo-price .amt{margin:0;font-size:clamp(40px,6.5vw,52px)}
.duo-save{font-family:var(--ui);font-size:16.5px;color:var(--ink-2)}
.duo-save b{color:var(--ink)}
.duo .btn.big{width:100%;max-width:26rem}
.duo .small{margin:12px auto 0}
.checkout .or{margin:-6px 0 22px;font-size:16px;color:var(--ink-2)}
.checkout .or a{color:var(--her);font-weight:600;text-underline-offset:3px}
.checkout .or a[aria-disabled="true"]{color:var(--ink-3);text-decoration:none;background:none;box-shadow:none;padding:0;min-height:0;display:inline}
.buy-head.two{flex-wrap:wrap}
.buy-head.two .book.sm{width:78px}
.lib .card.up .eyebrow{color:var(--her-deep)}
@media(max-width:760px){
  .duo-books{gap:10px}
  .duo-books .book.sm{width:104px}
  .duo-line{font-size:18px;text-align:left}
}

/* hidden must win over the display rule, or the bump shows on every buy page */
.bump[hidden],.duo[hidden],.pair [hidden]{display:none}

/* ── the second book's cover: petrol board, same brass foil ─────────
   Two books of the same colour read as one book twice. */
.book.cover-book2 .face{background:linear-gradient(118deg,#22565F 0%,#1B4D57 44%,#0E2F36 100%)}
.book.cover-book2 .rule{background:linear-gradient(90deg,transparent,var(--brass-2),transparent)}

/* captions under the two covers: what each book is, and one line from it */
.duo-books{align-items:flex-start}
.duo-books figure{margin:0;width:150px;text-align:center}
.duo-books figure .book.sm{margin:0 auto}
.duo-books figcaption{margin-top:12px;font-family:var(--voice);font-size:14.5px;line-height:1.35;color:var(--ink-2);font-variation-settings:"SOFT" 18}
.duo-books figcaption span{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--her-deep);margin-bottom:4px;letter-spacing:.01em}
.duo-books .plus{margin-top:52px}
#two-section{border-top:1px solid var(--line)}
@media(max-width:760px){
  .duo-books figure{width:44%}
  .duo-books .plus{margin-top:44px}
  .duo-books figcaption{font-size:13.5px}
}

/* ── proof as demonstration ──────────────────────────────────────
   One outcome quote, large. Then her words on the left edge, and the
   book's exact reply for that situation on a petrol bar — the product
   shown working on the reader's own situation. Then the button. */
.lead-quote{max-width:var(--measure);margin:0 auto 44px;text-align:center}
.lead-quote blockquote{margin:0 0 12px;font-family:var(--voice);font-size:clamp(23px,4vw,30px);line-height:1.3;color:var(--ink);font-variation-settings:"SOFT" 22,"WONK" 1;text-wrap:balance}
.lead-quote blockquote::before{content:"“"} .lead-quote blockquote::after{content:"”"}
.lead-quote .sit{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--her-deep)}

.mirror{max-width:var(--measure);margin:0 auto;display:grid;gap:34px}
.pair-row{display:grid;gap:14px}
.pair-row .she{margin:0;padding:0 0 0 16px;border-left:2px solid var(--line)}
.pair-row .she blockquote{margin:0;font-family:var(--voice);font-size:19px;line-height:1.45;color:var(--ink);font-variation-settings:"SOFT" 18}
.pair-row .she blockquote::before{content:"“"} .pair-row .she blockquote::after{content:"”"}
.book-says{padding:14px 16px 14px 18px;border-left:3px solid var(--her);background:#FBFAF7;border-radius:0 8px 8px 0}
.book-says .lbl{margin:0 0 8px;font-family:var(--ui);font-size:14px;color:var(--ink-3)}
.book-says .lbl b{color:var(--her-deep);font-weight:600}
.book-says .reply{margin:0 0 8px;font-family:var(--read);font-size:18.5px;line-height:1.5;color:var(--ink)}
.book-says .why{margin:0;font-family:var(--read);font-size:15.5px;line-height:1.6;color:var(--ink-2)}

.proof-cta{max-width:38rem;margin:44px auto 0;text-align:center}
.proof-cta .lead{font-family:var(--voice);font-size:clamp(21px,3.6vw,26px);line-height:1.25;color:var(--ink);margin:0 0 16px;font-variation-settings:"SOFT" 22,"WONK" 1}
.proof-cta .btn{width:100%;max-width:26rem}
.proof-cta .small{margin:12px auto 0;max-width:34ch}
@media(min-width:820px){.quotes{display:block}}
@media(max-width:760px){
  .lead-quote{margin-bottom:34px}
  .mirror{gap:28px}
  .pair-row .she blockquote{font-size:18px}
  .book-says .reply{font-size:17.5px}
  .proof-cta{margin-top:36px}
  .proof-cta .small{max-width:none}
}

/* ── Sound familiar?: three comments, then the outcome line ─────── */
.quotes{grid-template-columns:none!important;max-width:var(--measure)!important;gap:26px!important}
.quotes figure{border-top:1px solid var(--line);padding-top:20px}
.outcome{max-width:var(--measure);margin:38px auto 0;padding:24px 0 0;border-top:2px solid var(--ink);text-align:left}
.outcome blockquote{margin:0 0 10px;font-family:var(--voice);font-size:clamp(22px,3.8vw,28px);line-height:1.3;color:var(--ink);font-variation-settings:"SOFT" 22,"WONK" 1}
.outcome blockquote::before{content:"“"} .outcome blockquote::after{content:"”"}
.outcome .sit{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--her-deep)}
@media(max-width:760px){.outcome{margin-top:30px}.outcome blockquote{font-size:21px}}

/* ── "Which one is he doing right now?" ───────────────────────────
   The contents list, rewritten in her words: the thing on her screen,
   then the situation in the book that answers it. Six of thirty. */
.router-lead{text-align:center;max-width:34rem;margin:-26px auto 30px;font-size:17px;line-height:1.5;color:var(--ink-2)}
.router{list-style:none;padding:0;margin:0 auto;max-width:38rem;display:grid;gap:14px}
@media(min-width:820px){.router{grid-template-columns:1fr 1fr;max-width:52rem;gap:16px 22px}}
.router li{padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#FBFAF7;display:grid;gap:8px}
.router q{font-family:var(--voice);font-size:19px;line-height:1.35;color:var(--ink);font-variation-settings:"SOFT" 18;quotes:"“" "”"}
.router span{font-family:var(--ui);font-size:14.5px;font-weight:600;color:var(--her-deep)}
.router-more{max-width:38rem;margin:22px auto 0;font-size:16px;line-height:1.55;color:var(--ink-2);text-align:center}
@media(max-width:760px){.router-lead{margin:-14px auto 22px;font-size:16px;text-align:left}.router li{padding:14px 16px}.router q{font-size:18px}.router-more{text-align:left;font-size:15.5px}}

/* ── /thanks/ ─────────────────────────────────────────────────────
   She has just paid. One job: tell her it worked, and open the book.
   The hero is short, the cover is present, and the only moving thing
   is a thin progress line — which stops for anyone on Reduce Motion. */
body.thanks .hero{padding:26px 0 30px;text-align:center}
body.thanks .hero .col{max-width:30rem}
body.thanks .bookwrap{justify-content:center;padding:0 0 22px}
body.thanks .book.sm{width:132px}
body.thanks .hero h1{font-size:clamp(34px,8.4vw,48px);margin:0 0 12px}
body.thanks .hero .say{margin:0 auto;max-width:26rem}
body.thanks section.light{padding:34px 0 64px}
body.thanks section.light .col{max-width:30rem}

.track{height:3px;border-radius:2px;background:rgba(237,238,236,.16);overflow:hidden;margin:26px auto 0;max-width:15rem}
.track span{display:block;height:100%;width:38%;border-radius:2px;background:#8FB3B8;animation:slide-track 1.5s ease-in-out infinite}
@keyframes slide-track{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
@media(prefers-reduced-motion:reduce){.track span{animation:none;width:100%;opacity:.5}}

.next{list-style:none;padding:0;margin:0}
.next li{padding:15px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.5;color:var(--ink-2)}
.next li:first-child{border-top:1px solid var(--line)}
.next li b{color:var(--ink);font-weight:600}

body.thanks .box{padding:26px 24px}
.box-h{font-family:var(--voice);font-size:clamp(21px,3.6vw,25px);line-height:1.25;color:var(--ink);margin:0 0 10px;font-variation-settings:"SOFT" 22,"WONK" 1}
body.thanks .box p{font-size:17px;line-height:1.55;color:var(--ink-2)}
body.thanks .box .btn{margin-top:6px}
body.thanks .sign{text-align:center;margin-top:30px}
@media(max-width:760px){
  body.thanks .book.sm{width:116px}
  body.thanks .next li{font-size:16.5px}
}