.inner-page .resources-section {
  /* Match footer's asymmetric padding: right standard, left +33px */
  padding: 2rem clamp(0rem, 3.6vw, 2.7rem) 2rem clamp(2.0625rem, calc(3.6vw + 2.0625rem), 5.0625rem);
}
.inner-page .resources-section h3 {
  font-size: 1.6rem; /* match Section 3 title size */
  font-weight: 300;   /* match Section 3 title weight */
  letter-spacing: 0.1em; /* match Section 3 letter spacing */
  margin-bottom: 1rem;
  color: var(--enhanced-color);
}
.inner-page .resources-links { display: flex; flex-wrap: wrap; gap: 2rem; }
.inner-page .resources-links a { color: #333; text-decoration: underline; text-decoration-color: #CFCFCF; text-decoration-thickness: 1px; text-underline-offset: 2px; font-size: 0.9rem; font-weight: 400; font-family: 'Montserrat', Arial, sans-serif; }
.inner-page .resources-links a:hover { color: #666; }

.nav-popover-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 24, 40, 0.55);
  display: none;
  padding: 1.5rem;
  z-index: 3000;
}

.nav-popover-overlay.active {
  display: block;
}

.nav-popover {
  background: #ffffff;
  color: #111111;
  padding: 0.5rem 0.65rem;
  max-width: 294px;
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(18, 24, 40, 0.2);
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  position: absolute;
  visibility: hidden;
}

.nav-popover h3 {
  margin: 0 0 0.4rem;
  font-size: clamp(0.665rem, 1.4vw, 0.77rem);
}

.nav-popover p {
  margin: 0;
  line-height: 1.35;
  font-size: 0.56rem;
}

.nav-popover a {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
}

.nav-popover-close {
  margin-top: 0.6rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.525rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  background: #111111;
  color: #ffffff;
  cursor: pointer;
}

.nav-popover-close:hover,
.nav-popover-close:focus {
  background: #333333;
  outline: none;
}

.nav-popover-overlay .nav-popover:focus-visible,
.nav-popover-close:focus-visible,
.nav-popover a:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 2px;
}

/* Align footer (section 5) left padding with resources (section 4) */
.inner-page .grey-nav-container { padding-left: clamp(2.0625rem, calc(3.6vw + 2.0625rem), 5.0625rem) !important; }
.inner-page .page-detail { padding-top: 2rem; padding-bottom: 4rem; }
.inner-page .page-detail h2 {
  line-height: 1.1;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--enhanced-color);
}
.inner-page .page-detail .detail-body p { font-size: 1.1rem; line-height: 1.28; color: #666; margin-bottom: 0.8rem; margin-top: 0; }
.inner-page .page-detail .placeholder-video {
  width: 100%;
  aspect-ratio: 8 / 9; /* roughly 2x the height of 16:9 at same width */
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
}
.inner-page .page-detail .detail-media img.detail-graphic {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08);
}
/* Inner page isolated overrides. Scoped via .inner-page to avoid affecting landing page. */
.inner-page .page-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 clamp(0rem, 4vw, 3rem); padding-right: calc(2rem + clamp(0rem, 3.6vw, 2.7rem)); padding-top: 7.5rem; position: relative; display: grid; grid-template-columns: 48% 52%; column-gap: 24px; grid-template-areas: "copy balloons"; align-items: start; }
.community-page .page-wrapper { grid-template-columns: 57.6% 42.4%; }
.inner-page .knowledge-graph { grid-area: balloons; left: auto; right: auto; width: 100%; margin-left: -24px; }
.inner-page .hero-container { grid-area: balloons; left: auto; right: auto; width: 100%; margin-left: -24px; }
/* Increase balloons visual width by ~50% from the right edge */
.inner-page #graph-svg { transform: scale(1.5); transform-origin: 100% 50%; overflow: visible; }
.inner-page .knowledge-graph { overflow: visible; }

