/* ============================================================
   BRAIN FOG PAGE (page-specific)
   Layout/content unique to brain-fog.html. Generic, reusable
   pieces live in css/aci-design-system.css — this file only
   overrides spacing/typography for this page's sections.
   ============================================================ */

/* ---------- Base container override ----------
   .aci-design-system-container sets overflow-x: hidden without pairing
   overflow-y, which the CSS spec computes as overflow-y: auto — making
   this wrapper an unintended scroll container. That breaks
   position: sticky on .brain-fog-toc__nav, since sticky then calculates
   its offset against this container's scrollport instead of the page's
   real scroll. overflow-x: clip (unlike hidden) doesn't trigger that
   auto-promotion, so it clips horizontally without creating a scroll
   container. */
.aci-design-system-container { overflow-x: clip; }

/* ---------- Hero ---------- */
.aci-design-system-container #hero .atl-hero__bg { object-position: center; }

.aci-design-system-container #hero .atl-hero__published { font-size: 1rem; margin-bottom: var(--space-md); }

.aci-design-system-container #hero .atl-hero__headline { max-width: 670px; }

.aci-design-system-container #hero .atl-hero__body {
  max-width: 570px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.75;
  letter-spacing: 0;
}

.aci-design-system-container #hero .atl-hero__reviewed {
  font-style: normal;
  font-size: 0.6875rem;
  line-height: 1.73;
  letter-spacing: normal;
}

@media (max-width: 700px) {
  .aci-design-system-container #hero { padding-bottom: 22rem; }
  .aci-design-system-container #hero .atl-hero__bg { object-position: center bottom; }
  .aci-design-system-container #hero .atl-hero__copy { text-align: center; }
  .aci-design-system-container #hero .atl-actions { justify-content: center; }
  .aci-design-system-container #hero .container { padding-left: 2rem; padding-right: 2rem; }
  .aci-design-system-container #brain-fog-overview { padding: 3rem 2rem; }
}

/* ---------- Brain Fog Overview (split: image + copy) ---------- */
.aci-design-system-container #brain-fog-overview { padding: 5rem 2rem; }
.aci-design-system-container #brain-fog-overview .atl-split { gap: var(--space-lg); }
.aci-design-system-container #brain-fog-overview .atl-split__media--shaped img {
  border-radius: 0;
  object-fit: contain;
}
.aci-design-system-container #brain-fog-overview .eyebrow { font-size: 1rem; }
.aci-design-system-container #brain-fog-overview .section-heading { font-size: 2rem; letter-spacing: -0.04rem; margin-bottom: var(--space-sm); }
.aci-design-system-container #brain-fog-overview .section-body {
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: -0.02rem;
}
.aci-design-system-container #brain-fog-overview .section-body + .section-body { margin-top: var(--space-md); }

/* ---------- Brain Fog Chapters (floating nav + content) ---------- */
.aci-design-system-container #brain-fog-chapters { padding: 5rem 2rem; }

@media (max-width: 700px) {
  /* Vertical padding only — the horizontal 2rem stays, since several of
     the mobile bleed fixes above (e.g. #brain-fog-symptoms's
     margin-left/right: -2rem) depend on it exactly matching. */
  .aci-design-system-container #brain-fog-chapters { padding-top: 0; padding-bottom: 3rem; }
}

.aci-design-system-container .brain-fog-toc {
  display: grid;
  grid-template-columns: minmax(0, 30%) minmax(0, 70%);
  gap: var(--space-xl);
  align-items: start;
}

.aci-design-system-container .brain-fog-toc__nav {
  position: sticky;
  top: 12rem;
}

.aci-design-system-container .brain-fog-nav__title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.3125rem;
  line-height: 1.45;
  letter-spacing: -0.02625rem;
  color: var(--color-black);
  margin-bottom: var(--space-md);
}

