/* =============================================================================
   My Mito Reset: public website stylesheet  (served as /site.css)
   -----------------------------------------------------------------------------
   Plain CSS, no frameworks, no third-party fonts or requests.
   Sections, in order:
     1. Design tokens (colors, fonts, radius) with a dark-mode override
     2. Base: reset, typography, links
     3. Layout helpers: wrappers, grids, cards
     4. Header, navigation and the mobile menu
     5. Buttons
     6. Hero (top of the home page)
     7. Content blocks: steps, tables, notes, stats, comparison, FAQ, photos, phones
     8. Forms
     9. Footer and the sticky mobile call-to-action
    10. Accessibility and print
   ============================================================================= */

/* 1. DESIGN TOKENS ----------------------------------------------------------
   All colors live here as CSS variables so the whole site can be re-themed in
   one place. The palette matches the app: forest green with an amber accent. */
:root {
  --bg: #F3F6F3;            /* page background */
  --surface: #FFFFFF;       /* cards, forms */
  --surface2: #E8EFEA;      /* alternate section background */
  --ink: #13231B;           /* main text */
  --muted: #4F6157;         /* secondary text */
  --line: #D3DDD6;          /* borders and dividers */
  --brand: #1D5A42;         /* primary green */
  --brand2: #143F2F;        /* darker green (footer, dark sections) */
  --brand-ink: #FFFFFF;     /* text on top of --brand */
  --soft: #DBEBE2;          /* pale green tint */
  --amber: #E9A53A;         /* accent (the "energy dot") */
  --amber-ink: #8A5A08;     /* amber used as text on light backgrounds */
  --amber-soft: #FBEBCB;    /* pale amber tint */
  --r: 18px;                /* corner radius used by cards and panels */
  /* System font stacks only: nothing is downloaded, so the site is fast and
     makes no third-party requests. */
  --head: ui-rounded, "SF Pro Rounded", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
/* Dark mode: follows the visitor's device setting. Only the tokens change. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0D1411; --surface: #141E19; --surface2: #1B2822; --ink: #E5EEE8;
    --muted: #9FB1A7; --line: #283A31; --brand: #5BC39A; --brand2: #2E8A6E;
    --brand-ink: #08140E; --soft: #16332A; --amber-ink: #F1B24C; --amber-soft: #3A2C12;
  }
}

/* 2. BASE -------------------------------------------------------------------- */
* { box-sizing: border-box; }                       /* padding never adds to width */
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.62 var(--body); -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }                       /* media never overflows its box */
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
/* Headings use the rounded display stack; sizes scale smoothly with clamp(). */
h1, h2, h3 { font-family: var(--head); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 58ch; }   /* intro paragraph under a heading */
.meta { color: var(--muted); font-size: .95rem; }                   /* small supporting text */

/* 3. LAYOUT HELPERS ---------------------------------------------------------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }       /* centered content column */
.narrow { max-width: 760px; }                                       /* article-width column */
section.s { padding: 64px 0; }                                      /* a home-page band */
section.s.alt { background: var(--surface2); }                      /* band with tinted background */
section.s.dark { background: linear-gradient(160deg, var(--brand2), #0D1411); color: #fff; }
section.s.dark h2, section.s.dark h3 { color: #fff; }
section.s.dark p { color: #DBEBE2; }
.page { padding: 48px 0 72px; }                                     /* interior (non-home) page body */
.page h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.page h2 { margin-top: 1.6em; font-size: 1.5rem; }
.page ul { padding-left: 1.2em; }
.page li { margin-bottom: .4em; }
/* Card grid: columns wrap automatically; "five" fits five short cards in a row. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 28px; }
.cards.five { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.card .ico { width: 34px; height: 34px; color: var(--brand); background: var(--soft); padding: 7px; border-radius: 12px; margin-bottom: 14px; }
.card p { color: var(--muted); margin: 0; }
.dark .card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.dark .card p { color: #DBEBE2; }
.dark .card .ico { color: var(--amber); background: rgba(255,255,255,.1); }
/* Two-column block (text + media). Collapses to one column on phones. */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

/* 4. HEADER AND NAVIGATION --------------------------------------------------- */
/* Skip link: invisible until focused by keyboard, lets people jump past the menu. */
.skip { position: absolute; left: -999px; top: 8px; background: var(--brand); color: var(--brand-ink); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
/* Sticky top bar with a frosted-glass look. */
header.site { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brandlink { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 800 1.15rem var(--head); letter-spacing: -.01em; }
.logo { width: 36px; height: 36px; border-radius: 9px; }
.spacer { flex: 1; }                                                /* pushes the nav to the right */
nav.main { display: flex; gap: 4px; align-items: center; }
nav.main a { color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: .95rem; }
nav.main a:hover, nav.main a[aria-current] { background: var(--soft); color: var(--brand); }
.menu { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font: 600 .95rem var(--body); color: var(--ink); }
/* Phones and small tablets: collapse the nav into a dropdown opened by .menu (see site.js). */
@media (max-width: 960px) {
  .menu { display: block; }
  nav.main { display: none; position: absolute; left: 0; right: 0; top: 64px; background: var(--bg); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 10px 20px 16px; }
  nav.main.open { display: flex; }                                  /* site.js toggles this class */
  nav.main a { padding: 12px; }
  header .btn.sm { display: none; }                                 /* the sticky bottom button replaces it */
}

/* 5. BUTTONS ----------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand); color: var(--brand-ink) !important; font: 700 1rem var(--head); padding: 13px 22px; border-radius: 999px; border: 0; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 35%, transparent); }
.btn.alt { background: transparent; color: var(--brand) !important; box-shadow: inset 0 0 0 2px var(--brand); }   /* outline variant */
.btn.sm { padding: 9px 16px; font-size: .92rem; }
.btn.big { padding: 16px 30px; font-size: 1.1rem; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }  /* row of buttons */

/* 6. HERO -------------------------------------------------------------------- */
.hero { padding: 56px 0 40px; background: radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--amber) 22%, transparent), transparent 70%), radial-gradient(800px 400px at 0% 0%, var(--soft), transparent 70%); }
.hero .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .hero .grid { grid-template-columns: 1fr; } .hero { padding-top: 36px; } }
.eyebrow { display: inline-block; font: 800 .78rem var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-ink); background: var(--amber-soft); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.art { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(20,63,47,.25)); }   /* inline illustration */
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; padding: 0; list-style: none; color: var(--muted); font-size: .95rem; }
.trust li::before { content: "\2713"; color: var(--brand); font-weight: 800; margin-right: 7px; }   /* check mark */

