/* =========================================================
   Steady landing page
   Values are taken from the supplied design spec verbatim.
   ========================================================= */

:root {
  --dark-bg:        #10201D;  /* dark section background */
  --page-bg:        #111A18;  /* page background behind everything */
  --light-bg:       #F4F0E8;  /* light section background */
  --sage:           #8BAE9B;  /* sage accent / pale CTA fill */
  --teal:           #1B786B;  /* deep teal / primary CTA fill */
  --muted-sage:     #D7E2D9;  /* muted sage support text */
  --heading-light:  #10201D;  /* heading on light */
  --heading-dark:   #F4F0E8;  /* heading on dark */
  --body-light:     #405851;  /* body on light */
  --eyebrow:        #1B786B;  /* eyebrow accent */
  --dark-secondary: #8BAE9B;  /* dark-section secondary text */
  --border:         #405851;
  --stakes-bg:      #19332D;  /* stakes visual background */
  --hero-grad-from: #315B51;
  --hero-grad-to:   #1B3731;

  --content-max: 1120px;
  --section-pad-x: 32px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page-bg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.ln-container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

.ln-dark  { background: var(--dark-bg); }
.ln-light { background: var(--light-bg); }

/* ---------- Type scale (spec values) ---------- */

.ln-eyebrow {
  font-size: 13px; font-weight: 600; line-height: 1.2;
  letter-spacing: 1.45px; text-transform: uppercase;
  color: var(--eyebrow);
  margin: 0 0 20px;
}
.ln-dark .ln-eyebrow { color: var(--sage); }

.ln-h-hero {
  font-size: 64px; font-weight: 600; line-height: 1.04; letter-spacing: -2.6px;
  color: var(--heading-dark); margin: 0;
}
.ln-h-large {
  font-size: 56px; font-weight: 600; line-height: 1.06; letter-spacing: -2px;
  color: var(--heading-dark); margin: 0;
}
.ln-h-stakes {
  font-size: 52px; font-weight: 600; line-height: 1.08; letter-spacing: -1.8px;
  color: var(--heading-dark); margin: 0;
}
.ln-h-section {
  font-size: 46px; font-weight: 600; line-height: 1.08; letter-spacing: -1.4px;
  color: var(--heading-light); margin: 0;
}
.ln-h-image {
  font-size: 42px; font-weight: 600; line-height: 1.1; letter-spacing: -1.2px;
  color: var(--heading-light); margin: 0 0 32px;
}
.ln-statement {
  font-size: 30px; font-weight: 500; line-height: 1.28; letter-spacing: -0.6px;
  color: var(--heading-light); margin: 0;
}
.ln-negation {
  font-size: 25px; font-weight: 500; line-height: 1.25;
  color: var(--dark-secondary); margin: 0;
}
.ln-body-dark {
  font-size: 19px; font-weight: 400; line-height: 1.45;
  color: var(--muted-sage); margin: 0;
}
.ln-body-light {
  font-size: 19px; font-weight: 400; line-height: 1.35;
  color: var(--body-light); margin: 0;
}
.ln-caption {
  font-size: 16px; font-weight: 500; line-height: 1.4;
  color: var(--dark-secondary); margin: 0;
}

/* ---------- Nav ---------- */

.ln-nav {
  background: var(--dark-bg);
  padding-top: 26px;
  padding-bottom: 26px;
}
.ln-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.ln-logo {
  font-size: 19px; font-weight: 600; line-height: 1.0;
  color: var(--heading-dark);
  text-decoration: none;
}
.ln-nav__links { display: flex; align-items: center; gap: 32px; }
.ln-nav__links a {
  font-size: 14px; font-weight: 500; line-height: 1.0;
  color: var(--muted-sage); text-decoration: none;
}
.ln-nav__links a:hover { color: var(--heading-dark); }
.ln-nav__signin {
  font-size: 14px; font-weight: 600; line-height: 1.0;
  color: var(--heading-dark); text-decoration: none;
}

/* ---------- Buttons ---------- */

.ln-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 15px; font-weight: 600; line-height: 1.0;
  padding: 17px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.ln-btn:hover { opacity: 0.88; }
.ln-btn--pale { background: var(--sage); color: var(--dark-bg); }
.ln-btn--teal { background: var(--teal); color: #FFFFFF; }

/* ---------- 2. Hero ---------- */

.ln-hero { padding-top: 32px; padding-bottom: 0; }
.ln-hero__headline { max-width: 15ch; }
.ln-hero__sub {
  margin: 26px 0 0;
  max-width: 46ch;
}
.ln-hero__cta { margin-top: 34px; }

/* Full-bleed graphic: 20px top corners, square bottom, flush to the fold. */
.ln-hero__graphic {
  margin-top: 60px;
  max-width: var(--content-max);
  margin-left: auto; margin-right: auto;
  background: linear-gradient(160deg, var(--hero-grad-from), var(--hero-grad-to));
  border-radius: 20px 20px 0 0;
  padding: 40px 40px 48px;
}

/* ---------- 3. Recognition ---------- */

.ln-recognition { padding-top: 100px; padding-bottom: 100px; }
.ln-recognition__lines { display: flex; flex-direction: column; gap: 28px; }

/* ---------- 4. Stakes ---------- */

.ln-stakes { padding-top: 104px; padding-bottom: 104px; }
.ln-stakes__body { margin-top: 22px; max-width: 58ch; }
.ln-stakes__graphic {
  margin-top: 44px;
  background: var(--stakes-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 40px 32px;
}
.ln-stakes__caption { margin-top: 20px; }

/* ---------- 5. Product gallery ---------- */

.ln-product { padding-top: 124px; padding-bottom: 124px; }
.ln-product__rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.ln-product__item { min-width: 0; }
.ln-product__shot {
  /* Sampled from the screenshots themselves (#F3F1EC) so the phone images
     seam invisibly into the card instead of sitting on a visible rectangle. */
  background: #F3F1EC;
  border-radius: 28px;
  overflow: hidden;
}
.ln-product__shot img { width: 100%; height: auto; }
.ln-product__caption {
  font-size: 15px; font-weight: 600; line-height: 1.15;
  color: var(--heading-light);
  margin: 18px 0 0;
}
.ln-product__scrollnote {
  display: none;
  font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--body-light);
  margin: 22px 0 0;
}

/* ---------- 6. Demo ---------- */

.ln-demo { padding-top: 88px; padding-bottom: 88px; }
.ln-demo__frame {
  margin-top: 32px;
  position: relative;
  width: 100%;
  /* Recording is 1512x762 (~2:1); the trailing 41px is the Arcade chrome. */
  padding-bottom: calc(50.4% + 41px);
  height: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  /* White, not a dark surface: the Arcade recording is a light-UI capture and
     its player paints no background of its own. */
  background: #FFFFFF;
}
.ln-demo__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  /* Without this the embed inherits the host page's colour scheme and renders
     invisibly. Same fix the partners page already carries. */
  color-scheme: light;
}
.ln-demo__link {
  display: inline-block;
  margin-top: 20px;
  font-size: 14px; font-weight: 600; line-height: 1.2;
  color: var(--teal); text-decoration: none;
}
.ln-demo__link:hover { text-decoration: underline; }

/* ---------- 7. Centered CTA band ---------- */

.ln-ctaband {
  padding-top: 48px; padding-bottom: 48px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

/* ---------- 8. Not a tracker ---------- */

.ln-nottracker { padding-top: 110px; padding-bottom: 110px; }
.ln-nottracker__lines {
  margin-top: 34px;
  display: flex; flex-direction: column; gap: 26px;
}

/* ---------- 9 & 10. Card-shaped visual sections ---------- */

.ln-visual { padding-top: 96px; padding-bottom: 96px; }
.ln-visual__card {
  background: #FFFFFF;
  border: 1px solid rgba(64, 88, 81, 0.22);
  border-radius: 20px;
  padding: 34px;
}

/* ---------- 11. Who built this ---------- */

.ln-built { padding-top: 92px; padding-bottom: 92px; }

/* ---------- 12. Early access ---------- */

.ln-early { padding-top: 92px; padding-bottom: 92px; }
.ln-early__lines {
  margin-top: 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.ln-early__cta { margin-top: 32px; }

/* ---------- 13. Trust row ---------- */

.ln-trust {
  background: var(--muted-sage);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-top: 46px; padding-bottom: 46px;
}
.ln-trust__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: 48px; padding-right: 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
}
.ln-trust__item {
  font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--heading-light);
}

/* ---------- 14. Closing ---------- */

.ln-closing {
  padding-top: 120px; padding-bottom: 120px;
  text-align: center;
}
.ln-closing__headline { max-width: 22ch; margin: 0 auto; }
.ln-closing__cta { margin-top: 38px; }

/* ---------- Footer ---------- */

.ln-footer {
  background: var(--dark-bg);
  border-top: 1px solid var(--border);
  padding-top: 34px; padding-bottom: 34px;
}
.ln-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
  font-size: 14px; font-weight: 400;
  color: var(--dark-secondary);
}
.ln-footer__links { display: flex; gap: 22px; flex-wrap: wrap; }
.ln-footer__inner a { color: var(--dark-secondary); text-decoration: none; }
.ln-footer__inner a:hover { color: var(--heading-dark); }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1080px) {
  .ln-h-hero    { font-size: 52px; letter-spacing: -2px; }
  .ln-h-large   { font-size: 46px; letter-spacing: -1.6px; }
  .ln-h-stakes  { font-size: 44px; letter-spacing: -1.5px; }
  .ln-h-section { font-size: 38px; letter-spacing: -1.1px; }
  .ln-h-image   { font-size: 36px; letter-spacing: -1px; }
  .ln-statement { font-size: 26px; }
  .ln-negation  { font-size: 22px; }

  /* Tablet and below: the five shots scroll horizontally with a visible
     indicator, rather than shrinking to illegibility. */
  .ln-product__rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 18px;
    padding-bottom: 12px;
    /* bleed to the viewport edge so the cut-off card reads as scrollable */
    margin-left: calc(var(--section-pad-x) * -1);
    margin-right: calc(var(--section-pad-x) * -1);
    padding-left: var(--section-pad-x);
    padding-right: var(--section-pad-x);
  }
  .ln-product__item { flex: 0 0 62%; scroll-snap-align: start; }
  .ln-product__scrollnote { display: block; }
}

