/* abelsalcido.com — The Chuck Wagon Bible. Base = wendellcoffey.com's proven page (same layout, same type),
   recoloured toward the book cover and a chile-red; fake counters, timers and reviews left out on purpose. */
:root{
  /* surfaces */
  --bg-950:#f2e9da;   /* page paper            */
  --bg-900:#eadfc9;   /* alternate band        */
  --card-800:#fcf8ef; /* card, lifts off paper */
  --card-700:#f6eedd;

  /* headings + accents */
  --gold-300:#241c14; /* heading ink           */
  --gold-400:#7a5a2f; /* walnut accent         */
  --gold-500:#8a5510; /* strong accent, prices */
  --gold-dim:#cbb894; /* rules and borders     */

  /* body text */
  --cream-100:#1b1815; /* primary ink          */
  --cream-300:#4a4038; /* secondary            */
  --cream-500:#574b3c; /* muted, 7:1 on paper  */

  /* semantic */
  --red-600:#8e1c1c;
  --red-500:#a52020;
  --green-600:#2f6b2c;
  --green-500:#35762f;

  /* depth */
  --shadow-card:0 2px 6px rgba(70,50,26,0.10), 0 10px 24px rgba(70,50,26,0.10);
  --shadow-cover:0 18px 34px rgba(52,36,18,0.32);
  --glow-combo:0 4px 10px rgba(70,50,26,0.12), 0 18px 40px rgba(70,50,26,0.16);

  /* Two families, two jobs. Lora carries headlines, titles and prices;
     it is the face the book itself is set in, and its strokes hold up at
     small sizes where Playfair's hairlines went thin. Atkinson Hyperlegible
     carries everything a person has to read: it was drawn by the Braille
     Institute for low-vision readers, so I, l and 1 never look alike. */
  --font-display:'Lora', Georgia, 'Times New Roman', serif;
  --font-body:'Atkinson Hyperlegible', Verdana, 'Segoe UI', sans-serif;
  --font-sans:'Atkinson Hyperlegible', Verdana, 'Segoe UI', sans-serif;
}

