/* Know Your Midlife — LeanBliss evidence review
   Design language: editorial, calm, clinical. Palette drawn from the LeanBliss
   label (deep label blue + teal accent) on warm paper neutrals, with a serif
   display face so the page reads as a considered publication rather than a
   sales page. This stylesheet carries the whole visual system; the markup adds
   no inline styling. */

:root {
  /* ---- ink + paper ---- */
  --ink: #16202c;
  --ink-2: #37485a;
  --ink-3: #5d7080;
  --line: #e3e8ec;
  --line-2: #eef2f5;
  --paper: #ffffff;
  --paper-2: #f7f9fa;
  --paper-3: #eaf1f4;

  /* ---- brand ---- */
  --blue: #1d4e89;
  --blue-d: #16406f;
  --blue-dd: #0f2f53;
  --teal: #17a09a;
  --cta: #0f6f6b;
  --cta-d: #0b5754;

  /* ---- semantic tints ---- */
  --amber-bg: #fdf6e8;
  --amber-line: #e8c98a;
  --amber-ink: #6b5320;
  --green-bg: #eef7f0;
  --green-line: #9dc7a8;
  --green-ink: #2f5138;

  /* ---- geometry ---- */
  --maxw: 720px;
  --shell: 1076px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-sm: 8px;

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 2px rgba(16, 32, 44, .05);
  --shadow: 0 4px 16px rgba(16, 32, 44, .07);
  --shadow-lg: 0 16px 40px rgba(29, 78, 137, .16);

  /* ---- vertical rhythm ---- */
  --section-gap: 60px;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clears the sticky section nav so headings never hide beneath it */
  scroll-padding-top: 68px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; }

/* ---------- skip link + focus ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip:focus { left: 0; }

a { color: var(--blue-dd); text-underline-offset: 3px; }
a:hover { color: var(--cta-d); }

:focus-visible { outline: 3px solid var(--blue-d); outline-offset: 2px; border-radius: 3px; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.wrap-wide { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

/* Two-column shell: sticky TOC rail + reading column, desktop only. */
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
@media (min-width: 1120px) {
  .shell {
    max-width: var(--shell);
    display: grid;
    grid-template-columns: 234px minmax(0, 720px);
    gap: 56px;
    align-items: start;
    padding: 0 24px;
  }
}

/* ---------- masthead ---------- */
.masthead { border-bottom: 1px solid var(--line); background: var(--paper); padding: 15px 0; }
.masthead .wrap-wide { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand {
  font-family: var(--serif);
  font-size: 1.26rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand span { color: var(--blue-d); }
.brand img { display: block; height: 30px; width: auto; }
@media (max-width: 560px) { .brand img { height: 26px; } }
.masthead-tag {
  font-size: .74rem; color: var(--ink-3); letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.masthead-tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); flex: 0 0 auto;
}

/* ---------- sticky section nav ----------
   Sits under the masthead and pins to the top on scroll. Brand fixed left,
   section links scroll horizontally in the middle when they overflow (so the
   page itself never scrolls sideways), Order button fixed right. */
.sitenav {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 6px rgba(16, 32, 44, .06);
}
.sitenav-inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 14px;
  display: flex; align-items: center; gap: 12px; min-height: 54px;
}
.sn-brand {
  flex: 0 0 auto; font-family: var(--serif); font-weight: 600;
  font-size: 1rem; color: var(--ink); text-decoration: none; white-space: nowrap;
  padding-right: 4px;
}
.sn-brand:hover, .sn-brand:focus { color: var(--blue-dd); }
.sn-list {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  /* fade the edges so mid-scroll overflow reads as intentional */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.sn-list::-webkit-scrollbar { display: none; }
.sn-list li { flex: 0 0 auto; margin: 0; }
.sn-list a {
  display: block; padding: 7px 11px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; color: var(--ink-2);
  text-decoration: none; white-space: nowrap; letter-spacing: .005em;
  transition: color .15s ease, background-color .15s ease;
}
.sn-list a:hover, .sn-list a:focus { color: var(--blue-dd); background: var(--paper-3); }
.sn-list a.is-active {
  color: #fff; background: var(--blue);
}
.sn-order {
  flex: 0 0 auto; display: inline-block; white-space: nowrap;
  background: var(--cta); color: #fff; border: 1px solid var(--cta);
  font-size: .82rem; font-weight: 700; padding: 8px 16px; border-radius: 999px;
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: background-color .15s ease, transform .15s ease;
}
.sn-order:hover, .sn-order:focus { background: var(--cta-d); border-color: var(--cta-d); color: #fff; transform: translateY(-1px); }

@media (max-width: 640px) {
  .sitenav-inner { padding: 0 10px; gap: 8px; min-height: 48px; }
  .sn-brand { font-size: .92rem; }
  .sn-list a { padding: 6px 10px; }
  .sn-order { padding: 7px 13px; }
}
@media (max-width: 380px) {
  .sn-brand { display: none; }
}

/* ---------- breadcrumb ---------- */
.breadcrumb { margin: 22px 0 -4px; font-size: .82rem; }
.breadcrumb ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; margin: 0; padding: 0;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "\203A"; color: var(--ink-3); font-size: .95em; }
.breadcrumb a { color: var(--blue-dd); text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink-3); }