@media (max-width: 720px) {
  :root { --section-pad-x: 20px; }

  .ln-h-hero    { font-size: 38px; letter-spacing: -1.4px; }
  .ln-h-large   { font-size: 34px; letter-spacing: -1.2px; }
  .ln-h-stakes  { font-size: 32px; letter-spacing: -1.1px; }
  .ln-h-section { font-size: 30px; letter-spacing: -0.9px; }
  .ln-h-image   { font-size: 27px; letter-spacing: -0.7px; margin-bottom: 24px; }
  .ln-statement { font-size: 21px; letter-spacing: -0.3px; }
  .ln-negation  { font-size: 19px; }
  .ln-body-dark, .ln-body-light { font-size: 17px; }

  .ln-nav { padding-top: 18px; padding-bottom: 18px; }
  .ln-nav__inner { flex-wrap: wrap; gap: 14px; }
  .ln-nav__links { gap: 20px; }

  .ln-hero__graphic { margin-top: 40px; padding: 22px 18px 26px; border-radius: 16px 16px 0 0; }
  .ln-hero__sub { margin-top: 20px; }
  .ln-hero__cta { margin-top: 26px; }

  .ln-recognition { padding-top: 64px; padding-bottom: 64px; }
  .ln-recognition__lines { gap: 20px; }
  .ln-stakes { padding-top: 68px; padding-bottom: 68px; }
  .ln-stakes__graphic { padding: 24px 16px; }
  .ln-product { padding-top: 72px; padding-bottom: 72px; }
  .ln-product__item { flex: 0 0 76%; }
  .ln-demo { padding-top: 56px; padding-bottom: 56px; }
  .ln-nottracker { padding-top: 70px; padding-bottom: 70px; }
  .ln-nottracker__lines { gap: 20px; }
  .ln-visual { padding-top: 62px; padding-bottom: 62px; }
  .ln-visual__card { padding: 20px; border-radius: 16px; }
  .ln-built { padding-top: 60px; padding-bottom: 60px; }
  .ln-early { padding-top: 60px; padding-bottom: 60px; }
  .ln-closing { padding-top: 78px; padding-bottom: 78px; }

  .ln-trust { padding-top: 30px; padding-bottom: 30px; }
  .ln-trust__inner {
    flex-direction: column; align-items: flex-start; gap: 14px;
    padding-left: var(--section-pad-x); padding-right: var(--section-pad-x);
  }
  .ln-trust__item { font-size: 13px; letter-spacing: 1.1px; }

  .ln-btn { width: 100%; text-align: center; }
  .ln-closing__cta .ln-btn, .ln-ctaband .ln-btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =========================================================
   Components carried over from the current landing page.
   Lifted verbatim from landing.css so this page renders the
   same micronutrient panel, muscle card, Eric transcript and
   modals without depending on the stylesheet it replaces.
   ========================================================= */

/* ===== AUTH MODAL ===== */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background: #fff;
  border-radius: 16px;
  padding: 44px 40px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}

