:root{
  --primary:#2f73c8;
  --accent:#5fc8ff;
  --bg:#f6f9fc;
  --card:#fff;
  --text:#223;
}

/* =========================
   GLOBAL LAYOUT
   ========================= */

body{
  font-family: 'Inter', sans-serif;
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  color:#222;
}

.wrap{
  max-width:1180px;
  margin:auto;
  padding:0 24px;
}

section{
  padding:70px 0;
}

/* =========================
   TYPOGRAPHY
   ========================= */

/* HEADINGS */
h1, h2, h3{
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight:600;
  letter-spacing:-0.02em;
}

/* HERO */
h1{
  font-size:52px;
  line-height:1.4;
  font-weight:700;
}

/* SECTIONS */
h2{
  font-size:34px;
  line-height:1.2;
}

/* CARDS */
h3{
  font-size:22px;
  line-height:1.3;
}

/* PARAGRAPHS */
p{
  font-size:17px;
  font-weight:400;
  color:#444;
}

/* SMALL TEXT */
small{
  font-size:14px;
  color:#666;
}

/* =========================
   GRID SYSTEM
   ========================= */

.herogrid,
.grid2,
.grid3,
.grid4{
  display:grid;
  gap:30px;
}

.herogrid{grid-template-columns:1.2fr .8fr;align-items:center}
.grid2{grid-template-columns:repeat(2,1fr)}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid4{grid-template-columns:repeat(4,1fr)}

.grid4 h3{color:#fff;}

/* =========================
   CARDS
   ========================= */

.card{
  background:#fff;
  border-radius:18px;
  padding:28px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  font-family:'Inter', sans-serif;
}

/* CARD TEXT SAFETY RESET */
.card p{
  font-weight:400;
  color:#444;
}

/* =========================
   BUTTONS
   ========================= */

.btnx,
.cta-btn{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  padding:16px 28px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  transition:0.2s ease;
  font-family:'Inter', sans-serif;
  font-weight:600;
}

.btnx:hover,
.cta-btn:hover{
  opacity:0.9;
}

/* =========================
   BADGES
   ========================= */

.badge{
  display:inline-block;
  background:#ffe89c;
  color:#000;
  padding:6px 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
}

/* =========================
   PRICE
   ========================= */

.price{
  font-size:54px;
  color:var(--primary);
  font-weight:700;
}

/* =========================
   TABLE (GENERAL)
   ========================= */

table{
  width:100%;
  border-collapse:collapse;
}

td,th{
  padding:14px;
  border-bottom:1px solid #ddd;
  text-align:left;
}

/* =========================
   STARS / TESTIMONIALS
   ========================= */

blockquote{
  margin:0;
  font-weight: 600;
}

.stars{
  font-size:1.2em;
  color:#fc0;
  -webkit-text-fill-color:#fc0;
  -webkit-text-stroke:1px #c90;
}

/* =========================
   CTA BLOCK
   ========================= */

.cta{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
  text-align:center;
  border-radius:24px;
}

.cta h2{
  color:#fff;
}

/* =========================
   VIDEO MODULE
   ========================= */

.video-container{
  position:relative;
  width:320px;
  margin:0 auto;
  line-height:0;
  background:#000;
  border:1px solid #fff;
}

.video-overlay{
  width:320px;
  height:562px;
  display:block;
  position:relative;
  z-index:2;
  pointer-events:none;
  border:1px solid #fff;
}

.centered-video{
  position:absolute;
  z-index:1;
  top:84px;
  left:20px;
  width:280px;
  height:auto;
}

/* =========================
   HOW IT WORKS
   ========================= */

.howitworks{
  background:linear-gradient(135deg,#f6f9fc,#ffffff);
  border-radius:24px;
  padding:80px 0;
}

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin-top:40px;
}

.step{
  background:#fff;
  border-radius:18px;
  padding:30px;
  text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
}

.step-number{
  width:44px;
  height:44px;
  margin:0 auto 20px auto;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  font-size:18px;
}

.step h3{
  margin:10px 0;
}

.step p{
  font-size:15px;
  color:#555;
}

/* =========================
   FEATURE CARDS
   ========================= */

.feature{
  background-size:cover;
  background-position:center;
  min-height:240px;
  color:#fff;
  display:flex;
  align-items:flex-end;
  position:relative;
  overflow:hidden;
}

.feature:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,.1));
}

