/* NutriList marketing site — all styling lives here (CSP: style-src 'self').
   System fonts only. Light + dark via prefers-color-scheme. Mobile-first. */

:root {
  --bg: #f7faf7;
  --fg: #1c2420;
  --muted: #5c6a62;
  --accent: #2e7d4f;
  --card-bg: #ffffff;
  --card-border: #e2e8e3;

  /* Brand greens (derived from the app icon / App Store visual system:
     deep-green frames alternating with off-white, light-green keyword accent) */
  --deep: #0f2e1e;          /* brand dark green — hero / alternating sections */
  --deep-soft: #17402c;     /* raised surfaces on deep */
  --on-deep: #f2f8f4;       /* text on deep */
  --on-deep-muted: #a9c6b4; /* secondary text on deep */
  --leaf: #8fd6ae;          /* light green — keyword underline, accents on deep */
  --tint: #e9f4ec;          /* light green wash for the insight strip */
  --pill-bg: #eef7f1;
  --pill-border: #cfe5d7;
  --frame: #10241a;         /* device frame bezel */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131a16;
    --fg: #e8efe9;
    --muted: #9bab9f;
    --accent: #5cbf8a;
    --card-bg: #1b2420;
    --card-border: #2a362f;

    --deep: #0b2417;
    --deep-soft: #143526;
    --on-deep: #eef6f0;
    --on-deep-muted: #97b6a3;
    --leaf: #7ccfa2;
    --tint: #17251d;
    --pill-bg: #1a2b21;
    --pill-border: #2c4636;
    --frame: #060f0a;
  }
}

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

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); }

/* ---------- shared section shell ---------- */

.section { padding: 4.5rem 1.5rem; }
.section-inner { max-width: 1020px; margin: 0 auto; }

.sec-deep { background: var(--deep); color: var(--on-deep); }
.sec-deep .muted, .sec-deep p { color: var(--on-deep-muted); }
.sec-deep h1, .sec-deep h2, .sec-deep .lead-strong { color: var(--on-deep); }
.sec-tint { background: var(--tint); }

.kicker {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.sec-deep .kicker { color: var(--leaf); }

h2 {
  font-size: clamp(1.75rem, 4.5vw, 2.375rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.section p.body { max-width: 38rem; color: var(--muted); }
.sec-deep .section-inner > p.body { color: var(--on-deep-muted); }

/* two-column split: stacked on mobile, side-by-side from 860px */
.split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1.1fr 0.9fr; }
  .split--flip .split-copy { order: 2; }
  .split--flip .split-visual { order: 1; }
}
.split-visual { display: flex; justify-content: center; }

/* feature bullet list */
.checks { list-style: none; margin-top: 1.5rem; display: grid; gap: 0.875rem; }
.checks li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--muted);
}
.sec-deep .checks li { color: var(--on-deep-muted); }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.7 5.9-4.2 4.9a.75.75 0 0 1-1.1.04L4.3 8.7a.75.75 0 1 1 1.06-1.06l1.5 1.5 3.7-4.3a.75.75 0 0 1 1.14.97z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.7 5.9-4.2 4.9a.75.75 0 0 1-1.1.04L4.3 8.7a.75.75 0 1 1 1.06-1.06l1.5 1.5 3.7-4.3a.75.75 0 0 1 1.14.97z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sec-deep .checks li::before { background: var(--leaf); }

/* ---------- device frame ---------- */

.phone {
  width: min(290px, 78vw);
  border-radius: 46px;
  padding: 10px;
  background: var(--frame);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.phone img { border-radius: 36px; }

/* ---------- hero ---------- */

.hero { padding: 3rem 1.5rem 4.5rem; }

.brand-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 3.5rem;
}
.brand-row img { width: 40px; height: 40px; border-radius: 9px; }
.brand-row span { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--on-deep); }

.hero h1 {
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 1.25rem;
  max-width: 13em;
}

/* light-green keyword underline (App Store visual system) */
.u {
  background: linear-gradient(transparent 78%, var(--leaf) 78%, var(--leaf) 94%, transparent 94%);
  padding: 0 0.05em;
}

.hero .sub {
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  max-width: 34rem;
  margin-bottom: 2.25rem;
}
.hero .sub em { font-style: italic; color: var(--on-deep); }

/* ---------- App Store button ---------- */

.appstore-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: #000;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 13px;
  padding: 0.6rem 1.3rem 0.65rem 1.1rem;
  line-height: 1.15;
}
.appstore-btn:hover { background: #111; }
.appstore-btn svg { width: 28px; height: 28px; flex: none; fill: #fff; }
.appstore-btn .small { display: block; font-size: 0.7rem; font-weight: 400; opacity: 0.85; }
.appstore-btn .big { display: block; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }

/* ---------- insight strip ---------- */

.insight { text-align: center; }
.insight blockquote {
  font-size: clamp(1.5rem, 4.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: 24em;
  margin: 0 auto 1.25rem;
}
.insight blockquote .u { background: linear-gradient(transparent 78%, var(--accent) 78%, var(--accent) 94%, transparent 94%); }
.insight .support { color: var(--muted); max-width: 36rem; margin: 0 auto 0.5rem; }
.insight .lead-strong { font-weight: 600; color: var(--fg); }

/* ---------- pills (foundation) ---------- */

.pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- trends teaser ---------- */

.teaser {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  max-width: 34rem;
}
.soon {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep);
  background: var(--leaf);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  margin-bottom: 1rem;
}
.teaser p { color: var(--muted); }

/* ---------- voice quotes ---------- */

.quotes { list-style: none; margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.quotes li {
  font-weight: 600;
  color: var(--on-deep);
  border-left: 3px solid var(--leaf);
  padding-left: 0.9rem;
}

/* ---------- capture strip ---------- */

.capture-grid { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 700px) { .capture-grid { grid-template-columns: repeat(3, 1fr); } }
.capture-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
}
.capture-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
.capture-card p { color: var(--muted); font-size: 0.95rem; }

/* ---------- closing CTA + footer ---------- */

.cta { text-align: center; padding-bottom: 3rem; }
.cta h2 { max-width: 18em; margin: 0 auto 2rem; }

footer { background: var(--deep); color: var(--on-deep-muted); padding: 2.5rem 1.5rem 3rem; }
.footer-inner {
  max-width: 1020px;
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 2rem;
}
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.75rem; margin-bottom: 1.25rem; }
.footer-links a { color: var(--on-deep-muted); text-decoration: none; }
.footer-links a:hover { color: var(--on-deep); }
.copyright { font-size: 0.875rem; }

/* ---------- legacy card (404 page) ---------- */

.page-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 3rem 2.5rem;
  max-width: 26rem;
  width: 100%;
  text-align: center;
}
.card .logo { margin: 0 auto 1rem; }
.card h1 { font-size: 2rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.card .tagline { color: var(--accent); font-weight: 600; margin-bottom: 0.75rem; }
.card p { color: var(--muted); }