.modal-box h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.modal-box p {
  color: #64748b;
  margin-bottom: 24px;
  font-size: 0.925rem;
}

.modal-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 14px;
  color: #0f172a;
}

.modal-input:focus {
  border-color: #0f172a;
}

.modal-input::placeholder {
  color: #94a3b8;
}

.modal-btn {
  width: 100%;
  padding: 13px;
  background: #0f172a;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
}

.modal-btn:hover {
  background: #1e293b;
}

.modal-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-toggle {
  margin-top: 20px;
  font-size: 0.875rem;
  color: #94a3b8;
}

.modal-toggle a {
  color: #0f172a;
  font-weight: 600;
}

.modal-toggle a:hover {
  text-decoration: underline;
}

.modal-link {
  color: #0f172a;
  font-size: 0.85rem;
  font-weight: 500;
}

.modal-link:hover {
  color: #1e293b;
  text-decoration: underline;
}

.modal-error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.875rem;
  margin-bottom: 16px;
  text-align: left;
}

/* ===== CONTACT MODAL ===== */
.contact-textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  line-height: 1.5;
}

.contact-success {
  text-align: center;
  padding: 40px 20px;
}

.contact-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #10b981;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.contact-success h2 {
  font-size: 1.3rem;
  color: #0f172a;
  margin-bottom: 8px;
}

