/* ==========================================================================
   Mobile-first stylesheet.
   Base rules below target the smallest screens. Breakpoints scale UP via
   min-width media queries: --bp-sm 560px, --bp-md 768px, --bp-lg 960px.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --copper: #B5652F;
  --copper-dark: #8C4A20;
  --copper-light: #E8A16C;
  --green: #2F5233;
  --green-light: #3B7A3F;
  --cream: #FAF6EF;
  --cream-2: #F1E9DB;
  --ink: #22261F;
  --ink-soft: #52584C;
  --white: #FFFFFF;
  --danger: #C94B3F;
  --good: #2F7A45;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(34,38,31,0.10);
  --shadow-lg: 0 20px 50px rgba(34,38,31,0.16);
  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-head); color:var(--green); line-height:1.15; margin:0 0 .5em;}
p{margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
img,video{max-width:100%; height:auto;}

.container{width:100%; max-width:1160px; margin:0 auto; padding:0 16px;}
@media (min-width:560px){ .container{padding:0 24px;} }

.section{padding:44px 0;}
@media (min-width:768px){ .section{padding:72px 0;} }
.section h2{font-size:clamp(1.5rem, 5vw, 2.3rem); text-align:center;}
.section__sub{text-align:center; color:var(--ink-soft); max-width:560px; margin:0 auto 32px;}
@media (min-width:768px){ .section__sub{margin-bottom:40px;} }

/* ---------- Buttons (touch-friendly: min 44px tap target) ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-head);
  font-weight:700;
  border-radius:999px;
  padding:14px 26px;
  min-height:44px;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  border:none;
  text-align:center;
  font-size:.98rem;
}
.btn--primary{
  background:linear-gradient(135deg, var(--copper-light), var(--copper) 60%, var(--copper-dark));
  color:var(--white);
  box-shadow:0 10px 24px rgba(140,74,32,0.35);
}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(140,74,32,0.45);}
.btn--lg{font-size:1.02rem; padding:16px 30px;}
@media (min-width:560px){ .btn--lg{font-size:1.05rem; padding:16px 32px;} }
.btn--xl{font-size:1.05rem; padding:17px 34px;}
@media (min-width:560px){ .btn--xl{font-size:1.15rem; padding:18px 40px;} }
.btn--full{width:100%; text-align:center;}
.btn--header{
  background:var(--green);
  color:var(--white);
  padding:12px 20px;
  min-height:44px;
  font-size:.88rem;
}
.btn--header:hover{background:var(--green-light);}

.icon{width:18px; height:18px; stroke:var(--good); stroke-width:3; fill:none; vertical-align:-3px; margin-right:6px; flex-shrink:0;}

/* ---------- Announcement ---------- */
.announce{
  background:var(--green);
  color:var(--cream);
  text-align:center;
  font-size:.78rem;
  padding:9px 12px;
}
@media (min-width:560px){ .announce{font-size:.85rem;} }
.announce p{margin:0;}

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,246,239,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  gap:12px;
}
.logo{display:flex; align-items:center; min-height:44px;}
.logo img{height:32px; width:auto; display:block;}
@media (min-width:560px){ .logo img{height:38px;} }
.nav{display:none; gap:28px;}
.nav a{font-size:.92rem; font-weight:600; color:var(--ink-soft); padding:12px 0; touch-action:manipulation;}
.nav a:hover{color:var(--copper);}
@media (min-width:900px){ .nav{display:flex;} }

/* ---------- Hero ---------- */
.hero{padding:32px 0 28px;}
@media (min-width:768px){ .hero{padding:56px 0 40px;} }
.hero__inner{
  display:grid; grid-template-columns:1fr; gap:36px; align-items:center;
}
@media (min-width:900px){
  .hero__inner{grid-template-columns:1.1fr .9fr; gap:50px;}
}

.eyebrow{
  color:var(--copper-dark); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:.75rem; margin-bottom:10px;
}
.eyebrow--light{color:var(--copper-light);}