/* ---------- hero ---------- */
.hero { padding: 40px 0 10px; }
.eyebrow {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-d); font-weight: 700; margin: 0 0 16px;
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--teal); border-radius: 2px;
}
h1 {
  font-family: var(--serif);
  font-size: clamp(2.05rem, 5.2vw, 2.95rem);
  line-height: 1.14; color: var(--ink);
  margin: 0 0 20px; font-weight: 600; letter-spacing: -.015em;
}
.standfirst { font-size: 1.17rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; }

.hero-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 700px) { .hero-grid { grid-template-columns: 1fr 264px; } }
.hero-shot { margin: 0; }
.hero-shot picture { display: block; }
.hero-shot img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 34px rgba(16, 32, 44, .16));
}
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.hero-pills li {
  margin: 0; font-size: .8rem; font-weight: 600; color: var(--blue-dd);
  background: var(--paper-3); border: 1px solid #dbe6ec; border-radius: 999px; padding: 6px 14px;
}

.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 26px 0 4px; }
.hero-cta .cta { margin: 0; }

.byline {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  font-size: .86rem; color: var(--ink-3);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 0; margin: 30px 0 4px;
}
.byline span { display: inline-flex; align-items: center; }
.byline span + span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3);
  opacity: .5; margin-right: 20px; margin-left: -12px;
}

/* ---------- table of contents ----------
   One element, two behaviours: sticky rail from 1120px up (summary hidden,
   list always visible); collapsible <details> below that. An inline script
   next to the markup sets the initial open state before first paint. */
.toc {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2); margin: 0 0 36px;
}
.toc > summary {
  cursor: pointer; list-style: none; padding: 15px 20px;
  font-size: .8rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 700; position: relative;
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--blue-d); line-height: 1;
}
.toc[open] > summary::after { content: "\2212"; }
.toc-inner { padding: 0 20px 16px; }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 7px; font-size: .9rem; line-height: 1.4; }
.toc a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.toc a:hover, .toc a:focus { color: var(--blue-dd); border-bottom-color: var(--blue); }

@media (min-width: 1120px) {
  .toc {
    position: sticky; top: 78px; margin: 0;
    max-height: calc(100vh - 100px); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .toc > summary { display: none; }
  .toc-inner { padding: 20px 20px; }
  .toc-inner::before {
    content: "On this page"; display: block;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 700; margin-bottom: 12px;
    padding-bottom: 10px; border-bottom: 1px solid var(--line);
  }
  .toc li { font-size: .84rem; margin-bottom: 7px; line-height: 1.35; }
  .toc a { border-bottom: 0; padding-left: 11px; margin-left: -11px; border-left: 2px solid transparent; }
  .toc a:hover, .toc a:focus { border-left-color: var(--blue); border-bottom-color: transparent; }
}

/* ---------- typography ---------- */
main { display: block; }
h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 1.86rem);
  line-height: 1.22; color: var(--ink);
  margin: var(--section-gap) 0 18px; font-weight: 600;
  letter-spacing: -.008em; scroll-margin-top: 74px;
  position: relative; padding-top: 18px;
}
/* short accent rule above each H2 — a designed masthead-like marker */
h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 46px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
}
h3 {
  font-family: var(--sans); font-size: 1.14rem; line-height: 1.35;
  color: var(--ink); margin: 34px 0 11px; font-weight: 700; scroll-margin-top: 74px;
  letter-spacing: -.003em;
}
h4 {
  font-family: var(--sans); font-size: .96rem; color: var(--blue-dd);
  margin: 24px 0 9px; font-weight: 700; letter-spacing: .01em;
}
p { margin: 0 0 18px; }
ul, ol { margin: 0 0 18px; padding-left: 24px; }
li { margin-bottom: 8px; }
li::marker { color: var(--ink-3); }
strong { color: var(--ink); font-weight: 650; }
section { scroll-margin-top: 74px; }
sup a { text-decoration: none; font-weight: 700; font-size: .72em; padding: 0 1px; color: var(--blue-d); }
sup a:hover { color: var(--cta-d); }