.contact-success p {
  color: #64748b;
  font-size: 0.95rem;
}

/* ===== TERMS CHECKBOX ===== */
.terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  margin-bottom: 16px;
  cursor: pointer;
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.4;
}

.terms-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: #0f172a;
  cursor: pointer;
}

.terms-checkbox a {
  color: #0f172a;
  font-weight: 600;
  text-decoration: none;
}

.terms-checkbox a:hover {
  text-decoration: underline;
}

/* ===== S4: ERIC ===== */
.eric-section {
  padding: 56px 0;
  background: #F4F3EE;
}

.eric-section h2 {
  font-size: 24px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 8px;
}

.eric-sub {
  font-size: 17px;
  color: #475569;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 12px;
}

.eric-body {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  font-weight: 400;
  max-width: 640px;
}

.eric-card {
  background: #EDEBE3;
  border: none;
  border-radius: 12px;
  padding: 16px;
  box-shadow: none;
  max-width: 640px;
  margin: 16px 0 0;
}

.eric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.eric-header-label {
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
}

.eric-header-meta {
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  margin-top: 2px;
}

.eric-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
}

.eric-status-dot {
  width: 6px;
  height: 6px;
  background: #10B981;
  border-radius: 50%;
  flex-shrink: 0;
}

.eric-dialogue {
  background: #ffffff;
  border: 0.5px solid #d9d5c8;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}

.eric-dialogue-line {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 6px;
}

.eric-dialogue-line:last-child {
  margin-bottom: 0;
}

.eric-dialogue-speaker {
  font-size: 11px;
  font-weight: 500;
  color: #0f172a;
  min-width: 32px;
  display: inline-block;
}

.eric-waveform {
  margin-bottom: 0;
}

.eric-waveform svg {
  width: 100%;
  height: 36px;
}

.eric-data {
  border-top: 0.5px solid #e2e8f0;
  padding-top: 12px;
  margin-top: 12px;
}

.eric-data-label {
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 6px;
}

.eric-data-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.eric-pill {
  display: inline-block;
  background: #EDEBE3;
  border: 0.5px solid #d9d5c8;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 400;
  color: #475569;
}

.eric-phases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
  max-width: 640px;
}