.band-dark{
  --bg-950:#14100c;
  --bg-900:#1a1411;
  --card-800:#251812;
  --card-700:#2d1e17;
  --gold-300:#f0dcb8;
  --gold-400:#d4a574;
  --gold-500:#ffc940;
  --gold-dim:#8a6a45;
  --cream-100:#f5e6d0;
  --cream-300:#b8a48a;
  --cream-500:#b8a893;
  --red-600:#c92a2a;
  --red-500:#e63838;
  --green-600:#4d9a48;
  --green-500:#58b452;
  --shadow-card:0 14px 28px rgba(0,0,0,0.35);
  --shadow-cover:0 14px 28px rgba(0,0,0,0.5);
  --glow-combo:0 0 44px rgba(255,201,64,0.14);
  color:var(--cream-100);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
/* jump links land below the sticky promo bar, not under it */
[id]{scroll-margin-top:72px;}
body{
  background:var(--bg-950);
  color:var(--cream-100);
  font-family:var(--font-body);
  font-size:19px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is required — the covers carry width/height attributes so the
   browser can reserve space, and without this they render at 891px tall */
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
/* visible keyboard focus — this audience uses zoom and keyboard more,
   and the browser default outline disappears against the warm palette */
a:focus-visible, button:focus-visible{
  outline:3px solid #8f5207; outline-offset:3px; border-radius:3px;
}
.band-dark a:focus-visible, .band-dark button:focus-visible{outline-color:#ffc940;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* ---------- Promo bar ---------- */
/* the promo bar stays pinned to the top of the screen */
.promo-bar{
  position:sticky; top:0; z-index:55;
  background:linear-gradient(180deg, var(--red-500), var(--red-600));
  border-bottom:2px solid #7a1f1f;
  padding:10px 24px;
}
.promo-bar-inner{
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap; text-align:center;
  font-family:var(--font-sans); font-size:14.5px; color:#ffeede;
}
.promo-bar b{color:#fff;}
.promo-sep{color:rgba(255,255,255,0.4);}

.btn{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:17px;
  letter-spacing:0.2px;
  text-decoration:none;
  padding:15px 24px;
  min-height:50px;
  border:1.5px solid var(--gold-400);
  border-radius:6px;
  color:var(--gold-300);
  background:transparent;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
  display:inline-block;
  cursor:pointer;
}
.btn:hover{background:var(--gold-400); color:var(--bg-950);}
/* primary buy button is set explicitly per theme rather than from tokens —
   it has to be the loudest thing on the page in both bands */
.btn-gold{
  background:linear-gradient(180deg, #eda93f, #cf7d14);
  border-color:#a45f08; color:#1b1815; font-weight:800;
  box-shadow:0 3px 0 #8f5207, 0 10px 22px rgba(120,74,10,0.32);
}
.btn-gold:hover{background:linear-gradient(180deg,#f7bb56,#dd8a18); border-color:#8f5207; color:#120f0c; box-shadow:0 3px 0 #8f5207, 0 14px 28px rgba(120,74,10,0.44);}
.band-dark .btn-gold{
  background:linear-gradient(180deg, var(--gold-500), var(--gold-400));
  border-color:var(--gold-400); color:var(--bg-950);
  box-shadow:0 0 22px rgba(255,201,64,0.35);
}
.band-dark .btn-gold:hover{background:linear-gradient(180deg,#ffd875,var(--gold-500)); border-color:var(--gold-500); box-shadow:0 0 30px rgba(255,201,64,0.5);}
.nobreak{white-space:nowrap;}

/* ---------- Hero + pricing (single continuous block) ---------- */
.hero{
  position:relative;
  overflow:hidden;
  color:var(--cream-100);
  padding:40px 0 72px;
  background:
    radial-gradient(1100px 620px at 78% 6%, rgba(196,158,96,0.20), transparent 62%),
    radial-gradient(900px 540px at 2% 0%, rgba(158,31,31,0.07), transparent 58%),
    var(--bg-950);
}
/* paper fibre — multiply keeps it as tooth in the stock, not haze on top */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0.13; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* aged edges, like a sheet that has sat in a drawer */
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 92% at 50% 38%, transparent 52%, rgba(120,90,48,0.16) 100%);
}
.hero > .wrap{position:relative; z-index:1;}

/* ---------- Hero: one centred column ----------
   Headline, a two-line byline, then the video carries the pitch.
   One button under it, a quiet way down, and the checkout line.
   ------------------------------------------------------------ */
.hero-intro{
  display:flex; flex-direction:column; align-items:center;
  max-width:900px; margin:0 auto; text-align:center;
}
h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(34px, 4.3vw, 56px);
  line-height:1.12;
  letter-spacing:-0.015em;
  color:var(--gold-300);
  text-wrap:balance;
}
.hero-sub{
  font-family:var(--font-body); font-size:19px; line-height:1.6;
  color:var(--cream-300); max-width:62ch; margin:16px auto 0;
}
.hero-cue{color:var(--gold-400); font-size:15px; line-height:1; margin:18px 0 12px;}

/* --- the instruction pill that points at the video --- */
.vsl-pill{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--gold-400); color:#fbf3e3;
  border-radius:999px; padding:10px 20px;
  font-family:var(--font-sans); font-size:17px; font-weight:700; line-height:1.35;
  box-shadow:0 4px 12px rgba(70,50,26,0.20);
}

/* --- video frame. Drop the file into the <video> and the overlay
   starts it with sound; until then the frame is a placeholder --- */
.vsl{
  position:relative; width:100%; max-width:720px; margin:14px auto 0;
  aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  background:
    radial-gradient(80% 90% at 50% 40%, #4a3522, #221910 75%),
    #221910;
  box-shadow:0 22px 44px rgba(46,32,16,0.38), 0 0 0 1px rgba(90,66,36,0.25);
}
.vsl-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent;}
.vsl-play{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(180deg, rgba(20,14,8,0.05), rgba(20,14,8,0.30));
  border:none; cursor:pointer; color:#fff;
  font-family:var(--font-sans); font-size:17px; font-weight:700;
  text-shadow:0 1px 4px rgba(0,0,0,0.7);
}
.vsl-circle{
  width:76px; height:76px; border-radius:50%;
  background:#8a5510; box-shadow:0 8px 22px rgba(0,0,0,0.40);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
.vsl-circle svg{width:30px; height:30px; margin-left:5px; fill:#fff;}
.vsl-play:hover .vsl-circle{transform:scale(1.07); background:#a0640f;}
.vsl.is-playing .vsl-play{display:none;}

/* --- the one button: title on top, the terms underneath --- */
.hero-cta{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:100%; max-width:560px; margin:22px auto 0; padding:18px 26px 16px;
  text-transform:none; letter-spacing:0; border-radius:8px; text-align:center;
}
.hero-cta-title{font-family:var(--font-display); font-size:27px; font-weight:700; line-height:1.15;}
.hero-cta-sub{font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.5;}
.hero-link{
  margin-top:16px; padding:12px 6px; min-height:48px;
  font-family:var(--font-display); font-size:20px; font-weight:700;
  color:var(--gold-500); text-decoration:underline; text-underline-offset:4px;
}
.hero-link:hover{color:var(--red-600);}
.hero-secure{
  margin-top:8px; font-family:var(--font-sans); font-size:16px;
  color:var(--cream-500); letter-spacing:0;
}

/* ---------- How it works: three steps in a row ---------- */
.how{background:var(--card-800); padding:64px 0 60px; border-bottom:1px solid var(--gold-dim);}
.how-head{margin-bottom:24px;}
.how-num{
  display:block; margin-bottom:10px;
  font-family:var(--font-display); font-size:16px; font-weight:700;
  letter-spacing:4px; color:var(--gold-400);
}
.how-head h2{font-size:clamp(30px,3.4vw,42px);}
.how-steps{
  list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 290px));
  justify-content:center; gap:40px 48px; margin:0 auto;
}
.how-step{display:flex; gap:14px; align-items:flex-start; text-align:left;}
.how-n{
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  background:linear-gradient(150deg, #d19a4c, #a86a22);
  box-shadow:0 5px 14px rgba(120,74,10,0.30);
  color:#fff; font-family:var(--font-display); font-size:19px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.how-step h3{
  font-family:var(--font-display); font-size:22px; font-weight:700;
  color:var(--gold-300); line-height:1.3; margin:7px 0 6px;
}
.how-step p{font-size:18px; line-height:1.6; color:var(--cream-300);}
.how-foot{
  margin-top:34px; text-align:center;
  font-family:var(--font-display); font-size:21px; font-weight:700; color:var(--gold-300);
}

/* ---------- The honest math: guessing vs knowing ---------- */
.math{background:var(--bg-950); padding:64px 0 60px;}
.math-head{max-width:700px; margin-bottom:34px;}
.math-head h2{font-size:clamp(30px,3.4vw,42px);}
.math-head p{font-size:19px; line-height:1.65; margin-top:16px;}
.math-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:1030px; margin:0 auto;}
.math-card{
  background:var(--card-800); border:1px solid var(--gold-dim); border-top:5px solid;
  border-radius:12px; padding:26px 28px 30px; box-shadow:var(--shadow-card);
}
.math-card--guess{border-top-color:#9c8a74;}
.math-card--know{border-top-color:var(--green-600);}
.math-card h3{
  font-family:var(--font-display); font-size:25px; font-weight:700;
  color:var(--gold-300); margin-bottom:12px;
}
.math-card ul{list-style:none;}
.math-card li{
  padding:12px 0; border-bottom:1px dotted var(--gold-dim);
  font-size:18px; line-height:1.5; color:var(--cream-100);
}
.math-card li b{
  display:block; margin-top:3px;
  font-family:var(--font-display); font-size:19.5px; font-weight:700; color:var(--gold-500); font-variant-numeric:lining-nums;
}
.math-total{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px;
  font-family:var(--font-display); font-size:clamp(21px,2.1vw,26px); font-weight:700;
  line-height:1.3; color:var(--gold-300); font-variant-numeric:lining-nums;
}
.math-card--know .math-total{color:var(--green-600);}
.math-note{
  max-width:1030px; margin:16px auto 0;
  font-size:17px; line-height:1.6; color:var(--cream-300);
}

/* ---------- Look inside: a swipeable row of real pages ---------- */
.peek{background:var(--card-800); padding:64px 0 64px;}
.peek-head{max-width:720px; margin-bottom:34px;}
.peek-head h2{font-size:clamp(30px,3.4vw,42px);}
.peek-head p{font-size:19px; line-height:1.65; margin-top:16px;}
.peek-row{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 18px; margin:0 -4px;
  -webkit-overflow-scrolling:touch;
  scrollbar-color:var(--gold-400) var(--bg-900);
}
.peek-row::-webkit-scrollbar{height:10px;}
.peek-row::-webkit-scrollbar-track{background:var(--bg-900); border-radius:999px;}
.peek-row::-webkit-scrollbar-thumb{background:var(--gold-400); border-radius:999px;}
.peek-item{flex:0 0 300px; scroll-snap-align:start; margin:0;}
.peek-shot{
  position:relative; display:block; width:100%; aspect-ratio:2/3; padding:0;
  background:#fff; border:1px solid var(--gold-dim); border-radius:8px; overflow:hidden;
  box-shadow:var(--shadow-card); cursor:zoom-in;
  transition:transform .25s ease, box-shadow .25s ease;
}
.peek-shot:hover{transform:translateY(-4px); box-shadow:0 6px 16px rgba(70,50,26,0.14), 0 22px 44px rgba(70,50,26,0.18);}
.peek-shot img{width:100%; height:100%; object-fit:cover; object-position:top;}
.peek-tap{
  position:absolute; right:10px; bottom:10px;
  background:rgba(36,28,20,0.82); color:#fff; border-radius:999px; padding:7px 13px;
  font-family:var(--font-sans); font-size:15px; font-weight:700; letter-spacing:0.2px;
}
.peek-item figcaption{margin-top:12px; font-size:17px; line-height:1.5; color:var(--cream-300);}
.peek-nav{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:14px;}
.peek-hint{text-align:center; font-size:17px; color:var(--cream-300);}
/* big arrow buttons, because plenty of readers won't think to swipe */
.peek-go{
  width:56px; height:56px; border-radius:50%; cursor:pointer; flex-shrink:0;
  background:var(--card-800); border:2px solid var(--gold-400); color:var(--gold-300);
  font-family:var(--font-sans); font-size:26px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(70,50,26,0.14); transition:background .2s ease, opacity .2s ease;
}
.peek-go:hover{background:#fff;}
.peek-go:disabled{opacity:0.35; cursor:default;}
.peek-cta{margin-top:34px; text-align:center;}
.peek-arrow{font-family:var(--font-sans); font-weight:700;}
.peek-btn{
  padding:22px 44px; font-family:var(--font-display); font-size:23px; font-weight:700;
  text-transform:none; letter-spacing:0; border-radius:8px;
}

/* ---------- What's Inside: the outline as a ruled list ---------- */
.contents{background:var(--bg-950); padding:64px 0 60px;}
.contents-head{max-width:800px; margin-bottom:34px;}
.contents-head p{text-wrap:balance;}
.contents-head h2{font-size:clamp(30px,3.4vw,42px);}
.contents-head p{font-size:19px; line-height:1.65; margin-top:16px;}
/* one card per part: label and page count on top, the name, then what's in it */
.parts{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:980px; margin:0 auto;}
.part{
  display:flex; flex-direction:column;
  background:var(--card-800); border:1px solid var(--gold-dim); border-radius:12px;
  padding:22px 24px 24px; box-shadow:0 2px 8px rgba(70,50,26,0.06);
}
.part--extra{background:transparent; border-style:dashed; box-shadow:none;}
.part-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;}
.part-no{font-family:var(--font-sans); font-size:16px; font-weight:700; color:var(--gold-500);}
.part-meta{font-family:var(--font-sans); font-size:16px; color:var(--cream-500); white-space:nowrap;}
.part h3{
  margin:8px 0 10px; padding-bottom:12px; border-bottom:1px solid rgba(203,184,148,0.55);
  font-family:var(--font-display); font-size:24px; font-weight:700; line-height:1.2; color:var(--gold-300);
}
.part p{font-size:18px; line-height:1.6; color:var(--cream-300); text-wrap:pretty;}
.contents-foot{
  margin-top:34px; text-align:center;
  font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--cream-300);
  font-variant-numeric:lining-nums;
}

/* ---------- Buy: product card with the reviews inside it ---------- */
.buy{background:var(--bg-950); padding:64px 0 72px;}
.buy-head{max-width:760px; margin-bottom:38px;}
.buy-head h2{font-size:clamp(30px,3.4vw,42px);}
.buy-head p{font-size:19px; line-height:1.65; margin-top:16px;}
.buy-card{
  max-width:980px; margin:0 auto; overflow:hidden;
  background:var(--card-800); border:1px solid var(--gold-dim); border-radius:18px;
  box-shadow:0 10px 30px rgba(70,50,26,0.12), 0 30px 60px rgba(70,50,26,0.10);
}
.buy-top{display:grid; grid-template-columns:250px 1fr; gap:40px; align-items:center; padding:36px 38px 38px;}
.buy-cover{width:100%; border-radius:6px; transform:rotate(-2deg); box-shadow:0 22px 40px rgba(46,32,16,0.38), 0 0 0 1px rgba(90,66,36,0.2);}
.buy-info h3{font-family:var(--font-display); font-size:clamp(26px,2.8vw,34px); font-weight:700; line-height:1.15; color:var(--gold-300);}
.buy-points{list-style:none; margin:20px 0 24px; display:grid; gap:10px;}
.buy-points li{position:relative; padding:0 0 0 30px; font-size:18.5px; line-height:1.4; color:var(--cream-100); text-wrap:pretty;}
.buy-points li::before{content:"✓"; position:absolute; left:2px; top:0; color:var(--green-600); font-weight:700;}
.buy-price{display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-bottom:18px;}
.buy-now{font-family:var(--font-display); font-size:44px; font-weight:800; line-height:1; color:var(--red-500); font-variant-numeric:lining-nums;}
.buy-was{font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--cream-500); text-decoration:line-through; font-variant-numeric:lining-nums;}
.buy-save{
  background:var(--green-600); color:#fff; border-radius:999px; padding:7px 14px;
  font-family:var(--font-sans); font-size:16px; font-weight:700; letter-spacing:0.2px;
}
.buy-btn{
  display:block; text-align:center; text-decoration:none;
  padding:20px 24px; border-radius:10px;
  background:linear-gradient(180deg, #c4502f, #9a2d1b); color:#fff;
  font-family:var(--font-display); font-size:24px; font-weight:700;
  box-shadow:0 12px 26px rgba(154,45,27,0.30);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.buy-btn:hover{transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 16px 32px rgba(154,45,27,0.38);}
.buy-fine{margin-top:12px; text-align:center; font-family:var(--font-sans); font-size:16px; line-height:1.5; color:var(--cream-500);}

.buy-foot{
  display:flex; justify-content:center; flex-wrap:wrap; gap:6px 22px;
  padding:18px 24px; border-top:1px solid var(--gold-dim);
  font-family:var(--font-sans); font-size:16px; color:var(--cream-300);
}
.buy-foot b{color:var(--gold-300);}

/* ---------- Author: photo, name, a short letter, signed ---------- */
.author{background:var(--bg-950); padding:40px 0 72px;}
.author .wrap{max-width:760px; text-align:center;}
.author-pic{
  width:260px; height:260px; object-fit:cover; margin:0 auto; border-radius:14px;
  box-shadow:0 18px 40px rgba(46,32,16,0.26), 0 0 0 1px rgba(90,66,36,0.18);
}
.author h2{margin-top:30px; font-size:clamp(30px,3.4vw,40px);}
.author p{margin:16px auto 0; max-width:60ch; font-size:19.5px; line-height:1.75; color:var(--cream-300);}
.author p + p{margin-top:22px;}
.author .author-sign{
  margin-top:26px; font-family:var(--font-display); font-style:italic;
  font-size:26px; color:var(--gold-400);
}

/* ---------- Straight Answers: every answer open, nothing to click ---------- */
.answers{background:var(--bg-950); padding:56px 0 72px;}
.answers .wrap{max-width:760px;}
.answers h2{text-align:center; font-size:clamp(30px,3.4vw,40px); margin-bottom:30px;}
.qa + .qa{margin-top:32px;}
.qa h3{font-family:var(--font-display); font-size:22px; font-weight:700; line-height:1.35; color:var(--gold-300); margin-bottom:6px;}
.qa p{font-size:19px; line-height:1.7; color:var(--cream-300);}
.qa p b{color:var(--gold-300); font-weight:700;}
.qa a{color:var(--gold-500); text-decoration:underline; text-underline-offset:3px;}

/* ---------- 06 Ask: a short question form ---------- */
.ask{background:var(--bg-900); padding:56px 0 64px;}
.ask-head{margin-bottom:26px;}
.ask-head h2{font-size:clamp(28px,3.2vw,38px);}
.ask-head p{font-size:19px;}
.ask-form{max-width:480px; margin:0 auto; display:flex; flex-direction:column;}
.ask-form label{font-family:var(--font-sans); font-size:18px; font-weight:700; color:var(--gold-300); margin:18px 0 8px;}
.ask-form label:first-of-type{margin-top:0;}
.ask-form input, .ask-form textarea{
  width:100%; padding:14px 15px; min-height:54px; border-radius:8px;
  background:#fff; border:1.5px solid #a8916b; color:var(--cream-100);
  font-family:var(--font-body); font-size:19px; line-height:1.4;
}
.ask-form textarea{resize:vertical; min-height:130px;}
.ask-form input:focus, .ask-form textarea:focus{outline:2px solid var(--gold-400); outline-offset:1px; border-color:var(--gold-400);}
.ask-form ::placeholder{color:var(--cream-500);}
.ask-honey{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.ask-btn{
  margin-top:22px; padding:16px 18px; min-height:58px; border:none; border-radius:8px; cursor:pointer;
  background:linear-gradient(180deg, #d19a4c, #a86a22); color:#fff;
  font-family:var(--font-display); font-size:21px; font-weight:700;
  box-shadow:0 6px 16px rgba(120,74,10,0.25);
}
.ask-btn:hover{filter:brightness(1.06);}
.ask-btn:disabled{opacity:0.65; cursor:wait;}
.ask-status{margin-top:14px; min-height:1.5em; text-align:center; font-family:var(--font-sans); font-size:18px; color:var(--cream-300);}
.ask-status.ok{color:var(--green-600); font-weight:600;}
.ask-status.err{color:var(--red-500);}

/* ---------- 07 Ready: the dark closing band ---------- */
.ready{background:linear-gradient(180deg, #2c2118, #241b14); padding:56px 0 60px; text-align:center;}
.ready .how-num{color:var(--gold-400);}
.ready h2{font-size:clamp(30px,3.4vw,40px);}
.ready p{max-width:46ch; margin:14px auto 0; font-size:19.5px; line-height:1.6; color:var(--cream-100);}
.ready-btn{margin-top:28px; padding:20px 40px; font-family:var(--font-display); font-size:22px; text-transform:none; letter-spacing:0; border-radius:8px;}

.endnote{background:#1f1813; padding:28px 0 32px; text-align:center;}
.endnote p{max-width:760px; margin:0 auto; font-size:17px; line-height:1.6; color:var(--cream-300);}
.endnote p + p{margin-top:14px;}
.endnote-ask{font-size:19px !important; color:var(--cream-100) !important;}
.endnote-ask b{color:var(--gold-300);}
.endnote a{color:var(--gold-400); text-decoration:underline; text-underline-offset:3px;}
.endnote-sign{font-family:var(--font-display); font-style:italic;}
.endnote-legal{font-size:15px !important; line-height:1.7 !important; color:var(--cream-500) !important; max-width:68ch !important;}

/* enlarged page */
.peek-box{
  margin:auto; padding:0; border:none; background:transparent;
  max-width:min(760px, 94vw); max-height:92vh; overflow:visible;
}
.peek-box::backdrop{background:rgba(20,14,8,0.82);}
.peek-box-inner{
  position:relative; width:min(640px, 90vw); max-height:88vh; aspect-ratio:2/3;
  background:#fff; border-radius:8px; overflow:auto;
}
.peek-box-inner img{width:100%; height:auto;}
.peek-close{
  position:absolute; top:-16px; right:-16px; z-index:2;
  width:56px; height:56px; border-radius:50%; border:2px solid var(--gold-400); cursor:pointer;
  background:var(--card-800); color:var(--gold-300); font-size:32px; line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,0.35);
}

/* --- staggered entrance --- */
.reveal{opacity:0; animation:reveal .35s ease-out forwards;}
@keyframes reveal{to{opacity:1;}}
.d1{animation-delay:0s;} .d2{animation-delay:.05s;} .d3{animation-delay:.1s;}
.d4{animation-delay:.12s;} .d5{animation-delay:.15s;} .d6{animation-delay:.15s;}


/* ---------- Section shared ---------- */
section{padding:96px 0;}
.section-head{max-width:640px; margin:0 auto 52px; text-align:center;}
h2{font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.4vw,40px); letter-spacing:-0.015em; color:var(--gold-300); line-height:1.15;}
.section-head p{color:var(--cream-300); margin-top:14px; font-size:19px;}
/* even line breaks, so no heading or intro ends on one stranded word */
h2, h3, .section-head p, .hero-sub, .buy-fine, .ready p, .how-foot, .math-note{text-wrap:balance;}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:var(--bg-950); border-top:2px solid var(--gold-400);
  padding:12px 16px; display:none;
  justify-content:space-between; align-items:center; gap:12px;
  box-shadow:0 -10px 26px rgba(0,0,0,0.5);
}
.sticky-cta .price{font-family:var(--font-display); font-weight:800; color:var(--gold-400); font-size:22px;}
.sticky-cta .btn{padding:15px 22px; min-height:54px; font-size:18px;}

/* ---------- Responsive additions for the new sections ---------- */
@media (max-width:860px){
  .how{padding:52px 0 48px;}
  .how-steps{grid-template-columns:minmax(0, 420px); gap:26px;}
  .how-foot{font-size:19.5px; margin-top:30px;}
  .math{padding:52px 0 48px;}
  .math-grid{grid-template-columns:1fr; max-width:520px; gap:20px;}
  .math-card{padding:22px 20px 24px;}
  .math-total{display:block; font-size:22px;}
  .math-total span + span::before{content:" ";}
  .math-head p{font-size:18px;}
  .math-note{max-width:520px; text-align:center;}
  .peek{padding:52px 0 52px;}
  .peek-head p{font-size:18px;}
  .peek-item{flex-basis:78%;}
  .peek-btn{display:block; padding:20px 18px; font-size:21px;}
  .peek-close{top:8px; right:8px;}
  .contents{padding:52px 0 48px;}
  .contents-head p{font-size:18px;}
  .parts{grid-template-columns:1fr; gap:14px;}
  .part{padding:20px 20px 22px;}
  .part h3{font-size:22px;}
  .contents-foot{font-size:19px;}
  .buy{padding:52px 0 56px;}
  .author{padding:24px 0 56px;}
  .author-pic{width:200px; height:200px;}
  .author p{font-size:18.5px;}
  .ask{padding:48px 0 52px;}
  .ready{padding:48px 0 52px;}
  .ready-btn{display:block; padding:18px 16px;}
  .buy-head p{font-size:18px;}
  .buy-top{grid-template-columns:1fr; gap:26px; padding:28px 20px 26px; text-align:left;}
  .buy-cover{width:190px; margin:0 auto;}
  .buy-foot{flex-direction:column; align-items:center; text-align:center; gap:4px;}
}
/* ---------- Responsive breakpoints ---------- */
@media (max-width:1024px){
  .wrap{padding:0 20px;}

  /* keep a persistent buy button in reach on tablets too */
  .sticky-cta{display:flex;}
  body{padding-bottom:78px;}
}
@media (max-width:860px){
  section{padding:72px 0;}
}
@media (max-width:640px){
  body{font-size:18px;}
  .wrap{padding:0 18px;}
  section{padding:56px 0;}

  .hero{padding:32px 0 56px;}
  h1{font-size:clamp(29px, 8.2vw, 40px); line-height:1.14;}
  .hero-sub{font-size:18px; margin-top:14px;}
  .hero-sub br{display:none;}
  .hero-cue{margin:14px 0 10px;}
  .vsl-pill{font-size:16px; padding:10px 16px; gap:7px;}
  .vsl-circle{width:62px; height:62px;}
  .vsl-circle svg{width:25px; height:25px;}
  .vsl-play{font-size:16px; gap:10px;}
  .hero-cta{margin-top:18px; padding:16px 18px 14px;}
  .hero-cta-title{font-size:24px;}
  .hero-cta-sub{font-size:15.5px;}
  .hero-link{font-size:19px;}
  .hero-secure{font-size:15px; line-height:1.6;}
}
@media (max-width:400px){
  .promo-bar-inner{font-size:13px; gap:6px;}
}

/* ================= Abel additions ================= */
/* ---------- Turn to page: page-numbered fascinations ---------- */
.turn{background:var(--card-800); padding:64px 0 60px; border-top:1px solid var(--gold-dim); border-bottom:1px solid var(--gold-dim);}
.turn-head{max-width:720px; margin-bottom:30px;}
.turn-head h2{font-size:clamp(30px,3.4vw,42px);}
.turn-head p{font-size:19px; line-height:1.65; margin-top:16px;}
.turn-list{list-style:none; max-width:860px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:0 40px;}
.turn-list li{display:flex; gap:14px; align-items:baseline; padding:13px 0; border-bottom:1px dotted var(--gold-dim); font-size:18px; line-height:1.5; color:var(--cream-100);}
.turn-pg{flex-shrink:0; min-width:74px; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--red-500); font-variant-numeric:lining-nums;}

/* ---------- Guarantee: a signed promise ---------- */
.promise{background:var(--bg-950); padding:8px 0 64px;}
.promise-card{
  max-width:760px; margin:0 auto; display:grid; grid-template-columns:96px 1fr; gap:24px; align-items:center;
  background:var(--card-800); border:2px dashed var(--gold-400); border-radius:14px; padding:26px 30px;
}
.promise-seal{
  width:96px; height:96px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(150deg, #d19a4c, #a86a22); color:#fff; text-align:center;
  font-family:var(--font-display); font-weight:700; line-height:1.05; box-shadow:0 6px 16px rgba(120,74,10,0.3);
}
.promise-seal b{font-size:32px;} .promise-seal span{font-size:13px; letter-spacing:1px;}
.promise-card h3{font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--gold-300); line-height:1.25;}
.promise-card p{margin-top:8px; font-size:18.5px; line-height:1.6; color:var(--cream-300);}

/* ---------- Free chapter ---------- */
.free{background:var(--bg-900); padding:56px 0 60px;}
.free-card{max-width:900px; margin:0 auto; display:grid; grid-template-columns:200px 1fr; gap:34px; align-items:center;}
.free-card img{width:100%; border-radius:6px; transform:rotate(-2deg); box-shadow:var(--shadow-cover);}
.free-card h2{font-size:clamp(26px,3vw,36px);}
.free-card p{margin-top:12px; font-size:19px; line-height:1.6; color:var(--cream-300);}
.free-btn{margin-top:20px;}

/* ---------- Exit pop-up: the free chapter ---------- */
.exit-box{margin:auto; padding:0; border:none; background:transparent; max-width:min(520px, 92vw); overflow:visible;}
.exit-box::backdrop{background:rgba(20,14,8,0.78);}
.exit-in{position:relative; background:var(--card-800); border:1px solid var(--gold-dim); border-radius:14px; padding:30px 28px 26px; text-align:center; box-shadow:0 30px 60px rgba(0,0,0,0.4);}
.exit-in h2{font-size:clamp(25px,6vw,32px);}
.exit-in p{margin-top:12px; font-size:18px; line-height:1.6; color:var(--cream-300);}
.exit-in .btn{display:block; margin-top:20px;}
.exit-no{margin-top:12px; background:none; border:none; cursor:pointer; padding:10px; min-height:44px; font-family:var(--font-sans); font-size:16px; color:var(--cream-500); text-decoration:underline;}

/* ---------- Header + legal pages ---------- */
.topbar{background:var(--card-800); border-bottom:1px solid var(--gold-dim); padding:12px 0;}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.brand{font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--gold-300); text-decoration:none;}
.topbar .btn{padding:10px 18px; min-height:46px; font-size:16px;}
.legal{padding:48px 0 64px;}
.legal .wrap{max-width:760px;}
.legal h1{font-size:clamp(32px,4vw,44px); text-align:left;}
.legal .updated{margin-top:6px; font-size:16px; color:var(--cream-500);}
.legal h2{margin:34px 0 8px; font-size:26px;}
.legal p, .legal li{font-size:18.5px; line-height:1.7; color:var(--cream-300);}
.legal p + p{margin-top:12px;}
.legal ul{margin:8px 0 0 22px;}
.legal a{color:var(--gold-500);}
.legal .box{margin-top:22px; background:var(--card-800); border:1px solid var(--gold-dim); border-radius:10px; padding:18px 20px;}
.legal .box b{color:var(--gold-300);}
.foot-links{display:flex; justify-content:center; flex-wrap:wrap; gap:6px 22px;}

@media (max-width:860px){
  .turn{padding:52px 0 48px;}
  .turn-list{grid-template-columns:1fr;}
  .turn-list li{font-size:17.5px;}
  .promise{padding:0 0 52px;}
  .promise-card{grid-template-columns:1fr; text-align:center; justify-items:center; padding:24px 20px;}
  .free-card{grid-template-columns:1fr; text-align:center; justify-items:center; gap:24px;}
  .free-card img{width:160px;}
  .free-btn{display:block;}
}
@media (max-width:640px){ .promo-bar .promo-sep{display:none;} .promo-bar-inner{gap:2px 10px;} }

/* ---------- v2 copy: pain → fix list, numbers strip, the recipe-card line ---------- */
.fix-list{list-style:none; max-width:880px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:0 40px;}
.fix-list li{padding:14px 0; border-bottom:1px dotted var(--gold-dim); font-size:18.5px; line-height:1.5; color:var(--cream-100);}
.fix-list li b{color:var(--gold-300);}
.fix-pg{white-space:nowrap; font-family:var(--font-display); font-weight:700; color:var(--red-500); font-variant-numeric:lining-nums;}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:880px; margin:34px auto 0;}
.stat{background:var(--card-800); border:1px solid var(--gold-dim); border-radius:12px; padding:18px 10px; text-align:center;}
.stat b{display:block; font-family:var(--font-display); font-size:clamp(30px,3.6vw,42px); font-weight:800; line-height:1; color:var(--gold-500); font-variant-numeric:lining-nums;}
.stat span{display:block; margin-top:6px; font-family:var(--font-sans); font-size:16px; color:var(--cream-300);}
.card-line{max-width:880px; margin:30px auto 0; background:var(--card-800); border:1px solid var(--gold-dim); border-left:5px solid var(--gold-400); border-radius:10px; padding:18px 22px; font-size:18.5px; line-height:1.65; color:var(--cream-300);}
.card-line b{color:var(--gold-300);}
.mistake{max-width:880px; margin:22px auto 0; font-family:var(--font-display); font-style:italic; font-size:20px; line-height:1.6; color:var(--cream-300); text-align:center; text-wrap:balance;}
.parts-head{max-width:880px; margin:52px auto 22px; text-align:center;}
.parts-head h3{font-family:var(--font-display); font-size:28px; color:var(--gold-300);}
.hero-by{margin-top:12px; font-family:var(--font-sans); font-size:16px; letter-spacing:0.3px; color:var(--cream-500);}
.peek-opt{display:block; margin-top:14px; font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--gold-500); text-decoration:underline; text-underline-offset:4px;}
@media (max-width:860px){
  .fix-list{grid-template-columns:1fr;}
  .fix-list li{font-size:17.5px;}
  .stats{grid-template-columns:1fr 1fr;}
  .card-line{font-size:17.5px; padding:16px 16px;}
}

/* ---------- launch countdown (a REAL date: CONFIG.launchEnds in site.js) ---------- */
.promo-bar s{opacity:.75;}
.cd{display:inline-flex; align-items:baseline; gap:3px; margin-left:4px; white-space:nowrap;}
.cd b{display:inline-block; min-width:2ch; text-align:center; font-variant-numeric:tabular-nums; background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.35); border-radius:3px; padding:1px 5px; color:#fff;}
.cd i{font-style:normal; font-size:11px; letter-spacing:1px; margin:0 4px 0 2px; opacity:.85;}
.buy-cd{margin:0 0 14px; font-family:var(--font-sans); font-size:16px; line-height:1.6; color:var(--cream-300);}
.buy-cd b[data-cd-date]{color:var(--gold-300);}
.buy-cd .cd{margin:6px 0 0;}
.buy-cd .cd b{background:var(--red-500); border-color:var(--red-600); font-size:18px; padding:3px 7px;}
.buy-cd .cd i{color:var(--cream-500); font-size:12px;}
[data-cd-wrap][hidden]{display:none !important;}
@media (max-width:400px){ .cd i{margin:0 2px 0 1px; font-size:10px;} .cd b{padding:1px 3px;} }
/* QA 2026-10-07: nothing under 14px (55+ audience rule) */
.cd i{font-size:14px; letter-spacing:0; text-transform:lowercase;}
.buy-cd .cd i{font-size:14px;}
@media (max-width:640px){
  .promo-bar{padding:8px 10px;}
  .promo-bar-inner{font-size:14px;}
  .cd b{padding:1px 4px;}
  .cd i{margin:0 3px 0 1px;}
}
@media (max-width:400px){ .promo-bar-inner{font-size:14px;} .cd i{font-size:14px; margin:0 2px 0 1px;} }
.promise-seal span{font-size:14px; letter-spacing:0.5px;}