/* ============================================================
   VISAGE — Men's Visagism Funnel
   Design system  |  Barbershop premium palette
   ============================================================ */

:root{
  --ink:#141110;
  --charcoal:#1d1916;
  --charcoal-2:#272120;
  --gold:#c9a24b;
  --gold-light:#e4c77a;
  --gold-deep:#a07c2e;
  --cream:#f6f1e7;
  --paper:#ffffff;
  --muted:#8a7f70;
  --line:#e7ded0;
  --burgundy:#7a2e2e;
  --green:#2f7d5b;
  --shadow:0 20px 50px rgba(20,17,16,.18);
  --shadow-sm:0 8px 24px rgba(20,17,16,.10);
  --radius:16px;
  --maxw:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4,.display{
  font-family:'Oswald','Barlow Condensed',sans-serif;
  font-weight:700;
  line-height:1.05;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.narrow{max-width:760px;margin:0 auto;padding:0 22px}

/* ---------- Urgency / announcement bar ---------- */
.topbar{
  background:var(--burgundy);
  color:#fff;
  text-align:center;
  font-size:.82rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:600;
  padding:9px 14px;
}
.topbar b{color:var(--gold-light)}

/* ---------- Header ---------- */
.site-head{
  background:var(--charcoal);
  color:var(--cream);
  padding:16px 0;
  border-bottom:1px solid rgba(201,162,75,.25);
}
.site-head .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:5px;
  color:var(--cream);
  text-transform:uppercase;
}
.logo span{color:var(--gold)}
.logo small{display:block;font-family:'Barlow';font-size:.55rem;letter-spacing:3px;color:var(--muted);font-weight:500;margin-top:2px}
.head-note{font-size:.78rem;letter-spacing:1px;color:var(--gold-light);text-transform:uppercase}

/* ---------- Hero ---------- */
.hero{
  background:
    linear-gradient(180deg,rgba(20,17,16,.86),rgba(20,17,16,.92)),
    url('img/photo-1503951914875-452162b0f3f1.jpg');
  background-size:cover;
  background-position:center;
  color:var(--cream);
  padding:70px 0 80px;
  text-align:center;
}
.eyebrow{
  display:inline-block;
  color:var(--gold);
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:.8rem;
  border:1px solid rgba(201,162,75,.5);
  border-radius:100px;
  padding:6px 16px;
  margin-bottom:22px;
}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.9rem);margin-bottom:18px}
.hero h1 em{color:var(--gold);font-style:normal}
.hero .sub{font-size:1.15rem;max-width:660px;margin:0 auto 30px;color:#e8e1d4;font-weight:400}
.hero-shot{
  max-width:520px;margin:34px auto 0;border-radius:var(--radius);
  box-shadow:var(--shadow);border:3px solid rgba(201,162,75,.4);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:'Oswald',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  border-radius:12px;
  transition:transform .12s ease,box-shadow .2s ease,filter .2s ease;
}
.btn-cta{
  background:linear-gradient(180deg,var(--gold-light),var(--gold-deep));
  color:#231a06;
  font-size:1.25rem;
  padding:20px 42px;
  box-shadow:0 12px 30px rgba(201,162,75,.4);
}
.btn-cta:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-cta small{display:block;font-family:'Barlow';font-weight:500;text-transform:none;letter-spacing:0;font-size:.8rem;opacity:.8;margin-top:3px}
.btn-yes{
  background:linear-gradient(180deg,#3aa06e,#256b47);
  color:#fff;font-size:1.35rem;padding:22px 40px;width:100%;max-width:560px;
  box-shadow:0 12px 30px rgba(47,125,91,.35);
}
.btn-yes:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-no{
  display:inline-block;margin-top:18px;color:var(--muted);
  font-size:.9rem;text-decoration:underline;background:none;border:none;cursor:pointer;
  letter-spacing:.5px;
}
.btn-no:hover{color:var(--ink)}
.pulse{animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 12px 30px rgba(201,162,75,.4)}50%{box-shadow:0 12px 42px rgba(201,162,75,.7)}100%{box-shadow:0 12px 30px rgba(201,162,75,.4)}}

/* ---------- Sections ---------- */
section{padding:64px 0}
.sec-tag{color:var(--gold-deep);font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:.82rem;text-align:center;margin-bottom:12px}
.sec-title{font-size:clamp(1.7rem,4vw,2.7rem);text-align:center;margin-bottom:16px}
.sec-title em{color:var(--gold-deep);font-style:normal}
.sec-lead{text-align:center;max-width:640px;margin:0 auto 40px;color:#5c5348;font-size:1.08rem}
.bg-ink{background:var(--charcoal);color:var(--cream)}
.bg-ink .sec-title,.bg-ink .sec-lead{color:var(--cream)}
.bg-ink .sec-lead{color:#cfc6b7}
.bg-paper{background:var(--paper)}

/* ---------- Face shapes grid ---------- */
.shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.shape-card{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:26px 18px;text-align:center;box-shadow:var(--shadow-sm);
}
.bg-ink .shape-card{background:var(--charcoal-2);border-color:rgba(201,162,75,.2)}
.shape-card .ico{font-size:2.4rem;margin-bottom:8px}
.shape-card h4{font-size:1.05rem;letter-spacing:1px}
.shape-card p{font-size:.9rem;color:var(--muted);margin-top:6px}

/* ---------- Feature / benefit cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.card{
  background:var(--paper);border-radius:14px;padding:30px 26px;
  box-shadow:var(--shadow-sm);border:1px solid var(--line);
}
.card .num{font-family:'Oswald';font-size:1.4rem;color:var(--gold-deep);font-weight:700}
.card h4{font-size:1.15rem;margin:10px 0 8px}
.card p{color:#5c5348;font-size:.96rem}

/* ---------- Bullet list ---------- */
.bullets{list-style:none;max-width:640px;margin:0 auto}
.bullets li{
  position:relative;padding:12px 0 12px 42px;border-bottom:1px dashed var(--line);
  font-size:1.05rem;
}
.bullets li:before{
  content:"✓";position:absolute;left:0;top:11px;
  width:26px;height:26px;border-radius:50%;
  background:var(--gold);color:#231a06;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
}
.bullets li b{color:var(--ink)}
.bg-ink .bullets li{border-color:rgba(201,162,75,.2)}
.bg-ink .bullets li b{color:#fff}

/* ---------- Price box ---------- */
.pricebox{
  background:var(--paper);max-width:560px;margin:0 auto;
  border-radius:20px;box-shadow:var(--shadow);overflow:hidden;
  border:2px solid var(--gold);
}
.pricebox .pb-head{background:var(--charcoal);color:var(--cream);padding:22px;text-align:center}
.pricebox .pb-head h3{font-size:1.5rem}
.pricebox .pb-head p{color:var(--gold-light);font-size:.9rem;letter-spacing:1px;text-transform:uppercase}
.pricebox .pb-body{padding:30px 28px 34px;text-align:center}
.price-line{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 4px}
.price-old{color:var(--muted);text-decoration:line-through;font-size:1.4rem;font-family:'Oswald'}
.price-now{font-family:'Oswald';font-size:3.4rem;color:var(--burgundy);font-weight:700;line-height:1}
.price-now sup{font-size:1.4rem;top:-1.1em}
.price-sub{color:var(--muted);font-size:.9rem;margin-bottom:18px}
.pb-bullets{list-style:none;text-align:left;max-width:380px;margin:20px auto 26px}
.pb-bullets li{padding:8px 0 8px 30px;position:relative;font-size:.98rem}
.pb-bullets li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.trust-row{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:.82rem}
.trust-row span{display:flex;align-items:center;gap:6px}

/* ---------- Guarantee ---------- */
.guarantee{
  display:flex;gap:24px;align-items:center;max-width:720px;margin:0 auto;
  background:var(--paper);border:2px dashed var(--gold);border-radius:18px;padding:28px 30px;
}
.guarantee .seal{
  min-width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--gold-light),var(--gold-deep));
  color:#231a06;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Oswald';font-weight:700;text-align:center;line-height:1;box-shadow:var(--shadow-sm);
}
.guarantee .seal b{font-size:1.8rem}
.guarantee .seal small{font-size:.6rem;letter-spacing:1px}
.guarantee h4{font-size:1.25rem;margin-bottom:6px}
.guarantee p{color:#5c5348;font-size:.96rem}

/* ---------- Testimonials ---------- */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi{background:var(--paper);border-radius:14px;padding:24px;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.testi .stars{color:var(--gold);letter-spacing:2px;margin-bottom:10px}
.testi p{font-size:.96rem;color:#4a4239;font-style:italic}
.testi .who{display:flex;align-items:center;gap:12px;margin-top:16px}
.testi .who img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.testi .who b{font-size:.92rem}
.testi .who small{color:var(--muted);display:block;font-size:.78rem}

/* ---------- Bonuses ---------- */
.bonus{display:flex;gap:18px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.bonus img{width:120px;height:90px;object-fit:cover;border-radius:10px}
.bonus h4{font-size:1.1rem;margin-bottom:4px}
.bonus p{font-size:.92rem;color:#5c5348}
.bonus .val{margin-left:auto;color:var(--gold-deep);font-family:'Oswald';font-weight:700;white-space:nowrap;font-size:1.1rem}

/* ---------- FAQ ---------- */
.faq{max-width:720px;margin:0 auto}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq summary{padding:18px 22px;cursor:pointer;font-family:'Oswald';font-weight:600;font-size:1.05rem;letter-spacing:.5px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--gold-deep);font-size:1.6rem;font-weight:400}
.faq details[open] summary:after{content:"–"}
.faq details p{padding:0 22px 20px;color:#5c5348}

/* ---------- One-time-offer (upsell) ---------- */
.oto-alert{background:#fff4e0;border-bottom:2px solid var(--gold);text-align:center;padding:16px;color:#7a5a10;font-weight:600}
.oto-alert b{color:var(--burgundy)}
.progress{max-width:560px;margin:26px auto 0}
.progress .bar{height:12px;background:var(--line);border-radius:100px;overflow:hidden}
.progress .fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-deep))}
.progress .steps{display:flex;justify-content:space-between;margin-top:8px;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.progress .steps b{color:var(--gold-deep)}
.oto-hero{text-align:center;padding-top:20px}
.oto-hero .eyebrow{color:var(--burgundy);border-color:rgba(122,46,46,.4)}
.oto-hero h1{font-size:clamp(1.9rem,4.6vw,3.1rem);color:var(--ink);margin-bottom:16px}
.oto-hero h1 em{color:var(--gold-deep);font-style:normal}
.oto-card{
  background:var(--paper);max-width:820px;margin:20px auto 0;border-radius:20px;
  box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line);
}
.oto-card .oc-img{width:100%;height:280px;object-fit:cover}
.oto-card .oc-body{padding:34px 34px 40px}
.oto-price{text-align:center;margin:24px 0}
.oto-price .now{font-family:'Oswald';font-size:2.8rem;color:var(--burgundy);font-weight:700}
.oto-price .now sup{font-size:1.2rem;top:-.8em}
.oto-price .old{color:var(--muted);text-decoration:line-through;margin-left:10px;font-family:'Oswald';font-size:1.4rem}
.oto-price small{display:block;color:var(--muted);font-size:.85rem}
.cta-wrap{text-align:center;margin-top:14px}

/* ---------- Thank-you ---------- */
.ty-hero{background:var(--charcoal);color:var(--cream);text-align:center;padding:70px 0 60px}
.ty-check{width:90px;height:90px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:3rem;box-shadow:0 0 0 10px rgba(47,125,91,.18)}
.ty-hero h1{font-size:clamp(2rem,5vw,3.2rem)}
.ty-hero h1 em{color:var(--gold)}
.steps-list{counter-reset:s;list-style:none;max-width:640px;margin:0 auto}
.steps-list li{counter-increment:s;position:relative;padding:20px 20px 20px 76px;background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.steps-list li:before{content:counter(s);position:absolute;left:20px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:var(--gold);color:#231a06;font-family:'Oswald';font-weight:700;font-size:1.3rem;display:flex;align-items:center;justify-content:center}
.steps-list li h4{font-size:1.1rem;margin-bottom:3px}
.steps-list li p{color:#5c5348;font-size:.94rem}
.order-summary{max-width:560px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.order-summary .os-head{background:var(--charcoal);color:var(--cream);padding:16px 22px;font-family:'Oswald';letter-spacing:1px}
.order-summary .os-row{display:flex;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--line)}
.order-summary .os-row.total{font-family:'Oswald';font-size:1.2rem;color:var(--burgundy);border:none}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink);color:#9a8f7f;padding:48px 0 30px;font-size:.85rem;text-align:center}
.site-foot .logo{font-size:1.2rem;margin-bottom:16px}
.site-foot .links{margin:16px 0;display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.site-foot .links a{color:var(--gold-light);text-decoration:none}
.site-foot .disclaimer{max-width:760px;margin:18px auto 0;font-size:.76rem;color:#6b6255;line-height:1.6}

/* ---------- Utility ---------- */
.center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:28px}.mt-l{margin-top:44px}
.stack-note{font-size:.82rem;color:var(--muted);margin-top:12px}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .grid-3,.testis,.shapes{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .head-note{display:none}
  .guarantee{flex-direction:column;text-align:center}
  .bonus{flex-wrap:wrap}.bonus img{width:100%;height:150px}.bonus .val{margin:8px 0 0}
  .oto-card .oc-img{height:200px}
  section{padding:48px 0}
}

/* ---------- Legal pages ---------- */
.legal-wrap{max-width:820px;margin:0 auto;padding:56px 22px 72px}
.legal-wrap h1{font-size:2.2rem;margin-bottom:6px}
.legal-wrap .updated{color:var(--muted);font-size:.85rem;letter-spacing:1px;text-transform:uppercase;margin-bottom:30px}
.legal-wrap h2{font-size:1.25rem;margin:34px 0 10px;color:var(--charcoal);border-bottom:2px solid var(--gold);padding-bottom:6px;text-transform:uppercase}
.legal-wrap p,.legal-wrap li{color:#4a4239;font-size:1rem;margin:0 0 12px}
.legal-wrap ul{padding-left:22px}
.legal-wrap a{color:var(--gold-deep)}
.legal-wrap .fill{background:#fff6e5;border:1px dashed var(--gold-deep);padding:2px 6px;border-radius:4px;font-weight:600}
.legal-box{background:var(--cream);border-left:5px solid var(--gold);border-radius:0 10px 10px 0;padding:16px 20px;margin:20px 0}
.legal-box b{color:var(--ink)}
.backhome{display:inline-block;margin-top:30px;color:var(--gold-deep);font-weight:600;text-decoration:none}

/* ---------- Review ribbon (remove after Digistore24 approval) ---------- */
.review-ribbon{background:#0d0b0a;color:#cfc6b7;font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;text-align:center;padding:7px 14px;border-bottom:1px solid var(--gold-deep)}
.review-ribbon b{color:var(--gold-light)}
.review-ribbon a{color:var(--gold-light);text-decoration:underline}

/* ---------- 60-Day MBG (guarantee) ---------- */
.mbg-band{display:flex;gap:26px;align-items:center;max-width:720px;margin:0 auto;background:var(--paper);border:2px solid var(--gold);border-radius:18px;padding:24px 30px;box-shadow:var(--shadow-sm)}
.mbg-band img{width:132px;height:132px;flex:0 0 auto}
.mbg-band h4{font-size:1.3rem;margin-bottom:6px}
.mbg-band p{color:#5c5348;font-size:.96rem;margin:0}
.mbg-inline{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:16px;flex-wrap:wrap}
.mbg-inline img{width:76px;height:76px;flex:0 0 auto}
.mbg-inline span{font-size:.86rem;color:#5c5348;text-align:left;max-width:340px}
.mbg-inline span b{color:var(--ink)}
@media(max-width:600px){.mbg-band{flex-direction:column;text-align:center}}