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

/* ============================================================
   Longevity-style product page — mirrors cognifit.com/longevity's
   visual language (cinematic dark sections, card grids, mega-footer)
   while every section stays server-rendered + sourced.
   Loaded IN ADDITION to site.css. Namespaced .lng-* / .mf-* so it
   never touches the other cluster pages.
   ============================================================ */

.lng {
  background:
    radial-gradient(900px 620px at 78% 8%, rgba(16,49,83,0.72), rgba(16,49,83,0) 70%),
    radial-gradient(760px 520px at 10% 34%, rgba(0,124,213,0.12), rgba(0,124,213,0) 72%),
    linear-gradient(180deg, #07090d 0%, #09111b 34%, #07090d 72%, #050609 100%);
  color: #e9eef5;

  /* ===== Product-page design tokens (single source of truth) ===== */
  --p-bg: #07090d;            /* page base */
  --p-bg-2: #0a1626;          /* hero / panels */
  --p-ink: #ffffff;           /* headings, strong */
  --p-text: #aab4c2;          /* body copy */
  --p-text-dim: #9aa7b5;      /* secondary copy */
  --p-muted: #6f7c8c;         /* fine print, captions */
  --p-accent: #5fb8ff;        /* primary blue (eyebrows, links) */
  --p-accent-deep: #2f8fff;   /* deep blue */
  --p-cyan: #5fd0ff;          /* hover, arrows, accent bars */
  --p-rule: rgba(255,255,255,0.08);        /* hairline divider */
  --p-rule-strong: rgba(255,255,255,0.12); /* section top rule */
  --p-fill: rgba(255,255,255,0.035);       /* subtle surface */
  --p-hover: rgba(255,255,255,0.03);       /* row hover */
  --p-radius: 14px;
  --p-radius-lg: 18px;
  --p-accent-bar: linear-gradient(90deg, #2f8fff, #5fd0ff);  /* the little underbars */
}
.lng .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.lng section { padding: 78px 0; }
.lng h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -0.02em; max-width: 760px; margin: 0 0 14px; }
.lng h3 { color: #fff; font-size: 19px; margin: 0 0 8px; }
.lng p { color: #aab4c2; font-size: 17px; line-height: 1.7; }
.lng .sec-eyebrow { color: var(--cyan); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; }
.lng .sec-intro { max-width: 680px; margin-bottom: 38px; }
.lng a { color: #6fc3e6; border-bottom-color: rgba(111,195,230,0.3); }
.lng a:hover { color: #9ad8f2; }

/* Live longevity chrome */
.lng .site-header {
  border-top: 0;
  border-bottom: 0;
  background: rgba(5,7,10,0.96);
  padding: 18px 32px;
}
.lng .site-header-inner {
  max-width: 1220px;
}
.lng .logo {
  line-height: 1;
}
.lng .logo .brand {
  display: inline-block;
  width: 122px;
  height: 34px;
  background:
    url("../images/logo_silver@2x.png") left center / contain no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}
.lng .site-header nav,
.lng .site-header-inner nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.lng .site-header nav a,
.lng .site-header-inner nav a {
  margin-left: 0;
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  font-weight: 500;
}
.lng .site-header nav a:hover,
.lng .site-header-inner nav a:hover {
  color: #fff;
}

/* hero band (reuses .product-hero from site.css, adds the social-proof bar) */
.lng-hero { background: radial-gradient(130% 130% at 75% 20%, #103153 0%, #0a1626 42%, #07090d 78%); }
.lng-social { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.lng-stars { color: #ffc23d; font-size: 18px; letter-spacing: 2px; }
.lng-social .rating { font-weight: 700; color: #fff; }
.lng-social .users { color: #aab4c2; font-size: 14px; }
.lng-social .users strong { color: #fff; }

/* section variants: ONE continuous surface — no stacked bands, no hard dividers */
.lng .band-tint,
.lng .band-blue {
  background: transparent;
}

/* responsive card grid */
.lng-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 8px; }
.lng-card { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 24px 22px; transition: border-color .15s, transform .15s; }
.lng-card:hover { border-color: rgba(111,195,230,0.45); transform: translateY(-3px); }
.lng-card .ic { width: 40px; height: 40px; border-radius: 10px; background: rgba(111,195,230,0.14); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.lng-card p { font-size: 15px; color: #99a4b3; margin: 0; }
.lng-card .doi-min { display: block; margin-top: 10px; font-size: 12.5px; }

.problem-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 54px;
  align-items: end;
  margin-top: 26px;
}
.problem-lede {
  max-width: 710px;
  color: #d8e0ea;
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0;
}
.problem-fact {
  border-left: 1px solid rgba(127,212,227,0.32);
  padding-left: 26px;
}
.fact-num {
  display: block;
  color: #fff;
  font-size: clamp(58px, 8vw, 104px);
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: -0.045em;
}
.problem-fact p {
  margin: 16px 0 0;
  font-size: 15px;
  color: #9ba7b6;
}
.problem-lines {
  margin-top: 52px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.problem-lines p {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.problem-lines strong {
  color: #fff;
  font-size: 16px;
}
.problem-lines span {
  color: #aab4c2;
  font-size: 16px;
}

.science-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.08fr) minmax(320px, 0.92fr);
  gap: 48px;
  margin-top: 34px;
  align-items: stretch;
}
.science-main {
  min-height: 360px;
  padding: 34px 36px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(0,124,213,0.22), rgba(127,212,227,0.04)),
    rgba(255,255,255,0.045);
  border: 1px solid rgba(127,212,227,0.18);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.science-tag {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: auto;
}
.science-main h3 {
  max-width: 600px;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 34px 0 18px;
}
.science-main p {
  max-width: 620px;
  color: #cdd6e1;
  font-size: 17px;
}
.science-cite {
  margin-top: 22px;
  font-size: 13px !important;
  color: #8f9aaa !important;
}
.science-list {
  border-top: 1px solid rgba(255,255,255,0.12);
  align-self: center;
}
.science-list p {
  margin: 0;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.science-list strong {
  display: block;
  color: #fff;
  font-size: 18px;
  margin-bottom: 6px;
}
.science-list span {
  color: #aab4c2;
  font-size: 15.5px;
  line-height: 1.6;
}

/* results stat band */
.lng-results { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 14px 0 10px; }
.lng-stat { background: rgba(111,195,230,0.06); border: 1px solid rgba(111,195,230,0.18); border-top: 3px solid var(--accent); border-radius: 12px; padding: 22px 20px; }
.lng-stat .n { font-size: 38px; font-weight: 800; color: #fff; line-height: 1; }
.lng-stat .l { font-size: 14.5px; color: #cdd6e1; font-weight: 600; margin-top: 8px; }
.lng-stat .s { font-size: 12.5px; color: #8794a4; margin-top: 5px; line-height: 1.45; }
.lng-srcnote { font-size: 11px; color: #6f7c8c; font-style: italic; margin-top: 16px; max-width: 760px; }

/* Less repetitive product storytelling for the flagship longevity page */
.results-editorial .sec-intro { max-width: 740px; }
.result-story {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(320px, 1.08fr);
  gap: 44px;
  align-items: end;
  margin-top: 36px;
}
.result-lead {
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.result-label {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.result-number {
  font-size: clamp(58px, 8.5vw, 100px);
  line-height: 0.86;
  font-weight: 800;
  letter-spacing: -0.05em;
  font-feature-settings: 'tnum';
  color: #fff;
}
.result-lead p {
  max-width: 430px;
  margin: 24px 0 0;
  color: #aab4c2;
  font-size: 16px;
}
.result-notes {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.result-notes p {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 22px;
  align-items: baseline;
  margin: 0;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.result-notes strong {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
  background: linear-gradient(165deg, #ffffff 35%, #6cc0f4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.result-notes span {
  color: #aab4c2;
  font-size: 15.5px;
  line-height: 1.6;
}

/* steps (how it works) */
.lng-steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 8px; }
.lng-step { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 22px; }
.lng-step .k { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; margin-bottom: 12px; }
.platform-flow {
  display: grid;
  grid-template-columns: minmax(280px, 0.74fr) minmax(440px, 1.26fr);
  gap: 60px;
  align-items: center;
  margin-top: 38px;
}
.platform-flow-text {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
}
.platform-shot {
  margin: 0;
  position: relative;
}
.platform-shot::before {
  content: "";
  position: absolute;
  inset: 8% -8% -8% 16%;
  background: radial-gradient(circle at 50% 40%, rgba(0,124,213,0.22), rgba(0,124,213,0) 65%);
  filter: blur(8px);
  z-index: 0;
}
.platform-shot img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.platform-intro {
  max-width: 560px;
  margin: 0 0 28px;
  color: #cdd6e1;
  font-size: 18px;
}
.app-step-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 760px;
  margin: 0 0 34px;
}
.app-step-strip figure {
  margin: 0;
  padding: 12px 12px 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
}
.app-step-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 390 / 815;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}
.app-step-strip figcaption {
  color: #cdd6e1;
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
}
.flow-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: flow;
}
.flow-list li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 24px;
  padding: 0 0 40px;
  position: relative;
}
.flow-list li:last-child { padding-bottom: 0; }
/* one continuous connector: node centre -> next node centre, edge-to-edge */
.flow-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 23px;
  height: 100%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(95,208,255,0.5) 0%, rgba(95,208,255,0.14) 100%);
  z-index: 0;
}
.flow-list span {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #16384f 0%, #0a1826 100%);
  border: 1px solid rgba(95,208,255,0.5);
  color: #cfe9ff;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
.flow-list h3 {
  margin-bottom: 4px;
}
.flow-list p {
  max-width: 560px;
  margin: 0;
  color: #9ba7b6;
  font-size: 15.5px;
}

/* professionals link grid */
.lng-pro { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 8px; }
.lng-pro a { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px 18px; color: #e9eef5; border-bottom: 1px solid rgba(255,255,255,0.08); font-weight: 600; transition: border-color .15s; }
.lng-pro a:hover { border-color: rgba(111,195,230,0.5); color: #fff; }
.lng-pro a .arr { color: var(--cyan); }

.audience-copy {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
  gap: 56px;
  margin-top: 32px;
  align-items: start;
}
.audience-lede {
  color: #d8e0ea;
  font-size: clamp(21px, 3vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
}
.audience-paths {
  border-top: 1px solid rgba(255,255,255,0.12);
}
.audience-paths a {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: inherit;
}
.audience-paths a:hover strong {
  color: var(--cyan);
}
.audience-paths strong {
  color: #fff;
  font-size: 16px;
  transition: color .15s;
}
.audience-paths span {
  color: #aab4c2;
  font-size: 15.5px;
  line-height: 1.55;
}
.audience-note {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: #8f9aaa !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* social-proof / survey band */
.lng-proof { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lng-proof .p { text-align: center; }
.lng-proof .p .n { font-size: 34px; font-weight: 800; color: var(--cyan); }
.lng-proof .p .l { font-size: 13.5px; color: #aab4c2; margin-top: 6px; }

/* honesty / not-claim panel on dark */
.lng-honest { background: rgba(214,90,90,0.08); border: 1px solid rgba(214,90,90,0.3); border-left: 3px solid var(--low); border-radius: 12px; padding: 22px 24px; }
.lng-honest p { color: #cdd6e1; margin: 0; font-size: 15.5px; }
.evidence-note {
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 34px 0 36px;
}
.evidence-note h3 {
  font-size: clamp(24px, 3.2vw, 36px);
  margin-bottom: 14px;
}
.evidence-note p {
  max-width: 900px;
  color: #b6c0ce;
  font-size: 17px;
}

/* FAQ */
.lng-faq details { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 16px 0; }
.lng-faq summary { color: #fff; font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; }
.lng-faq summary::-webkit-details-marker { display: none; }
.lng-faq summary::before { content: "+"; color: var(--cyan); font-weight: 700; margin-right: 12px; }
.lng-faq details[open] summary::before { content: "–"; }
.lng-faq p { margin: 12px 0 0; font-size: 15.5px; }

/* references on dark */
.lng-refs { padding-top: 8px; }
.lng-refs ol { list-style: none; counter-reset: r; padding: 0; }
.lng-refs li { counter-increment: r; position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 13.5px; color: #aab4c2; line-height: 1.5; }
.lng-refs li::before { content: "[" counter(r) "]"; position: absolute; left: 0; top: 12px; color: var(--cyan); font-weight: 700; }
.lng-refs .doi { color: #6fc3e6; font-size: 12.5px; }
.lng-refs .full { color: #6fc3e6; }
.evidence-compact {
  padding: 54px 0;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.065);
  border-bottom: 1px solid rgba(255,255,255,0.065);
}
.evidence-head {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1.15fr);
  gap: 42px;
  align-items: end;
  margin-bottom: 28px;
}
.evidence-head h2 {
  margin-bottom: 0;
}
.evidence-head p {
  margin: 0;
  max-width: 680px;
  color: #9faabb;
  font-size: 15.5px;
}
.evidence-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.evidence-links a {
  display: block;
  min-height: 168px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  background: rgba(255,255,255,0.026);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.evidence-links a:hover {
  border-color: rgba(111,195,230,0.34);
  background: rgba(111,195,230,0.045);
}
.evidence-links .k {
  display: block;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.evidence-links strong {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 12px;
}
.evidence-links span:last-child {
  display: block;
  color: #8f9aaa;
  font-size: 13px;
  line-height: 1.45;
}
.source-drawer {
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 16px;
}
.source-drawer summary {
  color: #cdd6e1;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.source-drawer ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 38px;
}
.source-drawer li {
  break-inside: avoid;
  color: #8f9aaa;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 9px;
}
.inline-evidence-links {
  display: grid;
  gap: 12px;
  margin: 22px 0 8px;
}
.inline-evidence-links a {
  display: block;
  padding: 17px 18px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  background: rgba(255,255,255,0.028);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.inline-evidence-links a:hover {
  border-color: rgba(111,195,230,0.34);
  background: rgba(111,195,230,0.045);
}
.inline-evidence-links .k {
  display: block;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.inline-evidence-links strong {
  display: block;
  color: #fff;
  font-size: 15.5px;
  line-height: 1.35;
  margin-bottom: 8px;
}
.inline-evidence-links span:last-child {
  display: block;
  color: #8f9aaa;
  font-size: 12.5px;
  line-height: 1.45;
}

/* final CTA band */
.lng-cta,
.live-next-step {
  text-align: center;
  background: transparent;
  padding: 76px 0 88px;
  border-top: 1px solid rgba(255,255,255,0.065);
}
.lng-cta h2,
.live-next-step h2 {
  margin: 0 auto 16px;
  max-width: 760px;
}
.lng-cta .sub,
.live-next-step .sub {
  color: #aab4c2;
  max-width: 620px;
  margin: 0 auto 26px;
}
.live-next-step .quote {
  color: #e9eef5;
  max-width: 760px;
  margin: 32px auto 24px;
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cffo-no-stores .cffo-stores {
  display: none;
}
.cffo-no-stores .cffo-main {
  padding-top: 84px;
}
/* ============ MEGA-FOOTER (closely mirrors cognifit.com) ============ */
.mf {
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: #8f969f;
}
.mf .wrap {
  width: min(1600px, calc(100% - 248px));
  max-width: none;
  padding: 78px 0 28px;
}
.mf-top {
  display: grid;
  grid-template-columns: 170px repeat(4, minmax(150px, 1fr));
  column-gap: 32px;
}
.mf-brand .bword {
  display: block;
  width: 138px;
  height: 44px;
  margin-top: -5px;
  margin-bottom: 14px;
  background: url("../images/logo_silver@2x.png") left center / contain no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}
.mf-brand p { font-size: 13.5px; color: #6f767f; margin: 12px 0 18px; max-width: 280px; line-height: 1.55; }
.mf-badges { display: none; gap: 10px; flex-wrap: wrap; }
.mf-badges a { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; padding: 8px 12px; color: #e9eef5; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.12); }
.mf-badges a:hover { border-color: rgba(111,195,230,0.5); color: #fff; }
.mf-col h4 {
  color: #fff;
  font-size: 20px;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 22px;
  line-height: 1.2;
  font-weight: 800;
}
.mf-col ul { list-style: none; padding: 0; margin: 0; }
.mf-col li { margin-bottom: 14px; }
.mf-col a {
  color: #8f969f;
  font-size: 19px;
  line-height: 1.35;
  border-bottom: none;
}
.mf-col a:hover { color: #fff; }
.mf-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 42px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mf-legal { display: flex; gap: 28px; flex-wrap: wrap; }
.mf-legal a, .mf-legal span {
  color: #8f969f;
  font-size: 16px;
  line-height: 1.4;
  border-bottom: none;
}
.mf-legal a:hover { color: #fff; }
.mf-copy { font-size: 16px; color: #8f969f; }

/* Dark product-page shell for pages that keep the article markup. */
.lng.product-dark { background: #07090d; }
.lng.product-dark .product-hero {
  background:
    radial-gradient(90% 120% at 82% 22%, rgba(0,124,213,0.28) 0%, rgba(8,29,50,0.72) 42%, rgba(7,9,13,0) 72%),
    linear-gradient(180deg, #0a1626 0%, #07090d 100%);
  border-top: 0;
}
.lng.product-dark .page {
  background: #07090d;
  color: #aab4c2;
}
.lng.product-dark main,
.lng.product-dark .sidebar { padding-top: 64px; }
.lng.product-dark section.body-section { max-width: 760px; }
.lng.product-dark .stat-card,
.lng.product-dark .evidence-list li,
.lng.product-dark .side-block,
.lng.product-dark .compare-wrap {
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.08);
}
.lng.product-dark .stat-card { border-top-color: var(--accent); }
.lng.product-dark .stat-num,
.lng.product-dark .stat-label,
.lng.product-dark .side-block li strong,
.lng.product-dark .evidence-list li strong,
.lng.product-dark .steps li strong,
.lng.product-dark .ref-list .authors,
.lng.product-dark .ref-list .title,
.lng.product-dark .coi strong { color: #fff; }
.lng.product-dark .stat-sub,
.lng.product-dark .stat-note,
.lng.product-dark .side-title,
.lng.product-dark .side-block li,
.lng.product-dark .side-block li .meta,
.lng.product-dark .evidence-list .src,
.lng.product-dark .ref-list li,
.lng.product-dark .ref-list .journal,
.lng.product-dark .ref-summary,
.lng.product-dark .coi { color: #aab4c2; }
.lng.product-dark .coi {
  background: transparent;
  border-top-color: rgba(255,255,255,0.12);
}
.lng.product-dark .references {
  border-top-color: rgba(255,255,255,0.12);
}
.lng.product-dark .ref-list li,
.lng.product-dark .steps li,
.lng.product-dark .side-block li,
.lng.product-dark table.compare th,
.lng.product-dark table.compare td {
  border-color: rgba(255,255,255,0.1);
}
.lng.product-dark .steps li::before {
  background: rgba(0,124,213,0.16);
}
.lng.product-dark .side-product {
  border-color: rgba(111,195,230,0.35);
}
.lng.product-dark table.compare th {
  background: rgba(255,255,255,0.055);
  color: #fff;
}
.lng.product-dark table.compare td { color: #cdd6e1; }
.lng.product-dark .shot img {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

@media (max-width: 900px) {
  .mf .wrap { width: calc(100% - 48px); padding-top: 54px; }
  .mf-top { grid-template-columns: 1fr 1fr; gap: 26px; }
  .mf-brand { grid-column: 1 / -1; }
  .result-story,
  .platform-flow,
  .problem-split,
  .science-layout,
  .evidence-head,
  .audience-copy {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .evidence-links {
    grid-template-columns: 1fr;
  }
  .source-drawer ul {
    columns: 1;
  }
  .result-notes p,
  .problem-lines p,
  .audience-paths a {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .app-step-strip {
    grid-template-columns: 1fr 1fr 1fr;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .app-step-strip figure {
    min-width: 180px;
  }
}

/* 1:1 header CTA + footer disclaimer */
.header-cta { background: var(--cta); color:#fff !important; padding:8px 16px; border-radius:8px; font-weight:700; font-size:13px; border-bottom:none !important; margin-left:18px; }
.header-cta:hover { background: var(--cta-hover); color:#fff; }
.mf .mf-disclaimer {
  margin-top: 34px;
  padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 17px;
  color: #6f767f;
  line-height: 1.55;
  max-width: none;
}

/* Exact CogniFit longevity footer component, copied from the live Webflow code-island. */
.cffo{background:#000;color:rgba(255,255,255,.85);font-family:'Plus Jakarta Sans',sans-serif;border-top:1px solid rgba(255,255,255,.06);container-type:inline-size;container-name:cffo}
.cffo-stores{padding:48px 24px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.08)}
.cffo-store{display:inline-flex;align-items:center;gap:10px;background:#0a0a0a;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:10px 18px;color:#fff;text-decoration:none;transition:all .25s}
.cffo-store:hover{background:#0a0a0a;border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
.cffo-si{font-size:24px;line-height:1}
.cffo-st{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.cffo-sp{font-size:10px;opacity:.8;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.cffo-sn{font-size:14px;font-weight:800}
.cffo-main{padding:64px 24px 32px;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:auto 1fr 1fr 1fr 1fr;gap:48px}
.cffo-brand img{height:36px;width:auto;opacity:.95}
.cffo-col h3{font-size:15px;font-weight:800;color:#fff;margin:0 0 18px;letter-spacing:-.01em}
.cffo-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.cffo-col a{color:rgba(255,255,255,.6);font-size:14px;text-decoration:none;transition:color .2s;border-bottom:0}
.cffo-col a:hover{color:#1A73E8}
.cffo-disc{max-width:1280px;margin:0 auto;padding:32px 24px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;line-height:1.65;color:rgba(255,255,255,.35)}
.cffo-bot{max-width:1280px;margin:0 auto;padding:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.cffo-legal{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px}
.cffo-legal a{color:rgba(255,255,255,.6);text-decoration:none;border-bottom:0}
.cffo-legal a:hover{color:#1A73E8}
.cffo-copy{font-size:13px;color:rgba(255,255,255,.5)}
@media(max-width:1100px){.cffo-main{grid-template-columns:1fr 1fr 1fr}.cffo-brand{grid-column:1/-1}}
@media(max-width:680px){.cffo-main{grid-template-columns:1fr 1fr}.cffo-bot{flex-direction:column;align-items:flex-start}}
@media(max-width:768px){
  .cffo-col a{font-size:15px !important}
  .cffo-col h3{font-size:15px !important}
  .cffo-disc{font-size:15px !important}
  .cffo-legal a{font-size:15px !important}
  .cffo-copy{font-size:13px !important}
  .cffo-sn{font-size:15px !important}
  .cffo-sp{font-size:13px !important}
}
@container cffo (max-width:768px){
  .cffo-col a{font-size:15px !important}
  .cffo-col h3{font-size:15px !important}
  .cffo-disc{font-size:15px !important}
  .cffo-legal a{font-size:15px !important}
  .cffo-copy{font-size:13px !important}
  .cffo-sn{font-size:15px !important}
  .cffo-sp{font-size:13px !important}
}

/* ---- Demo video band (product pages) ---- */
.cf-demo-band{text-align:center}
.cf-demo-wrap{max-width:920px;margin:28px auto 0;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.28);line-height:0;background:#000}
.cf-demo{width:100%;height:auto;display:block}
@media (max-width:600px){.cf-demo-wrap{border-radius:12px}}

/* ---- Paired in-content screenshots (article pages) ---- */
.shot-pair{margin:22px 0 0}
.shot-pair img{display:inline-block;width:calc(50% - 6px);vertical-align:top;border-radius:12px}
.shot-pair img:first-of-type{margin-right:8px}
@media (max-width:560px){.shot-pair img{width:100%;margin:0 0 8px}}

/* ---- Big alternating "how it works" walkthrough (product) ---- */
.walk{display:flex;flex-direction:column;gap:66px;margin-top:42px}
.walk-row{display:grid;grid-template-columns:0.82fr 1.18fr;gap:52px;align-items:center}
.walk-row:nth-child(even) .walk-copy{order:2}
.walk-row:nth-child(even) .walk-shot{order:1}
.walk-k{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;background:var(--accent,#007cd5);color:#fff;font-weight:800;font-size:18px;margin-bottom:16px}
.walk-copy h3{font-size:26px;line-height:1.2;margin:0 0 12px}
.walk-copy p{font-size:18px;line-height:1.6;color:#cdd6e1;margin:0;max-width:440px}
.walk-shot{margin:0;position:relative}
.walk-shot::before{content:"";position:absolute;inset:6% -6% -6% 6%;
  background:radial-gradient(circle at 50% 45%,rgba(0,124,213,.28),rgba(0,124,213,0) 66%);filter:blur(10px);z-index:0}
.walk-shot img{position:relative;z-index:1;width:100%;height:auto;display:block;border-radius:18px;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 34px 90px rgba(0,0,0,.5)}
@media (max-width:820px){
  .walk{gap:46px}
  .walk-row{grid-template-columns:1fr;gap:20px}
  .walk-row:nth-child(even) .walk-copy{order:1}
  .walk-row:nth-child(even) .walk-shot{order:2}
  .walk-copy p{max-width:none}
}

/* ---- Sticky header + persistent CTA (product) ---- */
.lng .site-header.lng-sticky{position:sticky;top:0;z-index:60;
  background:rgba(5,7,10,0.82);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06)}
.lng section[id]{scroll-margin-top:88px}

/* ---- Skill matrix (what it trains) ---- */
.skillgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:30px}
.skillcard{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px 20px 22px}
.skillcard h3{margin:0 0 8px;font-size:17px;color:#fff}
.skillcard p{margin:0;font-size:14.5px;line-height:1.55;color:#aeb9c6}

/* ---- Cognitive index (skills as editorial ledger, not blobs) ---- */
.cidx{margin-top:38px;border-top:1px solid rgba(255,255,255,.14)}
.cidx-group{display:grid;grid-template-columns:230px 1fr;gap:0 48px;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.cidx-num{font:600 13px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.18em;color:#3f5266;font-variant-numeric:tabular-nums}
.cidx-domname{margin-top:10px;font:700 21px/1.1 'Plus Jakarta Sans',sans-serif;color:#fff;letter-spacing:-.01em}
.cidx-domname .accent{display:block;width:32px;height:3px;margin-top:14px;border-radius:2px;background:linear-gradient(90deg,#2f8fff,#5fd0ff)}
.cidx-list{display:flex;flex-direction:column}
.cidx-row{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:28px;padding:14px 0;align-items:baseline;border-top:1px solid rgba(255,255,255,.06)}
.cidx-row:first-child{border-top:0}
.cidx-skill{font:600 16.5px/1.3 'Plus Jakarta Sans',sans-serif;color:#edf2f8 !important;
  text-decoration:none;border-bottom:0 !important;justify-self:start;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:color .18s ease}
.cidx-row:hover .cidx-skill{color:#9fd4ff !important}
.cidx-skill .arrow{color:#5fd0ff;font-size:11px;opacity:0;transform:translateX(-4px);transition:opacity .18s ease,transform .18s ease}
.cidx-row:hover .cidx-skill .arrow{opacity:1;transform:translateX(0)}
.cidx-def{color:#9aa7b5;font-size:14.5px;line-height:1.55}
@media (max-width:760px){
  .cidx-group{grid-template-columns:1fr;gap:18px 0}
  .cidx-row{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .cidx-skill{white-space:normal}
}

/* ---- Science section: editorial feature + ledger (no card) ---- */
.sci-feature{display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:start;
  margin-top:36px;padding-top:34px;border-top:1px solid rgba(255,255,255,.14)}
.sci-stat{display:flex;flex-direction:column}
.sci-big{font:800 86px/.85 'Plus Jakarta Sans',sans-serif;letter-spacing:-.035em;color:#fff}
.sci-unit{margin-top:16px;color:#aeb9c6;font-size:15px;line-height:1.45;max-width:240px}
.sci-vs{margin-top:14px;color:#7d8a98;font-size:13.5px;font-variant-numeric:tabular-nums}
.sci-vs strong{color:#cdd6e1}
.sci-dot{color:#3f5266;margin:0 9px}
.sci-kicker{font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5fb8ff}
.sci-feat-body h3{font-size:27px;line-height:1.18;margin:14px 0 14px;color:#fff;letter-spacing:-.012em;max-width:580px}
.sci-feat-body p{color:#aeb9c6;font-size:16.5px;line-height:1.6;max-width:580px;margin:0}
.sci-cite{margin-top:16px !important;font-size:13.5px;color:#7d8a98 !important}
.sci-cite a{color:#9fc8ee}
.sci-more{margin-top:44px;border-top:1px solid rgba(255,255,255,.1)}
.sci-row{display:grid;grid-template-columns:230px 1fr;gap:48px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.sci-row-h{font:700 16px/1.35 'Plus Jakarta Sans',sans-serif;color:#eaf1f8}
.sci-row p{margin:0;color:#9aa7b5;font-size:15px;line-height:1.6;max-width:640px}
.sci-row a{color:#7fc4ff;text-decoration:none;white-space:nowrap}
.sci-row a:hover{text-decoration:underline}
@media (max-width:760px){
  .sci-feature{grid-template-columns:1fr;gap:18px}
  .sci-big{font-size:66px}
  .sci-row{grid-template-columns:1fr;gap:6px}
}

/* ---- How it works: hero image + coherent horizontal step strip ---- */
.hiw-shot{margin:40px auto 0;max-width:940px;position:relative;line-height:0}
.hiw-shot::before{content:"";position:absolute;inset:2% -5% -10% -5%;
  background:radial-gradient(58% 60% at 50% 42%,rgba(0,124,213,.32),transparent 70%);filter:blur(16px);z-index:0}
.hiw-shot img{position:relative;z-index:1;width:100%;height:auto;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 44px 110px rgba(0,0,0,.58)}
.hiw-shot figcaption{position:relative;z-index:1;line-height:1.5;text-align:center;
  margin-top:18px;color:#7d8a98;font-size:13.5px}
.hiw-steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:36px;position:relative}
.hiw-steps::before{content:"";position:absolute;top:19px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,rgba(95,208,255,.45),rgba(95,208,255,.10));z-index:0}
.hiw-steps li{position:relative}
.hiw-n{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
  width:38px;height:38px;border-radius:50%;background:#0a0f16;border:1px solid rgba(95,208,255,.45);
  color:#5fd0ff;font:800 14px/1 'Plus Jakarta Sans',sans-serif;font-variant-numeric:tabular-nums;margin-bottom:18px}
.hiw-steps h3{font-size:17px;margin:0 0 8px;color:#fff;letter-spacing:-.01em}
.hiw-steps p{font-size:13.8px;line-height:1.55;color:#9aa7b5;margin:0}
@media (max-width:820px){
  .hiw-steps{grid-template-columns:1fr 1fr;gap:30px}
  .hiw-steps::before{display:none}
}
@media (max-width:520px){.hiw-steps{grid-template-columns:1fr}}

/* ===== Cohesion + polish pass ===== */

/* Why it matters — lede on top, then two SYMMETRIC stats (one left, one right) */
.problem-lede{max-width:860px}
.problem-facts{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:44px;align-items:start;
}
.problem-facts .fact-num{font-size:clamp(48px,6vw,82px)}
.problem-bridge{margin:48px 0 0;max-width:820px;color:#c4cdd8;font-size:18px;line-height:1.55}
@media (max-width:760px){.problem-facts{grid-template-columns:1fr;gap:30px}}

/* Cognitive index — big gradient domain numerals + row hover */
.cidx{counter-reset:cdom}
.cidx-group{counter-increment:cdom}
.cidx-num{display:none}
.cidx-dom::before{
  content:counter(cdom,decimal-leading-zero);display:block;margin-bottom:10px;
  font:800 54px/0.9 'Plus Jakarta Sans',sans-serif;letter-spacing:-.04em;color:#fff;
}
.cidx-domname{font-size:21px}
.cidx-row{margin:0 -14px;padding-left:14px;padding-right:14px;border-radius:10px;transition:background .16s ease}
.cidx-row:hover{background:rgba(255,255,255,.03)}

/* kill the stray bright-blue hairline between header and hero on product pages */
.lng .product-hero{border-top:0}

/* Evidence "what this page is based on" — editorial ledger (no cards) */
.ev-list{margin-top:8px;border-top:1px solid rgba(255,255,255,.1)}
.ev-row{display:grid;grid-template-columns:230px 1fr;gap:48px;padding:22px 14px;margin:0 -14px;
  border-bottom:1px solid rgba(255,255,255,.07);text-decoration:none;border-radius:10px;transition:background .16s ease}
.ev-row:hover{background:rgba(255,255,255,.03)}
.ev-k{color:#5fb8ff;font:700 12px/1.4 'Plus Jakarta Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ev-body strong{display:block;color:#eaf1f8;font-size:16.5px;line-height:1.4;font-weight:600;margin:0 0 6px}
.ev-src{color:#8794a4;font-size:13.5px}
.ev-arrow{color:#3f5266;font-size:12px}
.ev-row:hover .ev-arrow{color:#5fd0ff}
@media (max-width:760px){.ev-row{grid-template-columns:1fr;gap:8px}}

/* transparent hero cutout must blend into the gradient — no rectangle frame/shadow */
.lng .product-hero-art img{box-shadow:none;border-radius:0;background:transparent}

/* Results — reworked shape: anchor stat row + 3-up dose grid (solid white numbers) */
.result-lead-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:46px;align-items:center;margin-top:38px}
.result-lead-text{max-width:560px}
.result-lead-text .result-label{margin-bottom:8px}
.result-lead-text p{margin:0;color:#aab4c2;font-size:16px;line-height:1.65}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:48px;padding-top:40px;border-top:1px solid rgba(255,255,255,.12)}
.result-stat strong{display:block;color:#fff;font-size:clamp(34px,4.4vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1;margin-bottom:14px}
.result-stat span{display:block;color:#aab4c2;font-size:15px;line-height:1.6}
@media (max-width:820px){.result-grid{grid-template-columns:1fr;gap:26px;padding-top:30px}.result-lead-row{grid-template-columns:1fr;gap:16px}}

/* Who it's for — balanced 2x2 linked grid */
.aud-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:6px;border-top:1px solid rgba(255,255,255,.12)}
.aud-item{display:flex;flex-direction:column;gap:9px;padding:26px 28px 28px;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);transition:background .16s ease}
.aud-item:nth-child(odd){padding-left:0;border-right:1px solid rgba(255,255,255,.08)}
.aud-item:nth-child(even){padding-left:32px}
.aud-item:hover{background:rgba(255,255,255,.025)}
.aud-h{display:inline-flex;align-items:center;gap:8px;color:#edf2f8;font:600 17.5px/1.2 'Plus Jakarta Sans',sans-serif;transition:color .16s ease}
.aud-item:hover .aud-h{color:#9fd4ff}
.aud-arrow{color:#5fd0ff;font-size:12px;opacity:0;transform:translateX(-4px);transition:opacity .16s ease,transform .16s ease}
.aud-item:hover .aud-arrow{opacity:1;transform:translateX(0)}
.aud-d{color:#9aa7b5;font-size:14.5px;line-height:1.55;max-width:360px}
@media (max-width:680px){.aud-grid{grid-template-columns:1fr}.aud-item,.aud-item:nth-child(odd){border-right:0;padding-left:0}.aud-item:nth-child(even){padding-left:0}}

/* cidx: drop the arbitrary 01-05 numerals, lead with domain name + skill count */
.cidx-dom::before{display:none !important}
.cidx-domname{font-size:24px}
.cidx-count{margin-top:18px;color:#5f6c7a;font:600 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase}

/* How it works = variation B (big editorial numerals, no line) + bigger image */
.platform-flow{grid-template-columns:minmax(300px,0.62fr) minmax(0,1.38fr);gap:56px}
.pf-steps{display:flex;flex-direction:column;gap:34px}
.pf-step{display:grid;grid-template-columns:74px 1fr;gap:22px;align-items:start}
.pf-num{font:800 48px/.78 'Plus Jakarta Sans',sans-serif;color:#2a4f6e;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pf-body h3{margin:0 0 6px}
.pf-body p{margin:0;color:#9ba7b6;font-size:15px;line-height:1.6;max-width:430px}
@media (max-width:820px){.platform-flow{grid-template-columns:1fr;gap:30px}}

/* What you get — two-column benefit ledger (elderly / B2B) */
.benefit-cols{display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-top:30px;border-top:1px solid var(--p-rule-strong)}
.benefit-cols .bcol{padding-top:28px}
.benefit-cols .bcol h3{font-size:18px;color:var(--p-accent);margin:0 0 12px}
.benefit-cols .bcol ul{list-style:none;margin:0;padding:0}
.benefit-cols .bcol li{padding:13px 0;border-bottom:1px solid var(--p-rule);color:var(--p-text-dim);font-size:15px;line-height:1.55}
.benefit-cols .bcol li strong{color:var(--p-ink);font-weight:600}
@media (max-width:760px){.benefit-cols{grid-template-columns:1fr;gap:0}.benefit-cols .bcol:last-child{padding-top:8px}}

/* ===== Elderly page distinct components ===== */
/* tri: 3-item grid (the gap / rollout) */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:30px;border-top:1px solid var(--p-rule-strong);padding-top:32px}
.tri-item h3{font-size:18px;color:var(--p-ink);margin:0 0 8px}
.tri-item p{margin:0;color:var(--p-text-dim);font-size:15px;line-height:1.6}
@media (max-width:760px){.tri{grid-template-columns:1fr;gap:24px}}

/* persp: three points of view */
.persp{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:32px}
.persp-col{position:relative;padding-top:2px}
.persp-col::before{content:"";display:block;width:46px;height:3px;border-radius:2px;background:var(--p-accent-bar);margin-bottom:20px}
.persp-tag{display:block;color:var(--p-ink);font:700 17px/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;margin-bottom:12px}
.persp-col p{margin:0;color:var(--p-text);font-size:15.5px;line-height:1.65}
@media (max-width:760px){.persp{grid-template-columns:1fr;gap:28px}}

/* statband: horizontal stat row */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:30px;padding:36px 0;border-top:1px solid var(--p-rule-strong);border-bottom:1px solid var(--p-rule-strong)}
.statband-item strong{display:block;font:800 clamp(34px,4vw,46px)/1 'Plus Jakarta Sans',sans-serif;color:var(--p-ink);letter-spacing:-.03em;margin-bottom:10px}
.statband-item span{color:var(--p-text-dim);font-size:13.5px;line-height:1.5}
@media (max-width:760px){.statband{grid-template-columns:1fr 1fr;gap:28px}}

/* ev-inline: compact evidence links */
.ev-inline{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 24px}
.ev-inline a{color:var(--p-accent);text-decoration:none;font-size:15.5px;border-bottom:1px solid rgba(95,184,255,.25)}
.ev-inline a:hover{border-bottom-color:var(--p-accent)}

/* What to expect (elderly) — visual: lead stat + proportional bars */
.wtx-lead{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;margin-top:30px;padding-bottom:32px;border-bottom:1px solid var(--p-rule-strong)}
.wtx-big{font:800 clamp(56px,8vw,92px)/0.9 'Plus Jakarta Sans',sans-serif;color:var(--p-ink);letter-spacing:-.04em}
.wtx-leadtext{max-width:520px}
.wtx-leadtext strong{display:block;color:var(--p-ink);font-size:18px;margin-bottom:6px}
.wtx-leadtext span{color:var(--p-text-dim);font-size:15px;line-height:1.6}
.bars-label{margin:30px 0 0;color:var(--p-text-dim);font-size:15px}
.bars{margin-top:22px;display:flex;flex-direction:column;gap:24px}
.bar-head{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.bar-head strong{font:800 26px/1 'Plus Jakarta Sans',sans-serif;color:var(--p-ink);letter-spacing:-.02em;min-width:72px}
.bar-head span{color:var(--p-text-dim);font-size:14.5px}
.bar-track{height:10px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden;max-width:640px}
.bar-fill{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--p-accent-deep),var(--p-cyan))}
@media (max-width:760px){.wtx-lead{grid-template-columns:1fr;gap:14px}}

/* The science (elderly) — gorgeous 3-study grid (accent-rule motif) */
.studies{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin:42px 0 10px}
.study-col{position:relative;display:flex;flex-direction:column;gap:18px;text-decoration:none;padding:4px 0 6px;transition:transform .2s ease}
.study-col::before{content:"";display:block;width:46px;height:3px;border-radius:2px;background:var(--p-accent-bar);margin-bottom:22px;transition:width .2s ease}
.study-col:hover{transform:translateY(-3px)}
.study-col:hover::before{width:66px}
.study-tag{color:var(--p-accent);font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.study-col p{margin:0;color:var(--p-text);font-size:15.5px;line-height:1.6;flex:1}
.study-link{color:var(--p-cyan);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.study-col:hover .study-link{color:#fff}
.study-link .ar{transition:transform .2s ease}
.study-col:hover .study-link .ar{transform:translate(2px,-2px)}
@media (max-width:760px){.studies{grid-template-columns:1fr;gap:6px}.study-col{padding-bottom:18px}}

/* Why it matters — V5 minimal inline checklist */
.checklist{display:flex;flex-direction:column;gap:18px;max-width:780px;margin-top:30px}
.ck-row{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:baseline}
.ck{color:var(--p-cyan);font-weight:900;font-size:17px;line-height:1}
.ck-row p{margin:0;color:var(--p-text-dim);font-size:15.5px;line-height:1.6}
.ck-row p b{color:var(--p-ink);font-weight:600}

/* The science (elderly) — full-width evidence list with type pills */
.evrows{margin-top:36px;border-top:1px solid var(--p-rule-strong)}
.evrow{display:grid;grid-template-columns:190px 1fr 26px;gap:30px;align-items:center;
  padding:24px 16px 24px 0;border-bottom:1px solid var(--p-rule);text-decoration:none;border-radius:10px;transition:background .18s ease}
.evrow:hover{background:var(--p-hover)}
.evrow-tag{justify-self:start;display:inline-block;padding:6px 13px;border-radius:999px;
  background:rgba(95,184,255,.1);border:1px solid rgba(95,184,255,.24);
  color:var(--p-accent);font:700 11px/1.3 'Plus Jakarta Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.evrow-claim{color:#dbe4ee;font-size:16px;line-height:1.55}
.evrow-arrow{justify-self:end;color:var(--p-cyan);font-size:16px;opacity:.45;transition:opacity .18s ease,transform .18s ease}
.evrow:hover .evrow-arrow{opacity:1;transform:translate(2px,-2px)}
@media (max-width:760px){.evrow{grid-template-columns:1fr;gap:10px;padding:20px 0}.evrow-arrow{display:none}}

/* The science (elderly) — borderless featured proof + 2 supporting */
.sci-feat{margin-top:34px;max-width:840px}
.sci-feat-tag{color:var(--p-accent);font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.sci-feat-claim{margin:16px 0 16px;color:#fff;font-size:clamp(21px,2.5vw,28px);line-height:1.32;letter-spacing:-.015em}
.sci-feat-claim strong{color:var(--p-cyan);font-weight:700}
.sci-feat-link{color:var(--p-cyan);font-weight:600;font-size:15px;display:inline-flex;gap:7px;align-items:center;text-decoration:none}
.sci-feat-link .ar{transition:transform .2s ease}
.sci-feat-link:hover .ar{transform:translate(2px,-2px)}
.sci-more2{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:44px;border-top:1px solid var(--p-rule-strong)}
.sci-more2 a{display:grid;grid-template-columns:1fr 20px;gap:6px 14px;text-decoration:none;padding:22px 0;border-bottom:1px solid var(--p-rule);transition:opacity .18s ease}
.sci-more2 a .t{grid-column:1;color:var(--p-accent);font:700 11px/1.4 'Plus Jakarta Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.sci-more2 a .c{grid-column:1;color:var(--p-text-dim);font-size:14.5px;line-height:1.55}
.sci-more2 a .ar{grid-column:2;grid-row:1;align-self:start;color:var(--p-cyan);opacity:.45;transition:opacity .18s ease,transform .18s ease}
.sci-more2 a:hover .ar{opacity:1;transform:translate(2px,-2px)}
.sci-more2 a:hover .c{color:#fff}
@media (max-width:760px){.sci-more2{grid-template-columns:1fr;gap:0}}

/* The science (elderly) — balanced 2-column: framing | evidence list */
.sci-grid{display:grid;grid-template-columns:minmax(280px,0.82fr) minmax(380px,1.18fr);gap:64px;align-items:start;margin-top:4px}
.sci-intro h2{margin-bottom:16px}
.sci-intro > p{color:var(--p-text);font-size:16px;line-height:1.7;margin:0;max-width:420px}
.sci-note{margin-top:24px;color:var(--p-muted);font-size:13.5px;font-style:italic;line-height:1.65;max-width:420px}
.sci-evlist{border-top:1px solid var(--p-rule-strong)}
.ev{display:grid;grid-template-columns:1fr 22px;gap:7px 16px;text-decoration:none;padding:24px 4px;border-bottom:1px solid var(--p-rule);border-radius:8px;transition:background .18s ease}
.ev:hover{background:var(--p-hover)}
.ev .t{grid-column:1;color:var(--p-accent);font:700 11px/1.4 'Plus Jakarta Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ev .c{grid-column:1;color:#dbe4ee;font-size:15.5px;line-height:1.55}
.ev .ar{grid-column:2;grid-row:1/span 2;align-self:center;color:var(--p-cyan);opacity:.45;transition:opacity .18s ease,transform .18s ease}
.ev:hover .ar{opacity:1;transform:translate(2px,-2px)}
@media (max-width:820px){.sci-grid{grid-template-columns:1fr;gap:30px}}

/* ---- Mobile site header ----
   Both header chromes (.site-header from site.css and the .lng product variant)
   lay the logo and the nav out as one flex row with no wrapping strategy, so on a
   phone the links pile up on 2-3 lines and the CTA breaks mid-word over the logo.
   Below, the nav drops to its own row and becomes a single horizontally
   swipeable strip: every link stays on one line, nothing overlaps, and the
   markup is untouched. Loaded last, so these win over the base rules. */

/* Product pages carry 6 links + CTA, so they run out of room well before phones do. */
@media (max-width: 900px) {
  .lng .site-header { padding: 14px 20px; }
  .lng .site-header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .lng .site-header-inner nav,
  .lng .site-header nav {
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 0 20px 2px;
  }
  .lng .site-header nav::-webkit-scrollbar,
  .lng .site-header-inner nav::-webkit-scrollbar { display: none; }
  .lng .site-header-inner nav a,
  .lng .site-header nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  .site-header { padding: 11px 16px; }
  .site-header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }
  .logo { line-height: 0; }
  .logo .brand,
  .lng .logo .brand { width: 106px; height: 30px; }

  .site-header nav,
  .site-header-inner nav,
  .lng .site-header nav,
  .lng .site-header-inner nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 17px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed to the screen edges so a half-visible link signals the strip scrolls */
    margin: 0 -16px;
    padding: 0 16px 2px;
  }
  .site-header nav::-webkit-scrollbar,
  .site-header-inner nav::-webkit-scrollbar,
  .lng .site-header nav::-webkit-scrollbar,
  .lng .site-header-inner nav::-webkit-scrollbar { display: none; }

  .site-header nav a,
  .site-header-inner nav a,
  .lng .site-header nav a,
  .lng .site-header-inner nav a {
    margin-left: 0;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13.5px;
  }
  .site-header nav a.header-cta,
  .site-header-inner nav a.header-cta,
  .lng .site-header nav a.header-cta,
  .lng .site-header-inner nav a.header-cta {
    margin-left: 0;
    padding: 7px 14px;
    font-size: 13px;
  }
}

/* ---- Comparison tables on mobile ----
   .compare-wrap clips with overflow:hidden. On a phone the content column is
   334px wide while these tables need 395-576px even after the compacting rules
   in site.css (they are already at 13px/8px there — their min-content width is
   simply larger), so every column past the right edge was unreachable: no
   scrolling, no zooming, no way to read it. One table also dragged the whole
   page 28px sideways.

   Letting the wrapper scroll on its own axis keeps every column reachable and
   contains the overflow, so the page itself stops moving. The table keeps its
   natural column widths, so nothing is squeezed or re-wrapped, and no markup
   or copy changes. Above 720px the wrapper is untouched and still clips. */
@media (max-width: 720px) {
  .compare-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Evidence timeline on mobile ----
   The timeline places its dots, years and hover labels absolutely, offset by
   translateX(-50%), and .timeline-dot::after keeps a white-space:nowrap label
   in the layout even at opacity 0. The ones nearest the right edge therefore
   stick out past the box — invisible, but enough to drag the whole page
   sideways on a phone. On a desktop the page gutter absorbs it, which is why
   it only shows up here. Clipping the box contains it; nothing visible is cut,
   and the hover label is a pointer-only affordance a phone never triggers. */
@media (max-width: 720px) {
  .timeline-wrap { overflow: hidden; }
}

/* ---- index scorecard on mobile ----
   table.score has eight columns and sits directly in the flow with no wrapper
   to scroll, so at 646px wide it dragged the page 284px sideways and its right
   columns were cut off. It cannot be made to fit: five of the columns are
   chips with a 38px min-width and the page column holds full slugs.

   Making the table itself the scroll container is what the missing wrapper
   would have done. Chrome and WebKit keep thead and tbody in one anonymous
   table here, so the columns stay aligned — verified: header and body cells
   land on identical x positions (28, 119, 206, 287, 370, 458, 522, 607). */
@media (max-width: 720px) {
  table.score {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- comparison.html hero and cards on mobile ----
   This page carries its own <style> block. Two of its layouts are fixed-count
   and never collapse: .hero is a 4-item flex row, which squeezed its trailing
   paragraph into a column a couple of words wide, and .ucards is a hard
   repeat(3, 1fr) grid, giving three ~110px columns on a phone. Selectors are
   prefixed with body to outrank the page's own inline rules, which load after
   this file. All three classes exist only on comparison.html. */
@media (max-width: 720px) {
  body .hero {
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 18px 20px;
  }
  body .hero .meta { flex: 1 0 100%; max-width: none; }
  body .ucards { grid-template-columns: 1fr; }
}