/* ---------- alternating section bands ----------
   Visual rhythm without full-bleed, which would break the sticky TOC rail at
   >=1120px. Bands read as soft cards that group a whole section. */
.band {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 6px 30px 28px; margin: var(--section-gap) 0;
}
.band > h2 { margin-top: 30px; }
@media (max-width: 560px) { .band { padding: 4px 18px 20px; margin: 42px 0; } }

/* ---------- answer block (AEO / featured-snippet surface) ---------- */
.answer {
  background: linear-gradient(180deg, #f4f8fb, var(--paper-2));
  border: 1px solid #d8e4ee; border-left: 4px solid var(--blue-d);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 24px; margin: 0 0 26px; font-size: 1.03rem; line-height: 1.6;
}
.answer p:last-child { margin-bottom: 0; }
.answer .lbl {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-dd); font-weight: 700; margin-bottom: 8px;
}
.answer .lbl::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--blue-d); flex: 0 0 auto;
  -webkit-mask: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M8.5 13.6 4.9 10l-1.3 1.3 4.9 4.9 10-10L17.1 5z'/%3E%3C/svg%3E");
  mask: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M8.5 13.6 4.9 10l-1.3 1.3 4.9 4.9 10-10L17.1 5z'/%3E%3C/svg%3E");
}