.hero h1{font-size:clamp(1.75rem, 7vw, 3rem);}
.hl{color:var(--copper);}
.hero__sub{font-size:1.02rem; color:var(--ink-soft); max-width:520px;}
@media (min-width:560px){ .hero__sub{font-size:1.1rem;} }

.hero__bullets{margin:20px 0; display:grid; gap:12px;}
.hero__bullets li{font-weight:600; font-size:.96rem;}
@media (min-width:560px){ .hero__bullets li{font-size:1rem;} }

.hero__cta{margin-top:22px;}
.microcopy{font-size:.82rem; color:var(--ink-soft); margin-top:10px;}
.microcopy--light{color:rgba(255,255,255,0.75);}

.trustrow{
  margin-top:24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:.88rem; color:var(--ink-soft);
}
.stars{color:#E0A526; font-weight:700; letter-spacing:1px;}
.stars--lg{font-size:1.6rem;}
.divider{width:1px; height:18px; background:rgba(0,0,0,0.15);}

.hero__visual{display:flex; justify-content:center;}
.video-card{
  position:relative; width:100%; max-width:340px;
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg);
  background:var(--white); aspect-ratio:1/1;
}
@media (min-width:900px){ .video-card{max-width:400px; border-radius:24px;} }
.hero-video{width:100%; height:100%; display:block; object-fit:cover;}
.badge{
  position:absolute; font-family:var(--font-head); font-weight:700; font-size:.72rem;
  padding:7px 14px; border-radius:999px; box-shadow:0 8px 18px rgba(0,0,0,0.18);
  white-space:nowrap;
}
@media (min-width:560px){ .badge{font-size:.8rem; padding:8px 16px;} }
.badge--top{
  top:14px; left:14px; background:var(--good); color:#fff;
}
.badge--bottom{
  bottom:14px; right:14px; background:#fff; color:#E0A526; letter-spacing:1px;
}

/* ---------- Problem ---------- */
.problem{background:var(--cream-2);}
.grid{display:grid; gap:18px;}
@media (min-width:560px){ .grid{gap:22px;} }
@media (min-width:900px){ .grid{gap:26px;} }

.grid--4{grid-template-columns:1fr;}
@media (min-width:560px){ .grid--4{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .grid--4{grid-template-columns:repeat(4,1fr);} }

.grid--3{grid-template-columns:1fr;}
@media (min-width:860px){ .grid--3{grid-template-columns:repeat(3,1fr);} }

.pain{background:var(--white); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow); text-align:center;}
.pain-icon{width:32px; height:32px; stroke:var(--danger); stroke-width:1.6; fill:none; margin-bottom:12px;}
.pain h3{font-size:1.02rem; margin-bottom:6px;}
.pain p{color:var(--ink-soft); font-size:.92rem; margin:0;}

/* ---------- How it works ---------- */
.how__layout{display:grid; grid-template-columns:1fr; gap:32px; align-items:center;}
@media (min-width:860px){ .how__layout{grid-template-columns:.85fr 1.15fr; gap:40px;} }
.video-card--sm{max-width:280px; margin:0 auto;}
@media (min-width:560px){ .video-card--sm{max-width:340px;} }
.steps{margin-top:10px; grid-template-columns:1fr;}
.step{
  background:var(--white); border-radius:var(--radius); padding:26px 22px;
  box-shadow:var(--shadow); position:relative; text-align:center;
}
@media (min-width:560px){ .step{padding:32px 26px;} }
.step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--copper-light), var(--copper));
  color:#fff; font-family:var(--font-head); font-weight:800; margin-bottom:16px;
}
.step h3{font-size:1.05rem;}
.step p{color:var(--ink-soft); font-size:.92rem; margin:0;}

/* ---------- Features ---------- */
.feature{background:var(--white); border-radius:var(--radius); padding:22px 18px; box-shadow:var(--shadow); text-align:center;}
.feature__icon{font-size:1.7rem; margin-bottom:10px;}
.feature h3{font-size:.98rem; margin-bottom:6px;}
.feature p{color:var(--ink-soft); font-size:.86rem; margin:0;}

