:root{
  --navy:#0B1530;
  --navy-2:#111d42;
  --red:#D40F14;
  --white:#ffffff;
  --paper:#f7f6f3;
  --ink:#1a1f2e;
  --muted:#5b6073;
  --disp:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:16px;
  --maxw:640px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
section{padding:52px 0}
h1,h2,h3{font-family:var(--disp);line-height:1.12;margin:0 0 .4em;color:var(--navy)}
h1{font-size:clamp(2rem,7vw,2.6rem)}
h2{font-size:clamp(1.5rem,5.5vw,2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:.6em}
.lede{color:var(--muted);font-size:1.05rem}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--red);color:#fff;font-weight:700;font-size:1.05rem;
  padding:.95em 1.6em;border-radius:999px;text-decoration:none;border:none;
  cursor:pointer;box-shadow:0 10px 24px rgba(212,15,20,.28);
  width:100%;
}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:var(--navy)}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:none;border:2px solid var(--navy)}

/* header */
.topbar{position:sticky;top:0;z-index:30;background:rgba(247,246,243,.92);backdrop-filter:blur(6px);border-bottom:1px solid rgba(11,21,48,.08)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{font-family:var(--disp);font-weight:700;color:var(--navy);font-size:1.1rem;text-decoration:none}
.brand em{color:var(--red);font-style:normal}
.topbar .btn{width:auto;padding:.6em 1.1em;font-size:.85rem}

/* hero */
.hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 70%,var(--navy) 100%);color:#fff;padding:28px 0 40px;text-align:center}
.hero .eyebrow{color:#ffb3ac}
.hero h1{color:#fff}
.hero h1 em{color:var(--red);font-style:italic}
.hero .sub{color:#d9dcea;font-size:1.05rem;max-width:30em;margin:0 auto 1.2em}
.hero-flyer{max-width:340px;margin:18px auto 22px;border-radius:12px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.45)}
.hero .price{font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:.9em}
.hero .price small{display:block;font-weight:500;font-size:.62em;color:#aab0c8;text-transform:uppercase;letter-spacing:.1em}
.trust-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px;font-size:.78rem;color:#b8bdd4}
.trust-row span{display:flex;align-items:center;gap:.4em}

/* problem */
.problem{background:#fff}
.problem-card{background:var(--paper);border-radius:var(--radius);padding:22px;margin-top:16px;border-left:4px solid var(--red)}

/* whats inside */
.grid-2{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px}
@media(min-width:560px){.grid-2{grid-template-columns:1fr 1fr}}
.feature{background:#fff;border:1px solid rgba(11,21,48,.08);border-radius:var(--radius);padding:18px}
.feature .num{font-family:var(--disp);font-weight:700;color:var(--red);font-size:1.3rem;margin-bottom:.2em}

/* sample strip */
.samples{background:var(--navy);color:#fff}
.samples h2{color:#fff}
.sample-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 0 6px;margin:0 -20px;padding-left:20px}
.sample-card{scroll-snap-align:start;flex:0 0 82%;max-width:320px;background:#fff;color:var(--ink);border-radius:var(--radius);padding:20px}
.sample-card .tag{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:.5em}
.sample-card .line{font-family:var(--disp);font-style:italic;font-size:1.12rem;color:var(--navy);margin-bottom:.6em}
.sample-card .fu{font-size:.88rem;color:var(--muted);border-left:3px solid var(--red);padding-left:.7em}
.sample-card .fu b{color:var(--navy);display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.2em}

/* preview */
.preview-box{background:#fff;border:1px solid rgba(11,21,48,.08);border-radius:var(--radius);overflow:hidden;margin-top:16px}
.preview-box iframe{width:100%;height:440px;border:0;display:block;background:#1b0f17}
.preview-cta{padding:16px;text-align:center}

/* what you get */
.get-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.get-list li{display:flex;gap:.7em;align-items:flex-start;background:#fff;border-radius:12px;padding:14px;border:1px solid rgba(11,21,48,.08)}
.get-list .ck{color:var(--red);font-weight:900;flex:0 0 auto}

/* faq */
.faq-item{border-bottom:1px solid rgba(11,21,48,.1);padding:16px 0}
.faq-item summary{cursor:pointer;font-weight:700;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:1em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--red);font-size:1.2em}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin-top:.6em;color:var(--muted)}

.respect{background:#fff;border:1px dashed rgba(11,21,48,.2);border-radius:var(--radius);padding:18px;margin-top:18px;font-size:.92rem;color:var(--muted)}

/* final cta */
.final-cta{background:var(--navy);color:#fff;text-align:center}
.final-cta h2{color:#fff}

footer{background:#0a1226;color:#9aa0b8;padding:28px 0;font-size:.82rem;text-align:center}
footer a{color:#cfd3e6;text-decoration:underline}
footer .links{margin-top:10px}
footer .links a{margin:0 8px}

/* checkout modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(11,21,48,.55);display:none;align-items:flex-end;justify-content:center;z-index:50}
.modal-backdrop.open{display:flex}
@media(min-width:560px){.modal-backdrop{align-items:center}}
.modal{background:#fff;border-radius:20px 20px 0 0;padding:24px 20px 28px;width:100%;max-width:460px;max-height:90vh;overflow:auto}
@media(min-width:560px){.modal{border-radius:20px}}
.modal h3{margin-bottom:.2em}
.modal .lede{margin-bottom:1em}
.field{margin-bottom:12px}
.field label{display:block;font-size:.78rem;font-weight:700;color:var(--navy);margin-bottom:.3em}
.field input{width:100%;padding:.8em .9em;border:1px solid rgba(11,21,48,.18);border-radius:10px;font-size:1rem;font-family:var(--body)}
.field input:focus{outline:2px solid var(--red);border-color:var(--red)}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.3rem;color:var(--muted);cursor:pointer}
.modal-wrap{position:relative}
.form-error{color:var(--red);font-size:.82rem;margin-top:-6px;margin-bottom:10px;display:none}
.form-error.show{display:block}

.lazy-img{background:rgba(11,21,48,.06)}