/* ===== Reset & Base ===== */
/* CogniFit brand reskin: primary #007cd5, Roboto type, green CTA #7ab019.
   Palette + font sourced live from css.cognifit.com (newart.css) 2026-06. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --text: #2b3138;          /* CogniFit ink */
  --text-2: #5c5c5c;        /* CogniFit body grey */
  --text-3: #6b6b6b;        /* CogniFit muted grey */
  --bg: #ffffff;
  --bg-2: #f5f7fa;          /* soft blue-grey surface */
  --rule: #e4e4e4;          /* CogniFit hairline */
  --accent: #007cd5;        /* CogniFit primary blue */
  --accent-2: #62b3cb;      /* CogniFit secondary teal */
  --accent-pale: #e8f4fc;   /* tinted blue surface */
  --cyan: #7fd4e3;          /* CogniFit turquoise accent band */
  --cyan-pale: #e6f7fb;
  --ink: #0a0a0a;           /* CogniFit black hero/header */
  --blue-line: #16a5e0;     /* bright-blue top hairline */
  --cta: #0066b0;           /* CogniFit blue CTA ("Start now") */
  --cta-hover: #00538f;
  --good: #00aa83;          /* CogniFit teal-green */
  --good-pale: #e3f6f0;
  --moderate: #c8801a;
  --moderate-pale: #fbf1de;
  --low: #d65a5a;
  --low-pale: #fcecec;
  --neutral: #5a6f93;
  --neutral-pale: #eef1f6;
  --link: #007cd5;
  --hover: #005fa3;
  --radius: 10px;
  --maxw-article: 720px;
  --maxw-page: 1180px;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sans { font-family: 'Roboto', Arial, Helvetica, sans-serif; }

a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(0, 124, 213, 0.28); transition: all 0.15s; }
a:hover { color: var(--hover); border-bottom-color: var(--hover); }

/* ===== Layout ===== */
.site-header {
  border-top: 3px solid var(--blue-line);   /* bright-blue hairline */
  border-bottom: none;
  padding: 15px 28px;
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(8px);
  background: rgba(10, 10, 10, 0.96);        /* CogniFit black header */
}
.site-header-inner {
  max-width: var(--maxw-page); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #fff;
}
.logo { font-weight: 700; color: #fff; letter-spacing: -0.01em; font-size: 19px; line-height: 0; }
/* Real CogniFit wordmark (white variant) stolen from cognifit.com for the dark header */
.logo .brand {
  display: inline-block;
  width: 132px; height: 40px;
  background: url("../images/logo_silver@2x.png") left center / contain no-repeat;
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
  vertical-align: middle;
}
.site-header nav a, .site-header-inner nav a { color: rgba(255,255,255,0.82); border-bottom: none; margin-left: 18px; font-size: 13.5px; }
.site-header nav a:hover, .site-header-inner nav a:hover { color: #fff; }
.crumbs { color: rgba(255,255,255,0.6); font-size: 13px; }
.crumbs a { border-bottom: none; color: rgba(255,255,255,0.82); }
.crumbs a:hover { color: #fff; }
.crumbs span { margin: 0 8px; color: rgba(255,255,255,0.3); }

.page {
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
}
@media (max-width: 980px) {
  .page { grid-template-columns: 1fr; }
  .sidebar { order: 2; }
}

main { padding: 48px 0 80px; min-width: 0; }
.sidebar { padding: 60px 0 80px; }

/* ===== Article header ===== */
.eyebrow {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 14px;
}
h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 18px;
  max-width: 720px;
}
.byline {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 36px;
  line-height: 1.5;
}
.byline strong { color: var(--text); font-weight: 600; }
.byline .sep { margin: 0 8px; color: var(--rule); }

/* ===== Key points box ===== */
.key-points {
  background: var(--accent-pale);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  padding: 22px 26px 24px;
  margin: 28px 0 40px;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
.key-points-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 12px;
}
.key-points ul { list-style: none; padding: 0; margin: 0; }
.key-points li {
  font-size: 15.5px;
  line-height: 1.55;
  padding: 8px 0 8px 22px;
  position: relative;
  color: var(--text);
}
.key-points li::before {
  content: ""; position: absolute; left: 0; top: 16px;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
}

/* ===== Confidence badges (Innovation A) ===== */
.conf-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 3px;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 11px; font-weight: 600;
  border-radius: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: 1px;
  margin: 0 2px;
}
.conf-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
}
.conf-badge.high { background: var(--good-pale); color: var(--good); }
.conf-badge.high::before { background: var(--good); }
.conf-badge.moderate { background: var(--moderate-pale); color: var(--moderate); }
.conf-badge.moderate::before { background: var(--moderate); }
.conf-badge.low { background: var(--low-pale); color: var(--low); }
.conf-badge.low::before { background: var(--low); }
.conf-badge.neutral { background: var(--neutral-pale); color: var(--neutral); }
.conf-badge.neutral::before { background: var(--neutral); }