/* 7. CONTENT BLOCKS ---------------------------------------------------------- */
/* Numbered steps: the number comes from a CSS counter, so the HTML stays a plain list. */
.steps { counter-reset: s; display: grid; gap: 14px; margin: 24px 0; padding: 0; list-style: none; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.steps li::before { content: counter(s); width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font: 800 1.1rem var(--head); }
.steps b { display: block; }
/* Tables: wrap in .tw so wide tables scroll sideways on phones instead of breaking the page. */
.table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); font-size: .98rem; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { background: var(--surface2); font-family: var(--head); }
.table tr:last-child td { border-bottom: 0; }
.tw { overflow-x: auto; }
/* Evidence badges used in the Mitochondria 101 table. */
.ev { display: inline-block; font: 800 .75rem var(--head); letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ev.strong { background: var(--soft); color: var(--brand); }
.ev.indirect { background: var(--amber-soft); color: var(--amber-ink); }
.ev.limited { background: var(--surface2); color: var(--muted); }
.note { background: var(--amber-soft); border-left: 5px solid var(--amber); border-radius: 12px; padding: 16px 18px; margin: 24px 0; color: var(--ink); }
.stat { font: 800 2.2rem var(--head); color: var(--amber); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-top: 20px; }
/* "Doing it yourself" vs "With My Mito Reset" comparison. */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }
.compare > div { border-radius: var(--r); padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.compare .with { border: 2px solid var(--brand); background: var(--soft); }
.compare ul { margin: 0; padding-left: 1.2em; }
.compare li { margin-bottom: .5em; }
/* FAQ: native <details> elements, so it works with no JavaScript. */
details.faq { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; margin-bottom: 10px; }
details.faq summary { cursor: pointer; font: 700 1.05rem var(--head); padding: 14px 0; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; float: right; color: var(--brand); font-weight: 800; }
details.faq[open] summary::after { content: "\2212"; }
details.faq p { color: var(--muted); }
/* Photo frame: used for both real photos and the illustrated placeholder. */
.photo { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--surface2); }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.photo.tile { display: grid; place-items: center; aspect-ratio: 3 / 2; background: linear-gradient(145deg, var(--soft), var(--surface2)); color: var(--brand); }
.photo.tile .ico { width: 64px; height: 64px; }
.photo figcaption { padding: 8px 12px; font-size: .85rem; color: var(--muted); }
.photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 26px; }
/* Phone frames around app screenshots. */
.phones { display: flex; gap: 16px; justify-content: center; align-items: flex-start; }
.phone { flex: 1; max-width: 230px; border-radius: 26px; border: 7px solid #13231B; background: #13231B; box-shadow: 0 20px 40px rgba(20,63,47,.25); overflow: hidden; }
.phone img { display: block; width: 100%; height: auto; }
.phone:nth-child(2) { margin-top: 34px; }                           /* staggered look */
@media (max-width: 560px) { .phones { gap: 10px; } .phone { border-width: 5px; border-radius: 20px; } }

/* 8. FORMS ------------------------------------------------------------------- */
form.req { display: grid; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
label.l { display: grid; gap: 6px; font-weight: 700; }
label.l span.h { font-weight: 400; color: var(--muted); font-size: .92rem; }     /* helper text under a label */
input[type=text], input[type=email], textarea, select { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; }
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); border-color: var(--brand); }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--muted); }
.chk input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--brand); }
/* Honeypot: a hidden field real visitors never see; bots fill it in and Netlify drops the submission. */
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* 9. FOOTER AND STICKY CALL-TO-ACTION ---------------------------------------- */
footer.site { background: var(--brand2); color: #DBEBE2; padding: 44px 0 28px; }
footer.site a { color: #fff; }
.fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
@media (max-width: 700px) { .fgrid { grid-template-columns: 1fr; } }
footer.site h4 { margin: 0 0 10px; font: 800 .8rem var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 6px; }
.fine { border-top: 1px solid rgba(255,255,255,.18); margin-top: 26px; padding-top: 18px; font-size: .88rem; }
/* Sticky bottom button: phones only, hidden on desktop. Adds bottom padding so it never covers content. */
.sticky-cta { display: none; }
@media (max-width: 860px) {
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  .sticky-cta .btn { width: 100%; }
  body { padding-bottom: 76px; }
}

/* 10. ACCESSIBILITY AND PRINT ------------------------------------------------ */
/* Respect "reduce motion": no smooth scrolling or hover animations. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* Printing: hide navigation and call-to-action chrome. */
@media print { header.site, footer.site, .sticky-cta, .cta { display: none; } body { background: #fff; color: #000; } }