/* ============================================================
   EVA SYSTEM LAYER  (v2)
   Mestaria design language, loaded after each page's inline CSS.
   No grain. Ambient glow via background only (cannot break layout).
   Brand rule: no em dashes, no en dashes anywhere.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --g1: #4623BE;
  --g2: #9717CC;
  --g3: #00EFE3;
  --gradient: linear-gradient(135deg, #4623BE 0%, #9717CC 40%, #00EFE3 100%);
  --gradient-soft: linear-gradient(120deg, rgba(70,35,190,0.14), rgba(151,23,204,0.14), rgba(0,239,227,0.14));
  --eva-purple: #4623BE;
  --eva-violet: #9717CC;
  --eva-cyan: #00EFE3;
  --eva-grad: linear-gradient(135deg, #4623BE 0%, #9717CC 40%, #00EFE3 100%);
  --eva-grad-2: linear-gradient(135deg, #4623BE 0%, #9717CC 100%);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --eva-glass-bg: rgba(15,23,42,0.04);
  --eva-glass-border: rgba(15,23,42,0.12);
  --eva-glow-purple: rgba(70,35,190,0.16);
  --eva-glow-cyan: rgba(0,239,227,0.08);
}
[data-theme="dark"] {
  --page-bg: #060A12;
  --box-bg: #0B1220;
  --eva-glass-bg: rgba(255,255,255,0.03);
  --eva-glass-border: rgba(255,255,255,0.08);
  --eva-glow-purple: rgba(70,35,190,0.20);
  --eva-glow-cyan: rgba(0,239,227,0.07);
}

/* ---- Typography ---- */
body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4 {
  font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em;
}
.gradient-text, .grad-text {
  background: var(--eva-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Ambient glow: painted on the page background, fixed, subtle.
        No overlay element, no z-index games, cannot cover content. ---- */
body {
  background-color: var(--page-bg);
  background-image:
    radial-gradient(ellipse 55% 45% at 12% -5%, var(--eva-glow-purple), transparent 60%),
    radial-gradient(ellipse 45% 45% at 105% 105%, var(--eva-glow-cyan), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ---- Eyebrow: mono glass pill with glowing cyan dot (Mestaria spec) ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--body);
  padding: 6px 14px;
  background: var(--eva-glass-bg);
  border: 1px solid var(--eva-glass-border);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.eyebrow .dot, .eyebrow:not(:has(.dot))::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--eva-cyan); box-shadow: 0 0 12px var(--eva-cyan); flex-shrink: 0;
}
.tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; font-weight: 500;
}

/* ---- Scroll progress bar ---- */
.eva-scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--eva-grad); z-index: 300; transition: width 0.12s ease-out;
}

