:root{
  --container: 980px;
  --red: #ff3b30;
  --text: #222;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji', sans-serif;
  color: var(--text);
  background:#fff;
  line-height:1.6;
}
.wrapper{max-width:var(--container); margin:0 auto; padding:20px 16px}
.title-img{display:block; width:100%; height:auto; margin:0 auto 10px; max-width:1100px}
.hero{margin:14px auto 22px; display:block; border-radius:8px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.08)}
.hero img{width:100%; height:auto; display:block}
.author{
  font-size:16px;
  color:#444;
  margin:8px 0 18px;
}
.author b{color:#111; font-size:18px}
.bio{font-size:15px; color:#3a3a3a; margin-bottom:24px}
.section{padding:24px 0}
.section h3{font-family:'Bitter', Georgia, serif; font-size:26px; margin:0 0 10px}
.badges{background:#f6f6f6; padding:16px 0; border-top:1px solid #eee; border-bottom:1px solid #eee}
.badges img{max-width:100%; display:block; margin:0 auto; opacity:.95}
.refs{padding-top:18px}
.refs h3{margin-bottom:12px}
.refs .logos{max-width:760px; margin:8px auto 18px; display:block; width:100%}
.refs .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.refs li{font-size:13px; color:#444}
.fb-comments{margin-top:4px}
.fb-comments img{width:100%; height:auto; display:block; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.06)}
.footer{
  font-size:12px; color:#cfcfcf; background:#161616; padding:22px 16px; margin-top:24px
}
.footer p{max-width:var(--container); margin:0 auto; opacity:.9}
.center{text-align:center}
/* VSL block */
#vsl{scroll-margin-top:20px}
.vsl-wrapper{position:relative; padding:0; margin:18px 0}
.vsl-container{position:relative; width:100%; padding-top:56.25%; border-radius:10px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.12)}
.small-note{font-size:12px; color:#888; margin-top:6px}

/* Mobile optimizations */
@media (max-width: 768px){
  :root{ --container: 680px; }
  .wrapper{padding:18px 14px}
  .author{font-size:15px}
  .author b{font-size:17px}
  .refs .grid{grid-template-columns:1fr}
}
@media (max-width: 480px){
  :root{ --container: 420px; }
  .wrapper{padding:16px 12px}
  .hero{margin:12px 0 18px}
  .author{font-size:14px}
  .author b{font-size:16px}
  .bio{font-size:14px}
  .footer{font-size:11px}
}