/* ═══════════════════════════════════════════════════
   MEMOFIX USA — "CLINICAL PRECISION" DESIGN SYSTEM
   Light ivory background, deep navy text, emerald accent
═══════════════════════════════════════════════════ */

:root{
  --bg:        #faf9f6;   /* warm ivory background */
  --bg-alt:    #f0ede4;   /* alternating section bg */
  --panel:     #ffffff;   /* card surface */
  --line:      #e4e0d3;
  --navy:      #12253b;   /* primary text / headings */
  --navy-dim:  #445369;   /* secondary text */
  --emerald:   #0f8f6b;   /* primary accent */
  --emerald-dk:#0a6b50;
  --gold:      #c99a3d;   /* secondary accent, badges */
  --danger:    #b3412c;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--navy-dim);
  font-family:'DM Sans',sans-serif;
  font-size:19px;
  line-height:1.75;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1220px;margin:0 auto;padding:0 24px;}

h1,h2,h3,h4{font-family:'Sora',sans-serif;color:var(--navy);line-height:1.2;font-weight:700;}
.label{font-family:'Roboto Mono',monospace;font-size:18px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald-dk);}
p{font-size:18px;line-height:1.8;color:var(--navy-dim);}
p.lead{font-size:21px;line-height:1.65;}

/* ══════════════════════════════════════
   BADGE — trust seal used for stat chips
══════════════════════════════════════ */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:100px;padding:9px 18px;
  font-family:'Roboto Mono',monospace;font-size:13px;font-weight:600;color:var(--navy-dim);
  box-shadow:0 2px 6px rgba(18,37,59,.05);
}
.chip svg{width:16px;height:16px;fill:var(--emerald);flex-shrink:0;}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:18px;
  padding:17px 34px;border-radius:10px;
  text-decoration:none;cursor:pointer;border:none;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary{background:linear-gradient(135deg, var(--emerald), var(--emerald-dk));color:#fff;box-shadow:0 10px 26px rgba(15,143,107,.28);}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy);}
.btn-outline:hover{background:var(--navy);color:#fff;}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
header.topbar{background:var(--navy);text-align:center;padding:10px 20px;}
header.topbar span{font-family:'Roboto Mono',monospace;font-size:18px;font-weight:600;color:#dff5ec;letter-spacing:.03em;}
nav.mainnav{position:sticky;top:0;z-index:50;background:rgba(250,249,246,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
nav.mainnav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:80px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand .mark{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg, var(--emerald), var(--emerald-dk));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand .mark svg{width:20px;height:20px;fill:#fff;}
.brand span{font-family:'Sora',sans-serif;font-size:21px;font-weight:700;color:var(--navy);}
.navlinks{display:flex;align-items:center;gap:30px;}
.navlinks a{font-family:'Roboto Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--navy-dim);}
.navlinks a:hover{color:var(--emerald-dk);}
@media(max-width:980px){.navlinks{display:none;}}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero{position:relative;padding:60px 0 80px;overflow:hidden;background:radial-gradient(ellipse 800px 500px at 85% 15%, rgba(15,143,107,.08), transparent 65%), var(--bg);}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;}
.hero-eyebrow{margin-bottom:18px;}
h1.hero-title{font-size:38px;margin-bottom:20px;}
h1.hero-title em{color:var(--emerald-dk);font-style:normal;}
.hero-sub{margin-bottom:26px;max-width:560px;}
.hero-rating{display:flex;align-items:center;gap:10px;margin-bottom:26px;}
.hero-rating .stars{color:var(--gold);font-size:20px;letter-spacing:1px;}
.hero-rating span{font-size:21px;color:var(--navy-dim);font-weight:600;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px;}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;}
.hero-visual{position:relative;display:flex;justify-content:center;}
.hero-visual img{max-height:420px;width:auto;filter:drop-shadow(0 26px 40px rgba(18,37,59,.18));}
.stat-float{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:0 12px 30px rgba(18,37,59,.1);text-align:center;}
.stat-float .num{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;color:var(--emerald-dk);}
.stat-float .cap{font-family:'Roboto Mono',monospace;font-size:11px;color:var(--navy-dim);text-transform:uppercase;letter-spacing:.05em;}
@media(min-width:900px){
  .hero .wrap{grid-template-columns:1.05fr .95fr;}
  h1.hero-title{font-size:50px;}
}

/* ══════════════════════════════════════
   SECTION BASE
══════════════════════════════════════ */
section{padding:72px 0;}
@media(min-width:700px){section{padding:92px 0;}}
.section-head{max-width:700px;margin-bottom:44px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:30px;margin-top:12px;}
@media(min-width:700px){.section-head h2{font-size:40px;}}

/* ══════════════════════════════════════
   STEPS
══════════════════════════════════════ */
.steps-grid{display:grid;grid-template-columns:1fr;gap:22px;}
@media(min-width:800px){.steps-grid{grid-template-columns:repeat(3,1fr);}}
.step-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px 26px;box-shadow:0 4px 16px rgba(18,37,59,.05);}
.step-card .step-num{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:var(--emerald-dk);letter-spacing:.08em;margin-bottom:12px;display:block;}
.step-card h3{font-size:21px;margin-bottom:10px;}
.step-card p{font-size:20px;}

/* ══════════════════════════════════════
   INGREDIENT CARDS (with dose badge)
══════════════════════════════════════ */
.ing-grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media(min-width:700px){.ing-grid{grid-template-columns:1fr 1fr;}}
.ing-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px 26px;box-shadow:0 4px 16px rgba(18,37,59,.05);}
.ing-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.ing-card h3{font-size:20px;}
.dose-badge{font-family:'Roboto Mono',monospace;font-size:13px;font-weight:700;color:var(--emerald-dk);background:#e6f5ef;border:1px solid #c8e8db;border-radius:100px;padding:5px 14px;white-space:nowrap;}
.ing-card p{font-size:20px;}

/* ══════════════════════════════════════
   BENEFITS
══════════════════════════════════════ */
.benefit-row{display:grid;grid-template-columns:1fr;gap:18px;}
.benefit-item{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px 28px;box-shadow:0 4px 16px rgba(18,37,59,.05);}
.benefit-item .bnum{font-family:'Sora',sans-serif;font-size:32px;font-weight:700;color:#d8e8e0;margin-bottom:8px;display:block;}
.benefit-item h3{font-size:22px;margin-bottom:10px;}
.benefit-item p{font-size:18px;}

/* ══════════════════════════════════════
   TESTIMONIALS (initials avatar, no photo)
══════════════════════════════════════ */
.testi-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:900px){.testi-grid{grid-template-columns:repeat(3,1fr);}}
.testi-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 4px 16px rgba(18,37,59,.05);display:flex;flex-direction:column;}
.stars-row{color:var(--gold);font-size:21px;margin-bottom:14px;letter-spacing:1px;}
.testi-card p{font-size:20px;font-style:italic;color:var(--navy-dim);flex-grow:1;margin-bottom:20px;}
.testi-bottom{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line);}
.avatar-circle{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg, var(--emerald), var(--emerald-dk));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;font-size:15px;flex-shrink:0;}
.testi-name{font-weight:700;color:var(--navy);font-size:21px;}
.testi-loc{font-size:18px;color:var(--navy-dim);}

/* ══════════════════════════════════════
   COMPARISON TABLE
══════════════════════════════════════ */
.compare-wrap{overflow-x:auto;border-radius:18px;border:1px solid var(--line);box-shadow:0 4px 20px rgba(18,37,59,.06);}
table.compare{width:100%;border-collapse:collapse;background:var(--panel);min-width:680px;}
table.compare th, table.compare td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--line);font-size:15px;}
table.compare th{background:var(--navy);color:#fff;font-family:'Sora',sans-serif;font-weight:700;font-size:18px;}
table.compare th:first-child, table.compare td:first-child{text-align:left;font-weight:600;color:var(--navy);}
table.compare td.brand-col{background:#f0f9f5;font-weight:700;color:var(--emerald-dk);}
table.compare .yes{color:var(--emerald-dk);font-weight:700;}
table.compare .no{color:var(--danger);}
table.compare tr:last-child td{border-bottom:none;}

/* ══════════════════════════════════════
   PRICING
══════════════════════════════════════ */
.pricing-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:900px){.pricing-grid{grid-template-columns:repeat(3,1fr);align-items:end;}}
.price-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 26px;text-align:center;position:relative;box-shadow:0 4px 16px rgba(18,37,59,.06);}
.price-card.featured{border:2px solid var(--emerald);box-shadow:0 20px 46px rgba(15,143,107,.16);}
.price-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg, var(--emerald), var(--emerald-dk));color:#fff;font-family:'Roboto Mono',monospace;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 16px;border-radius:100px;white-space:nowrap;}
.price-card img.bottle{max-height:160px;margin:18px auto;}
.price-qty{font-family:'Sora',sans-serif;font-size:24px;color:var(--navy);}
.price-supply{font-size:18px;color:var(--navy-dim);margin-bottom:16px;}
.price-num{font-family:'Sora',sans-serif;font-size:40px;color:var(--emerald-dk);}
.price-num span{font-size:15px;color:var(--navy-dim);font-family:'DM Sans',sans-serif;}
.price-save{font-family:'Roboto Mono',monospace;font-size:13px;color:var(--danger);font-weight:700;margin:8px 0;}
.price-total{font-size:15px;color:var(--navy-dim);margin:10px 0 20px;}
.price-total b{color:var(--navy);}
.price-feat-list{text-align:left;display:flex;flex-direction:column;gap:8px;margin:16px 0 20px;font-size:15px;color:var(--navy-dim);}
.price-feat-list li{list-style:none;display:flex;gap:8px;}