/* ---- Glass utility ---- */
.eva-glass {
  background: var(--eva-glass-bg); border: 1px solid var(--eva-glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
}

/* ---- IMPORTANT: no blanket housing on icons.
        The gradient-tile SVGs carry their own tile; illustrative
        vectors must float free with no box or glow. ---- */

/* ---- Buttons ---- */
.btn-primary, .btn.primary, a.btn-primary {
  background: var(--eva-grad); color: #fff;
  box-shadow: 0 8px 30px rgba(70,35,190,0.40);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.btn-primary:hover, .btn.primary:hover {
  transform: translateY(-3px); box-shadow: 0 16px 45px rgba(70,35,190,0.60);
}

/* ---- Card hover life ---- */
.pillar, .persona, .card {
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

/* ---- How EVA Works 4-step icons: unify with homepage gradient tiles ---- */
.nd-ic { background: var(--eva-grad-2) !important; border: none !important; color: #fff !important; }
.nd-ic svg { stroke: #fff; color: #fff; }
.node:hover .nd-ic { box-shadow: 0 10px 28px -6px rgba(70,35,190,0.6) !important; }

/* ============================================================
   SCIENCE PAGE COMPONENTS
   ============================================================ */

/* S3: biological-age decline chart (replaces case-study image) */
.bioage-chart-card {
  background: var(--eva-glass-bg); border: 1px solid var(--eva-glass-border);
  border-radius: 24px; padding: 28px 28px 24px;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  position: relative; overflow: hidden;
}
.bioage-svg { width: 100%; height: auto; color: var(--title); display: block; }
.bioage-readout { display: flex; align-items: baseline; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--eva-glass-border); }
.bioage-big { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.bioage-unit { font-size: 0.82rem; color: var(--body); line-height: 1.25; }

/* S4: big-stat glass panel */
.bigstat-panel {
  position: relative; display: flex; align-items: center; gap: 28px;
  max-width: 680px; margin: 0 auto; padding: 40px 44px;
  background: var(--eva-glass-bg); border: 1px solid var(--eva-glass-border);
  border-radius: 28px; overflow: hidden;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.bigstat-glow { position: absolute; width: 320px; height: 320px; left: -80px; top: -120px; border-radius: 50%; background: var(--eva-grad-2); filter: blur(90px); opacity: 0.22; pointer-events: none; }
.bigstat-num .num { font-size: clamp(4.5rem, 11vw, 7rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; }
.bigstat-meta { position: relative; }
.bigstat-lead { font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 700; color: var(--title); letter-spacing: -0.02em; line-height: 1.15; }
.bigstat-sub { font-size: 0.95rem; color: var(--body); margin-top: 6px; }
@media (max-width: 560px) { .bigstat-panel { flex-direction: column; text-align: center; gap: 12px; padding: 32px 24px; } }

/* S5: the 4-box standards grid, balanced 2x2 glass */
.persona-grid.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 940px; margin-left:auto; margin-right:auto; }
.persona {
  background: var(--eva-glass-bg); border: 1px solid var(--eva-glass-border);
  border-radius: 20px; padding: 30px 28px; position: relative; overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
.persona:hover { transform: translateY(-4px); border-color: rgba(151,23,204,0.5); }
.persona .tag { color: var(--eva-cyan); display: inline-block; margin-bottom: 8px; }
.persona h4 { margin-bottom: 8px; }
.persona .quote:empty { display: none; }
@media (max-width: 640px) { .persona-grid.cols-2 { grid-template-columns: 1fr; } }

/* S7: philosophy cards, drop the photo overlay for clean glass + mono index */
.philo-grid { counter-reset: philo; }
.philo {
  justify-content: flex-start !important; min-height: 0 !important;
  background: var(--eva-glass-bg) !important; border: 1px solid var(--eva-glass-border) !important;
  border-radius: 22px; padding: 30px 28px 28px !important; overflow: hidden;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.philo > img { display: block !important; opacity: 0.45; transition: opacity 0.4s ease; }
.philo:hover > img { opacity: 0.6; }
.philo-n { counter-increment: philo; }
.philo-n::before {
  content: counter(philo, decimal-leading-zero);
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.85rem;
  background: var(--eva-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: block; margin-bottom: 14px; letter-spacing: 0.1em;
}
.philo::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--eva-grad); opacity: 0.7; }
.philo h4 { font-size: 1.2rem !important; }
.philo p { color: var(--body); }

/* S6: certification grid, spaced with names under each */
.cert-grid {
  display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 28px 20px;
  max-width: 820px; margin: 0 auto; align-items: start;
}
.cert-item { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cert-item .cert-logo {
  height: 64px; width: auto; object-fit: contain;
  background: var(--eva-glass-bg); border: 1px solid var(--eva-glass-border);
  border-radius: 16px; padding: 14px 18px; box-sizing: content-box;
}
.cert-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em; color: var(--body); line-height: 1.3; max-width: 16ch; }
@media (max-width: 640px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   PHONE MOCKUP SYSTEM (guide section 5)
   Screen-only SVGs (cropped to 9.57 8 232.59 507.55) sit inside
   this CSS bezel. Light/dark screen swap via .light-only/.dark-only.
   ============================================================ */
/* Phone screens use self-framed SVG artwork (frame + island baked in).
   The authoritative sizing/styling lives in the block further down
   (search: SELF-FRAMED PHONE ARTWORK). Nothing here draws a frame. */
.eva-screen-img { display: block; }
@keyframes phoneFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.eva-phone-float { animation: phoneFloat 6s ease-in-out infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .eva-phone-float { animation: none; } }

/* Phone-bearing 50/50 split for subpages */
.eva-phone-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 980px) { .eva-phone-split { grid-template-columns: 1fr; gap: 2.5rem; } .eva-phone-split .eva-phone-visual { order: -1; } }

/* ---- Theme image swap utilities (site-wide) ---- */
.light-only { display: block; }
.dark-only { display: none; }
[data-theme="dark"] .light-only { display: none; }
[data-theme="dark"] .dark-only { display: block; }


/* ============================================================
   EVA SYSTEM LAYER v3 ADDITIONS
   Hero float, language toggle, scroll reveals, flashlight hover
   ============================================================ */

/* ---- Hero visual float animation ---- */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hero-visual-float {
  animation: heroFloat 6s ease-in-out infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual-float { animation: none; }
}

/* ---- Language toggle ---- */
.lang-toggle {
  display: inline-flex; align-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.08em;
  margin-left: 14px;
  gap: 2px;
}
.lang-toggle button {
  background: none; border: 1px solid transparent; cursor: pointer;
  padding: 5px 9px; border-radius: 6px;
  color: var(--body, #758193);
  transition: all 0.25s ease;
  font-family: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit;
}
.lang-toggle button.active {
  color: var(--eva-cyan);
  border-color: rgba(0,239,227,0.25);
  background: rgba(0,239,227,0.07);
}
.lang-toggle button:hover:not(.active) { color: var(--title, #fff); }

/* ---- Scroll reveal system (varied types) ---- */
.sr { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; }
.sr-up { transform: translateY(36px); }
.sr-left { transform: translateX(-40px); }
.sr-right { transform: translateX(40px); }
.sr-scale { transform: scale(0.92); }
.sr.visible { opacity: 1; transform: none; }

/* Staggered children */
.stagger > .sr:nth-child(1) { transition-delay: 0s; }
.stagger > .sr:nth-child(2) { transition-delay: 0.08s; }
.stagger > .sr:nth-child(3) { transition-delay: 0.16s; }
.stagger > .sr:nth-child(4) { transition-delay: 0.20s; }
.stagger > .sr:nth-child(5) { transition-delay: 0.24s; }
.stagger > .sr:nth-child(6) { transition-delay: 0.28s; }

/* ---- Flashlight hover (Stripe-style) ---- */
.flashlight-grid {
  --mouse-x: 50%; --mouse-y: 50%;
}
.flashlight-grid > .pillar,
.flashlight-grid > .persona,
.flashlight-grid > .price-tier {
  background-image: radial-gradient(
    650px circle at var(--mouse-x) var(--mouse-y),
    rgba(0,239,227,0.045), transparent 40%
  );
  transition: border-color 0.35s ease, transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.flashlight-grid > .pillar:hover,
.flashlight-grid > .persona:hover,
.flashlight-grid > .price-tier:hover {
  border-color: rgba(0,239,227,0.25);
}

/* ---- Vertical timeline (Start Your Journey) ---- */
.vtl { position: relative; max-width: 680px; margin: 0 auto; padding: 20px 0; }
.vtl::before {
  content: ""; position: absolute; left: 23px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, #4623BE, #9717CC 50%, #00EFE3);
}
.vtl-step {
  position: relative; padding: 24px 0 24px 76px; margin-bottom: 4px;
}
.vtl-step::before {
  content: attr(data-step);
  position: absolute; left: 0; top: 22px;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #4623BE, #9717CC);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1rem;
  color: #fff; box-shadow: 0 0 0 4px var(--page-bg, #04060b), 0 8px 24px rgba(70,35,190,0.35);
}
.vtl-step h4 { font-size: 1.1rem; margin-bottom: 4px; }
.vtl-step p { color: var(--body); font-size: 0.92rem; }
@media (max-width: 640px) {
  .vtl::before { left: 15px; }
  .vtl-step { padding-left: 60px; }
  .vtl-step::before { width: 36px; height: 36px; font-size: 0.85rem; left: -2px; }
}

/* ---- Quiz banner ---- */
.quiz-banner {
  position: relative; overflow: hidden;
  background: var(--eva-glass-bg); border: 1px solid var(--eva-glass-border);
  border-radius: 20px; padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.quiz-banner::before {
  content: ""; position: absolute; inset: 0; opacity: 0.12; pointer-events: none;
  background: linear-gradient(135deg, rgba(70,35,190,0.3), transparent 60%);
}
.quiz-banner > * { position: relative; z-index: 1; }
.quiz-banner h3 { font-size: 1.15rem; margin-bottom: 4px; }
.quiz-banner p { font-size: 0.88rem; color: var(--body); }

/* ---- Arabic RTL ---- */
html[data-lang="ar"] { direction: rtl; }
html[data-lang="ar"] body,
html[data-lang="ar"] h1, html[data-lang="ar"] h2, html[data-lang="ar"] h3,
html[data-lang="ar"] h4, html[data-lang="ar"] h5,
html[data-lang="ar"] p, html[data-lang="ar"] a, html[data-lang="ar"] span,
html[data-lang="ar"] li, html[data-lang="ar"] button, html[data-lang="ar"] input,
html[data-lang="ar"] .eyebrow, html[data-lang="ar"] .tag {
  font-family: 'Noto Sans Arabic', 'Plus Jakarta Sans', sans-serif;
}
html[data-lang="ar"] .hero-grid { direction: ltr; }
html[data-lang="ar"] .eva-phone-split { direction: ltr; }
html[data-lang="ar"] .nav-links { direction: ltr; }
html[data-lang="ar"] .vtl { direction: ltr; }

/* ---- Science page: large "5" stat section ---- */
.five-draw {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: drawFive 2.5s ease-out 0.5s forwards;
}
@keyframes drawFive {
  to { stroke-dashoffset: 0; }
}
@media (max-width: 700px) {
  .wrap > [style*="grid-template-columns:1fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
}

@property --beam-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---- Beam animation on the large 5 (science page) ---- */
.five-beam-wrap {
  --beam-angle: 0deg;
}
.five-beam-wrap::after {
  content: "";
  position: absolute;
  top: 25%; left: 25%; width: 50%; height: 50%;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    transparent 250deg,
    rgba(70,35,190,0.3) 290deg,
    rgba(151,23,204,0.35) 320deg,
    rgba(0,239,227,0.25) 345deg,
    transparent 360deg
  );
  filter: blur(50px);
  animation: beamSpin 6s linear infinite;
}

/* ---- Enhanced card hovers ---- */
.pillar:hover, .persona:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -16px rgba(70,35,190,0.35);
  border-color: rgba(0,239,227,0.2);
}
.price-tier:hover {
  box-shadow: 0 0 0 1px rgba(0,239,227,0.2), 0 24px 55px -20px rgba(70,35,190,0.5);
}

/* ---- Smooth section transitions ---- */
.section { position: relative; }
.section + .section { margin-top: -1px; }

@keyframes beamSpin { to { --beam-angle: 360deg; } }


/* Fix gradient getting cut on CTA sections */
.final-cta, .callout { overflow: visible; }
body { overflow-x: hidden; }

/* Fix "Who is EVA for" image proportions on mobile */
@media (max-width: 760px) {
  .split > div:first-child img { max-width: 100%; height: auto; }
}


/* ============================================================
   MOBILE FIXES (Session 2)
   ============================================================ */

/* Science page: Method section asset on mobile - show above text */
@media (max-width: 768px) {
  .method-split, [class*="method"] > [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .method-split > *:last-child {
    order: -1;
  }
  
  /* Science: Did You Know image overflow fix */
  .bigstat-panel { 
    overflow: hidden; 
    max-width: 100%; 
  }
  .bigstat-panel svg,
  .bigstat-panel img {
    max-width: 100%;
    height: auto;
  }
  
  /* Results: documented case section - asset above text on mobile */
  .case-split {
    grid-template-columns: 1fr !important;
  }
  .case-split > *:last-child {
    order: -1;
  }
  
  /* Supplements: Built From You section - image first on mobile */
  .built-split {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .built-split > *:last-child {
    order: -1;
  }

  /* Supplements: Stack section - image comes first */
  .stack-split {
    grid-template-columns: 1fr !important;
  }
  .stack-split > *:first-child {
    order: 1;
  }
  
  /* Start your journey: testing boxes - full width stacked */
  .test-cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Pricing: Ensure text appears after icons */
  .price-feature-row .feat-icon + span,
  .price-feature-row .feat-text {
    display: inline;
  }
  
  /* Fix gradient overflow on all pages */
  .final-cta, .callout, [class*="cta"] {
    overflow: visible !important;
  }
  
  /* Quiz banner responsive */
  .quiz-banner, .quiz-cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 28px 20px !important;
  }
  
  /* Hero image-above-text handled in V3 block below */
}

/* Fix "Who is EVA for" image proportions */
@media (max-width: 900px) {
  .who-split, .split-who {
    grid-template-columns: 1fr !important;
  }
  .who-split img, .split-who img {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    display: block;
  }
}

/* Language toggle responsive */
@media (max-width: 760px) {
  .lang-toggle {
    margin-left: 8px;
  }
  .lang-toggle button {
    padding: 4px 7px;
    font-size: 0.6rem;
  }
}

/* ---- Mobile nav cleanup: hide desktop lang toggle when burger menu
       is active (matches the 1024px nav-collapse breakpoint).
       It's accessible inside the mobile-nav panel. ---- */
@media (max-width: 1024px) {
  .nav-actions > .lang-toggle { display: none !important; }
}


/* ============================================================
   MOBILE FIXES (V3)
   ============================================================ */

/* -- Global: Hero image above text on ALL pages -- */
@media (max-width: 980px) {
  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
  }
  /* Text is always the first child in DOM — push it below */
  .hero-grid > *:first-child {
    order: 2 !important;
    width: 100% !important;
  }
  /* Visual is always the last child in DOM — pull it above */
  .hero-grid > *:last-child {
    order: 1 !important;
  }

  /* -- Phone mockup sizing on tablet -- */
  .hero-grid .eva-phone {
    width: min(78vw, 380px) !important;
  }

  /* -- Case study: fix gradient bleed on mobile -- */
  .case-study::before {
    right: -30% !important;
    top: -10% !important;
    width: 80% !important;
    height: 60% !important;
    opacity: 0.5;
  }
}

/* -- Phone mockup sizing on phone screens -- */
@media (max-width: 600px) {
  .hero-grid .eva-phone {
    width: min(82vw, 340px) !important;
  }
  /* Case study: further reduce gradient on small screens */
  .case-study::before {
    opacity: 0.3 !important;
  }
}

/* -- Supplements: Remove black box from bottles image -- */
.supp-bottles-img {
  background: transparent !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* -- Supplements: Stack section stacks properly on mobile -- */
@media (max-width: 768px) {
  .stack-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .stack-grid > .stack-img-col {
    display: none;
  }

  /* -- Pricing: "Deeper biological view" section stacks on mobile -- */
  .bio-view-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .bio-view-grid .persona {
    grid-template-columns: 100px 1fr !important;
    gap: 16px !important;
  }
  .bio-view-grid .persona > div:first-child {
    width: 100px !important;
  }

  /* -- Start your journey: "Who EVA is for" phone composition --
     now shows on mobile (clean layered phones, unlike the old portrait photo) -- */
  .who-img-col {
    display: block !important;
    margin-bottom: 8px;
  }
  .split.who-section {
    grid-template-columns: 1fr !important;
  }
}

/* -- Case study: spacing between eyebrow pill and headline -- */
.case-eyebrow-spaced { margin-bottom: 22px !important; }

/* -- Science: KDM-21 method section stacks on mobile, animation visible and properly sized -- */
@media (max-width: 980px) {
  .method-kdm-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .method-kdm-grid .method-kdm-anim {
    max-width: 260px;
    margin: 0 auto;
    aspect-ratio: 1 !important;
  }
}
@media (max-width: 600px) {
  .method-kdm-grid .method-kdm-anim {
    max-width: 220px;
  }
}

/* -- Results: documented case section stacks on mobile so chart is visible -- */
@media (max-width: 980px) {
  .results-case-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .results-case-viz-col {
    order: -1;
    max-width: 460px;
    margin: 0 auto !important;
  }
}

/* -- Contact page: stack form above contact details on all screens, room to breathe -- */
.contact-split {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 56px !important;
  max-width: 720px;
  margin: 40px auto 0 !important;
}

/* -- Pricing: stat-style tag pill above blood/DNA cards -- */
.bio-stat-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g3);
  padding: 5px 11px;
  border-radius: 100px;
  border: 1px solid rgba(0, 239, 234, 0.28);
  background: rgba(0, 239, 234, 0.06);
  margin-bottom: 10px;
}
.bio-stat-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g3);
  box-shadow: 0 0 8px var(--g3);
  flex: none;
}

/* -- Homepage (and all pages): tighten vertical rhythm on mobile so sections
      like "Biohacker meets wise mentor" don't leave large empty gaps between
      the heading/intro and the cards below. Root cause: .section-head's 56px
      bottom margin + generous section padding compound on narrow viewports. -- */
@media (max-width: 600px) {
  .section-head { margin-bottom: 28px !important; }
  .section-head h2 { margin: 12px 0 12px !important; }
  .section { padding: 56px 0 !important; }
  /* keep sections that intentionally butt up against the previous one flush */
  .section[style*="padding-top:0"] { padding-top: 0 !important; }
}

/* ============================================================
   Global horizontal-overflow guard — Fold / Flip / phones / tablets.
   Root-level overflow-x:clip clips decorative bleed (CTA glow,
   ambient gradients) AND the fixed watermark at the viewport edge.
   Unlike overflow-x:hidden, `clip` does NOT turn the root into a
   scroll container, so the position:sticky header and normal
   vertical scrolling are preserved. This supersedes the earlier
   body{overflow-x:hidden} which couldn't clip fixed/abs elements
   and risked breaking sticky positioning.
   ============================================================ */
html { overflow-x: clip !important; }
body { overflow-x: clip !important; max-width: 100vw; }

/* Belt-and-suspenders: keep the decorative watermark from forcing
   width even on engines that ignore overflow:clip on the root. */
.watermark { max-width: 100vw; }

/* ============================================================
   Ultra-narrow (Galaxy Fold ~280px) content-fit guard.
   Grid items default to min-width:auto, so a fixed-width child
   (e.g. the 300px .eva-phone) can force the single mobile column
   wider than its container, clipping the adjacent text. Allowing
   items to shrink (min-width:0) lets them track the container.
   ============================================================ */
@media (max-width: 980px) {
  .split > *, .hero-grid > *, .case-study > *, .waitlist > *,
  .split-who > *, .who-split > * { min-width: 0; }
}
@media (max-width: 360px) {
  .eva-phone, .phone { width: 100%; }
}

/* Ultra-narrow: collapse the inline 2-col fractional grid on Science
   (1.05fr .95fr) to a single column so neither column is forced wider
   than the viewport, and let long CTA buttons wrap instead of clipping. */
@media (max-width: 600px) {
  [style*="1.05fr .95fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 360px) {
  .btn, .btn-primary, .btn-ghost { white-space: normal !important; }
}

/* ============================================================
   SELF-FRAMED PHONE ARTWORK (authoritative — single source of truth)
   The screen SVGs are complete phone mockups: bezel, side buttons,
   dynamic island and screen content are all baked into the artwork.
   So the CSS must NOT draw any frame, island, padding or background.
   .eva-phone is just a sizing + float container; the SVG fills it at
   its own natural aspect ratio. A soft drop-shadow lifts it off the page.
   These !important rules deliberately override any leftover per-page
   inline .eva-phone / .eva-screen styles so the result is consistent
   no matter which page they live on.
   ============================================================ */
.eva-phone {
  position: relative !important;
  width: 300px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  aspect-ratio: auto !important;      /* SVG defines its own ratio */
  isolation: auto !important;
  filter: drop-shadow(0 40px 80px rgba(10,12,24,.22));  /* soft float shadow only */
}
.eva-phone::before,
.eva-phone::after { display: none !important; content: none !important; }  /* no CSS island/notch */
.notch { display: none !important; }
.eva-screen {
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  position: relative !important;
}
.eva-screen-img {
  width: 100% !important;
  height: auto !important;            /* natural height from the SVG ratio */
  object-fit: contain !important;     /* show the full framed phone, no crop */
}
/* Light/dark screen swap must win over the width/height rules above */
.light-only { display: block !important; }
.dark-only { display: none !important; }
[data-theme="dark"] .light-only { display: none !important; }
[data-theme="dark"] .dark-only { display: block !important; }