/* Left hero copy column overlayed in hero band */
.inner-page .hero-copy { grid-area: copy; position: relative; width: 100%; height: auto; display: block; pointer-events: auto; }
.inner-page .hero-copy-inner {
  pointer-events: auto;
  /* Align with Section 3 total inset: main 2rem + data-section clamp,
     compensating for page-wrapper's own left padding */
  padding-left: calc(2rem + clamp(0rem, 3.6vw, 2.7rem) - clamp(0rem, 4vw, 3rem));
  padding-right: clamp(0rem, 3.6vw, 2.7rem);
  color: #666; /* match body text color below */
}
.inner-page .hero-copy h2 {
  font-size: 1.6rem;
  font-weight: 300; /* match data-section h2 weight */
  letter-spacing: 0.1em; /* match data-section h2 */
  margin-bottom: 1rem;
  color: var(--enhanced-color);
}
.inner-page .hero-copy p {
  font-size: 1.1rem; /* match data-section p */
  line-height: 1.28; /* 20% tighter than 1.6 */
  margin-bottom: 0.8rem;
}

/* Reduce the size of data-section titles (inner pages only) */
.inner-page .data-section h2 { font-size: 1.6rem; color: var(--enhanced-color); }
@media (min-width: 769px) {
  /* Non-small screens: keep media left, text right, with tight heading/body spacing */
  .inner-page .page-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 2.5rem;
    align-items: start;
  }
  .inner-page .page-detail .detail-media {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .inner-page .page-detail h2 {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.6rem;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 300;
    letter-spacing: 0.1em;
  }
  .inner-page .page-detail .detail-body {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
}

@media (min-width: 769px) and (max-width: 1279px) {
  .inner-page .page-detail h2 {
    margin-bottom: 0.55rem;
  }
}

@media (min-width: 1280px) {
  /* On very large screens, keep ratio for media */
  .inner-page .page-detail .detail-media .placeholder-video { aspect-ratio: 16 / 9; }
}

@media (min-width: 769px) and (max-width: 1279px) {
  .inner-page .page-detail .detail-media .placeholder-video {
    aspect-ratio: 16 / 9;
  }
}
/* Reduce body line-height across inner page content by 20% */
.inner-page .data-section p { line-height: 1.28; }

/* (hero-scope removed) */

/* Example place for future inner-page-only tweaks without touching landing page */
.inner-page .data-section h2 { /* currently inherits global styles */ }

/* Disable any fade/transition for inner pages so everything loads at once */
.inner-page .main-content { opacity: 1 !important; transition: none !important; padding-top: 0 !important; }
.inner-page .main-content.hidden { opacity: 1 !important; }
.inner-page section, .inner-page header, .inner-page .header, .inner-page .nav, .inner-page .data-section, .inner-page .grey-nav-section { transition: none !important; }

/* Hold everything invisible until we have drawn first frame, then reveal instantly */
.preload .page-wrapper,
.preload .header,
.preload .main-content,
.preload .grey-nav-section { visibility: hidden; }
.preload-done .page-wrapper,
.preload-done .header,
.preload-done .main-content,
.preload-done .grey-nav-section { visibility: visible; }

/* ---------- Responsive coordination for Section 2 (inner pages only) ---------- */
@media (max-width: 1279px) {
  /* Turn the hero band into a true two-column grid with a safety gutter */
  .inner-page .page-wrapper {
    display: grid;
    grid-template-columns: 45% 55%;
    column-gap: 24px;
    grid-template-areas:
      "copy balloons";
    align-items: start;
  }
  .community-page .page-wrapper {
    grid-template-columns: 54% 46%;
  }

  .inner-page .hero-copy {
    position: static; /* stop absolute overlay */
    width: 100%;
    height: auto;
    grid-area: copy;
    z-index: 10;
    pointer-events: auto;
  }

  .inner-page .knowledge-graph,
  .inner-page .hero-container {
    position: relative; /* live inside grid cell */
    left: auto; right: auto; width: 100%;
    height: clamp(260px, 42vh, 520px);
    grid-area: balloons;
    margin-left: -24px;
  }

  .inner-page .hero-scope {
    position: static; /* flow under copy */
    right: auto; width: 100%; top: auto;
    grid-area: scope;
    padding: 0 clamp(0rem, 3.6vw, 2.7rem);
  }

  .inner-page .hero-copy h2 { font-size: 1.6rem; }
}

@media (max-width: 768px) {
  /* Stack resources vertically on small screens, like Site Map */
  .inner-page .resources-links { flex-direction: column; gap: 1rem; }
  /* Do not stack balloons below text; overlap with text on top */
  .inner-page .page-wrapper {
    grid-template-columns: 1fr;
    grid-template-areas: "stack";
  }
  .inner-page .hero-copy { grid-area: stack; position: relative; z-index: 3; }
  .inner-page .knowledge-graph,
  .inner-page .hero-container { grid-area: stack; position: relative; z-index: 0; height: 42vh; pointer-events: none; overflow: hidden; }
  .inner-page #graph-svg { transform: none; }
  /* Extend overlay to the right boundary so balloons never appear to the right of the text */
  .inner-page .hero-copy::after {
    content: '';
    position: absolute; top: 0; height: 50vh; bottom: auto;
    left: calc(-1 * clamp(0rem, 4vw, 3rem));
    width: 100vw; background: rgba(255,255,255,0.5); border-radius: 8px; z-index: 1; /* under text */
  }
  .inner-page .hero-copy-inner { background: transparent; position: relative; z-index: 2; }
}

/* Very small screens: overlap Section 2 columns, put text above balloons */
@media (max-width: 600px) {
  .inner-page .page-wrapper {
    grid-template-columns: 1fr;
    grid-template-areas: "stack";
    padding-top: 11rem; /* ensure title clears fixed nav on very small screens */
  }
  .inner-page .hero-copy { grid-area: stack; position: relative; z-index: 3; }
  /* Full-viewport overlay behind text to cover balloons to the right */
  .inner-page .hero-copy::after {
    content: '';
    position: absolute;
    top: 0; height: 55vh; bottom: auto;
    left: calc(-1 * clamp(0rem, 4vw, 3rem)); /* extend over left page padding */
    width: 100vw; /* blanket to viewport right edge */
    background: rgba(255,255,255,0.5);
    border-radius: 8px;
    z-index: 1; /* sits behind text but above balloons */
  }
  .inner-page .knowledge-graph, .inner-page .hero-container { grid-area: stack; position: relative; z-index: 0; height: 50vh; pointer-events: none; overflow: hidden; }
  .inner-page #graph-svg { transform: none; } /* ensure JS coordinates match visuals on small screens */
  .inner-page .hero-copy-inner {
    background: transparent; /* overlay handled by ::after for full-width alignment */
    position: relative; z-index: 2; /* text above overlay */
    border-radius: 8px;
    padding: 1rem 1.25rem;
    width: 100%;
    box-shadow: none; /* remove drop shadow */
  }
}

/* Make grid layout active for wide screens too (unify behavior) */
@media (min-width: 1280px) {
  .inner-page .page-wrapper {
    display: grid;
    grid-template-columns: 45% 55%;
    column-gap: 32px;
    grid-template-areas:
      "copy balloons";
    align-items: start;
  }
  .community-page .page-wrapper {
    grid-template-columns: 54% 46%;
  }
  .inner-page .hero-copy { position: static; width: 100%; height: auto; grid-area: copy; }
  .inner-page .hero-copy h2 { font-size: 1.35rem; }
  .inner-page .knowledge-graph, .inner-page .hero-container { position: relative; left: auto; right: auto; width: 100%; height: 45vh; grid-area: balloons; margin-left: -32px; }
}

@media (max-width: 768px) {
  .inner-page .page-detail .detail-media .placeholder-video {
    aspect-ratio: 16 / 9;
  }
}

/* Scope bullets: bold, title format, inherit section title color */
.inner-page .hero-scope-bullets { list-style: disc inside; margin: 0; padding: 0; }
.inner-page .hero-scope-bullets li {
  font-weight: 500;
  text-transform: none;
  color: var(--enhanced-color);
  margin-bottom: 0.5rem;
}