/* ══════════════════════════════════════
   GUARANTEE
══════════════════════════════════════ */
.guarantee-sec{background:var(--navy);text-align:center;}
.guarantee-sec img.badge{height:120px;width:auto;margin:0 auto 26px;}
.guarantee-sec h2{color:#fff;font-size:32px;max-width:640px;margin:0 auto 16px;}
@media(min-width:700px){.guarantee-sec h2{font-size:40px;}}
.guarantee-sec p{color:#c7d2dd;max-width:600px;margin:0 auto 16px;}

/* ══════════════════════════════════════
   FAQ
══════════════════════════════════════ */
.faq-list{display:flex;flex-direction:column;gap:12px;}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;background:none;border:none;cursor:pointer;text-align:left;}
.faq-q span{font-size:18px;font-weight:700;color:var(--navy);font-family:'DM Sans',sans-serif;}
.faq-q .chev{width:12px;height:12px;border-right:2.5px solid var(--emerald-dk);border-bottom:2.5px solid var(--emerald-dk);transform:rotate(45deg);transition:transform .3s ease;flex-shrink:0;}
.faq-item.open .faq-q .chev{transform:rotate(225deg);}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a p{min-height:0;overflow:hidden;padding:0 24px;font-size:20px;}
.faq-item.open .faq-a p{padding-bottom:20px;}

/* ══════════════════════════════════════
   FINAL CTA
══════════════════════════════════════ */
.final-cta{background:linear-gradient(160deg, var(--emerald-dk), #0a5a44);text-align:center;}
.final-cta h2{color:#fff;font-size:32px;margin-bottom:14px;}
@media(min-width:700px){.final-cta h2{font-size:42px;}}
.final-cta p{max-width:600px;margin:0 auto 28px;color:#d9f0e6;}
.final-cta-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;text-align:center;}
.final-cta-img{display:flex;justify-content:center;}
.final-cta-img img{max-height:260px;width:auto;filter:drop-shadow(0 20px 34px rgba(0,0,0,.35));}
.final-cta-content h2, .final-cta-content p{margin-left:auto;margin-right:auto;}
@media(min-width:800px){
  .final-cta-grid{grid-template-columns:280px 1fr;text-align:left;}
  .final-cta-content h2, .final-cta-content p{margin-left:0;}
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer{background:var(--navy);padding:56px 0 30px;}
.footer-grid{display:flex;flex-direction:column;gap:34px;margin-bottom:34px;}
.footer-brand .brand span{color:#fff;}
.footer-brand p{font-size:15px;color:#9fb0c2;max-width:360px;}
.footer-links{display:flex;flex-wrap:wrap;gap:14px 26px;}
.footer-links a{font-size:18px;color:#9fb0c2;}
.footer-links a:hover{color:#fff;}
.footer-legal{border-top:1px solid #223347;padding-top:26px;font-size:18px;line-height:1.7;color:#7f92a6;}
@media(min-width:800px){.footer-grid{flex-direction:row;justify-content:space-between;}}

/* ══════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .65s ease, transform .65s ease;}
.rv.vis{opacity:1;transform:none;}

/* ══════════════════════════════════════
   PAGE HERO (legal pages)
══════════════════════════════════════ */
.page-hero{padding:48px 0 56px;background:var(--bg-alt);border-bottom:1px solid var(--line);}
.breadcrumb{font-family:'Roboto Mono',monospace;font-size:13px;color:var(--navy-dim);margin-bottom:18px;}
.breadcrumb a{color:var(--emerald-dk);}
.page-hero h1{font-size:32px;}
.detail-grid{display:flex;flex-direction:column;gap:22px;}
.detail-block{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 26px;}
.detail-block h2{font-size:21px;margin-bottom:10px;color:var(--emerald-dk);}
.detail-block p{font-size:20px;}

/* ══════════════════════════════════════
   HUB LIST (ingredients hub, blog hub)
══════════════════════════════════════ */
.ing-hub-list{display:flex;flex-direction:column;gap:16px;}
.ing-hub-item{display:flex;flex-direction:column;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 24px;box-shadow:0 4px 16px rgba(18,37,59,.05);transition:border-color .2s ease, transform .2s ease;}
.ing-hub-item:hover{border-color:var(--emerald);transform:translateY(-2px);}
.ing-hub-item h3{font-size:20px;margin-bottom:6px;}
.ing-hub-item p{font-size:20px;margin-bottom:10px;}
.ing-hub-item a.read-link{font-family:'Roboto Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--emerald-dk);}
@media(min-width:700px){
  .ing-hub-item{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:24px;}
  .ing-hub-item .hub-dose{flex-shrink:0;}
}

/* ══════════════════════════════════════
   RELATED LINKS
══════════════════════════════════════ */
.related-grid{display:flex;flex-direction:column;gap:12px;}
@media(min-width:700px){.related-grid{flex-direction:row;flex-wrap:wrap;}}
.related-grid a{display:block;flex:1 1 220px;padding:16px 20px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-weight:700;font-size:21px;color:var(--emerald-dk);text-align:center;transition:border-color .2s ease, transform .2s ease;}
.related-grid a:hover{border-color:var(--emerald);transform:translateY(-2px);}

/* ══════════════════════════════════════
   BLOG CARDS
══════════════════════════════════════ */
.blog-grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media(min-width:800px){.blog-grid{grid-template-columns:repeat(3,1fr);}}
.blog-card{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:16px;background:var(--panel);border:1px solid var(--line);text-decoration:none;box-shadow:0 4px 16px rgba(18,37,59,.05);transition:all .2s ease;}
.blog-card:hover{transform:translateY(-3px);border-color:var(--emerald);}
.blog-card .tag{font-family:'Roboto Mono',monospace;font-size:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--emerald-dk);}
.blog-card h3{font-size:18px;}
.blog-card p{font-size:15px;color:var(--navy-dim);}

/* ══════════════════════════════════════
   PAGE HERO EXTRAS
══════════════════════════════════════ */
.page-hero p.lead{margin-top:12px;max-width:640px;}