.feature > div{
  position:relative;
  z-index:2;
}

/* =========================
   COMPARISON TABLE
   ========================= */

.compare-wrap{
  max-width:1180px;
  margin:auto;
  padding:0 24px;
}

.compare-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
}

.compare-table th{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
  padding:18px;
  font-size:16px;
  font-weight:600;
}

.compare-table td{
  padding:18px;
  border-bottom:1px solid #eee;
  font-size:15px;
  color:#333;
}

.compare-table tr:last-child td{
  border-bottom:none;
}

.feature-title{
  font-weight:600;
  color:#222;
}

.badge-yes{
  display:inline-block;
  background:#e7f7ee;
  color:#1f7a3f;
  padding:6px 10px;
  border-radius:999px;
  font-weight:600;
  font-size:13px;
}

.badge-no{
  display:inline-block;
  background:#fdeaea;
  color:#b3261e;
  padding:6px 10px;
  border-radius:999px;
  font-weight:600;
  font-size:13px;
}

.cta-row td{
  background:#f6f9fc;
  text-align:center;
}

/* =========================
   RESPONSIVE
   ========================= */
   
   .checklist {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.checklist li {
  position: relative;
  padding-left: 28px; /* space for checkmark outside text */
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
  font-weight: 400;
}

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #1f9d55;
  font-weight: bold;
}

.review-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.review-card{
  background:#fff;
  border-radius:16px;
  padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* HEADER */
.review-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.rating{
  color:#f5b301;
  font-size:16px;
  letter-spacing:1px;
}

.verified{
  font-size:12px;
  color:#1f9d55;
  font-weight:600;
}

/* TEXT */
.review-text{
  font-size:15.5px;
  line-height:1.6;
  color:#333;
}

/* FOOTER */
.review-footer{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
  padding-top:12px;
  border-top:1px solid #eee;
}

.avatar{
  font-size:22px;
}

.user-info .name{
  font-weight:600;
  font-size:14px;
  color:#222;
}

.user-info .location{
  font-size:13px;
  color:#666;
}

/* RESPONSIVE */
@media(max-width:900px){
  .review-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:900px){
  .herogrid,
  .grid2,
  .grid3,
  .grid4,
  .steps{
    grid-template-columns:1fr;
  }

  h1{font-size:36px;}
  h2{font-size:26px;}

  .video-container{
   /* transform:scale(0.9); */
	border: 1px solid white;
  }
}

/* === SONICWELLNESS HYBRID PATCH (SAFE ADD-ON) === */

/* Unified modern price styling WITHOUT breaking old layout */
.price{
  font-size:34px;
  font-weight:700;
  margin:10px 0;
}

/* Sticky CTA (safe addition only) */
.sticky-cta{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#fff;
  padding:12px;
  box-shadow:0 -2px 20px rgba(0,0,0,0.1);
  display:none;
  z-index:999;
}

/* Mobile only activation */
@media(max-width:900px){
  .sticky-cta{
    display:block;
  }
}

/* Optional enhancement ONLY (does not override existing trustline) */
.trust.hybrid{
  font-size:14px;
  color:#666;
  margin-top:12px;
}

.seo-tags{
  padding:40px 0;
  border-top:1px solid #eee;
  margin-top:60px;
  text-align:center;
}

.tags-title{
  font-size:14px;
  color:#777;
  margin-bottom:12px;
}

.tag-list a{
  display:inline-block;
  font-size:13px;
  color:#888;
  text-decoration:none;
  margin:4px 6px;
  padding:5px 10px;
  border-radius:999px;
  background:#f6f6f6;
  transition:0.2s;
}

.tag-list a:hover{
  background:#e9f2ff;
  color:#2f73c8;
}