/* ---------- callouts ---------- */
.callout {
  border-radius: var(--radius); padding: 18px 22px 18px 22px; margin: 0 0 26px;
  font-size: .98rem; line-height: 1.6; position: relative;
}
.callout p:last-child { margin-bottom: 0; }
.callout .lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; margin-bottom: 8px; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.callout .lbl::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%;
}
.callout-warn { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); }
.callout-warn .lbl { color: #7a5c14; }
.callout-warn .lbl::before {
  background: #b9852a;
  -webkit-mask: no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2 1 21h22zm0 6a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0 9.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E");
  mask: no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2 1 21h22zm0 6a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0 9.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E");
}
.callout-warn strong { color: #4d3a10; }
.callout-note { background: var(--green-bg); border: 1px solid var(--green-line); color: var(--green-ink); }
.callout-note .lbl { color: var(--green-ink); }
.callout-note strong { color: #1f3a26; }

/* ---------- evidence block: research / limitation / takeaway ---------- */
.ev {
  border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 26px;
  overflow: hidden; background: var(--paper); box-shadow: var(--shadow-sm);
}
.ev dl { margin: 0; }
.ev dl > div { padding: 14px 20px; border-top: 1px solid var(--line-2); }
.ev dl > div:first-child { border-top: 0; }
.ev dt {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-3); margin-bottom: 4px;
  display: inline-flex; align-items: center; gap: 7px;
}
.ev dt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ev dd { margin: 0; font-size: .96rem; line-height: 1.55; }
.ev .r dt { color: #24603a; }
.ev .c dt { color: #92353f; }
.ev .l dt { color: #855716; }
.ev .t { background: var(--paper-2); }
.ev .t dt { color: var(--blue-dd); }

/* ---------- evidence tier chips ---------- */
.tierchip {
  display: inline-block; font-size: .67rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; margin-left: 8px;
  vertical-align: middle; max-width: 100%; line-height: 1.5; border: 1px solid transparent;
}
.t-mod    { background: #e4eef6; color: #2b5a7d; border-color: #cadff0; }
.t-early  { background: #fdf0dc; color: #855716; border-color: #f0dcb4; }
.t-animal { background: #f0eaf6; color: #59397e; border-color: #e0d3ef; }
.t-vendor { background: #f7e3e5; color: #92353f; border-color: #edccce; }
.t-none   { background: #ececef; color: #4f5560; border-color: #dcdce1; }

/* ---------- tables ---------- */
.tablewrap {
  overflow-x: auto; margin: 0 0 26px; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius);
}
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 460px; }
caption { text-align: left; font-size: .85rem; color: var(--ink-3); padding: 12px 14px 10px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { background: var(--paper-3); color: var(--ink); font-weight: 700; font-size: .86rem; border-bottom: 2px solid var(--blue); }
tbody tr:nth-child(even) { background: var(--paper-2); }
tbody th { font-weight: 650; color: var(--ink); }

/* ---------- figures / images ---------- */
figure { margin: 30px 0; }
figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
figcaption { font-size: .84rem; color: var(--ink-3); margin-top: 11px; font-style: italic; }

.badge-row {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: center;
  margin: 24px 0 12px; padding: 20px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.badge-row img { height: auto; max-width: 100%; }

/* ---------- ingredient overview grid (all 10 thumbnails) ---------- */
.ing-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 16px; margin: 26px 0 34px; padding: 0; list-style: none;
}
.ing-grid li {
  margin: 0; text-align: center; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 10px 14px; box-shadow: var(--shadow-sm);
}
.ing-grid img { width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--paper-2); }
.ing-grid .nm { display: block; font-size: .83rem; font-weight: 700; color: var(--ink); margin-top: 9px; line-height: 1.3; }
.ing-grid .nm small { display: block; font-weight: 400; color: var(--ink-3); font-size: .75rem; margin-top: 2px; }

/* ---------- per-ingredient detail cards ---------- */
.ing-detail {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 22px 6px; margin: 20px 0;
  box-shadow: var(--shadow-sm);
}
.ing-detail .ing-head { margin: 0 0 10px; }
.ing-detail > p { font-size: .98rem; margin-bottom: 14px; }
.ing-detail .callout { margin-top: 4px; margin-bottom: 14px; }

.ing-head { display: flex; gap: 16px; align-items: center; margin: 34px 0 10px; }
.ing-head img { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper-2); }
.ing-head h3 { margin: 0; }
.ing-head .lat { display: block; font-weight: 400; font-size: .85rem; color: var(--ink-3); font-style: italic; margin-top: 2px; }

/* ---------- benefit scorecard ---------- */
.ben-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 16px; margin: 24px 0; padding: 0; list-style: none;
}
.ben-grid li {
  margin: 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 17px 18px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.ben-grid h3 { margin: 0 0 7px; font-size: 1rem; }
.ben-grid p { font-size: .91rem; margin: 0 0 13px; color: var(--ink-2); }
.ben-grid .tierchip { margin-left: 0; align-self: flex-start; margin-top: auto; }

/* ---------- reviews editorial note ---------- */
.review-note {
  background: linear-gradient(180deg, #f4f8fb, var(--paper-2));
  border: 1px solid #d8e4ee; border-radius: var(--radius);
  padding: 22px 26px; margin: 8px 0 4px; position: relative;
}
.review-note::before {
  content: "Our position on the reviews";
  display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-dd); font-weight: 700; margin-bottom: 10px;
}
.review-note p { margin: 0; font-size: 1.02rem; line-height: 1.62; }

/* ---------- CTA ---------- */
.cta-block { margin: 32px 0; text-align: center; }
.cta {
  display: inline-block; font-family: var(--sans); font-size: 1.01rem; font-weight: 700;
  padding: 15px 30px; border-radius: var(--radius); text-decoration: none; line-height: 1.3;
  min-height: 48px; max-width: 100%;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
/* primary = order / package action */
.cta-primary { background: var(--cta); color: #fff; border: 2px solid var(--cta); box-shadow: 0 6px 18px rgba(15, 111, 107, .22); }
.cta-primary:hover, .cta-primary:focus { background: var(--cta-d); border-color: var(--cta-d); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(15, 111, 107, .28); }
/* outline = "see the official page" (secondary affiliate) */
.cta-outline { background: var(--paper); color: var(--blue-dd); border: 2px solid var(--blue); }
.cta-outline:hover, .cta-outline:focus { background: var(--blue-dd); border-color: var(--blue-dd); color: #fff; }
/* ghost = internal navigation / exploration */
.cta-ghost {
  background: transparent; color: var(--blue-dd); border: 0; padding: 15px 6px;
  font-weight: 700; box-shadow: none; text-underline-offset: 4px;
  display: inline-flex; align-items: center; gap: 7px;
}
.cta-ghost::after { content: "\2192"; transition: transform .16s ease; }
.cta-ghost:hover, .cta-ghost:focus { color: var(--cta-d); text-decoration: underline; }
.cta-ghost:hover::after { transform: translateX(3px); }
.cta-sub { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 12px; }

/* ================= premium pricing packages ================= */
.pkg-grid {
  list-style: none; margin: 30px 0 12px; padding: 12px 0 0;
  display: grid; gap: 18px; grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .pkg-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
}
.pkg {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 20px 22px; text-align: center;
  display: flex; flex-direction: column; box-shadow: var(--shadow); margin: 0;
}
.pkg.is-featured {
  border: 2px solid var(--blue);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(180deg, #f5f9fc, var(--paper) 120px);
}
@media (min-width: 760px) { .pkg.is-featured { transform: translateY(-10px); } }
.pkg-ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--blue), var(--teal)); color: #fff;
  font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap; margin: 0;
  box-shadow: 0 4px 12px rgba(29, 78, 137, .3);
}
.pkg-name { display: block; font-family: var(--serif); font-size: 1.24rem; font-weight: 600; color: var(--ink); }
.pkg-supply { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 3px; }
.pkg picture { display: block; margin: 16px 0 8px; }
.pkg picture img { width: 100%; max-width: 148px; height: auto; margin: 0 auto; display: block; }
.pkg-price { font-family: var(--serif); font-size: 2.15rem; font-weight: 600; color: var(--ink); line-height: 1; margin: 8px 0 3px; }
.pkg-price span { font-family: var(--sans); font-size: .8rem; font-weight: 400; color: var(--ink-3); }
.pkg-total { font-size: .92rem; color: var(--ink-2); margin: 0 0 9px; }
.pkg-total del { color: var(--ink-3); margin-right: 6px; }
.pkg-total strong { color: var(--ink); }
.pkg-save {
  display: inline-block; align-self: center; background: var(--green-bg); color: var(--green-ink);
  border: 1px solid var(--green-line); border-radius: 999px; font-size: .77rem; font-weight: 700;
  padding: 4px 14px; margin: 0 0 16px;
}
.pkg-feats { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; font-size: .88rem; }
.pkg-feats li { position: relative; padding: 7px 0 7px 26px; margin: 0; color: var(--ink-2); border-top: 1px solid var(--line-2); }
.pkg-feats li:first-child { border-top: 0; }
.pkg-feats li::before {
  content: ""; position: absolute; left: 2px; top: 10px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--cta);
  -webkit-mask: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M8.5 13.6 4.9 10l-1.3 1.3 4.9 4.9 10-10L17.1 5z'/%3E%3C/svg%3E");
  mask: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M8.5 13.6 4.9 10l-1.3 1.3 4.9 4.9 10-10L17.1 5z'/%3E%3C/svg%3E");
}
.pkg-feats li.no { color: var(--ink-3); }
.pkg-feats li.no::before {
  background: var(--ink-3);
  -webkit-mask: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='4' y='9' width='12' height='2' rx='1' fill='white'/%3E%3C/svg%3E");
  mask: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='4' y='9' width='12' height='2' rx='1' fill='white'/%3E%3C/svg%3E");
}
/* per-package CTA button */
.pkg-cta {
  display: block; margin-top: auto; padding: 12px 14px; border-radius: var(--radius-sm);
  font-family: var(--sans); font-weight: 700; font-size: .95rem; text-decoration: none; line-height: 1.3;
  background: var(--paper); color: var(--cta-d); border: 2px solid var(--cta);
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.pkg-cta:hover, .pkg-cta:focus { background: var(--cta); color: #fff; transform: translateY(-1px); }
.pkg.is-featured .pkg-cta { background: var(--cta); color: #fff; box-shadow: 0 6px 16px rgba(15, 111, 107, .24); }
.pkg.is-featured .pkg-cta:hover, .pkg.is-featured .pkg-cta:focus { background: var(--cta-d); }
.pricing-note { text-align: center; font-size: .82rem; color: var(--ink-3); margin: 0 0 8px; }

/* ================= premium bonus cards ================= */
.bonus-value-strip {
  display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: center; align-items: center;
  background: var(--green-bg); border: 1px solid var(--green-line); color: var(--green-ink);
  border-radius: var(--radius); padding: 13px 18px; margin: 0 0 22px; font-size: .9rem; font-weight: 600; text-align: center;
}
.bonus-value-strip span { position: relative; }
.bonus-value-strip span + span::before { content: "\00b7"; position: absolute; left: -14px; color: var(--green-line); }
.bonus-cards {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; gap: 18px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .bonus-cards { grid-template-columns: repeat(2, 1fr); } }
.bonus-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; margin: 0;
}
.bonus-card picture { display: block; }
.bonus-card picture img { width: 100%; height: auto; border-radius: 10px; background: var(--paper-2); }
.bonus-tag {
  display: inline-block; align-self: flex-start; margin: 14px 0 7px;
  background: linear-gradient(90deg, var(--blue), var(--teal)); color: #fff; font-size: .65rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.bonus-card h4 { margin: 0 0 6px; font-size: 1.08rem; color: var(--ink); }
.bonus-value {
  margin: auto 0 0; font-size: .84rem; color: var(--green-ink); font-weight: 700;
  padding-top: 10px; border-top: 1px solid var(--line-2);
}

/* ---------- guarantee card ---------- */
.guarantee {
  display: grid; gap: 22px; align-items: center;
  border: 1px solid var(--green-line); background: linear-gradient(180deg, #f2faf4, var(--green-bg));
  border-radius: var(--radius-lg); padding: 26px; margin: 26px 0;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 620px) { .guarantee { grid-template-columns: 150px 1fr; } }
.guarantee img { width: 100%; max-width: 150px; height: auto; margin: 0 auto; display: block; filter: drop-shadow(0 8px 18px rgba(47, 81, 56, .18)); }
.guarantee h3 { margin-top: 0; }
.guarantee p:last-child { margin-bottom: 0; }
.guarantee .g-body { color: var(--green-ink); }
.guarantee .g-body strong { color: #1f3a26; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); margin-top: 22px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 17px 36px 17px 4px; position: relative;
  font-weight: 650; color: var(--ink); font-size: 1.02rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--blue-d); line-height: 1;
  transition: transform .18s ease;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--blue-dd); }
.faq .faq-body { padding: 0 4px 18px; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- references ---------- */
.refs { font-size: .87rem; color: var(--ink-3); }
.refs ol { padding-left: 22px; }
.refs li { margin-bottom: 11px; }
.refs a { color: var(--blue-dd); }
.refs h3 { font-size: .95rem; }

/* ---------- footer ---------- */
.site-footer {
  margin-top: 68px; padding: 44px 0 54px;
  background: var(--paper-2); border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-3);
}
.site-footer h2 {
  font-family: var(--sans); font-size: .8rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-2);
  padding: 0; margin: 0 0 14px;
}
.site-footer h2::before { display: none; }
.site-footer p { margin-bottom: 14px; }
.footer-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 6px 0 0; }
.footer-links li { margin: 0; }
.footer-links a { font-weight: 600; }
.footer-legal { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 20px; font-size: .82rem; }

/* ---------- back to top ---------- */
.totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  background: var(--ink); color: #fff; border: 0; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%; font-size: 1.15rem;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease, background-color .16s ease;
}
.totop.show { opacity: .92; visibility: visible; }
.totop:hover { opacity: 1; background: var(--blue-dd); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- small-screen tuning ---------- */
@media (max-width: 560px) {
  body { font-size: 17px; }
  :root { --section-gap: 46px; }
  .hero { padding: 30px 0 4px; }
  .masthead-tag { display: none; }
  .ing-head img { width: 60px; height: 60px; flex-basis: 60px; }
  .ing-detail { padding: 16px 16px 4px; }
  .answer, .callout { padding-left: 18px; padding-right: 18px; }
  .review-note { padding: 18px 18px; }
  .guarantee { padding: 20px; }
  .cta { padding: 14px 24px; }
  .cta-ghost { padding: 12px 4px; }
}