/* ============================================================
   BelowBookStocks.com — sales letter (index) styles
   ============================================================ */

body{background:#ffffff;font-size:19px;line-height:1.62;}

.wrap{max-width:680px;margin:0 auto;padding:48px 22px 90px;}

.kicker{
  text-transform:uppercase;letter-spacing:2.5px;font-size:12px;
  color:var(--blue);text-align:center;margin-bottom:26px;font-weight:bold;
}

h1{
  font-size:41px;line-height:1.16;font-weight:bold;text-align:center;
  margin:0 0 20px;color:var(--ink);letter-spacing:-.3px;
}
h1 .em{color:var(--red);font-style:italic;}

.subhead{
  text-align:center;font-size:21px;line-height:1.4;color:var(--soft);
  max-width:600px;margin:0 auto 30px;font-style:italic;
}
.under{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}

.rule{border:0;border-top:1px solid var(--line);max-width:120px;margin:34px auto;}

.lead{font-size:20px;}
.dropcap::first-letter{
  font-size:62px;line-height:.8;float:left;padding:6px 10px 0 0;
  color:var(--blue);font-weight:bold;
}

h2{font-size:27px;line-height:1.25;margin:44px 0 16px;color:var(--blue);}

.hl{background:#fff3b0;padding:0 2px;}

blockquote{
  margin:26px 0;padding:16px 22px;border-left:4px solid var(--blue);
  background:var(--wash);font-style:italic;color:#222;
}

ul.fasc{list-style:none;padding:0;margin:22px 0;}
ul.fasc li{position:relative;padding:10px 0 10px 34px;border-bottom:1px solid var(--line);}
ul.fasc li::before{
  content:"\2713";position:absolute;left:4px;top:10px;
  color:var(--blue);font-weight:bold;font-size:18px;
}

.panel{
  border:1px solid var(--line);background:var(--wash);
  padding:26px 26px 8px;margin:34px 0;border-radius:3px;
}
.panel h3{margin:0 0 14px;font-size:20px;color:var(--blue);}

.stack{counter-reset:step;list-style:none;padding:0;margin:0;}
.stack li{position:relative;padding:12px 0 12px 46px;border-bottom:1px solid var(--line);}
.stack li:last-child{border-bottom:0;}
.stack li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:12px;width:30px;height:30px;border-radius:50%;
  background:var(--blue);color:#fff;text-align:center;line-height:30px;
  font-size:15px;font-weight:bold;
}
.stack b{display:block;color:#000;}

/* bonus / consultation box */
.bonus{
  border:1px solid var(--line);border-left:5px solid var(--gold);
  background:#fffdf3;border-radius:4px;padding:24px 26px;margin:30px 0;
  display:flex;gap:20px;align-items:flex-start;
}
.bonus .avatar{flex:0 0 96px;}
.bonus h3{margin:0 0 8px;color:#8a6d00;font-size:21px;}
.bonus .val{font-size:14px;color:#8a6d00;font-weight:bold;letter-spacing:.5px;}
.bonus .val s{color:#b99;}
@media (max-width:520px){.bonus{flex-direction:column;align-items:center;text-align:center;}}

/* value stack */
.stackval{border:1px solid var(--line);border-radius:4px;margin:30px 0;overflow:hidden;}
.stackval .row{display:flex;justify-content:space-between;padding:13px 20px;border-bottom:1px solid var(--line);gap:12px;}
.stackval .row:last-child{border-bottom:0;}
.stackval .row.tot{background:var(--wash);font-weight:bold;font-size:19px;}
.stackval .row .v{white-space:nowrap;color:#556;}
.stackval .row.tot .v{color:var(--red);}
.stackval .row.tod{background:var(--blue);color:#fff;font-weight:bold;font-size:20px;}
.stackval .row.tod .v{color:#fff;}

/* price block */
.buybox{
  border:2px solid var(--blue);border-radius:4px;text-align:center;
  padding:34px 26px;margin:44px 0;background:#fff;
}
.price{font-size:22px;color:#555;margin:0 0 4px;}
.price s{color:var(--red);}
.bignum{font-size:64px;font-weight:bold;color:var(--ink);line-height:1;margin:6px 0 4px;}
.bignum span{font-size:30px;vertical-align:super;}

.ps{margin-top:40px;font-style:italic;}
.ps b{font-style:normal;}

@media (max-width:560px){
  body{font-size:18px;}
  .wrap{padding:34px 18px 70px;}
  h1{font-size:29px;letter-spacing:0;}
  .subhead{font-size:18px;}
  h2{font-size:22px;margin:34px 0 14px;}
  .lead{font-size:18px;}
  .dropcap::first-letter{font-size:48px;padding:4px 8px 0 0;}
  blockquote{padding:14px 16px;margin:22px 0;}
  .panel{padding:20px 18px 6px;}
  .stack li,.fasc li{padding-left:32px;}
  .buybox{padding:26px 18px;}
  .bignum{font-size:52px;}
  .price{font-size:19px;}
  /* value stack: let long labels breathe */
  .stackval .row{padding:12px 15px;gap:14px;}
  .bonus{padding:20px 18px;}
}