.eric-phase-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 6px;
}

.eric-phase p {
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
  font-weight: 400;
}

.eric-closing {
  font-size: 13px;
  font-style: italic;
  color: #94a3b8;
  margin-top: 20px;
  font-weight: 400;
  text-align: left;
}

.analysis-block {
  margin-bottom: 32px;
}

.analysis-block:last-child {
  margin-bottom: 0;
}

.analysis-block h3 {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 8px;
}

.analysis-block > p {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  font-weight: 400;
  max-width: 640px;
  margin: 0 0 12px;
}

.analysis-card-row {
  display: flex;
  gap: 24px;
  margin-bottom: 12px;
}

.analysis-card-col {
  flex: 1;
}

.analysis-grade {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  margin: 4px 0;
}

.analysis-score {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  margin: 4px 0;
}

.analysis-trend {
  width: 100%;
  height: 40px;
  margin-top: 8px;
}

.analysis-trend-label {
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  text-align: center;
  margin-top: 4px;
}

.analysis-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.analysis-phase-badge {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 4px;
}

.analysis-score-big {
  font-size: 32px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 16px;
}

.analysis-components {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analysis-component-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 400;
  color: #475569;
  margin-bottom: 4px;
}

@media (max-width: 480px) {
  .the-gap,
  .the-frame,
  .eric-section,
  .analyses-section,
  .isnt-section,
  .clinical-section,
  .how-section,
  .pricing-section {
    padding: 32px 0;
  }
  .the-gap h2,
  .the-frame h2,
  .eric-section h2,
  .analyses-section h2,
  .isnt-section h2,
  .clinical-section__title,
  .how-section h2,
  .pricing-section h2,
  .faq h2,
  .final-cta h2 {
    font-size: 20px;
  }
  .eric-card {
    padding: 12px;
  }
  .analysis-card-pair {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   Dark-surface overrides for the carried-over components.
   The micronutrient panel was authored for a light section;
   in the hero it sits on the teal gradient.
   --------------------------------------------------------- */

.ln-hero__graphic .analysis-card {
  background: rgba(244, 240, 232, 0.06);
  border-color: rgba(215, 226, 217, 0.22);
}
.ln-hero__graphic .analysis-metric-label,
.ln-hero__graphic .analysis-nutrient { color: var(--muted-sage); }
.ln-hero__graphic .analysis-bar { background: rgba(244, 240, 232, 0.16); }

/* The visual-section cards sit on the light background and keep their
   original light styling; only the outer frame is supplied by .ln-visual__card,
   so the inner card chrome is removed to avoid a box inside a box. */
.ln-visual__card .analysis-card,
.ln-visual__card .eric-card {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

/* The panel is the hero's full-bleed graphic here, so it fills the gradient
   rather than keeping the 640px cap it had as an inline block on the old page. */
.ln-hero__graphic .analysis-card-pair {
  max-width: none;
  gap: 20px;
}
.ln-hero__graphic .analysis-card { padding: 24px; }
.ln-hero__graphic .analysis-nutrient { margin-top: 14px; font-size: 15px; }
.ln-hero__graphic .analysis-metric-label { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.ln-hero__graphic .analysis-status { font-size: 20px; margin: 6px 0 4px; }

@media (max-width: 720px) {
  .ln-hero__graphic .analysis-card-pair { grid-template-columns: 1fr; gap: 12px; }
}

/* =========================================================
   Second design pass: split sections, the whole loop, FAQ
   ========================================================= */

/* Two-column section body. Text and media sit side by side on desktop and
   stack on narrow screens, media last so the reading order is preserved. */
.ln-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ln-split__text { min-width: 0; }
.ln-split__media { min-width: 0; }

/* Muscle section puts the graphic first on desktop. On mobile the heading
   still leads, so the visual order is swapped back. */
.ln-split--mediafirst .ln-split__media { order: -1; }

.ln-split__cap {
  margin: 14px 0 0;
  font-size: var(--fs-caption);
  color: var(--body-light);
}
.ln-split__cap--ondark { color: var(--dark-secondary); }

.ln-h-image--ondark { color: var(--heading-dark); }

/* ---------- 8. The whole loop ---------- */

.ln-loop { padding-top: 104px; padding-bottom: 104px; }
.ln-loop__sub { margin-top: 18px; max-width: 54ch; }

/* The chain reads as one sentence of steps; arrows are generated so the
   markup stays a plain ordered list. */
.ln-loop__steps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.ln-loop__step {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--heading-light);
}
.ln-loop__step + .ln-loop__step::before {
  content: '\2192';
  color: var(--eyebrow);
  font-weight: 400;
}

.ln-loop__screens {
  margin-top: 52px;
  display: flex;
  justify-content: center;
  gap: 28px;
}
.ln-loop__screen { margin: 0; width: 260px; max-width: 100%; }
.ln-loop__screenbox {
  border-radius: 28px;
  /* Sampled from the screenshots themselves so the phone images seam into the
     card instead of sitting on a visible rectangle. Same treatment the product
     gallery cards use. */
  background: #F3F1EC;
  overflow: hidden;
}
.ln-loop__screenbox img { width: 100%; height: auto; display: block; }

/* Kept for the placeholder state: a slot with no image yet still renders as a
   tinted card with its label. */
.ln-loop__screenbox:not(:has(img)) {
  aspect-ratio: 260 / 480;
  background: #D6E1D8;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 18px;
}
.ln-loop__screenlabel {
  font-size: 13px; font-weight: 600; letter-spacing: 1.45px;
  text-transform: uppercase;
  color: var(--body-light);
  text-align: center;
}
.ln-loop__screencap {
  margin: 12px 0 0;
  font-size: var(--fs-caption);
  color: var(--body-light);
  text-align: center;
}

/* ---------- 9. Not a tracker, panel card ---------- */

/* ---------- 11. Eric on dark ---------- */

.ln-visual__card--ondark {
  background: var(--stakes-bg);
  border-color: rgba(215, 226, 217, 0.18);
}
.ln-visual--dark .ln-visual__card .eric-header-label,
.ln-visual--dark .ln-visual__card .eric-dialogue-line { color: var(--heading-dark); }
.ln-visual--dark .ln-visual__card .eric-header-meta,
.ln-visual--dark .ln-visual__card .eric-data-label { color: var(--dark-secondary); }
.ln-visual--dark .ln-visual__card .eric-dialogue {
  background: rgba(244, 240, 232, 0.05);
  border-color: rgba(215, 226, 217, 0.18);
}
.ln-visual--dark .ln-visual__card .eric-pill {
  background: rgba(244, 240, 232, 0.08);
  color: var(--muted-sage);
  border-color: rgba(215, 226, 217, 0.2);
}
.ln-visual--dark .ln-visual__card .eric-dialogue-speaker { color: var(--sage); }

/* ---------- 15. Questions ---------- */

.ln-faq { padding-top: 104px; padding-bottom: 104px; }
.ln-faq__list { margin-top: 36px; }

.ln-faq__item {
  border-bottom: 1px solid rgba(64, 88, 81, 0.28);
}
.ln-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px 22px 0;
  position: relative;
  font-size: 17px;
  font-weight: 500;
  color: var(--heading-light);
}
.ln-faq__q::-webkit-details-marker { display: none; }
.ln-faq__q::after {
  content: '+';
  position: absolute;
  right: 2px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--eyebrow);
}
.ln-faq__item[open] .ln-faq__q::after { content: '\2013'; }
.ln-faq__a {
  margin: 0 0 24px;
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--body-light);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .ln-split { gap: 44px; }
  .ln-loop__screen { width: 230px; }
}

