/* ============================================================
   BelowBookStocks.com — shared base styles
   Tokens, reset, topbar, footer, buttons, shared components
   ============================================================ */

:root{
  --ink:#1a1a1a;
  --soft:#444;
  --line:#e2e2e2;
  --blue:#0b3d5c;      /* clinical navy */
  --red:#b00000;       /* urgency / strike / CTA only */
  --green:#0a7a3d;
  --gold:#c9a400;
  --wash:#f7f9fb;      /* faint clinical panel */
  --serif:Georgia,'Times New Roman',Times,serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{overflow-x:hidden;}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.6;
}
a{color:var(--blue);}
img,svg{max-width:100%;height:auto;}
p{margin:0 0 20px;}
strong{color:#000;}

/* ---- top bar ---- */
.topbar{background:#fff;border-bottom:1px solid var(--line);}
.topbar .inner{
  max-width:960px;margin:0 auto;padding:16px 22px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{font-size:22px;font-weight:bold;color:var(--blue);letter-spacing:-.3px;}
.logo .tld{color:#9aa7b0;font-weight:normal;}
.secure{font-size:13px;color:var(--green);}
.secure::before{content:"\1F512\FE0E ";}

/* ---- buttons ---- */
.cta,.pay,.dlbtn{
  display:inline-block;
  background:var(--red);
  color:#fff !important;
  text-decoration:none;border:0;cursor:pointer;
  font-family:var(--serif);font-weight:bold;
  border-radius:5px;
  box-shadow:0 3px 0 #7a0000;
}
.cta{font-size:23px;padding:18px 44px;margin:18px 0 10px;}
.dlbtn{font-size:21px;padding:16px 40px;margin:14px 0 6px;}
.pay{font-size:20px;padding:16px;width:100%;text-align:center;margin:18px 0 8px;}
.cta:active,.pay:active,.dlbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #7a0000;}

.microcopy{font-size:13px;color:#616c75;font-style:italic;margin:6px 0 0;}
.center{text-align:center;}

/* ---- guarantee ---- */
.guarantee{
  border:1px solid var(--line);border-radius:6px;
  padding:24px 26px;margin:34px 0;background:#fff;text-align:center;
}
.guarantee h3{color:var(--blue);font-size:22px;margin:0 0 10px;}
.guarantee b{color:var(--green);}

/* ---- images ---- */
figure.shot{margin:28px 0;text-align:center;}
figure.shot img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:5px;}
figure.shot figcaption{font-size:13px;color:#616c75;font-style:italic;margin-top:8px;}

/* ---- fine print / disclaimer ---- */
.fineprint{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.5;color:#6a6a6a;
}

/* ---- footer ---- */
footer{background:#fff;border-top:1px solid var(--line);}
footer .inner{
  max-width:960px;margin:0 auto;padding:20px 22px;
  font-size:13px;color:#616c75;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
footer a{color:#647680;text-decoration:none;margin-left:16px;}
footer a:hover{text-decoration:underline;}

/* ============================================================
   Shared mobile rules
   ============================================================ */
@media (max-width:560px){
  /* CTAs go full-width so long labels never overflow */
  .cta,.dlbtn{
    display:block;width:100%;
    padding:16px 18px;font-size:19px;
    text-align:center;
  }
  /* footer stacks and centers, no left-margin run-off on links */
  footer .inner{flex-direction:column;text-align:center;gap:12px;}
  footer .inner > div:last-child{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;}
  footer a{margin:0 10px;}
}