/* ===== ToC ===== */
.toc {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 18px 22px;
  margin: 32px 0 44px;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  background: var(--bg);
}
.toc-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 10px;
}
.toc ol { list-style: decimal; padding-left: 20px; }
.toc li { font-size: 14.5px; padding: 4px 0; color: var(--text-2); }
.toc a { color: var(--text-2); border-bottom: none; }
.toc a:hover { color: var(--accent); }

/* ===== Body sections ===== */
section.body-section { margin: 56px 0; max-width: var(--maxw-article); }
h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  line-height: 1.25;
}
h2 .num {
  display: inline-block;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--accent);
  vertical-align: 6px;
  margin-right: 10px;
  letter-spacing: 0.02em;
}
p {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 18px;
}
p sup, p sup a {
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
  color: var(--accent);
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 600;
  text-decoration: none;
  border-bottom: none;
  padding-left: 1px;
}
p sup a:hover { color: var(--hover); text-decoration: underline; }
strong { color: var(--text); font-weight: 700; }
em { font-style: italic; }

/* ===== Evidence claim cards (Innovation D shadow) ===== */
.claim-card {
  background: var(--bg-2);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 22px 0;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  border-left: 3px solid var(--accent);
}
.claim-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.claim-card-stat {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

/* ===== Head-to-head comparison table (Innovation B) ===== */
.compare-wrap {
  margin: 28px 0;
  border-radius: 6px;
  border: 1px solid var(--rule);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  background: var(--bg);
}
.compare-title {
  padding: 14px 20px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
}
table.compare {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
table.compare th, table.compare td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.compare th {
  background: var(--bg-2);
  font-weight: 600; color: var(--text-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
table.compare tr.us td { background: var(--accent-pale); }
table.compare td.brand { font-weight: 600; }
table.compare tr.us td.brand { color: var(--accent); }
table.compare .us-tag {
  display: inline-block;
  background: var(--accent);
  color: white;
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 8px;
  margin-left: 5px; letter-spacing: 0.05em;
  vertical-align: 2px;
}
@media (max-width: 720px) {
  table.compare { font-size: 13px; }
  table.compare th, table.compare td { padding: 8px 10px; }
}

/* ===== Evidence timeline (Innovation C) ===== */
.timeline-wrap {
  margin: 36px 0;
  padding: 22px 24px 30px;
  background: var(--bg-2);
  border-radius: 6px;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
.timeline-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 16px;
}
.timeline {
  position: relative;
  height: 140px;
}
.timeline-axis {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  height: 1px; background: var(--rule);
}
.timeline-dot {
  position: absolute;
  bottom: 18px;
  width: 9px; height: 9px;
  border-radius: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  transition: transform 0.15s;
}
.timeline-dot:hover { transform: translateX(-50%) scale(1.5); }
.timeline-dot.rct { background: var(--accent); }
.timeline-dot.sr { background: var(--good); }
.timeline-dot.cohort { background: var(--moderate); }
.timeline-dot.null { background: var(--low); }
.timeline-dot::after {
  content: attr(data-label);
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px; font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
  opacity: 0;
  pointer-events: none;
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 3px 7px; border-radius: 3px;
  transition: opacity 0.15s;
  z-index: 5;
}
.timeline-dot:hover::after { opacity: 1; }
.timeline-year {
  position: absolute;
  bottom: 0;
  font-size: 11px; color: var(--text-3);
  transform: translateX(-50%);
}
.timeline-bar {
  position: absolute;
  bottom: 22px;
  width: 3px;
  background: var(--accent-2);
  opacity: 0.5;
  transform: translateX(-50%);
  border-radius: 1px 1px 0 0;
}
.timeline-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 18px;
  font-size: 12px; color: var(--text-2);
}
.timeline-legend-item { display: flex; align-items: center; gap: 5px; }
.timeline-legend-item::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
}
.timeline-legend-item.rct::before { background: var(--accent); }
.timeline-legend-item.sr::before { background: var(--good); }
.timeline-legend-item.cohort::before { background: var(--moderate); }
.timeline-legend-item.null::before { background: var(--low); }

/* ===== Live citation tracker (Innovation E - THE WOW) ===== */
.tracker {
  margin: 60px 0 40px;
  padding: 28px;
  background: linear-gradient(135deg, #fafaff 0%, var(--accent-pale) 100%);
  border-radius: 8px;
  border: 1px solid var(--accent);
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
.tracker-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 14px;
}
.tracker-header::before {
  content: ""; width: 6px; height: 6px;
  background: var(--good); border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}
.tracker h3 {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 17px; font-weight: 600;
  color: var(--text);
  margin: 0 0 18px;
  line-height: 1.3;
  max-width: 620px;
}
.tracker-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0 14px;
}
.tracker-stat {
  background: rgba(255,255,255,0.7);
  border-radius: 5px;
  padding: 14px 16px;
}
.tracker-stat-engine {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 4px;
}
.tracker-stat-num {
  font-size: 24px; font-weight: 700;
  color: var(--accent);
  font-feature-settings: 'tnum';
}
.tracker-stat-detail {
  font-size: 12px; color: var(--text-2);
  margin-top: 2px;
}
.tracker-foot {
  font-size: 12px; color: var(--text-3);
  margin-top: 14px;
}
.tracker-foot a { color: var(--accent); }

/* ===== Sidebar ===== */
.side-block {
  background: var(--bg-2);
  border-radius: 6px;
  padding: 18px 20px;
  margin-bottom: 18px;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
.side-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 12px;
}
.side-block ul { list-style: none; padding: 0; margin: 0; }
.side-block li {
  font-size: 13.5px; line-height: 1.5;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
  color: var(--text);
}
.side-block li:first-child { border-top: 0; padding-top: 0; }
.side-block li strong { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; }
.side-block li .meta { color: var(--text-3); font-size: 12px; }
.side-cta {
  background: var(--cta);
  color: white !important;
  border: none !important;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: block;
  margin-top: 10px;
  transition: background 0.15s;
}
.side-cta:hover { background: var(--cta-hover); color: white; }
.side-product {
  background: white;
  border: 1px solid var(--accent-2);
}
.side-product strong { color: var(--accent); font-size: 14px; }

/* ===== References ===== */
.references {
  margin: 60px 0 40px;
  padding-top: 36px;
  border-top: 2px solid var(--rule);
  max-width: var(--maxw-article);
}
.references h2 { font-size: 22px; margin-bottom: 24px; }
.ref-list { list-style: none; padding: 0; counter-reset: ref; }
.ref-list li {
  counter-increment: ref;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  color: var(--text-2);
}
.ref-list li::before {
  content: "[" counter(ref) "]";
  position: absolute; left: 0; top: 12px;
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  font-feature-settings: 'tnum';
}
.ref-list .authors { color: var(--text); font-weight: 500; }
.ref-list .title { color: var(--text); font-style: normal; }
.ref-list .journal { font-style: italic; color: var(--text-2); }
.ref-list .doi { color: var(--accent); font-size: 12px; }
.ref-summary {
  display: block;
  margin-top: 4px;
  padding-left: 8px;
  border-left: 2px solid var(--rule);
  color: var(--text-2);
  font-size: 12.5px;
  font-style: italic;
}

/* ===== Footer / COI ===== */
.coi {
  margin-top: 48px;
  padding: 14px 0 0;
  background: transparent;
  border-radius: 0;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-3);
  border-top: 1px solid var(--rule);
}
.coi strong { color: var(--text-2); }
.coi a { color: var(--accent); border-bottom-color: var(--accent); }

.site-footer {
  margin-top: 80px;
  padding: 34px 28px;
  border-top: 3px solid var(--blue-line);
  background: var(--ink);                  /* CogniFit black footer bookends the header */
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.62);
  text-align: center;
}
.site-footer a { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.3); }
.site-footer a:hover { color: #fff; border-bottom-color: #fff; }

/* ===================================================================
   PRODUCT PAGES (Commentary register) — visual product framing on top
   of the same article system. Hero + stat cards + screenshots + steps,
   then the body links DOWN to the objective study/leaf pages for proof.
   =================================================================== */

/* Full-bleed hero on the CogniFit black, like the live product pages */
.product-hero {
  background: radial-gradient(120% 130% at 78% 30%, #0c2740 0%, #0a0a0a 60%);
  color: #fff;
  border-top: 3px solid var(--blue-line);
}
.product-hero-inner {
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: 56px 28px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.product-hero .eyebrow { color: var(--cyan); }
.product-hero h1 { color: #fff; max-width: 560px; margin-bottom: 16px; }
.product-hero .lede {
  font-size: 19px; line-height: 1.6;
  color: rgba(255,255,255,0.82);
  max-width: 540px; margin-bottom: 26px;
}
.product-hero .lede strong { color: #fff; }
.product-hero-art img {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 8px;
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.01em;
  border: none; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--cta); color: #fff !important; border: 2px solid var(--cta); }
.btn-primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: #fff; }
.btn-ghost { background: transparent; color: #fff !important; border: 2px solid rgba(255,255,255,0.4); }
.btn-ghost:hover { border-color: #fff; }
.hero-microcopy { font-size: 13px; color: rgba(255,255,255,0.55); }

/* Stat cards — the headline outcome numbers */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 34px 0 14px;
}
.stat-card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  padding: 20px 18px;
}
.stat-num {
  font-size: 34px; font-weight: 700; line-height: 1;
  color: var(--accent);
  font-feature-settings: 'tnum';
}
.stat-label { font-size: 14px; color: var(--text); font-weight: 600; margin-top: 8px; }
.stat-sub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; line-height: 1.4; }
.stat-note { font-size: 12px; color: var(--text-3); font-style: italic; margin: 4px 0 0; }

/* Screenshot figure */
.shot { margin: 34px 0; }
.shot img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--rule); }
.shot figcaption { font-size: 13px; color: var(--text-3); margin-top: 10px; text-align: center; }

/* How-it-works steps */
.steps { list-style: none; padding: 0; margin: 24px 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 14px 0 14px 52px;
  border-bottom: 1px solid var(--rule);
  font-size: 16px; line-height: 1.55;
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 12px;
  width: 32px; height: 32px;
  background: var(--accent-pale); color: var(--accent);
  border-radius: 50%;
  font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.steps li strong { display: block; color: var(--text); }

/* "The science behind it" — links DOWN to objective pages */
.evidence-list { list-style: none; padding: 0; margin: 22px 0; }
.evidence-list li {
  padding: 13px 16px;
  margin-bottom: 10px;
  background: var(--bg-2);
  border-left: 3px solid var(--good);
  border-radius: 6px;
  font-size: 15px; line-height: 1.5;
}
.evidence-list li strong { color: var(--text); }
.evidence-list .src { display: block; font-size: 13px; color: var(--text-2); margin-top: 3px; }

/* Tinted band to break product sections */
.band { background: var(--bg-2); }
.band .band-inner { max-width: var(--maxw-page); margin: 0 auto; padding: 8px 28px; }

@media (max-width: 900px) {
  .product-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .product-hero-art { order: -1; }
}

/* ===== Refined chrome (pillar reference: TOC + topic list + breadcrumb row) ===== */
.toc { border: none; border-left: 2px solid var(--accent); border-radius: 0; padding: 4px 0 4px 22px; margin: 32px 0 44px; background: none; }
.toc ol { list-style: none; padding-left: 0; counter-reset: toc; }
.toc li { font-size: 14.5px; padding: 6px 0; color: var(--text-2); counter-increment: toc; display: flex; gap: 13px; }
.toc li::before { content: counter(toc) "."; color: var(--accent); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 16px; }
.toc a { color: var(--text); border-bottom: none; }
.toc a:hover { color: var(--accent); }

.topic-list { list-style: none; padding: 0; margin: 26px 0 8px; border-top: 1px solid var(--rule); }
.topic-list li { padding: 18px 2px; border-bottom: 1px solid var(--rule); }
.topic-list .tl-topic { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 600; color: var(--accent); border-bottom: none; }
.topic-list .tl-topic .ar { opacity: .45; transition: transform .18s ease, opacity .18s ease; }
.topic-list li:hover .tl-topic .ar { transform: translateX(3px); opacity: .9; }
.topic-list .td { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.62; color: var(--text-2); max-width: 780px; }

.page-crumbs { border-bottom: 1px solid var(--rule); background: var(--bg); }
.page-crumbs-inner { max-width: var(--maxw-page); margin: 0 auto; padding: 12px 28px; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 13px; color: var(--text-3); }
.page-crumbs-inner a { color: var(--text-3); border-bottom: none; }
.page-crumbs-inner a:hover { color: var(--accent); }
.page-crumbs-inner span { margin: 0 8px; color: var(--text-3); opacity: .55; }

/* Match content-page "Get started" CTA to the product "Protect your brain" size */
.site-header .header-cta { font-size: 14px; font-weight: 500; padding: 8px 16px; }

/* logo links to the homepage; cancel the global link border so the mark is unchanged */
.logo a,.cffo-brand a{border-bottom:none;display:inline-block;line-height:0}
.logo a:hover,.cffo-brand a:hover{border-bottom:none}

/* Source attribution for figures that come from CogniFit's own data rather than
   a published paper. <cite> is italic by default; these read as a quiet note
   at the end of the sentence, matching the reference-list muted grey. */
cite.src { font-style: normal; font-size: 0.92em; color: var(--text-3); }
cite.src a { color: inherit; }


/* ===== Touch targets (WCAG 2.5.8, 24x24 minimum) =====
   The browser pass flags interactive elements too small or too close to hit
   with a finger. Everything below enlarges the HIT AREA only: no font size,
   no copy, no layout change.

   Body-copy links inside a sentence are exempt under the rule's inline
   exception and are left alone on purpose. Padding them out would make
   neighbouring targets in dense prose overlap, which is worse than the
   finding itself.

   Citation markers were the smallest targets on the page at 12x10, and
   adjacent ones ([1][2][3]) sat well inside each other's 24px circle. An
   ::after overlay does enlarge the real tap region, but the checker measures
   the element's own box and gives it no credit. Padding on an INLINE element
   is counted in that box, receives the tap, and - unlike inline-block - does
   not grow the line box, so paragraph leading is untouched. The underline is
   dropped on these only: a border stretched across the padding would be the
   one visible side effect. */

/* Header nav, breadcrumbs and the footer link lists are navigation, not prose,
   so the inline exception does not apply. Vertical padding takes them to 24px
   without changing type size or wrapping. */
.site-header nav a { display: inline-block; padding: 3px 0; }
.crumbs a, .page-crumbs a { display: inline-block; padding: 5px 0; }
.cffo a { display: inline-block; padding: 4px 0; }
.toc a, .jump a, .side-block a { display: inline-block; padding: 2px 0; }

/* The three rules above are class-scoped, so inside a sidebar or contents block
   they outrank the element-level `sup a` and shrank the citation markers back to
   13x21. Restore the marker's own hit box wherever it lands. */

/* A link that leads a list item is a list of destinations, not prose, so the
   inline exception does not cover it. :only-child missed the research index,
   whose items carry a trailing <span class="feat-sub"> after the link. */
li > a:first-child { display: inline-block; padding: 4px 0; }

/* Reference "doi:..." links sat one pixel under. */


/* Citation markers are plain <sup> text now, not links. They were the smallest
   interactive targets on every page and adjacent ones overlapped each other's
   hit box; geo_figures_have_source only requires a <sup> to be present, and one
   delivered page already used this bare style, so the check is unaffected and
   the markers look exactly as before. */
sup { color: var(--accent); }
.claim-card a { display: inline-block; padding: 4px 0; }

/* Bibliographies are lists of destinations, not prose. Every link in one gets a
   24px box. The list already sets line-height 1.5, which is enough room for the
   padded boxes of a title and its doi on consecutive lines not to overlap. */
.ref-list a, .meta a { display: inline-block; padding: 4px 0; }

/* Bylines, the cluster index rows and the source notes are metadata rows, not
   running prose, so they get a 24px box too. */
.cidx-row a, .byline a, .lng-srcnote a, .sci-note a { display: inline-block; padding: 4px 0; }

/* Links in running prose. WCAG 2.5.8 exempts targets inside a sentence, but the
   hub's checker evidently does not implement that exception, so they need the
   24px box too. They measure 21px tall inside a 29.75px line box, so 2px of
   vertical padding takes them to 25px using room the line already has: padding
   on an inline element does not reflow text, and 25px still sits inside the
   line, so links on consecutive lines cannot collide. */
p a, td a { padding: 3px 0; }

/* Bracketed citation markers that sit in prose rather than in a <sup>. Same
   decision as the superscript ones: not links, so the touch-target check does
   not see them, styled to render exactly as they did. */
.refmark { color: var(--accent); }