/* REVO Wellness — Peptide Memberships (poster edition) */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Cinzel';font-weight:400;font-display:swap;src:url('/assets/fonts/cinzel-400.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-weight:600;font-display:swap;src:url('/assets/fonts/cinzel-600.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-weight:700;font-display:swap;src:url('/assets/fonts/cinzel-700.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:400;font-display:swap;src:url('/assets/fonts/ebgaramond-400.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:500;font-display:swap;src:url('/assets/fonts/ebgaramond-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-600.woff2') format('woff2')}
@font-face{font-family:'Great Vibes';font-weight:400;font-display:swap;src:url('/assets/fonts/greatvibes-400.woff2') format('woff2')}

:root{
  --bg:#0a2124; --bg2:#06181a; --panel:#0d272b; --card:#0b2428; --card2:#0e2c30;
  --gold:#c8a24b; --gold-lite:#e6d199; --gold-brt:#d8b869; --cream:#f2ecdd;
  --text:#d9e2db; --muted:#8ea298; --muted2:#728579;
  --line:rgba(200,162,75,.26); --line2:rgba(200,162,75,.14);
  --display:'Cinzel',Georgia,serif; --serif:'EB Garamond',Georgia,serif;
  --fancy:'Cormorant','EB Garamond',Georgia,serif; --script:'Great Vibes',cursive;
  --wrap:1200px; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--serif);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%,#0e2b2f 0%,#0a2124 42%,#071619 100%);
  background-attachment:fixed;}
.wrap{width:min(var(--wrap),calc(100% - 44px));margin-inline:auto}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;cursor:pointer;
  font:700 12px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;
  padding:15px 26px;border:1px solid transparent;transition:.18s;white-space:nowrap;border-radius:2px}