.aci-design-system-container .brain-fog-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.aci-design-system-container .brain-fog-nav__link {
  display: flex;
  align-items: center;
  min-height: 2.9375rem;
  padding-left: 1rem;
  border-left: 0.125rem solid rgba(10, 145, 180, 0.25);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: -0.02rem;
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.aci-design-system-container .brain-fog-nav__link:hover { color: var(--color-primary); }

.aci-design-system-container .brain-fog-nav__link.is-active {
  border-left-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.aci-design-system-container .brain-fog-symptoms__image { display: none; }

@media (max-width: 900px) {
  /* Bare 1fr is shorthand for minmax(auto, 1fr) — the "auto" minimum lets
     any one oversized descendant's min-content (anywhere in the column)
     force the whole track wider than the viewport. minmax(0, 1fr) is the
     single-column equivalent of the minmax(0, ...) already used for the
     desktop 30/70 split above, and closes the same hole. */
  .aci-design-system-container .brain-fog-toc { grid-template-columns: minmax(0, 1fr); }
  .aci-design-system-container .brain-fog-toc__nav { position: static; margin-bottom: 3rem; }
  .aci-design-system-container .brain-fog-nav { background: #51F7F70D; border: 0.0625rem solid #008CB1; padding: 2rem; border-radius: 20px; }
  /* Bleeds past #brain-fog-chapters's own 2rem side padding (the only
     remaining inset now that .container's mobile padding is removed) so
     the background/border reach the true viewport edge, while its own
     2rem padding keeps the text inset to match. */
  .aci-design-system-container #brain-fog-symptoms { background: #51F7F70D; border: 0.0625rem solid #008CB1; padding: 2rem; border-radius: 40px; margin-left: -2rem; margin-right: -2rem; }
  .aci-design-system-container #brain-fog-professional-evaluation { background: #51F7F70D; border: 0.0625rem solid #008CB1; padding: 2rem; border-radius: 40px; margin-left: -2rem; margin-right: -2rem; }
  .aci-design-system-container .brain-fog-symptoms__image {
    display: block;
    width: 100%;
    aspect-ratio: 629 / 516;
    margin-bottom: 2rem;
  }
}

/* ---------- Chapter content (shared by every chapter in the TOC) ----------
   Plain block flow + margin-based spacing (matching #brain-fog-overview
   and the rest of the site) rather than flex+gap — mixing gap with the
   existing margin-top rules below was doubling up the spacing. */
.aci-design-system-container .brain-fog-toc__content .section-heading {
  font-size: 2rem;
  letter-spacing: -0.04rem;
  margin-bottom: var(--space-md);
}
.aci-design-system-container .brain-fog-toc__content .section-body {
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: -0.02rem;
}
.aci-design-system-container .brain-fog-toc__content .section-body + .section-body { margin-top: var(--space-md); }
.aci-design-system-container .brain-fog-toc__content .section-body + .brain-fog-symptom-list,
.aci-design-system-container .brain-fog-toc__content .brain-fog-symptom-list + .section-body,
.aci-design-system-container .brain-fog-toc__content .section-body + .accordion,
.aci-design-system-container .brain-fog-toc__content .brain-fog-accordion__load-more + .section-body { margin-top: var(--space-md); }
.aci-design-system-container .brain-fog-toc__content .eyebrow { font-size: 1rem; }

.aci-design-system-container .brain-fog-chapter + .brain-fog-chapter { margin-top: 4.5rem; }

.aci-design-system-container .brain-fog-chapter__block + .brain-fog-chapter__block { margin-top: 4.5rem; }

@media (max-width: 700px) {
  .aci-design-system-container .brain-fog-chapter__block + .brain-fog-chapter__block { margin-top: 2.5rem; }
}

/* Highlighted chapter card (e.g. "Brain Fog Treatment") — light teal tint,
   teal border, rounded on the left corners only, matching Figma. The card's
   background/border bleeds past BOTH edges of the content column — right to
   the viewport edge, left by the same amount via margin-left (so it doesn't
   just butt up against the text) — via fitToViewport() in
   aci-design-brain-fog.js. padding-left cancels the margin-left shift back
   out so the content itself still lands at the same x position as plain
   (non-highlighted) chapters; the JS then caps each direct child's
   max-width to the content column's natural width so it doesn't stretch
   into the extra bled space. Top/bottom padding stays fixed since bleeding
   is horizontal only.
*/
.aci-design-system-container .brain-fog-chapter--highlight {
  background: rgba(0, 140, 177, 0.05);
  border: 0.0625rem solid var(--color-primary-dark);
  border-radius: 6.25rem 0 0 6.25rem;
  padding: 6rem 0 6rem 6rem;
  margin-left: -6rem;
}
.aci-design-system-container .brain-fog-chapter--highlight .brain-fog-chapter__standalone { margin-top: var(--space-md); }

.aci-design-system-container .brain-fog-treatment__image { display: none; }
.aci-design-system-container .brain-fog-evaluation__image { display: none; }
.aci-design-system-container .brain-fog-included__image { display: none; }

@media (max-width: 900px) {
  /* Bleeds past #brain-fog-chapters's own 2rem side padding so the
     background/border reach the viewport edge, same as #brain-fog-symptoms
     — padding stays to keep the text inset. Applies to every highlighted
     chapter (Treatment, Brain SPECT Imaging, FAQ), not just Treatment,
     so they stay visually consistent with each other. */
  .aci-design-system-container .brain-fog-chapter--highlight { padding: 3rem 2rem; margin-left: -2rem; margin-right: -2rem; border-radius: 100px 0 0 100px; }
  .aci-design-system-container .brain-fog-treatment__image { display: block; width: 100%; aspect-ratio: 593 / 674; margin-bottom: 2rem; }
  .aci-design-system-container .brain-fog-evaluation__image { display: block; width: 100%; aspect-ratio: 350 / 248; margin-bottom: 2rem; }
  .aci-design-system-container .brain-fog-included__image { display: block; width: 100%; aspect-ratio: 670 / 475; margin-bottom: 2rem; }
}

/* Groups the eyebrow tightly with its heading (space-sm), overriding the
   heading's own space-md bottom margin above so they don't double up —
   that margin instead moves to the wrapper, so spacing to the next
   element (first paragraph) still comes out to space-md. */
.aci-design-system-container .brain-fog-chapter__heading { margin-bottom: var(--space-md); }
.aci-design-system-container .brain-fog-chapter__heading .eyebrow { margin-bottom: var(--space-sm); }
.aci-design-system-container .brain-fog-chapter__heading .section-heading { margin-bottom: 0; }

/* Two-column symptom list */
.aci-design-system-container .brain-fog-symptom-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3rem;
}
.aci-design-system-container .brain-fog-symptom-list ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.aci-design-system-container .brain-fog-symptom-list li {
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: -0.02rem;
  color: var(--color-text);
}

@media (max-width: 700px) {
  .aci-design-system-container .brain-fog-symptom-list { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Amen Clinics vs. Traditional Approach comparison table — matches Figma
   node 2099:3707: teal-tinted card behind the Amen Clinics column only,
   centered headers, no checkmarks (plain text), plain (uncircled) "x"
   mark for the traditional column. */
.aci-design-system-container .section-body + .brain-fog-compare,
.aci-design-system-container .brain-fog-symptom-list + .brain-fog-evaluation-cta { margin-top: var(--space-md); align-items: flex-end; }

.aci-design-system-container .brain-fog-compare {
  position: relative;
  width: 100%;
}
/* Two staggered rounded cards behind the table: a narrower teal-tinted
   "Amen Clinics" card sits in front (full height, left-aligned), and a
   wider white "Traditional Approach" card sits behind it, inset from the
   top so its own rounded corners peek out to the right of the front card. */
.aci-design-system-container .brain-fog-compare__bg {
  position: absolute;
  border: 0.0625rem solid var(--color-primary);
  border-radius: 2.5rem;
  pointer-events: none;
}
.aci-design-system-container .brain-fog-compare__bg--traditional {
  top: 6%;
  right: 0;
  bottom: 0;
  left: 62%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0 2.5rem 2.5rem 0;
  border-left: none;
  z-index: 1;
}
.aci-design-system-container .brain-fog-compare__bg--amen {
  top: 0;
  left: 0;
  bottom: -2rem;
  width: 62%;
  background: linear-gradient(180deg, rgba(10, 145, 180, 0.25) 0%, rgba(81, 247, 247, 0.25) 100%);
  border-radius: 40px;
  z-index: 2;
}
.aci-design-system-container .brain-fog-compare__table {
  position: relative;
  z-index: 3;
}
.aci-design-system-container .brain-fog-compare__head,
.aci-design-system-container .brain-fog-compare__row {
  display: grid;
  /* minmax(0, ...) rather than bare 3fr/2fr — bare fr tracks default to
     an auto min size, so on the narrow mobile 2-column layout a single
     unbreakable word in either column could force the track (and the
     whole table) wider than the viewport, same class of bug fixed
     earlier for .brain-fog-toc's single-column grid. */
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
.aci-design-system-container .brain-fog-compare__head span {
  display: block;
  padding: 1.5rem 1.5rem;
  font-family: var(--font-heading);
  text-align: center;
  letter-spacing: -0.02rem;
}
.aci-design-system-container .brain-fog-compare__head span:first-child {
  color: #008699;
  font-weight: 600;
  font-size: 1.3125rem;
}
.aci-design-system-container .brain-fog-compare__head span:last-child {
  color: #1e1e1e;
  opacity: 0.75;
  font-weight: 400;
  font-size: 1.125rem;
}
/* A real border always spans the row's full width, so the 97%-wide
   divider is drawn as a centered pseudo-element instead. */
.aci-design-system-container .brain-fog-compare__row { position: relative; }
.aci-design-system-container .brain-fog-compare__row::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 95%;
  height: 0.125rem;
  background: #0A91B480;
}
.aci-design-system-container .brain-fog-compare__row:last-child::after { display: none; }
.aci-design-system-container .brain-fog-compare__cell {
  display: flex;
  align-items: center;
  padding: 1.5rem 2rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: -0.02rem;
  color: #1e1e1e;
}
.aci-design-system-container .brain-fog-compare__cell--traditional {
  justify-content: center;
  text-align: center;
}
.aci-design-system-container .brain-fog-compare__cell--traditional svg {
  width: 1.3125rem;
  height: 1.4375rem;
  display: block;
}
.aci-design-system-container .brain-fog-compare__cell--traditional span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.4;
  opacity: 0.75;
}

@media (max-width: 700px) {
  /* Keeps the same 2-column (3fr/2fr) grid AND the same staggered
     overlapping background cards as desktop instead of stacking to 1fr
     — stacking read ambiguously (a label immediately followed by an
     unrelated ✕ looked like it negated the label right above it). The
     bg cards use percentage positioning (left/width: 62%) that already
     lines up with the 3fr/2fr grid at any width, so no repositioning is
     needed here — padding and type just scale down to fit. */
  .aci-design-system-container .brain-fog-compare__head span,
  .aci-design-system-container .brain-fog-compare__cell { padding: 0.75rem 0.625rem; }
  .aci-design-system-container .brain-fog-compare__head span:first-child { font-size: 0.9375rem; }
  .aci-design-system-container .brain-fog-compare__head span:last-child { font-size: 0.8125rem; }
  .aci-design-system-container .brain-fog-compare__cell { font-size: 0.8125rem; }
  .aci-design-system-container .brain-fog-compare__cell--traditional svg { width: 1rem; height: 1.09rem; }
  .aci-design-system-container .brain-fog-compare__cell--traditional span { font-size: 0.75rem; }
  .aci-design-system-container .brain-fog-compare { margin-bottom: 5rem; }
}

/* Closing image + copy + CTA block for "What You'll Learn" */
.aci-design-system-container .brain-fog-evaluation-cta {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}
.aci-design-system-container .brain-fog-evaluation-cta__media {
  flex: 0 0 21.75rem;
  aspect-ratio: 376 / 472;
  border-radius: 1.25rem;
  overflow: hidden;
}
.aci-design-system-container .brain-fog-evaluation-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.aci-design-system-container .brain-fog-evaluation-cta__copy {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.aci-design-system-container .brain-fog-evaluation-cta__copy p {
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: -0.02rem;
  color: var(--color-text);
}
.aci-design-system-container .brain-fog-evaluation-cta__copy .btn { align-self: flex-start; }
/* The copy column relies on flex `gap` for spacing between every child —
   the eyebrow's own default margin-bottom would double up with that gap,
   so it's neutralized here (see feedback re: margin+gap doubling bugs). */
.aci-design-system-container .brain-fog-evaluation-cta__copy .eyebrow { margin-bottom: 0; }
.aci-design-system-container .brain-fog-evaluation-cta__copy .section-heading { margin: 0; }

@media (max-width: 700px) {
  .aci-design-system-container .brain-fog-evaluation-cta { flex-direction: column; align-items: stretch; }
  .aci-design-system-container .brain-fog-evaluation-cta__media { flex-basis: auto; width: 100%; }
  /* Scoped to this one instance (not the other .brain-fog-evaluation-cta
     card) since it's the first thing in the stacked mobile layout and
     needs separation from the bullet list above it. Margin goes on the
     wrapper, not the img — the wrapper clips to a fixed aspect-ratio via
     overflow: hidden, so margin-top on the img itself would just push it
     down inside that fixed box and crop it, losing the rounded corners. */
  .aci-design-system-container .brain-fog-evaluation-cta__media:has(img[src$="evaluation-cta.jpg"]) { margin-top: 1.5rem; }
}

/* "Speak to a Brain Health Advisor" CTA uses a taller portrait photo. */
.aci-design-system-container #brain-spect-cta .brain-fog-evaluation-cta__media { aspect-ratio: 376 / 547; }

/* Pulled down to overlap the bottom edge of the #brain-spect-imaging
   .brain-fog-chapter--highlight card itself (not the gallery block that
   precedes it within the same card): cancels that card's fixed 6rem
   bottom padding entirely, then pulls another 5% past it so the CTA
   photo pokes out below the highlighted box into the Patient
   Testimonials section that follows. */
.aci-design-system-container #brain-spect-cta.brain-fog-chapter__block { margin-bottom: calc(-6rem - 5%); }

/* Black rounded "brain scan gallery" card in the Brain SPECT Imaging chapter.
   Sized to 103% of its .brain-fog-chapter--highlight ancestor's rendered
   width via JS (see aci-design-brain-fog.js) — that ancestor is itself
   already measured/set in pixels there because a pure-CSS percentage can't
   reliably reach across its bled negative-margin box. Right edge stays put
   at the content column's edge; the extra 3% bleeds out to the left. */
.aci-design-system-container .brain-fog-spect-gallery {
  background: #000;
  border-radius: 6.25rem 0 0 6.25rem;
  padding: 4.5rem 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem 2rem;
  justify-items: center;
}
.aci-design-system-container .brain-fog-spect-gallery__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
.aci-design-system-container .brain-fog-spect-gallery__item p {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.025rem;
  color: #fff;
  margin: 0;
}
.aci-design-system-container .brain-fog-spect-gallery__item img {
  width: 9.5rem;
  height: 9.5rem;
  object-fit: contain;
  display: block;
}

@media (max-width: 700px) {
  /* Right edge bleeds past the highlight card's own 2rem right padding
     to reach the viewport edge (mirrors the desktop JS-driven bleed),
     square on that side to look intentional; left stays inset normally. */
  .aci-design-system-container .brain-fog-spect-gallery { grid-template-columns: 1fr; border-radius: 2rem 0 0 2rem; padding: 3rem 2rem; gap: 2.5rem; width: auto; margin-left: 0; margin-right: -2rem; }
}

/* Accordion skin (bordered card, circle-plus icon) used for "Brain Fog
   Causes" and "When to Seek Help" — visually distinct from the pill-style
   .accordion used elsewhere in the design system. */
.aci-design-system-container .brain-fog-accordion { gap: var(--space-md); margin-right: 0; }
.aci-design-system-container .brain-fog-accordion .accordion__item {
  border: 0.0625rem solid #1e1e1e;
  border-radius: 1.25rem;
}
.aci-design-system-container .brain-fog-accordion .accordion__item.is-open {
  background: #fff;
  border-color: #008699;
  border-radius: 1.25rem;
}
.aci-design-system-container .brain-fog-accordion .accordion__header {
  padding: 1rem 1.5rem;
  font-size: 1.125rem;
  letter-spacing: -0.0225rem;
}
.aci-design-system-container .brain-fog-accordion .accordion__item.is-open .accordion__header { color: #008699; }
.aci-design-system-container .brain-fog-accordion .accordion__item.is-open .brain-fog-accordion__icon svg path { fill: #008699; }
.aci-design-system-container .brain-fog-accordion .accordion__body {
  padding: 0 1.5rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 2;
  letter-spacing: -0.0175rem;
  color: var(--color-text);
}
/* Uniform space-sm gap between ANY direct children (p, ul, the split/lists/
   ebook divs, etc.) — replaces the old p{margin:0}/p+p/ul-margin rules,
   which only covered p+p and left div+p, ul+p, etc. at 0 gap. */
.aci-design-system-container .brain-fog-accordion .accordion__body > * + * { margin-top: var(--space-sm); }
.aci-design-system-container .brain-fog-accordion .accordion__body a { color: inherit; font-weight: 600; text-decoration: underline; }
.aci-design-system-container .brain-fog-accordion .accordion__body strong { font-weight: 600; }
.aci-design-system-container .brain-fog-accordion .accordion__body ul { list-style: disc; padding-left: 1.3125rem; }

/* Two-column text + image layout used by several cause accordions —
   align-items: stretch (rather than flex-start) plus height: 100% on the
   image makes the image column match the text column's height. */
.aci-design-system-container .brain-fog-accordion__split { display: flex; gap: 1rem; align-items: stretch; }
.aci-design-system-container .brain-fog-accordion__split > div { flex: 1 1 0; min-width: 0; }
.aci-design-system-container .brain-fog-accordion__split > div > * + * { margin-top: var(--space-sm); }
/* Vertically center the text column against the stretched image column. */
.aci-design-system-container .brain-fog-accordion__split > div:not(:has(img)) { display: flex; flex-direction: column; justify-content: center; }
.aci-design-system-container .brain-fog-accordion__split img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 4.375rem 0 4.375rem;
  display: block;
}
/* This one already has its own rounded/transparent corner baked in. */
.aci-design-system-container #seek-help-2 .brain-fog-accordion__split img,
.aci-design-system-container #treatment-personalized-plan .brain-fog-accordion__split img,
.aci-design-system-container #treatment-natural-ways .brain-fog-accordion__split img { border-radius: 0; }
.aci-design-system-container #seek-help-2 .brain-fog-accordion__split { margin-bottom: var(--space-md); }

/* Side-by-side bullet lists used by a few cause accordions */
.aci-design-system-container .brain-fog-accordion__lists { display: flex; gap: 0 1.5rem; margin-top: 0.5rem; }
.aci-design-system-container .brain-fog-accordion__lists ul { flex: 1 1 0; min-width: 0; margin-top: 0; }

.aci-design-system-container .brain-fog-accordion__ebook { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.aci-design-system-container .brain-fog-accordion__ebook span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.0225rem;
  color: var(--color-primary-dark);
}

@media (max-width: 700px) {
  .aci-design-system-container .brain-fog-accordion__split { flex-direction: column-reverse; }
  .aci-design-system-container .brain-fog-accordion__lists { flex-direction: column; gap: 0; }
}

/* Items 7-11, revealed by the Load More button */
.aci-design-system-container .brain-fog-accordion .accordion__item[hidden] { display: none; }

/* Outline circle-plus/circle-minus icon (unfilled, matches provided
   reference SVG) — swaps on .is-open via CSS, no JS needed. */
.aci-design-system-container .brain-fog-accordion__icon { display: inline-flex; width: 2.125rem; height: 2rem; flex-shrink: 0; }
.aci-design-system-container .brain-fog-accordion__icon svg { display: block; width: 100%; height: 100%; }
.aci-design-system-container .brain-fog-accordion__icon .icon-minus { display: none; }
.aci-design-system-container .accordion__item.is-open .brain-fog-accordion__icon .icon-plus { display: none; }
.aci-design-system-container .accordion__item.is-open .brain-fog-accordion__icon .icon-minus { display: block; }

.aci-design-system-container .brain-fog-accordion__load-more {
  display: block;
  margin: var(--space-md) auto 0;
  background: #fff;
  border: 0.125rem solid #1e1e1e;
  border-radius: 3rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.01912rem;
  color: #1e1e1e;
}

/* ---------- Patient Testimonials carousel ---------- */
/* Reuses the site's established .journey stepper (progress-bar "dots" +
   arrow buttons, js/aci-design-brain-fog.js) and .yt-facade
   (thumbnail + play button -> embeds a real YouTube iframe on click,
   base CSS already in aci-design-system.css) components rather than
   building new ones from scratch. */
/* Extra breathing room above the standard chapter-to-chapter gap, since
   the SPECT CTA photo above this overlaps its own highlight box and
   would otherwise sit uncomfortably close to "Patient Testimonials". */
.aci-design-system-container #patient-testimonials { margin-top: 8rem; }
.aci-design-system-container .brain-fog-testimonials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}
.aci-design-system-container .brain-fog-testimonials__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  max-width: 41.6875rem;
}
.aci-design-system-container .brain-fog-testimonials__heading .section-heading { margin-bottom: 0; }
.aci-design-system-container .brain-fog-testimonials__journey {
  width: 100%;
  max-width: 41.6875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Clips the carousel's left side (so a sliding-out card can never bleed
   under the sticky TOC nav on the left) while its right edge is widened
   via JS (see aci-design-brain-fog.js) to reach the viewport edge, so the
   peek on the right still shows uncut. */
.aci-design-system-container .brain-fog-testimonials__clip {
  width: 100%;
  overflow: hidden;
  /* .journey's align-items: center would otherwise re-center this once JS
     widens it, shifting its left edge along with the right — pinning it
     to flex-start keeps the left edge fixed regardless of width. */
  align-self: flex-start;
}
/* All steps render side by side in a row instead of toggling display —
   the active one fills the journey's own (centered, capped) width, and
   later ones simply overflow past it to the right, clipped by .clip's
   own JS-widened right edge instead of bleeding straight to the
   viewport. min() keeps the card at the original 667px cap once .clip
   is widened past it (desktop), but still shrinks to fit on mobile
   where .clip stays at its natural, unwidened 100%. */
.aci-design-system-container .brain-fog-testimonials__stage {
  display: flex;
  width: min(41.6875rem, 100%);
  gap: 1.5rem;
  transition: transform 0.4s ease;
}
.aci-design-system-container .brain-fog-testimonials__step { flex: 0 0 100%; width: 100%; }
.aci-design-system-container .brain-fog-testimonials__card {
  position: relative;
  width: 100%;
  aspect-ratio: 667 / 374;
  border-radius: 6.25rem 0 6.25rem 0;
  overflow: hidden;
}
.aci-design-system-container .brain-fog-testimonials__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.aci-design-system-container .brain-fog-testimonials__nav.journey__nav { margin-top: var(--space-sm); width: 100%; }

@media (max-width: 700px) {
  .aci-design-system-container .brain-fog-testimonials__card { border-radius: 2.5rem 0 2.5rem 0; }
}

/* Per-page copies of the arrow/progress-bar-row skin (normally lives in
   per-page CSS like aci-design-adhd.css — duplicated here since brain-fog
   is self-sufficient and doesn't load those files). */
.aci-design-system-container .journey__nav--highlights { flex-direction: row; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-top: 0; }
.aci-design-system-container .journey__arrows { display: flex; gap: 0.75rem; }
.aci-design-system-container .journey__arrow { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: transparent; padding: 0; transition: opacity 0.15s ease; }
.aci-design-system-container .journey__arrow svg { display: block; width: 100%; height: 100%; }
.aci-design-system-container .journey__arrow--next svg { transform: scaleX(-1); }
.aci-design-system-container .journey__arrow:hover { opacity: 0.75; }
/* flex-basis: auto (vs. 0) means .journey__nav--highlights's flex-wrap
   decision was based on the dots' unshrunk content width (10 dots' worth)
   rather than its shrunk width, wrapping arrow/dots/arrow onto separate
   lines on narrow phones even though they'd fit fine once shrunk. */
.aci-design-system-container .journey--highlights .journey__dots { margin-top: 0; flex: 1 1 0%; min-width: 0; flex-wrap: nowrap; }
.aci-design-system-container .journey--highlights .journey__dot { flex: 1 1 0; width: auto; min-width: 0; }

/* ---------- FAQ (two-column: heading left, accordion list right) ---------- */
.aci-design-system-container .brain-fog-faq { display: flex; gap: 1.5rem; align-items: flex-start; width: 100%; }
.aci-design-system-container .brain-fog-faq__heading { flex: 0 0 16.6875rem; max-width: 16.6875rem; margin: 0; }
.aci-design-system-container .brain-fog-faq__list.accordion { flex: 1 1 29.5625rem; max-width: 29.5625rem; }

@media (max-width: 700px) {
  .aci-design-system-container .brain-fog-faq { flex-direction: column; }
  .aci-design-system-container .brain-fog-faq__heading,
  .aci-design-system-container .brain-fog-faq__list.accordion { flex: 1 1 auto; max-width: 100%; }
}

/* ---------- About the Reviewer / References — stacked, full-width
   bordered accordion cards, plain page background (no full-bleed
   tint), reusing the same .brain-fog-accordion item/icon skin as the
   rest of the page instead of the .atl-meta-links pattern used
   elsewhere on the site. */
/* #brain-fog-meta now lives as a plain .brain-fog-chapter inside
   .brain-fog-toc__content (after the FAQ chapter), so it naturally
   inherits the content column's width — no grid-mirroring needed. */
.aci-design-system-container .brain-fog-meta-accordion .accordion__item { width: 100%; }

/* Image + bio split, reusing .brain-fog-accordion__split's stretch-height
   behavior (see earlier accordion splits) — the portrait column is
   narrower than the bio column, unlike the default 1:1 split. The
   portrait image already has its own shaped/rounded background baked
   in, so no CSS background or border-radius is applied here. */
.aci-design-system-container .brain-fog-reviewer__portrait { flex: 0 0 9rem; }
.aci-design-system-container .brain-fog-reviewer__portrait img { border-radius: 0; object-position: top center; }
.aci-design-system-container .brain-fog-reviewer__bio { flex: 1 1 0; }
.aci-design-system-container .brain-fog-reviewer__bio p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: #1e1e1e; }
.aci-design-system-container .brain-fog-reviewer__bio p + p { margin-top: 0.5rem; }

@media (max-width: 700px) {
  .aci-design-system-container .brain-fog-reviewer { flex-direction: column; }
  .aci-design-system-container .brain-fog-reviewer__portrait { flex-basis: auto; width: 9rem; }
}

/* ---------- Mobile audit fixes ---------- */
/* .btn's shared white-space: nowrap forces a ~339px min-content width
   (e.g. "See More Outcomes") on narrow phones. Since .brain-fog-toc
   collapses to a single 1fr grid column below 700px, and grid tracks
   default to min-width: auto, ANY one oversized descendant anywhere in
   that column forces the entire column — and therefore every other
   chapter's content, not just the button's own row — to that same
   width, silently clipped by .aci-design-system-container's
   overflow-x: clip rather than producing a visible scrollbar. Letting
   button text wrap here fixes the cause, not just this one symptom. */
@media (max-width: 480px) {
  .aci-design-system-container .btn { white-space: normal; text-align: center; }
}

/* .container's own side padding removed on mobile — sections that need
   inset content (e.g. #brain-fog-chapters) already carry their own
   padding, so this only affects containers that were relying solely on
   .container's padding (the hero and any bare .container elsewhere). */
@media (max-width: 700px) {
  .aci-design-system-container .container { padding-left: 0; padding-right: 0; }
  .aci-design-system-container .hero-outcomes-frame::after { border: none; }
}