/* VitalHarbor — Honest Health Reviews. Shared stylesheet.
   Static HTML/CSS, modelled on the Review Harbor house style (ToolHarbor),
   re-themed teal/emerald for health. Fully responsive. */

:root{
  --deep:#06302b;
  --deep-2:#084239;
  --deep-3:#0b5449;
  --teal:#14b8a6;
  --teal-dark:#0f766e;
  --emerald:#10b981;
  --green:#22c55e;
  --ink:#1e293b;
  --muted:#5b6b7f;
  --line:#d7e6e1;
  --bg:#f2f8f6;
  --card:#ffffff;
  --amber-bg:#fff7e8;
  --amber-line:#f0d9a8;
  --radius:14px;
  --shadow:0 6px 24px rgba(6,48,43,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.65;
  overflow-x:hidden;overflow-x:clip;
  -webkit-text-size-adjust:100%;
}
img,svg{max-width:100%;height:auto}
a{color:var(--teal-dark)}
button{font:inherit;cursor:pointer}
.wrap{width:min(1100px,100% - 2.5rem);margin-inline:auto}

/* ---------- Header ---------- */
header.site-header{
  background:var(--deep);color:#fff;position:sticky;top:0;z-index:50;
  box-shadow:0 2px 14px rgba(6,48,43,.28);
}
.header-in{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;margin-right:auto}
.brand-mark{flex:0 0 auto;display:block;border-radius:50%}
.brand-name{font-size:1.35rem;font-weight:800;letter-spacing:.2px;line-height:1.1}
.brand-name span{color:var(--teal)}
.brand-tag{display:block;font-size:.72rem;font-weight:500;color:#a7d8cf;letter-spacing:.4px}
nav.main-nav{display:flex;flex-wrap:wrap;gap:.25rem}
nav.main-nav a{
  color:#d9f2ec;font-weight:600;font-size:.95rem;text-decoration:none;
  padding:.55rem .8rem;min-height:44px;border-radius:9px;display:inline-flex;align-items:center;
}
nav.main-nav a:hover{background:var(--deep-3);color:#fff}
nav.main-nav a.active{background:var(--teal);color:#052e2a}

/* ---------- Page basics ---------- */
main.page{padding:2.2rem 0 3rem}
main.page h1{font-size:2rem;line-height:1.2;color:var(--deep);margin-bottom:.8rem}
main.page h2{font-size:1.45rem;color:var(--deep);margin:1.8rem 0 .6rem;line-height:1.3}
main.page h2:first-child{margin-top:0}
main.page h3{font-size:1.08rem;color:var(--deep);margin-bottom:.35rem}
main.page p{margin-bottom:.9rem}
main.page ul,main.page ol{margin:.4rem 0 1rem 1.25rem}
main.page li{margin-bottom:.35rem}
.lede{font-size:1.12rem;color:var(--muted);max-width:46rem}
.updated{font-size:.85rem;color:var(--muted);margin-bottom:1.2rem}
.article{max-width:820px}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--deep) 0%,var(--deep-2) 55%,#0b6e5d 100%);
  color:#fff;border-radius:20px;padding:2.4rem 2rem;margin-bottom:2rem;
  display:grid;grid-template-columns:1.12fr .88fr;gap:2.2rem;align-items:center;
}
.hero-card{
  background:#ffffff;border-radius:16px;padding:1rem 1rem .9rem;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.hero-grid img{
  width:100%;height:118px;object-fit:contain;background:#f2f7f5;
  border:1px solid #e2ede9;border-radius:10px;padding:.4rem;
}
.hero .hero-card-cap{color:#33524b;font-size:.86rem;font-weight:600;margin:.7rem 0 .45rem;text-align:center}
.hero-checks{list-style:none;margin:0;padding:.55rem .2rem 0;border-top:1px solid #e2ede9}
.hero-checks li{color:#41655c;font-size:.86rem;padding:.16rem 0}
main.page .hero h1{color:#fff;font-size:2.3rem;max-width:40rem}
.hero p{color:#cdf0e8;max-width:44rem;font-size:1.08rem}
.hero .btn-row{margin-top:1.3rem}
.pill{
  display:inline-block;background:rgba(20,184,166,.18);color:#5eead4;border:1px solid rgba(94,234,212,.4);
  font-size:.78rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:999px;margin-bottom:1rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:48px;padding:.7rem 1.25rem;border-radius:11px;border:0;
  font-weight:700;font-size:1rem;text-decoration:none;
}
.btn-primary{background:var(--teal);color:#032723}
.btn-primary:hover{background:#2dd4bf}
.btn-outline{background:transparent;color:#fff;border:1.5px solid #5b8a81}
.btn-outline:hover{border-color:var(--teal);color:#5eead4}
.btn-dark{background:var(--deep);color:#fff}
.btn-dark:hover{background:var(--deep-3)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------- Cards & grids ---------- */
.grid{display:grid;gap:1.1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.35rem;box-shadow:var(--shadow);
}
.card p{color:var(--muted)}
.card .btn{margin-top:.6rem}
.review-card img.product-thumb{
  width:100%;max-height:300px;object-fit:contain;background:#fbfdfc;
  border:1px solid var(--line);border-radius:12px;padding:.8rem;margin-bottom:.9rem;
}
.chip{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  background:#e0f5ef;color:var(--teal-dark);border-radius:999px;padding:.22rem .65rem;margin-bottom:.6rem;
}

/* ---------- Review blocks ---------- */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin:1rem 0}
@media (max-width:700px){.pros-cons{grid-template-columns:1fr}}
.pros,.cons{border-radius:var(--radius);padding:1.1rem 1.2rem;border:1px solid var(--line);background:#fff}
.pros{border-top:4px solid var(--green)}
.cons{border-top:4px solid #f59e0b}
.pros ul,.cons ul{margin-left:1.15rem}
.price-box{
  background:#e9f7f2;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.25rem;margin:1rem 0;
}
.price-box table{width:100%;border-collapse:collapse;margin:.4rem 0}
.price-box th,.price-box td{padding:.45rem .5rem;border-bottom:1px solid var(--line);text-align:left;font-size:.97rem}
.price-box tr:last-child td{border-bottom:0}
.notice{
  background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:var(--radius);
  padding:1.05rem 1.2rem;margin:1.4rem 0;font-size:.97rem;
}
.notice strong{color:#7c5205}
.health-note{
  background:#fdf0f0;border:1px solid #f2c4c4;border-left:5px solid #dc2626;border-radius:var(--radius);
  padding:1.05rem 1.2rem;margin:1.2rem 0;font-size:.97rem;
}
.health-note strong{color:#991b1b}
figure.product-shot{margin:1rem 0 1.2rem;text-align:center}
figure.product-shot img{max-width:min(440px,100%);height:auto;display:inline-block;border-radius:14px}
figure.product-shot figcaption{font-size:.86rem;color:var(--muted);margin-top:.5rem;font-style:italic}
.honesty{background:#eefbf5;border:1px solid #bbe7cc;border-radius:var(--radius);padding:1.2rem 1.3rem;margin:1.4rem 0}
.disclosure-line{font-size:.88rem;color:var(--muted);font-style:italic}
.verdict{background:var(--deep);color:#dff5ef;border-radius:var(--radius);padding:1.3rem 1.4rem;margin:1.6rem 0}
.verdict h2,.verdict h3{color:#fff}
.verdict a{color:#5eead4}
details.faq{border:1px solid var(--line);border-radius:12px;background:#fff;padding:.9rem 1.1rem;margin-bottom:.7rem}
details.faq summary{font-weight:700;color:var(--deep);cursor:pointer;min-height:28px}
details.faq p{margin:.55rem 0 0;color:var(--ink)}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--deep);color:#bcdcd4;margin-top:1rem}
.footer-in{padding:2rem 0 1.6rem;display:grid;gap:1.2rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.footer-links a{color:#bcdcd4;font-size:.95rem;padding:.4rem 0;min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.footer-links a:hover{color:#5eead4}
footer .small{font-size:.86rem;color:#83aca2}

/* ---------- Contact form ---------- */
.contact-form{display:grid;gap:.8rem;max-width:560px}
.contact-form label{font-weight:600;font-size:.95rem;color:var(--deep)}
.contact-form input,.contact-form textarea{
  width:100%;min-height:48px;border:1px solid var(--line);border-radius:10px;
  padding:.65rem .9rem;font:inherit;background:#fff;color:var(--ink);
}
.contact-form textarea{min-height:130px;resize:vertical}

/* ---------- Small screens ---------- */
@media (max-width:640px){
  .hero{padding:1.7rem 1.2rem;grid-template-columns:1fr;gap:1.4rem}
  .hero-grid img{height:104px}
  .hero h1{font-size:1.8rem}
  main.page h1{font-size:1.65rem}
  .header-in{gap:.5rem}
  nav.main-nav a{padding:.5rem .6rem;font-size:.9rem}
  .price-box th,.price-box td{font-size:.9rem;padding:.4rem .35rem}
}