@media (max-width: 860px) {
  .ln-split { grid-template-columns: 1fr; gap: 34px; align-items: start; }
  /* Heading leads on mobile regardless of the desktop column order. */
  .ln-split--mediafirst .ln-split__media { order: 0; }
  .ln-split--mediafirst .ln-split__text { order: -1; }
}

@media (max-width: 720px) {
  .ln-loop { padding-top: 64px; padding-bottom: 64px; }
  .ln-loop__steps { gap: 8px 12px; margin-top: 26px; }
  .ln-loop__step { font-size: 14px; gap: 12px; }
  .ln-loop__screens { flex-direction: column; align-items: center; gap: 30px; margin-top: 38px; }
  .ln-loop__screen { width: 100%; max-width: 300px; }
  .ln-panelcard { padding: 18px; }
  .ln-faq { padding-top: 64px; padding-bottom: 64px; }
  .ln-faq__q { font-size: 16px; padding-top: 18px; padding-bottom: 18px; }
  .ln-faq__a { font-size: 16px; }
}

/* ---------------------------------------------------------
   Logo mark. The dot the previous landing page carried beside
   the wordmark, restored at the same 8px nav / 6px footer sizes.
   --------------------------------------------------------- */
.ln-logo { display: inline-flex; align-items: center; gap: 8px; }
.ln-logo-mark {
  width: 8px; height: 8px;
  background: var(--sage);
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.ln-footer__brand { display: inline-flex; align-items: center; gap: 7px; }
.ln-footer-mark {
  width: 6px; height: 6px;
  background: var(--sage);
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------
   Waitlist capture
   --------------------------------------------------------- */
.ln-waitlist { margin-top: 28px; max-width: 520px; }
.ln-waitlist__row { display: flex; gap: 10px; align-items: stretch; }
.ln-waitlist__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;               /* 16px keeps iOS from zooming the field */
  padding: 15px 18px;
  color: var(--heading-light);
  background: #FFFFFF;
  border: var(--border-width, 1px) solid rgba(64, 88, 81, 0.28);
  border-radius: 999px;
}
.ln-waitlist__input::placeholder { color: rgba(64, 88, 81, 0.6); }
.ln-waitlist__input:focus {
  outline: none;
  border-color: var(--teal);
}
.ln-waitlist .ln-btn { flex: 0 0 auto; }
.ln-waitlist__error {
  margin: 12px 0 0;
  font-size: var(--fs-caption);
  color: #B3402F;
}
.ln-waitlist__done {
  margin: 28px 0 0;
  font-size: 25px; font-weight: 500; line-height: 1.25;
  color: var(--heading-light);
}

@media (max-width: 560px) {
  .ln-waitlist__row { flex-direction: column; }
  .ln-waitlist .ln-btn { width: 100%; }
}

/* ===========================================================================
   The live demo: /demo/supplements, in a phone.

   Phone-width and centred at every breakpoint, because the thing inside is a
   phone screen and stretching it would be a lie about what a patient holds.
   The frame scrolls internally; see the comment on the section in index.html.
   =========================================================================== */

.ln-live { padding-top: 88px; padding-bottom: 88px; }

.ln-live__lead {
  margin: 14px auto 0;
  max-width: 48ch;
  text-align: center;
  color: var(--muted);
}

.ln-live__phone {
  margin: 32px auto 0;
  width: 390px;
  max-width: 100%;
  height: 760px;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  background: #FBFAF8;
  box-shadow: 0 18px 48px rgba(20, 30, 26, 0.10);
}

.ln-live__phone iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* Same reason as the walkthrough frame above: without this the embed takes
     the host page's colour scheme and paints itself invisible. */
  color-scheme: light;
}

@media (max-width: 760px) {
  .ln-live { padding-top: 56px; padding-bottom: 56px; }
  /* Edge to edge on a phone, minus the container's own gutter, so the frame
     never forces a horizontal scrollbar. */
  .ln-live__phone { width: 100%; height: 680px; border-radius: 18px; }
}