:root{
  --cream:#F1E2C7; --red:#7D200E; --maroon:#510E06; --tan:#997662;
  --brown:#5E3321; --charcoal:#1F1611; --bg:#F7EFE2; --ink:#241A14;
  --rule:rgba(94,51,33,.2); --blue:#6084B6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:var(--red)}
.hero{background:var(--charcoal); color:var(--cream); padding:46px 16px 40px}
.hero-in{max-width:680px; margin:0 auto; text-align:center}
.logo{width:62px; height:auto; display:block; margin:0 auto 14px}
.kicker{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--tan); margin:0 0 10px}
h1{font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; font-size:clamp(32px,5.4vw,48px); line-height:1.15; margin:0; text-wrap:balance}
.hero .sub{color:#d9c8ab; margin:14px auto 0; max-width:560px; font-size:16px; text-wrap:pretty}
.points{display:inline-block; margin-top:18px; padding:6px 16px; border:1px solid rgba(241,226,199,.35); border-radius:999px; font-size:14px; color:var(--cream)}
.points b{color:#fff}
main{max-width:680px; margin:0 auto; padding:40px 20px 24px}
main p{margin:0 0 18px; text-wrap:pretty}
h2{font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:clamp(26px,4vw,34px); line-height:1.2; margin:34px 0 14px; color:var(--maroon); text-wrap:balance}
h3{font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:24px; margin:26px 0 10px; color:var(--brown)}
em,.accent{font-family:'Cardo',Georgia,serif; font-style:italic}
ul.list{padding-left:22px; margin:0 0 18px}
ul.list li{margin:0 0 8px}
ul.checks{list-style:none; padding:0; margin:0 0 20px}
ul.checks li{position:relative; padding-left:30px; margin:0 0 12px}
ul.checks li:before{content:"\2713"; position:absolute; left:0; top:0; color:var(--red); font-weight:600}
.note{background:#fff8ee; border-left:3px solid var(--tan); padding:14px 18px; margin:22px 0; font-size:15.5px}
.template{background:#fff; border:1px solid var(--rule); padding:18px 22px; margin:18px 0; font-size:16px}
.template p{margin:0 0 10px}
.card{background:#fff; border:1px solid var(--rule); border-radius:4px; padding:26px 24px; margin:28px 0}
.card h2{margin-top:0}
label{display:block; font-weight:600; font-size:14.5px; margin:16px 0 6px; color:var(--brown)}
input[type=text],input[type=email],textarea{width:100%; padding:12px 14px; border:1px solid #cdb79a; background:#fffdf9; font:inherit; font-size:16px; border-radius:3px; color:var(--ink)}
textarea{min-height:110px; resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--blue); outline-offset:1px}
.btn{display:inline-block; background:var(--red); color:var(--cream); border:0; padding:15px 28px; font:inherit; font-weight:600; font-size:15px; letter-spacing:.06em; text-transform:uppercase; border-radius:3px; cursor:pointer; text-decoration:none; margin-top:20px}
.btn:hover{background:var(--maroon)}
.btn[disabled]{opacity:.6; cursor:wait}
.form-msg{margin-top:12px; font-size:14.5px; color:var(--red)}
.center{text-align:center}
.divider{border:0; border-top:1px solid var(--rule); margin:36px 0}
.video{position:relative; padding-top:56.25%; margin:0 0 26px; background:#000}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
img.wide{width:100%; height:auto; display:block; margin:18px 0 24px}
.celebrate{font-size:64px; line-height:1; margin:0 0 6px}
.sig{font-family:'Cardo',Georgia,serif; font-style:italic; font-size:20px; margin-top:6px}
footer{border-top:1px solid var(--rule); margin-top:30px; padding:22px 16px 40px; text-align:center; font-size:13px; color:var(--brown)}
footer a{color:var(--brown); margin:0 8px}
.hide{display:none!important}
/* Review mode: only visible with ?review=1 */
.swap{background:none}
body.review .swap{background:#ffe58a; outline:1px dashed #b88a00}
body.review .swap:after{content:" [swap for your version]"; font-size:12px; color:#7a5b00; font-weight:600}
@media (max-width:520px){
  body{font-size:16px}
  main{padding:30px 16px 20px}
  .card{padding:20px 16px}
  .btn{width:100%; text-align:center}
}