/* ---------- Bonus ---------- */
.bonus{padding-top:0;}
.bonus__card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden;
}
.bonus__img{width:100%; height:120px; object-fit:cover; display:block;}
@media (min-width:560px){ .bonus__img{height:170px;} }
.bonus__copy{padding:24px 22px 28px; text-align:center;}
@media (min-width:560px){ .bonus__copy{padding:30px 32px 34px;} }
.bonus__copy h2{font-size:1.35rem; margin-bottom:10px;}
@media (min-width:560px){ .bonus__copy h2{font-size:1.5rem;} }
.bonus__copy p{max-width:560px; margin-left:auto; margin-right:auto;}
.bonus__copy p:last-child{margin-bottom:0; color:var(--ink-soft);}

/* ---------- Comparison ---------- */
.compare{background:var(--cream-2);}
.table-hint{
  display:block; text-align:center; font-size:.78rem; color:var(--ink-soft);
  margin:-8px 0 16px;
}
@media (min-width:640px){ .table-hint{display:none;} }
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); box-shadow:var(--shadow); background:var(--white);}
.compare-table{width:100%; border-collapse:collapse; min-width:600px;}
.compare-table th, .compare-table td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--cream-2); font-size:.9rem;}
@media (min-width:560px){ .compare-table th, .compare-table td{padding:16px 18px; font-size:.94rem;} }
.compare-table thead th{font-family:var(--font-head); color:var(--green); font-size:.9rem;}
.compare-table th.col--good, .compare-table td.col--good{background:#EAF3EA; color:var(--green); font-weight:700;}
.compare-table tbody tr:last-child td{border-bottom:none;}

/* ---------- Reviews ---------- */
.rating-summary{text-align:center; margin-bottom:30px;}
@media (min-width:768px){ .rating-summary{margin-bottom:36px;} }
.rating-summary p{color:var(--ink-soft); margin-top:6px;}
.rating-note{font-size:.78rem; color:var(--ink-soft); opacity:.8;}
.testimonials{margin-top:10px;}
.testimonial{background:var(--white); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow); margin:0;}
.testimonial p{font-size:.92rem; color:var(--ink); margin:10px 0 14px;}
.testimonial cite{font-style:normal; font-weight:700; font-size:.85rem; color:var(--green);}
.verified{display:block; font-weight:500; color:var(--ink-soft); font-size:.78rem; margin-top:2px;}

