/* RespiClear – shared stylesheet (en-en-us-respiclear.com)
   Palette taken from the Wild Mullein label: honey label, olive band, amber glass, ink cap */
:root{
  --ink:#221c14;
  --ink-soft:#4a4136;
  --olive:#56612a;
  --olive-deep:#2f3716;
  --honey:#f2d49b;
  --honey-soft:#faecd0;
  --paper:#fdf9f1;
  --amber:#8a4b14;
  --gold:#ffc21a;
  --gold-deep:#f29a00;
  --line:#e6dcc6;
  --ok:#3f7a3a;
  --radius-lg:22px;
  --radius-sm:10px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Source Serif 4", Georgia, "Times New Roman", serif;
  font-size:19px; line-height:1.72; color:var(--ink); background:var(--paper);
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--olive); text-underline-offset:3px;}
h1,h2,h3,.logo,.btn,.price-card .qty,.price-card .per-num{
  font-family:"Archivo", "Arial Black", Arial, sans-serif;
}
h1,h2,h3{line-height:1.15; color:var(--olive-deep); letter-spacing:-.01em;}
:focus-visible{outline:3px solid var(--gold-deep); outline-offset:3px;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--olive-deep); color:#fff;
  padding:14px 6%;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.logo{font-weight:900; font-size:1.45rem; color:#fff; text-decoration:none; letter-spacing:-.02em;}
.logo sup{font-size:.55em; font-weight:600;}
.site-header nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.site-header nav a{color:#efe8d6; text-decoration:none; font-size:1rem;}
.site-header nav a:hover{color:var(--gold);}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-weight:800;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  color:var(--ink)!important; border-radius:999px;
  padding:16px 34px; font-size:1.12rem;
  box-shadow:0 5px 0 #c77a00;
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 7px 0 #c77a00;}
.btn:active{transform:translateY(3px); box-shadow:0 2px 0 #c77a00;}
.btn.small{padding:10px 22px; font-size:.95rem; box-shadow:0 3px 0 #c77a00;}
.btn.dark{background:var(--olive-deep); color:#fff!important; box-shadow:0 5px 0 #1a1f0b;}

/* ---------- hero (the one bold moment: the label, blown up) ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--honey);
  padding:64px 6% 120px;
}
.hero::after{ /* olive "hill" band from the bottle label */
  content:""; position:absolute; left:-10%; right:-10%; bottom:-140px; height:260px;
  background:var(--olive); border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.hero-grid{
  position:relative; z-index:1; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
}
.hero .brand-line{font-family:"Archivo",sans-serif; font-weight:700; color:var(--amber); font-size:1.05rem; margin:0 0 6px;}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.3rem); margin:0 0 14px; color:var(--ink); font-weight:900;}
.hero .lead{font-size:1.2rem; color:var(--ink-soft); max-width:44ch; margin:0 0 24px;}
.hero .badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; padding:0; list-style:none;}
.hero .badges li{background:var(--paper); border:1px solid #e3c98f; border-radius:999px; padding:5px 14px; font-size:.92rem;}
.hero-img img{margin:0 auto; max-height:520px; filter:drop-shadow(0 24px 30px rgba(60,35,5,.28));}

/* ---------- sections ---------- */
.section{padding:72px 6%;}
.section.alt{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section.olive{background:var(--olive-deep); color:#f3eedf;}
.section.olive h2,.section.olive h3{color:#fff;}
.inner{max-width:1120px; margin:0 auto;}
.narrow{max-width:760px; margin:0 auto;}
.section h2{font-size:clamp(1.8rem,3.4vw,2.5rem); margin:0 0 12px;}
.section .sub{color:var(--ink-soft); max-width:62ch; margin:0 0 36px;}
.center{text-align:center;}
.center .sub{margin-left:auto; margin-right:auto;}

/* quick facts */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; overflow:hidden;}
.facts div{padding:22px 20px; border-right:1px solid var(--line);}
.facts div:last-child{border-right:0;}
.facts strong{display:block; font-family:"Archivo",sans-serif; color:var(--olive); font-size:.95rem;}

/* two-column text + image */
.split{display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center;}
.split.rev{grid-template-columns:1.15fr .85fr;}

/* benefit list */
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.benefit{border-top:4px solid var(--olive); padding-top:16px;}
.benefit h3{font-size:1.25rem; margin:0 0 8px;}
.benefit p{margin:0; color:var(--ink-soft);}

/* ---------- pricing cards ---------- */
.price-cards{display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:22px; align-items:end;}
.price-card{
  background:#fff; border:2px solid var(--line); border-radius:var(--radius-lg);
  text-align:center; overflow:hidden; display:flex; flex-direction:column;
}
.price-card .tier{background:#9d9486; color:#fff; font-family:"Archivo",sans-serif; font-weight:800; padding:10px; font-size:1rem;}
.price-card.popular{border:3px solid var(--olive); background:#fffbea;}
.price-card.popular .tier{background:#d63a3a; padding:14px;}
.price-card .body{padding:22px 20px 26px; display:flex; flex-direction:column; align-items:center; gap:6px; flex:1;}
.price-card .qty{font-weight:900; font-size:1.9rem; color:var(--olive); margin:0; line-height:1;}
.price-card .days{font-weight:600; margin:0 0 6px;}
.price-card img{height:170px; width:auto; object-fit:contain;}
.price-card .per{display:flex; align-items:flex-start; justify-content:center; gap:4px; color:var(--olive-deep); margin:8px 0;}
.price-card .per-num{font-size:3.6rem; font-weight:900; line-height:1;}
.price-card .per sup{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.4rem; margin-top:6px;}
.price-card .per small{align-self:flex-end; font-size:.9rem; margin-bottom:8px;}
.price-card ul{list-style:none; margin:4px 0 12px; padding:0; font-size:.95rem;}
.price-card ul li::before{content:"✓ "; color:var(--ok); font-weight:700;}
.price-card .total{font-size:1rem; margin-top:10px; color:var(--ink-soft);}
.price-card .total s{color:#b33;}
.price-card .total b{color:var(--ink);}
.save{display:inline-block; background:var(--amber); color:#fff; font-family:"Archivo",sans-serif; font-weight:800; font-size:.85rem; border-radius:6px; padding:3px 10px;}

.pricing-note{margin-top:24px; font-size:.95rem; color:var(--ink-soft); text-align:center;}

/* ---------- reviews ---------- */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.review{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px;}
.review header{display:flex; align-items:center; gap:14px; margin-bottom:12px;}
.review img{width:64px; height:64px; border-radius:50%;}
.review .name{font-family:"Archivo",sans-serif; font-weight:800; margin:0; line-height:1.2;}
.review .meta{font-size:.85rem; color:var(--ink-soft); margin:0;}
.review .stars{color:var(--gold-deep); letter-spacing:2px; font-size:1.05rem;}
.review p{margin:0; font-size:1rem;}
.fine{font-size:.85rem; color:var(--ink-soft); margin-top:22px;}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; background:#fff; font-size:1rem;}
th,td{padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
th{background:var(--olive-deep); color:#fff; font-family:"Archivo",sans-serif; font-weight:700;}
.yes{color:var(--ok); font-weight:700;}
.no{color:#a33; font-weight:700;}

/* ---------- guarantee ---------- */
.guarantee{display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:center;}
.seal{
  width:200px; height:200px; border-radius:50%; margin:0 auto;
  background:var(--gold); color:var(--ink);
  border:6px dashed var(--olive-deep); outline:8px solid var(--gold);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font-family:"Archivo",sans-serif; font-weight:900; line-height:1;
}
.seal b{font-size:4rem;}
.seal span{font-size:1rem; margin-top:4px;}

/* steps (real sequence) */
.steps{counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:18px;}
.steps li{counter-increment:s; position:relative; padding-left:64px;}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:0; width:44px; height:44px; border-radius:50%;
  background:var(--olive); color:#fff; font-family:"Archivo",sans-serif; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* care checklist */
.care{display:grid; grid-template-columns:1fr 1fr; gap:22px 36px;}
.care h3{font-size:1.15rem; margin:0 0 6px;}
.care p{margin:0; color:var(--ink-soft); font-size:1rem;}

/* faq */
details{border-bottom:1px solid var(--line); padding:18px 0;}
summary{cursor:pointer; font-family:"Archivo",sans-serif; font-weight:700; font-size:1.1rem; color:var(--olive-deep); list-style:none; display:flex; justify-content:space-between; gap:16px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; font-size:1.4rem; line-height:1; color:var(--olive);}
details[open] summary::after{content:"–";}
details p{margin:12px 0 0;}

/* final offer */
.offer{background:var(--olive-deep); color:#f3eedf; border-radius:28px; padding:48px; display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:center;}
.offer h2{color:#fff;}
.offer .old{text-decoration:line-through; color:#bfb697; font-size:1.5rem; margin-right:12px;}
.offer .new{color:var(--gold); font-size:2.8rem; font-weight:900; font-family:"Archivo",sans-serif;}
.pricing-shot{border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:0 14px 34px rgba(60,40,10,.12);}

/* ---------- article pages ---------- */
.page-hero{background:var(--honey); padding:56px 6% 48px;}
.page-hero h1{font-size:clamp(2rem,4.5vw,3rem); margin:0 0 10px; max-width:22ch;}
.page-hero p{margin:0; max-width:62ch; color:var(--ink-soft); font-size:1.12rem;}
.page-hero .inner, .article{max-width:800px; margin:0 auto;}
.article{padding:40px 6% 70px;}
.article h2{font-size:1.65rem; margin:44px 0 10px;}
.article h3{font-size:1.2rem; margin:28px 0 6px;}
.callout{background:#fff; border:1px solid var(--line); border-left:6px solid var(--olive); border-radius:var(--radius-sm); padding:20px 24px; margin:28px 0;}
.sources{font-size:.92rem; color:var(--ink-soft);}
.sources li{margin-bottom:6px; word-break:break-word;}
.article-cta{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; display:grid; grid-template-columns:140px 1fr; gap:24px; align-items:center; margin-top:44px;}
.article-cta h3{margin:0 0 6px;}
.article-cta p{margin:0 0 14px; font-size:1rem;}
.back{margin-top:36px;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:#d9d1bf; padding:48px 6%; font-size:.9rem; line-height:1.65;}
.site-footer .inner{max-width:1120px;}
.site-footer nav{display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:22px;}
.site-footer a{color:var(--gold);}
.site-footer p{margin:0 0 12px;}

.top-btn{
  position:fixed; right:20px; bottom:20px; width:52px; height:52px; border-radius:50%;
  background:var(--gold); color:var(--ink); text-decoration:none; font-weight:900; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .3s;
}
.top-btn.show{opacity:1; pointer-events:auto;}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid,.split,.split.rev,.offer,.guarantee{grid-template-columns:1fr;}
  .hero{padding-bottom:110px;}
  .hero-img{order:-1;}
  .hero-img img{max-height:360px;}
  .benefits,.reviews{grid-template-columns:1fr 1fr;}
  .price-cards{grid-template-columns:1fr; max-width:440px; margin:0 auto;}
  .price-card.popular{order:-1;}
  .facts{grid-template-columns:1fr 1fr;}
  .facts div:nth-child(2){border-right:0;}
  .facts div:nth-child(-n+2){border-bottom:1px solid var(--line);}
}
@media (max-width:620px){
  body{font-size:18px;}
  .benefits,.reviews,.care{grid-template-columns:1fr;}
  .section{padding:56px 6%;}
  .offer{padding:30px 22px;}
  .article-cta{grid-template-columns:1fr; text-align:center;}
  .article-cta img{margin:0 auto; max-height:180px;}
  .site-header nav a:not(.btn){display:none;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; scroll-behavior:auto!important;}
}
.section h2 + .table-wrap{margin-top:24px;}

/* hero details */
.hero .tagline{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.3rem; color:var(--olive-deep); margin:0 0 12px;}
.hero .lead{max-width:56ch;}
.hero-points{display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; margin:0 0 18px; padding:18px 20px; background:rgba(253,249,241,.7); border:1px solid #e3c98f; border-radius:16px;}
.hero-points h2{font-size:1.05rem; margin:0 0 6px; color:var(--amber);}
.hero-points ul{list-style:none; margin:0; padding:0; font-size:1rem; line-height:1.5;}
.hero-points li{padding-left:24px; position:relative; margin-bottom:6px;}
.hero-points li::before{content:"✓"; position:absolute; left:0; color:var(--olive); font-weight:700;}
.hero .rating{margin:0 0 18px; font-size:1rem; color:var(--ink-soft);}
.hero .rating span{color:var(--gold-deep); letter-spacing:2px; margin-right:6px;}
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;}
.hero-cta .from{font-size:.98rem; color:var(--ink-soft);}
.hero-cta .from b{color:var(--ink); font-size:1.15rem;}
@media (max-width:620px){ .hero-points{grid-template-columns:1fr;} }

/* ---------- SEO / AEO / GEO blocks ---------- */
.answer{background:#fff; border:1px solid var(--line); border-left:6px solid var(--gold-deep); border-radius:var(--radius-sm); padding:16px 20px; margin:0 0 24px; font-size:1.02rem;}
.answer b.q{display:block; font-family:"Archivo",sans-serif; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); margin-bottom:4px;}
.answer p{margin:0;}
.byline{font-size:.9rem; color:var(--ink-soft); margin:0 0 18px;}
.toc{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 26px;}
.toc h2{font-size:1.2rem!important; margin:0 0 10px!important;}
.toc ol{margin:0; padding-left:22px; columns:2; column-gap:40px; font-size:1rem;}
.toc li{margin-bottom:4px; break-inside:avoid;}
.takeaways{background:var(--honey-soft); border:1px solid #e9cf98; border-radius:var(--radius-lg); padding:22px 26px; margin:28px 0;}
.takeaways h3{margin:0 0 8px; font-size:1.15rem;}
.takeaways ul{margin:0; padding-left:20px;}
.takeaways li{margin-bottom:6px;}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0 0;}
.stats div{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; text-align:center;}
.stats b{display:block; font-family:"Archivo",sans-serif; font-size:2rem; color:var(--olive); line-height:1.1;}
.stats span{font-size:.92rem; color:var(--ink-soft);}
.crumbs{font-size:.9rem; margin:0 0 12px; color:var(--ink-soft);}
.crumbs a{color:var(--amber);}
@media (max-width:620px){ .toc ol{columns:1;} .stats{grid-template-columns:1fr;} }
.hero h1{font-size:clamp(2rem,3.6vw,3rem);}
.page-hero h1{max-width:30ch;}
.page-hero .answer p{max-width:none; color:var(--ink); font-size:1.02rem;}