.btn-sm{padding:10px 16px;font-size:10.5px}
.btn-block{width:100%}
.btn-gold{background:var(--gold);color:#0a2124;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-lite);border-color:var(--gold-lite)}
.btn-outline{background:transparent;color:var(--cream);border-color:var(--line)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-lite)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;transition:.3s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(6,20,22,.9);backdrop-filter:blur(10px);border-bottom-color:var(--line2)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-brand{font:700 17px/1 var(--display);letter-spacing:.16em;color:var(--cream)}
.nav-brand span{color:var(--gold);font-size:.62em;letter-spacing:.34em}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-phone{font:600 14px/1 var(--serif);letter-spacing:.04em;color:var(--cream)}
.nav-phone:hover{color:var(--gold)}

/* ---------- Hero / poster ---------- */
.hero{position:relative;overflow:hidden;padding:112px 20px 70px;text-align:center;isolation:isolate}
.hero .tiger{position:absolute;z-index:-1;left:-11%;top:-3%;width:min(52%,660px);opacity:.3;
  -webkit-mask-image:radial-gradient(72% 72% at 52% 45%,#000 48%,transparent 100%);
  mask-image:radial-gradient(72% 72% at 52% 45%,#000 48%,transparent 100%);pointer-events:none}
.hero .botanical{position:absolute;z-index:-1;right:2%;top:3%;width:min(15%,150px);opacity:.5;pointer-events:none}
.hero-inner{position:relative;max-width:900px;margin-inline:auto}
.stpete{font:400 40px/1 var(--script);color:var(--gold-lite);margin:0 0 -14px}
.wordmark{display:flex;align-items:center;justify-content:center;gap:.01em;margin:0;
  font:700 clamp(84px,15vw,188px)/.9 var(--display);letter-spacing:.02em;color:var(--cream)}
.wordmark .hg{display:inline-flex;align-items:center;justify-content:center;width:.86em;height:.86em;
  color:var(--gold-lite);position:relative;top:.02em}
.wordmark .hg svg{width:100%;height:100%}
.wellness{font:600 clamp(20px,3.4vw,38px)/1 var(--display);letter-spacing:.52em;color:var(--cream);
  margin:6px 0 0;padding-left:.52em}
.flourish{color:var(--gold);font-size:16px;margin:12px 0 8px;letter-spacing:.3em}
.peptide-memberships{margin:6px 0 14px;font:700 clamp(30px,5.6vw,62px)/1 var(--display);letter-spacing:.06em;
  background:linear-gradient(180deg,#f0e2b4,#c8a24b 70%,#a9863a);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.revolution{font:600 clamp(13px,1.8vw,17px)/1 var(--fancy);letter-spacing:.34em;color:#c3cec5;margin:0 0 10px;text-transform:uppercase;text-shadow:0 2px 16px rgba(6,20,22,.9)}
.revolution b{color:var(--gold-lite);font-weight:700}
.grade{font:400 clamp(10px,1.3vw,12.5px)/1.5 var(--display);letter-spacing:.2em;color:#9fb2a8;margin:0 0 30px;text-shadow:0 2px 16px rgba(6,20,22,.9)}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Tiers ---------- */
.tiers{padding:26px 0 50px}
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.tier{position:relative;background:linear-gradient(180deg,rgba(15,44,48,.6),rgba(9,32,36,.6));
  border:1px solid var(--line);border-radius:14px;padding:56px 26px 26px;
  box-shadow:inset 0 0 0 1px rgba(200,162,75,.06);display:flex;flex-direction:column}
.tier-badge{position:absolute;top:22px;left:50%;transform:translateX(-50%);
  font:600 14px/1 var(--display);letter-spacing:.22em;color:var(--gold-lite);
  border:1px solid var(--line);border-radius:5px;padding:9px 20px;background:rgba(6,20,22,.5)}
.tier-price{display:flex;align-items:baseline;justify-content:center;gap:5px;margin:16px 0 6px}
.tier-price .cur{font:400 26px/1 var(--display);color:var(--gold-lite);align-self:flex-start;margin-top:8px}
.tier-price .num{font:700 66px/1 var(--display);color:var(--cream)}
.tier-price .per{font:600 12px/1 var(--display);letter-spacing:.12em;color:var(--muted)}
.tier-glp{text-align:center;font:600 12.5px/1 var(--display);letter-spacing:.08em;color:var(--gold-lite);margin:0 0 18px}
.tier-glp b{color:var(--gold-brt);font-weight:700}
.tier-choose{text-align:center;padding:16px 0;border-top:1px solid var(--line2);margin-bottom:6px;min-height:96px;display:flex;flex-direction:column;justify-content:center}
.choose-single{font:600 15px/1.5 var(--display);letter-spacing:.16em;color:var(--cream);margin:0}
.choose-label{font:600 12px/1 var(--display);letter-spacing:.2em;color:var(--gold-lite);margin:0 0 14px}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;align-items:center}
.rules li{display:flex;align-items:center;gap:10px;font:600 12px/1.3 var(--fancy);letter-spacing:.1em;color:var(--cream);text-transform:uppercase}
.rules .rn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 5px;
  border:1px solid var(--line);border-radius:50px;font:600 11px/1 var(--display);color:var(--gold-lite)}
.rules .or{font:400 11px/1 var(--fancy);letter-spacing:.24em;color:var(--muted2)}
.pep-list{list-style:none;margin:6px 0 0;padding:16px 0 0;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:8px;flex:1}
.pep-row{display:flex;align-items:center;gap:10px;font:400 15px/1.2 var(--serif);color:var(--text)}
.pep-row .dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.7}
.pep-row .pname{flex:1}
.pep-row .pdose{color:var(--muted2);font-size:13px;letter-spacing:.02em;text-align:right}
.pep-row.oral .pname,.pep-row.oral .pdose{color:var(--gold-lite);font-weight:600}
.pep-row.oral .dot{background:var(--gold-brt);opacity:1;box-shadow:0 0 6px rgba(216,184,105,.6)}
.opt-pill{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px 0 20px;padding:12px 18px;
  border:1px solid var(--line);border-radius:50px;font:600 11px/1 var(--display);letter-spacing:.16em;color:var(--gold-lite)}
.opt-pill svg{width:18px;height:18px;color:var(--gold)}
.select-tier{margin-top:auto}

/* Oral note */
.oral-note{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:24px;padding:16px 22px;
  border:1px solid var(--line2);border-radius:12px;background:rgba(8,24,26,.5)}
.oral-note svg{width:22px;height:22px;color:var(--gold);flex:none}
.oral-note p{margin:0;font:400 12.5px/1.4 var(--display);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.oral-note b{color:var(--gold-lite);font-weight:600}

/* ---------- Panels (includes / how) ---------- */
.panel-section{padding:14px 0}
.panel{border:1px solid var(--line2);border-radius:14px;padding:34px 30px;background:rgba(8,24,26,.4)}
.panel-title{text-align:center;font:600 15px/1 var(--display);letter-spacing:.28em;color:var(--gold-lite);margin:0 0 30px}
.includes,.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.inc,.step{text-align:center;padding:0 10px}
.inc svg,.step svg{width:30px;height:30px;color:var(--gold);margin-bottom:14px}
.inc h4{font:600 14px/1 var(--display);letter-spacing:.12em;color:var(--cream);margin:0 0 10px}
.inc p{font:400 15px/1.5 var(--serif);color:var(--muted);margin:0}
.step h4{font:600 21px/1.1 var(--fancy);color:var(--gold-lite);margin:0 0 8px}
.step p{font:400 15px/1.5 var(--serif);color:var(--muted);margin:0}
.step b{color:var(--gold-lite)}
.commitment{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;padding:18px 24px;
  border:1px solid var(--line2);border-radius:12px;background:rgba(8,24,26,.5)}
.commitment svg{width:22px;height:22px;color:var(--gold);flex:none}
.commitment p{margin:0;font:600 14px/1 var(--display);letter-spacing:.18em;color:var(--gold-lite);text-transform:uppercase}

/* ---------- Tagline ---------- */
.tagline{text-align:center;padding:46px 20px 40px}
.tagline p{margin:0;font:700 clamp(22px,3.6vw,40px)/1.1 var(--display);letter-spacing:.08em;
  background:linear-gradient(180deg,#f0e2b4,#c8a24b 75%,#a9863a);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Footer ---------- */
.footer{background:#050f11;padding:48px 0 28px;border-top:1px solid var(--line2)}
.footer-inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line2)}
.foot-brand .nav-brand{font-size:19px}
.foot-brand p{color:var(--muted);font:italic 400 15px/1.4 var(--fancy);margin:12px 0 0}
.foot-contact{display:flex;flex-direction:column;gap:7px;text-align:right;color:var(--muted);font-size:14px}
.foot-contact a:hover{color:var(--gold)}
.foot-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;color:var(--muted2);font-size:12px}
.foot-links a:hover{color:var(--gold)}

/* ---------- Return banner ---------- */
.return-banner{position:fixed;inset:0 0 auto 0;z-index:60;padding:14px 20px;text-align:center;font:600 14px/1.4 var(--serif)}
.return-banner.success{background:#123a2c;color:#a9f0c9;border-bottom:1px solid #64d7a5}
.return-banner.cancel{background:#3a2418;color:#f0c3a9;border-bottom:1px solid #e89f86}
.return-banner button{margin-left:14px;background:none;border:0;color:inherit;cursor:pointer;text-decoration:underline;font:inherit}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:22px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(3,10,11,.82);backdrop-filter:blur(3px)}
.modal-card{position:relative;width:min(780px,100%);max-height:92vh;overflow:auto;
  background:linear-gradient(180deg,#0c282c,#081d20);border:1px solid var(--line);border-radius:14px}
.modal-steps{display:flex;border-bottom:1px solid var(--line2);position:sticky;top:0;background:#0c282c;z-index:2;border-radius:14px 14px 0 0}
.mstep{flex:1;padding:16px 22px;font:600 11px/1 var(--display);letter-spacing:.14em;color:var(--muted2);border-right:1px solid var(--line2)}
.mstep:last-child{border-right:0}
.mstep.active{color:var(--gold-lite)}
.modal-close{position:absolute;top:12px;right:14px;z-index:3;background:none;border:0;color:var(--muted);font-size:15px;cursor:pointer;padding:6px}
.modal-close:hover{color:var(--gold-lite)}
.modal-body{padding:30px 32px 32px}
.modal-body h3{font:600 28px/1.05 var(--display);color:var(--cream);margin:0 0 12px;letter-spacing:.02em}
.modal-body .intro{color:var(--muted);font-size:15px;margin:0 0 24px;max-width:58ch}
.options{display:flex;flex-direction:column;gap:10px;margin:0 0 24px}
.option{display:flex;gap:14px;align-items:center;width:100%;text-align:left;cursor:pointer;color:var(--text);
  background:rgba(6,20,22,.5);border:1px solid var(--line2);border-radius:8px;padding:15px 18px}
.option:hover{border-color:var(--line)}
.option.active{border-color:var(--gold);background:rgba(200,162,75,.09)}
.option .opt-tag{font:600 10px/1 var(--display);letter-spacing:.16em;color:var(--gold-lite);min-width:74px}
.option .opt-desc{font-size:15px;color:var(--cream)}
.group{margin:0 0 22px}
.group-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 14px}
.group-head h5{font:600 11px/1 var(--display);letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin:0}
.group-count{font:600 10px/1 var(--display);letter-spacing:.12em;color:var(--gold-lite)}
.pep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pep{display:flex;flex-direction:column;gap:3px;padding:11px 12px;text-align:left;cursor:pointer;color:var(--text);
  background:rgba(6,20,22,.5);border:1px solid var(--line2);border-radius:7px;transition:.14s}
.pep:hover{border-color:var(--line)}
.pep.sel{border-color:var(--gold);background:rgba(200,162,75,.13)}
.pep .p-name{font-size:14px;font-weight:500;color:var(--cream)}
.pep .p-dose{font-size:11px;color:var(--muted2)}
.pep.oral .p-name{color:var(--gold-lite)}
.pep-note{font-size:12.5px;color:var(--muted2);margin:16px 0 0}
.modal-actions{display:flex;justify-content:space-between;gap:14px;margin-top:24px;align-items:center;flex-wrap:wrap}
.demo-note{font-size:12.5px;color:var(--muted2);margin:14px 0 0}
.field{margin:0 0 18px}
.field label{display:block;font:600 11px/1 var(--display);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin:0 0 8px}
.field input{width:100%;height:48px;background:#051619;border:1px solid var(--line2);color:var(--cream);padding:0 14px;font:16px var(--serif);outline:none;border-radius:6px}
.field input:focus{border-color:var(--gold)}
.check{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;cursor:pointer;font-size:14px;color:var(--muted)}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--gold);flex:none}
.check b{color:var(--cream);font-weight:600;display:block}
.edit-link{background:none;border:0;color:var(--gold-lite);font:600 11px/1 var(--display);letter-spacing:.12em;cursor:pointer;padding:0;margin:0 0 20px;text-transform:uppercase}
.summary{border:1px solid var(--line2);background:rgba(6,20,22,.5);border-radius:10px;padding:20px;margin:24px 0 0}
.summary h6{font:600 10px/1 var(--display);letter-spacing:.18em;color:var(--muted2);margin:0 0 14px;text-transform:uppercase}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:15px;color:var(--cream)}
.sum-row.total{border-top:1px solid var(--line2);margin-top:10px;padding-top:14px;font-weight:600}
.sum-row .amt{font:600 22px/1 var(--display);color:var(--gold-lite)}
.form-error{color:#f0a98d;font-size:13px;margin:12px 0 0;min-height:18px}

/* ---------- Responsive ---------- */
@media(max-width:940px){
  .tier-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .includes,.how-grid{grid-template-columns:1fr;gap:30px}
  .hero .tiger{width:80%;opacity:.28}
  .foot-contact{text-align:left}
}
@media(max-width:560px){
  .nav-phone{display:none}
  .pep-grid{grid-template-columns:1fr}
  .modal-body{padding:24px 20px}
  .wellness{letter-spacing:.36em}
}