/* ---------- Offer ---------- */
.offer{background:linear-gradient(135deg, var(--green-light), var(--green) 70%);}
.offer__inner{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:30px;}
@media (min-width:768px){ .offer__inner{flex-direction:row; gap:44px;} }
.offer__photo{
  width:220px; max-width:70%; border-radius:20px; box-shadow:var(--shadow-lg);
  object-fit:cover; aspect-ratio:4/5;
}
@media (min-width:560px){ .offer__photo{width:280px; max-width:100%;} }
.offer__card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:20px;
  padding:32px 24px;
  max-width:620px;
  text-align:center;
  color:var(--white);
}
@media (min-width:560px){ .offer__card{padding:48px 40px;} }
.offer__card h2{color:var(--white); font-size:1.6rem;}
@media (min-width:560px){ .offer__card h2{font-size:2rem;} }
.offer__desc{color:rgba(255,255,255,0.85);}
.offer__list{display:grid; gap:10px; justify-items:center; margin:22px 0 28px;}
.offer__list li{font-weight:600; font-size:.94rem;}
.offer__list .icon{stroke:#BFE3C4;}

/* ---------- Guarantee ---------- */
.guarantee__inner{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  max-width:760px; margin:0 auto; text-align:center;
}
@media (min-width:600px){
  .guarantee__inner{flex-direction:row; align-items:center; gap:28px; text-align:left;}
}
.shield{width:56px; height:56px; flex:none; stroke:var(--copper); stroke-width:1.4; fill:none;}
@media (min-width:560px){ .shield{width:64px; height:64px;} }

/* ---------- FAQ ---------- */
.accordion{max-width:760px; margin:0 auto; display:grid; gap:12px;}
.accordion details{
  background:var(--white); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow);
}
@media (min-width:560px){ .accordion details{padding:18px 22px;} }
.accordion summary{
  font-family:var(--font-head); font-weight:700; cursor:pointer; color:var(--green);
  font-size:.96rem; list-style:none; min-height:44px; display:flex; align-items:center;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
@media (min-width:560px){ .accordion summary{font-size:1rem;} }
.accordion summary::-webkit-details-marker{display:none;}
.accordion summary::after{content:'+'; margin-left:auto; font-size:1.3rem; color:var(--copper); padding-left:12px;}
.accordion details[open] summary::after{content:'–';}
.accordion p{margin:12px 0 0; color:var(--ink-soft); font-size:.92rem;}

/* ---------- Final CTA ---------- */
.final-cta{background:var(--cream-2);}
.final-cta__inner{text-align:center; max-width:640px; margin:0 auto;}

/* ---------- Sticky mobile CTA (thumb-zone, safe-area aware) ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--white); padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(0,0,0,0.12);
  display:block;
}
@media (min-width:760px){ .sticky-cta{display:none;} }
body{padding-bottom:calc(66px + env(safe-area-inset-bottom));}
@media (min-width:760px){ body{padding-bottom:0;} }

/* ---------- Footer ---------- */
.footer{background:var(--ink); color:rgba(255,255,255,0.7); padding:36px 0 100px;}
@media (min-width:760px){ .footer{padding:40px 0 40px;} }
.footer__inner{text-align:center;}
.footer__logo{height:36px; width:auto; margin:0 auto;}
@media (min-width:560px){ .footer__logo{height:40px;} }
.footer__links{display:flex; justify-content:center; gap:8px 20px; margin:14px 0; flex-wrap:wrap;}
.footer__links a{font-size:.85rem; color:rgba(255,255,255,0.75); padding:10px 4px; min-height:44px; display:inline-flex; align-items:center; touch-action:manipulation;}
.footer__links a:hover{color:#fff;}
.footer__legal{font-size:.76rem; max-width:640px; margin:14px auto 6px; color:rgba(255,255,255,0.5);}
.footer__copy{font-size:.76rem; color:rgba(255,255,255,0.45);}

/* ---------- Inline section CTAs ---------- */
.section-cta{margin-top:32px; text-align:center;}
@media (min-width:768px){ .section-cta{margin-top:40px;} }
.section-cta--left{margin-top:22px; text-align:center;}
@media (min-width:600px){ .section-cta--left{text-align:left;} }

/* ---------- Legal pages ---------- */
.legal{padding:44px 0 70px;}
@media (min-width:768px){ .legal{padding:60px 0 90px;} }
.legal-content{max-width:760px; margin:0 auto;}
.legal-content h1{font-size:clamp(1.5rem, 6vw, 2.2rem); margin-bottom:6px;}
.legal-content .updated{color:var(--ink-soft); font-size:.85rem; margin-bottom:28px;}
@media (min-width:768px){ .legal-content .updated{margin-bottom:34px;} }
.legal-content h2{font-size:1.12rem; text-align:left; margin-top:30px;}
@media (min-width:560px){ .legal-content h2{font-size:1.2rem;} }
.legal-content h3{font-size:1rem; text-align:left; margin-top:20px;}
.legal-content p{color:var(--ink-soft);}
.legal-content ul, .legal-content ol{margin:0 0 1em; padding-left:22px;}
.legal-content ul{list-style:disc;}
.legal-content ol{list-style:decimal;}
.legal-content li{color:var(--ink-soft); margin-bottom:6px;}
.legal-content a{color:var(--copper); text-decoration:underline;}
.legal-content strong{color:var(--ink);}
.back-link{display:inline-flex; align-items:center; min-height:44px; margin-bottom:12px; font-weight:600; color:var(--green); font-size:.9rem; touch-action:manipulation;}
.placeholder{background:#FBEFD9; padding:0 4px; border-radius:4px;}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:none;}

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .btn--primary:hover{transform:none;}
}

/* ---------- Focus states (keyboard nav) ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--copper); outline-offset:2px;
}