*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #2d3a2d;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
sup { font-size: 0.65em; color: #8a9a8a; }

.contain {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── NOTICE BAR ── */
.nb {
  background: #2d3a2d;
  color: rgba(255,255,255,0.55);
  text-align: center;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 16px;
  font-weight: 600;
}

/* ── MASTHEAD ── */
.mh {
  background: #f7f9f5;
  border-bottom: 1px solid #dde5d8;
  padding: 10px 20px;
}

.mh-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.mh-mono {
  width: 32px;
  height: 32px;
  background: #4a6741;
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
}

.mh-name {
  font-size: 14px;
  font-weight: 600;
  color: #2d3a2d;
  line-height: 1.2;
}

.mh-name small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: #7a8c7a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mh-link {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #4a6741;
  padding: 7px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s;
}

.mh-link:hover { background: #3a5534; }

/* ── HERO ── */
.intro {
  background: linear-gradient(175deg, #f7f9f5 0%, #edf2ea 100%);
  padding: 48px 20px 40px;
  border-bottom: 3px solid #4a6741;
}

.intro .contain { max-width: 760px; }

.intro-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #7a8c7a;
  font-weight: 600;
  margin-bottom: 14px;
}

.intro h1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 32px;
  line-height: 1.26;
  font-weight: 700;
  color: #1a2a1a;
  margin-bottom: 14px;
  max-width: 640px;
}

.intro-desc {
  font-size: 16px;
  color: #4a5e4a;
  max-width: 600px;
  margin-bottom: 24px;
  line-height: 1.7;
}

.intro-box {
  display: flex;
  gap: 14px;
  background: #fff;
  border: 1px solid #c8d6c0;
  border-left: 4px solid #4a6741;
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
}

.intro-box svg { width: 24px; height: 24px; color: #4a6741; flex-shrink: 0; margin-top: 2px; }
.intro-box p { font-size: 14px; color: #4a5e4a; line-height: 1.6; }
.intro-box strong { color: #2d3a2d; }

/* ── SECTIONS ── */
.seg { padding: 52px 20px; }
.seg--alt { background: #f7f9f5; }
.seg--dark { background: linear-gradient(135deg, #2d3a2d 0%, #3a4f36 100%); color: #fff; }

.seg-top { margin-bottom: 32px; }
.seg-top--center { text-align: center; }
.seg-top--center .sub { margin-left: auto; margin-right: auto; }

.tag {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: #4a6741;
  background: #e8f0e4;
  border: 1px solid #c8d6c0;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.tag--inv { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.2); color: #fff; }

.seg h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
  color: #1a2a1a;
  margin-bottom: 10px;
}

.seg--dark h2 { color: #fff; }

.sub {
  font-size: 15px;
  color: #4a5e4a;
  max-width: 620px;
}

.seg--dark .sub { color: rgba(255,255,255,0.65); }

/* ── ACCORDION (essentials) ── */
.acc-group { max-width: 680px; }

.acc {
  border: 1px solid #dde5d8;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  background: #fff;
}

.acc-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #1a2a1a;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
}

.acc-num {
  width: 30px;
  height: 30px;
  background: #4a6741;
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.acc-arrow {
  margin-left: auto;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
}

.acc-arrow::before, .acc-arrow::after {
  content: '';
  position: absolute;
  background: #7a8c7a;
  border-radius: 1px;
}

.acc-arrow::before { width: 12px; height: 2px; top: 9px; left: 4px; }
.acc-arrow::after { width: 2px; height: 12px; top: 4px; left: 9px; transition: transform 0.2s; }

.acc.open .acc-arrow::after { transform: scaleY(0); }

.acc-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.acc.open .acc-body { max-height: 200px; }
.acc-body p { font-size: 14px; color: #4a5e4a; padding: 0 16px 14px 58px; line-height: 1.65; }

/* ── DUO (physiology) ── */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.duo-point { margin-bottom: 20px; }
.duo-point:last-child { margin-bottom: 0; }
.duo-point h3 { font-size: 15px; font-weight: 700; color: #1a2a1a; margin-bottom: 4px; }
.duo-point p { font-size: 14px; color: #4a5e4a; line-height: 1.65; }

.duo-visual svg { width: 100%; border-radius: 12px; }

@media (max-width: 650px) { .duo { grid-template-columns: 1fr; } }

/* ── FORMULA TABLE ── */
.ftable {
  border: 1px solid #dde5d8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.ftable-head {
  background: #2d3a2d;
  color: #fff;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  flex-wrap: wrap;
  gap: 8px;
}

.ftable-head strong { font-size: 16px; }

.ftable-body {
  width: 100%;
  border-collapse: collapse;
}

.ftable-body th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7a8c7a;
  padding: 10px 16px;
  border-bottom: 1px solid #dde5d8;
  font-weight: 600;
}

.ftable-body td {
  font-size: 14px;
  color: #2d3a2d;
  padding: 12px 16px;
  border-bottom: 1px solid #eef2ea;
  vertical-align: top;
  line-height: 1.6;
}

.ftable-body tr:last-child td { border-bottom: none; }

.ftable-n {
  width: 30px;
  color: #4a6741;
  font-weight: 700;
  font-size: 13px;
}

.ftable-note {
  background: #fef9e7;
  padding: 12px 18px;
  font-size: 13px;
  color: #8a6d1b;
  border-top: 1px solid #dde5d8;
}

.ftable-extra {
  padding: 12px 18px;
  border-top: 1px solid #dde5d8;
  font-size: 13px;
  color: #5a6e5a;
}

/* ── REVEAL / HIDE ── */
.reveal-hide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.rh {
  border-radius: 10px;
  padding: 18px;
}

.rh--yes { background: #eef5eb; border: 1px solid #c0d9b8; }
.rh--no { background: #fef2f2; border: 1px solid #f5caca; }

.rh h4 { font-size: 14px; font-weight: 700; color: #1a2a1a; margin-bottom: 8px; }
.rh ul { list-style: none; }
.rh li { font-size: 13px; color: #4a5e4a; padding: 3px 0 3px 18px; position: relative; line-height: 1.5; }
.rh--yes li::before { content: '✓'; position: absolute; left: 0; color: #3a7a2a; font-weight: 700; }
.rh--no li::before { content: '✕'; position: absolute; left: 0; color: #c62828; font-weight: 700; }

@media (max-width: 600px) { .reveal-hide { grid-template-columns: 1fr; } }

/* ── STEPPER ── */
.stepper {
  display: flex;
  gap: 0;
  counter-reset: step;
}

.step {
  flex: 1;
  text-align: center;
  padding: 0 10px;
  position: relative;
}

.step::after {
  content: '';
  position: absolute;
  top: 15px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: #c8d6c0;
  z-index: 0;
}

.step:last-child::after { display: none; }

.step-dot {
  width: 32px;
  height: 32px;
  background: #4a6741;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.step h4 { font-size: 13px; font-weight: 700; color: #1a2a1a; margin-bottom: 4px; }
.step p { font-size: 12px; color: #5a6e5a; line-height: 1.5; }

@media (max-width: 700px) {
  .stepper { flex-direction: column; gap: 12px; }
  .step { text-align: left; display: flex; align-items: flex-start; gap: 12px; padding: 0; }
  .step::after { display: none; }
  .step-dot { flex-shrink: 0; }
}

/* ── WATCHOUT ── */
.warn-strip {
  display: flex;
  gap: 12px;
  background: #fef9e7;
  border: 1px solid #e6cc4a;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 28px;
  font-size: 14px;
  color: #7a5a10;
}

.warn-strip svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: #b8941a; }

.panel-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: #1a2a1a;
  margin: 20px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #4a6741;
}

.panel-cat svg { width: 22px; height: 22px; color: #4a6741; }

.panel-caveat {
  font-size: 13px;
  color: #5a6e5a;
  font-style: italic;
  margin-bottom: 12px;
}

.panel-group { margin-bottom: 8px; }

.panel {
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #dde5d8;
  margin-bottom: 10px;
}

.panel--red { background: #fef5f5; border-color: #f0c4c4; }
.panel--amber { background: #fffcf0; border-color: #f0dfa0; }

.panel-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }

.panel-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 3px;
  color: #fff;
}

.badge-red { background: #c62828; }
.badge-amber { background: #c68a28; }

.panel h4 { font-size: 14px; font-weight: 700; color: #1a2a1a; }
.panel p { font-size: 13px; color: #3a4a3a; line-height: 1.6; margin-bottom: 6px; }

.panel-where {
  display: block;
  font-size: 11px;
  color: #5a6e5a;
  background: rgba(255,255,255,0.5);
  padding: 5px 8px;
  border-radius: 4px;
}

.takeaway-box {
  background: #eef2ea;
  border: 1px solid #c8d6c0;
  border-radius: 8px;
  padding: 16px 18px;
  margin-top: 20px;
}

.takeaway-box p { font-size: 14px; color: #2d3a2d; line-height: 1.6; }

/* ── TIP LIST (lifestyle) ── */
.tip-list { max-width: 620px; }

.tip {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #dde5d8;
}

.tip:last-child { border-bottom: none; }

.tip svg { width: 32px; height: 32px; color: #4a6741; flex-shrink: 0; margin-top: 2px; }
.tip h4 { font-size: 14px; font-weight: 700; color: #1a2a1a; margin-bottom: 2px; }
.tip p { font-size: 13px; color: #4a5e4a; line-height: 1.6; }

/* ── OFFER ── */
.compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.cmp {
  background: #fff;
  border-radius: 12px;
  text-align: center;
  overflow: hidden;
  position: relative;
  color: #2d3a2d;
  transition: transform 0.2s, box-shadow 0.2s;
}

.cmp:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }

.cmp--feat { border: 3px solid #7aa86e; }
.cmp--pop { border: 3px solid #c68a28; }

.cmp-ribbon {
  background: #4a6741;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 0;
}

.rib--pop { background: #c68a28; }

.cmp-img { width: 60%; max-width: 150px; margin: 16px auto 6px; }

.cmp h3 { font-size: 16px; font-weight: 700; margin-bottom: 0; }
.cmp-span { font-size: 12px; color: #7a8c7a; margin-bottom: 8px; }

.cmp-price { margin-bottom: 2px; }
.cmp-big { font-size: 36px; font-weight: 700; color: #1a2a1a; letter-spacing: -1px; }
.cmp-unit { font-size: 14px; color: #7a8c7a; }

.cmp-sum { font-size: 13px; color: #4a5e4a; margin-bottom: 12px; }

.cmp-btn {
  display: block;
  margin: 0 14px 8px;
  background: #4a6741;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 11px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}

.cmp-btn:hover { background: #3a5534; }
.cmp-btn--dim { background: #6a8a60; }
.cmp-btn--dim:hover { background: #4a6741; }

.cmp-guar {
  display: block;
  font-size: 11px;
  color: #3a7a2a;
  font-weight: 600;
  padding-bottom: 14px;
}

.offer-fine {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .compare { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; }
}

/* ── CTA ── */
.pre-checks {
  max-width: 500px;
  margin: 0 auto 24px;
}

.pc {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: #2d3a2d;
  padding: 5px 0;
  line-height: 1.5;
}

.pc-mark { color: #3a7a2a; font-weight: 700; flex-shrink: 0; }

.cta-wrap { text-align: center; }

.cta-main {
  display: inline-block;
  background: #4a6741;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 34px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.1s;
}

.cta-main:hover { background: #3a5534; transform: translateY(-1px); }

.cta-note {
  font-size: 12px;
  color: #7a8c7a;
  margin-top: 10px;
}

/* ── FAQ ── */
.faq-list { max-width: 640px; }
.faq-item { border-bottom: 1px solid #dde5d8; }

.faq-q {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #1a2a1a;
  padding: 16px 0;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
}

.faq-q::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  color: #7a8c7a;
  margin-left: 14px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.faq-item.open .faq-q::after { content: '−'; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.open .faq-a { max-height: 300px; }
.faq-a p { font-size: 14px; color: #4a5e4a; padding-bottom: 14px; line-height: 1.65; }

/* ── REFERENCES ── */
.src-list { list-style: none; padding: 0; }

.src-list li {
  font-size: 13px;
  color: #4a5e4a;
  padding: 8px 0;
  border-bottom: 1px solid #eef2ea;
  line-height: 1.6;
}

.src-list li:last-child { border-bottom: none; }
.src-list li strong { color: #1a2a1a; }
.src-list li a { color: #4a6741; text-decoration: none; font-weight: 500; }
.src-list li a:hover { text-decoration: underline; }

.src-caveat {
  background: #fef9e7;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: #7a5a10;
  line-height: 1.6;
  margin-top: 16px;
}

/* ── DISCLAIMERS ── */
.legal-stack { margin-bottom: 18px; }

.legal {
  background: #fff;
  border: 1px solid #dde5d8;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
}

.legal h4 { font-size: 13px; font-weight: 700; color: #1a2a1a; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.legal p { font-size: 12px; color: #5a6e5a; line-height: 1.6; }

.fda-block {
  background: #2d3a2d;
  color: #fff;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 10px;
}

.fda-block p { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.6; }
.fda-block strong { color: #fff; }

.emer-block {
  border: 2px solid #c62828;
  border-radius: 8px;
  padding: 12px 18px;
  background: #fef5f5;
}

.emer-block p { font-size: 13px; color: #8a1a1a; line-height: 1.6; }

/* ── FOOTER ── */
.ft {
  background: #2d3a2d;
  color: rgba(255,255,255,0.5);
  padding: 28px 20px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
}

.ft-links {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.ft-links a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 12px; }
.ft-links a:hover { color: #fff; }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .intro h1 { font-size: 25px; }
  .intro-desc { font-size: 15px; }
  .seg { padding: 40px 20px; }
  .seg h2 { font-size: 22px; }
  .ftable-body th, .ftable-body td { padding: 8px 10px; font-size: 13px; }
}