/* Custom CSS for Gram */
/* Force-load 'Poppins' so stat numbers match h1 font */
/* C-7: Google Fonts import removed; Poppins/Inter are self-hosted
   via @font-face in assets/scss/_brand.scss. */

/* Header nav links - tokenised in A-1; see assets/scss/_brand.scss */
.site-header .main-navigation .menu.desktop-menu .menu-item a {
  /* staging: 14px / 500 / secondary ink. This used to force
     --color-text-primary, which made the text items darker and heavier than
     the "More" button next to them. */
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
  padding: 0 !important;
  background: none !important;
}
.site-header .main-navigation .menu.desktop-menu .menu-item a:hover {
  color: var(--color-text-primary) !important;
  background: none !important;
}
.site-header .main-navigation .menu.desktop-menu .menu-item.active a {
  color: var(--color-text-primary) !important;
  background: none !important;
}
.site-header .main-navigation .menu.desktop-menu .menu-item.active a::after {
  background: var(--color-primary) !important;
}
.site-header .search-form form button {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
}
.site-header .search-form form button:hover {
  background: var(--color-primary-hover) !important;
}

/* Removed: a debug block that put `border: 2px solid transparent` on EVERY
   image and turned it green once js/custom.js added a .loaded class - so every
   loaded image on the production site carried a 2px green border and 4px of
   extra box. It was most obvious on the footer store badges, and invisible on
   the research card photos only because their strip clips overflow. */

/* Hero h1 and stat numbers - color controlled by theme */
.research-hero .hero-content h1,
.hero.research-hero .hero-content h1 {
  /* Was #000 !important with a white text-shadow - a leftover from the old
     palette. staging's ink is #1a1a17, and the shadow was compensating for a
     background that no longer exists. */
  color: var(--color-text-primary) !important;
}
.research-hero .hero-content p,
.hero.research-hero .hero-content p {
  /* Secondary on staging - forcing primary ink is most of why our hero read
     as heavier than theirs. */
  color: var(--color-text-secondary) !important;
}
.research-hero .hero-stats .stat .stat-number,
.hero.research-hero .hero-stats .stat .stat-number,
section.hero.research-hero .stat-number {
  display: block !important;
  margin: 4px 0 6px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--color-text-primary) !important;
}

/* Dark mode: white text for nav links, hero h1, and stat numbers */


/* Force .button.secondary to match .read-research style */
.button.secondary {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 0.875rem 2rem !important;
  transition: all 0.3s ease !important;
  transform: translateY(0);
  text-decoration: none;
}
.button.secondary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
  opacity: 0.9 !important;
  color: var(--color-text-primary) !important;
}

/* Force .search-button to match .read-research style */
.search-button {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 0.875rem 2rem !important;
  transition: all 0.3s ease !important;
  transform: translateY(0);
}
.search-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
  opacity: 0.9 !important;
  color: var(--color-text-primary) !important;
}

/* Force .view-all-archive .button to match .read-research style */
.view-all-archive .button {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 0.875rem 2rem !important;
  transition: all 0.3s ease !important;
  transform: translateY(0);
  text-decoration: none;
}
.view-all-archive .button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
  opacity: 0.9 !important;
  color: var(--color-text-primary) !important;
}

/* Archive page headings - match research homepage 'Poppins' style */
.archive-hero .hero-title {
  font-family: 'Poppins', sans-serif !important;
  /* Index masthead, not a landing hero - matches the homepage h1 so the
     three pages do not open at three different scales. */
  font-size: clamp(1.875rem, 1.6rem + 1.4vw, 2.25rem) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: var(--color-text-primary) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
}
.archive-intro .intro-content h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--color-text-primary) !important;
}
.featured-research .section-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--color-text-primary) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
}
.archive-newsletter .newsletter-content h3 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
}

/* Research page hero title - match homepage h1 */
.research-hero .hero-title {
  font-family: 'Poppins', sans-serif !important;
  /* Index masthead, not a landing hero - matches the homepage h1 so the
     three pages do not open at three different scales. */
  font-size: clamp(1.875rem, 1.6rem + 1.4vw, 2.25rem) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: var(--color-text-primary) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
}

/* Unified stat card style across all hero sections. Padding is 1.15rem rather
   than the original 1.5rem: the three cards were 154px of a 900px first screen
   and pushed the first research card well past the fold. Same treatment, 40px
   less of it. */
.hero-stats .stat,
.archive-stats .stat {
  text-align: center !important;
  padding: 1.15rem 1rem !important;
  background: var(--color-surface-soft) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--color-border) !important;
}
.hero-stats .stat .stat-number,
.archive-stats .stat .stat-number {
  display: block !important;
  margin: 4px 0 6px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--color-text-primary) !important;
}
.hero-stats .stat .stat-label,
.archive-stats .stat .stat-label {
  display: block !important;
  font-size: 0.875rem !important;
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Dark mode for archive and research headings */


/* Research page headings - match archive 'Poppins' style */
.research-intro .intro-content h2,
.research-listing .research-header .section-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--color-text-primary) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  background-clip: unset !important;
}


/* Heading colour only - size and face come from the section-title scale in
   _chrome.scss, which is matched to staging. */
.research-newsletter .newsletter-content h2 {
  color: var(--color-text-primary) !important;
}

/* Newsletter text color */
.research-newsletter .newsletter-content p {
  color: var(--color-text-primary) !important;
}
.research-newsletter .form-note {
  color: var(--color-text-primary) !important;
}
.research-newsletter .newsletter-form input[type="email"] {
  color: var(--color-text-primary) !important;
  background: var(--ds-color-surface, #fffdf8) !important;
  /* Was `border: none` - invisible now the ground is cream rather than green. */
  border: 1px solid var(--ds-color-border, #ded6c6) !important;
  border-radius: 999px !important;
  padding: 1rem 1.5rem !important;
  font-size: 1rem !important;
  backdrop-filter: none !important;
}
.research-newsletter .newsletter-form input[type="email"]::placeholder {
  color: var(--color-text-primary) !important;
  opacity: 0.6;
}
.research-newsletter .newsletter-form input[type="email"]:focus {
  /* A translucent white ring is invisible on cream. */
  outline: var(--ds-focus-width, 2px) solid var(--ds-color-focus, #004639) !important;
  outline-offset: 1px !important;
  background: var(--ds-color-surface, #fffdf8) !important;
  transform: none !important;
}
.research-newsletter .newsletter-form .button {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  /* The 2px white outline existed to separate the button from the green band.
     On cream it read as a gap punched through the button. */
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 1rem 2rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* No green band. It was `background: var(--color-primary) !important` while
   the heading, paragraph and note were all forced to --color-text-primary
   (#1a1a17) - near-black ink on dark green, which failed contrast outright and
   was simply unreadable. Every zone on staging is transparent over the page
   ground, so these sit on the cream like the rest of the page and the text is
   legible by construction. */

/* Same fix as the newsletter band above - /research/ had the identical
   dark-ink-on-dark-green failure. */
.research-cta .cta-content h3 {
  color: var(--color-text-primary) !important;
}
.research-cta .cta-content p {
  color: var(--color-text-primary) !important;
  opacity: 1 !important;
}
.research-cta .inline-form .form-group input {
  color: var(--color-text-primary) !important;
}
.research-cta .inline-form .form-group input::placeholder {
  color: var(--color-text-primary) !important;
  opacity: 0.6;
}
.research-cta .inline-form .form-group button {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  border: 2px solid var(--color-text-inverse) !important;
}

/* Archive newsletter section - match homepage newsletter style */
.archive-newsletter {
  background: var(--color-primary) !important;
}
.archive-newsletter .newsletter-content h3 {
  color: var(--color-text-primary) !important;
}
.archive-newsletter .newsletter-content p {
  color: var(--color-text-primary) !important;
  opacity: 1 !important;
}
.archive-newsletter .newsletter-form .form-group input {
  color: var(--color-text-primary) !important;
}
.archive-newsletter .newsletter-form .form-group input::placeholder {
  color: var(--color-text-primary) !important;
  opacity: 0.6;
}
.archive-newsletter .newsletter-form .form-group button {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  border: 2px solid var(--color-text-inverse) !important;
  border-radius: 999px !important;
  padding: 1rem 2rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* Footer quick links sit on the reciprocal forest trust surface. */
.site-footer .footer-widgets ul li a {
  color: rgba(252, 253, 249, 0.78) !important;
}
.site-footer .footer-widgets ul li a:hover,
.site-footer .footer-widgets ul li a:focus-visible {
  color: var(--gram-experienceFresh) !important;
}


/* Quality score chip & journal chip - green background, no border */
.quality-score,
.research-card .quality-score,
.research-meta .quality-score,
.research-card .research-meta .quality-score {
  background: var(--gf-green-10) !important;
  color: var(--color-text-primary) !important;
  border: none !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
}
.research-journal,
.research-card .research-journal,
.research-meta .research-journal,
.research-card .research-meta .research-journal {
  background: var(--gf-green-10) !important;
  color: var(--color-text-primary) !important;
  border: none !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
}
.research-tag,
.research-tags .research-tag,
.research-card .research-tags .research-tag {
  background: var(--gf-green-10) !important;
  color: var(--color-text-primary) !important;
  border: none !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
}

/* App integration / Track This section */
.app-integration,
.research-card .app-integration {
  background: var(--color-surface-elevated) !important;
  border: 1px solid var(--color-primary) !important;
}
.app-integration strong,
.research-card .app-integration strong {
  color: var(--color-primary) !important;
}


/* Pagination active page */
.pagination .pagination-item.active a {
  background-color: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3) !important;
}
.pagination .pagination-item.active a:hover {
  background-color: var(--color-primary-hover) !important;
  color: var(--color-text-inverse) !important;
}
.pagination .pagination-item.next a,
.pagination .pagination-item.prev a {
  color: var(--color-text-primary) !important;
}

.pagination .pagination-item.next a:hover,
.pagination .pagination-item.prev a:hover {
  color: var(--color-text-primary) !important;
}


/* The .menu-toggle block that lived here was written for a button containing
   the word "Menu": width:auto, height:36px, 8px radius, font-size/weight - all
   !important. The control is an icon button now, and those declarations were
   overriding its geometry from the last stylesheet in the cascade, leaving a
   44x44 square with an 8px radius beside a 44px pill search button.
   Styling now lives in assets/scss/_chrome.scss, in one place. */
.menu-toggle { appearance: none; cursor: pointer; box-sizing: border-box; }

/* Mobile search - match desktop search style */
.mobile-search form {
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
.mobile-search input[type="search"] {
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  border: 1px solid var(--color-border) !important;
  border-right: none !important;
  border-radius: 999px 0 0 999px !important;
  background: var(--color-surface-elevated) !important;
}
.mobile-search input[type="search"]:focus {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-50) !important;
}
.mobile-search button {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  border: none !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0 999px 999px 0 !important;
}

/* Article meta info - align items vertically */
.meta-info {
  align-items: center !important;
}

/* Article quality badge - match tag style */
.quality-badge,
.article-meta .quality-badge,
.meta-info .quality-badge {
  background: var(--gf-green-10) !important;
  color: var(--color-text-primary) !important;
  border: none !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  font-size: 0.86rem !important;
  padding: 0.3rem 0.86rem !important;
  border-radius: 12px !important;
}

/* Article tags - match research-tag style */
.article-tags .tag,
.article-stats .article-tags .tag {
  background: rgba(255, 255, 255, 0.62) !important;
  color: var(--gram-experienceForest) !important;
  border: 1px solid var(--gram-green-forest-tint-18) !important;
  -webkit-text-fill-color: var(--gram-experienceForest) !important;
  font-size: 0.8125rem !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 999px !important;
}

/* Related research tags - match article tag style */
.related-tag,
.related-meta .related-tag,
.related-card .related-meta .related-tag {
  background: var(--gf-green-10) !important;
  color: var(--color-text-primary) !important;
  border: none !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  font-size: 0.86rem !important;
  padding: 0.3rem 0.86rem !important;
  border-radius: 12px !important;
}

/* Article newsletter section - match research-cta green style */
.article-newsletter {
  background: var(--color-primary) !important;
}
.article-newsletter .newsletter-content h3 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--color-text-primary) !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
}
.article-newsletter .newsletter-content p {
  color: var(--color-text-primary) !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  opacity: 1 !important;
}
.article-newsletter .newsletter-form .form-group input {
  color: var(--color-text-primary) !important;
}
.article-newsletter .newsletter-form .form-group input::placeholder {
  color: var(--color-text-primary) !important;
  opacity: 0.6;
}
.article-newsletter .newsletter-form .form-group button {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  -webkit-text-fill-color: var(--color-text-inverse) !important;
  border: 2px solid var(--color-text-inverse) !important;
  border-radius: 999px !important;
  padding: 1rem 2rem !important;
  font-weight: 700 !important;
}

/* Integration banner heading - match article-body h2 */
.app-integration-banner .integration-text h4,
.integration-content .integration-text h4 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--color-text-primary) !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
}


/* Integration button - match primary button style */
.integration-button {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 0.875rem 2rem !important;
  transition: all 0.3s ease !important;
  transform: translateY(0);
  text-decoration: none !important;
  display: inline-block !important;
}
.integration-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
  opacity: 0.9 !important;
  color: var(--color-text-primary) !important;
}

/* Quick Take section - open editorial treatment */
.article-body h2#the-quick-take {
  border: 0 !important;
  border-left: 3px solid var(--gram-green-fresh) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 0 0.75rem 1.25rem !important;
  margin-bottom: 0 !important;
}
.article-body h2#the-quick-take + ul {
  border: 0 !important;
  border-left: 3px solid var(--gram-green-fresh) !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 0 0.75rem 1.25rem !important;
  margin-top: 0 !important;
}

/* Footer widget titles - match 'Poppins' heading style */
/* Footer column headings are 12px Inter 600 caps on staging, not a 1.8rem
   Poppins display line - see the footer block in _chrome.scss. These three
   !important declarations were the only reason ours rendered at 28.8px. */
.site-footer .widget-title {
  line-height: 1.45 !important;
}

/* ── Single mobile app CTA (B-2 / B-3 / A-7) ───────────────────────────────
   Phones only, shown after scrolling, dismissable. Styled from staging's
   tokens: deep green surface, warm-white ink, pill close control. Height is
   published as --app-cta-bar-height so the chat widget can clear it (A-8). */
:root { --app-cta-bar-height: 68px; }

.app-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  min-height: var(--app-cta-bar-height);
  background: var(--gram-brandPrimary, #004639);
  color: var(--gram-textInverse, #fffdf8);
  padding: 0.625rem max(1rem, env(safe-area-inset-left))
           calc(0.625rem + env(safe-area-inset-bottom))
           max(1rem, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 -6px 24px rgba(26, 26, 23, 0.18);
  font-family: 'Inter', system-ui, sans-serif;
  transform: translateY(100%);
  transition: transform var(--ds-motion-base, 220ms) var(--ds-ease-standard, cubic-bezier(0.2,0,0,1));
}

.app-cta-bar.is-visible { transform: translateY(0); }
.app-cta-bar[hidden] { display: none; }

.app-cta-bar-content {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1;
  min-width: 0;
}

.app-cta-bar-text {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

/* Official store artwork (B-3). Do not recolour or crop - see
   static/images/stores/README.md. */
.app-cta-bar-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
}
.app-cta-bar-badge[hidden] { display: none; }
.app-cta-bar-badge img { display: block; height: 40px; width: auto; }
.app-cta-bar-badge:focus-visible {
  outline: 2px solid var(--gram-textInverse, #fffdf8);
  outline-offset: 3px;
}

.app-cta-bar-close {
  order: 3;
  flex-shrink: 0;
  background: rgba(255, 253, 248, 0.14);
  border: none;
  color: var(--gram-textInverse, #fffdf8);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  transition: background var(--ds-motion-fast, 150ms) ease;
}
.app-cta-bar-close:hover { background: rgba(255, 253, 248, 0.26); }
.app-cta-bar-close:focus-visible {
  outline: 2px solid var(--gram-textInverse, #fffdf8);
  outline-offset: 2px;
}

@media (max-width: 400px) {
  .app-cta-bar-text { font-size: 0.8125rem; }
  .app-cta-bar-badge img { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-cta-bar { transition: none; }
}

/* Footer app CTA button */
.footer-app-cta {
  margin: 0.75rem 0;
}
.footer-app-button {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}
.footer-app-button:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-inverse);
}

/* List card "Track This" link */
.app-integration-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
.app-integration-link:hover {
  text-decoration: underline;
}

/* GEO: AI-Citable Summary Block */
.article-summary {
  padding: 0;
  margin-top: -0.5rem;
}
.summary-block {
  background: var(--gram-green-tint-08);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}
.summary-block strong {
  color: var(--color-text-primary);
  font-weight: 700;
  margin-right: 0.25rem;
}
.summary-block em {
  font-style: italic;
}


/* GEO: Entity/Brand Attribution */
.entity-attribution {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.entity-attribution a {
  color: var(--color-primary);
  text-decoration: none;
}
.entity-attribution a:hover {
  text-decoration: underline;
}

/* GEO: Compact Source Citation */
.source-citation-compact {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.source-citation-compact strong {
  color: var(--color-text-primary);
  font-weight: 700;
  margin-right: 0.25rem;
}
.source-citation-compact cite {
  font-style: normal;
  color: var(--color-text-primary);
}
.source-citation-compact a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}
.source-citation-compact a:hover {
  text-decoration: underline;
}

/* Generic page layout (disclaimer, about, etc.) */
.generic-page .page-hero {
  padding: 3rem 0 1.5rem;
}
.generic-page .page-title {
  font-family: 'Poppins', sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.generic-page .page-description {
  margin-top: 0.75rem;
  font-size: 1.1rem;
  color: var(--color-text-secondary);
}
.generic-page .page-content {
  padding: 0 0 3rem;
}
.generic-page .page-body {
  max-width: 760px;
  line-height: 1.8;
  font-size: 1rem;
}
.generic-page .page-body h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
}
.generic-page .page-body p {
  margin-bottom: 1rem;
}
.generic-page .page-body a {
  color: var(--color-primary);
  text-decoration: none;
}
.generic-page .page-body a:hover {
  text-decoration: underline;
}
.generic-page .page-body ul,
.generic-page .page-body ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.generic-page .page-body li {
  margin-bottom: 0.5rem;
}
.generic-page .page-body hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid var(--color-border);
}
.generic-page .page-body em {
  color: var(--color-text-secondary);
}

/* =============================================
   Food Fact Pages
   ============================================= */

.food-fact-page .food-hero {
  padding: 2rem 0 1rem;
}
.food-fact-page .food-header .back-link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.9rem;
}
.food-fact-page .food-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.75rem 0 0.5rem;
  line-height: 1.3;
}
.food-fact-page .food-description {
  color: var(--color-text-secondary);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 700px;
}

.food-fact-page .food-body {
  max-width: 750px;
  line-height: 1.7;
}
.food-fact-page .food-body h1 {
  display: none;
}
.food-fact-page .food-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.food-fact-page .food-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}
.food-fact-page .food-body p {
  margin-bottom: 1rem;
}
.food-fact-page .food-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
}
.food-fact-page .food-body th,
.food-fact-page .food-body td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.food-fact-page .food-body th {
  background: var(--color-bg-secondary);
  font-weight: 600;
}
.food-fact-page .food-body strong {
  font-weight: 600;
}
.food-fact-page .food-body ul {
  margin: 0.5rem 0 1rem;
  padding-left: 1.5rem;
}
.food-fact-page .food-body li {
  margin-bottom: 0.5rem;
}
.food-fact-page .food-body a {
  color: var(--color-accent);
}

/* Food FAQ */
.food-faq {
  padding: 2rem 0;
  background: var(--color-bg-secondary);
}
.food-faq h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.faq-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.faq-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.faq-item h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.faq-item p {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Food Related Research */
.food-related-research,
.guide-related-research {
  padding: 2rem 0;
}
.food-related-research h2,
.guide-related-research h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.related-intro {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1rem;
}
.related-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  transition: border-color 0.2s;
}
.related-card:hover {
  border-color: var(--color-accent);
}
.related-card a {
  text-decoration: none;
  color: inherit;
}
.related-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.related-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}
.related-journal {
  font-style: italic;
}
.quality-badge-sm {
  background: var(--color-accent);
  color: #000;
  padding: 0.1rem 0.4rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.75rem;
}
.view-all-link {
  margin-top: 1.5rem;
}
.view-all-link a {
  color: var(--color-accent);
}

/* Food/Guide CTA */
.food-cta,
.guide-cta {
  padding: 2rem 0 3rem;
}
.cta-box {
  background: linear-gradient(135deg, var(--gram-green-mid), var(--gram-brandPrimary));
  color: #fff;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.cta-box h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.cta-box p {
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  opacity: 0.9;
}
.cta-button {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-text-primary);
  padding: 0.75rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
}
.cta-button:hover {
  background: var(--color-primary);
}

/* Foods List Page */
.foods-list-page,
.guides-list-page {
  padding: 2rem 0;
}
.section-header {
  margin-bottom: 2rem;
}
.section-header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.section-description {
  color: var(--color-text-secondary);
  font-size: 1.05rem;
  max-width: 650px;
}
.foods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
}
.food-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.25rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.food-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.food-card a {
  text-decoration: none;
  color: inherit;
}
.food-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.food-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.food-card-stats .stat {
  font-size: 0.85rem;
  background: var(--color-bg-secondary);
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
}
.food-card-serving {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

/* =============================================
   Guide / Pillar Pages
   ============================================= */

.guide-page .guide-hero {
  padding: 2rem 0 1rem;
}
.guide-page .guide-header .back-link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.9rem;
}
.guide-badge {
  display: inline-block;
  background: var(--gram-green-tint-08);
  color: var(--gram-status-success);
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 1rem;
}

.guide-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.75rem 0 0.5rem;
  line-height: 1.3;
}
.guide-description {
  color: var(--color-text-secondary);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 700px;
}
.guide-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-top: 0.75rem;
}

/* Guide TOC */
.guide-toc {
  padding: 1rem 0;
}
.guide-toc details {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  max-width: 600px;
}
.guide-toc summary {
  cursor: pointer;
}
.guide-toc nav#TableOfContents ul {
  padding-left: 1.25rem;
  margin-top: 0.75rem;
}
.guide-toc nav#TableOfContents li {
  margin-bottom: 0.4rem;
}
.guide-toc nav#TableOfContents a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.95rem;
}
.guide-toc nav#TableOfContents a:hover {
  color: var(--color-accent);
}

/* Guide Content */
.guide-body {
  max-width: 750px;
  line-height: 1.7;
}
.guide-body h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 1.5rem 0 1rem;
}
.guide-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.guide-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}
.guide-body p {
  margin-bottom: 1rem;
}
.guide-body ul,
.guide-body ol {
  margin: 0.5rem 0 1rem;
  padding-left: 1.5rem;
}
.guide-body li {
  margin-bottom: 0.5rem;
}
.guide-body a {
  color: var(--color-accent);
}
.guide-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
}
.guide-body th,
.guide-body td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.guide-body th {
  background: var(--color-bg-secondary);
  font-weight: 600;
}
.guide-body strong {
  font-weight: 600;
}

/* Guide FAQ */
.guide-faq {
  padding: 2rem 0;
  background: var(--color-bg-secondary);
}
.guide-faq h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Guides List Page */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem;
}
.guide-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.guide-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.guide-card a {
  text-decoration: none;
  color: inherit;
}
.guide-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.guide-card-desc {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.guide-card-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}
.study-count {
  background: var(--gram-green-tint-08);
  color: var(--gram-status-success);
  padding: 0.15rem 0.5rem;
  border-radius: 8px;
  font-weight: 600;
}


/* =============================================
   Pillar Backlink (on research articles)
   ============================================= */

.pillar-backlink {
  display: inline-block;
  background: var(--color-bg-secondary);
  padding: 0.3rem 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}
.pillar-backlink a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}
.pillar-backlink a:hover {
  text-decoration: underline;
}

/* The Android smart banner was removed in B-2 (NIKDATA-263) - it ran at the
   top of every page alongside the bottom CTA and skipped iOS entirely. Its
   styles went with it. See .app-cta-bar below for the single replacement. */

[x-cloak] { display: none !important; }

}
@media (min-width: 1024px) {
  .research-grid,
  .enhanced-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* =============================================
   Chat FAB positioning (P2-5)
   ============================================= */

/* A-8 (NIKDATA-263): these were static offsets from when the app CTA bar was
   always on screen -- 5rem everywhere, 7rem on research pages. Both are wrong
   now that the bar is phones-only, scroll-gated and dismissable:

     - on desktop the bar never shows, so the launcher floated 112px up for
       nothing;
     - `body.type-research #research-chatbot` outranks the partial's own
       media query, so it was silently overriding the real clearance on the
       11,783 pages that matter most. It happened to clear the 68px bar, but
       by coincidence, not design.

   Clearance now lives with the widget, in partials/chatbot.html, keyed off
   --app-cta-bar-height. */

/* =============================================
   Compact CTA bar (P2-6)
   ============================================= */

.app-cta-bar {
  padding: 0.5rem 0.75rem;
}
.app-cta-bar-text {
  font-size: 0.8rem;
}
.app-cta-bar-button {
  font-size: 0.8rem;
  padding: 0.35rem 1rem;
}

/* =============================================
   Newsletter form message states
   ============================================= */

.newsletter-message {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
  display: none;
}
.newsletter-message--success {
  color: var(--color-primary);
}
.newsletter-message--error {
  color: var(--gram-status-error);
}
/* ───────────────────────────────────────────────────────────────────────────
   Hero stat cards on phones  —  NIKDATA-263

   The three cards sit in a row at 375px rather than stacking, because stacked
   they were 351px of an 812px screen and put "Latest Research Translations" at
   940px, off the first screen entirely.

   These sizes have to live here, not in the SCSS. The block above targets
   `.research-hero .hero-stats .stat .stat-number` with !important - four
   classes - and custom.css loads after the compiled stylesheet, so the SCSS
   media query lost on both specificity and order. At a 101px card, the 2rem
   numeral rendered ~110px wide and "Quality" was cut off mid-word.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .research-hero .hero-stats .stat .stat-number,
  .hero.research-hero .hero-stats .stat .stat-number,
  section.hero.research-hero .stat-number {
    font-size: 1.0625rem !important;
    margin: 0 0 4px !important;
  }
  .research-hero .hero-stats .stat .stat-label {
    font-size: 0.625rem !important;
    letter-spacing: 0.2px !important;
  }
}

/* ========================================================================
   2026-09-07 navigation + inner-page design pass
   Gram keeps the current forest/fresh/aqua system. The direct-competitor
   benchmark contributes concise navigation and visual chaptering only.
   ======================================================================== */

/* Selected navigation is a persistent shape as well as a color change. */
.site-header .main-navigation .menu.desktop-menu {
  gap: 0.35rem !important;
}
.site-header .main-navigation .menu.desktop-menu .menu-item a,
.site-header .nav-more-btn {
  min-height: 42px;
  padding: 0.6rem 0.9rem !important;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.site-header .main-navigation .menu.desktop-menu .menu-item a:hover,
.site-header .nav-more-btn:hover {
  background: var(--gram-green-forest-tint-08) !important;
}
.site-header .main-navigation .menu.desktop-menu .menu-item.active a,
.site-header .main-navigation .menu.desktop-menu .menu-item.active a:hover,
.site-header .nav-more--current .nav-more-btn,
.site-header .nav-more-btn[aria-expanded="true"] {
  color: var(--gram-experienceForest) !important;
  background: var(--gram-surfaceSoftGreen) !important;
  box-shadow: inset 0 0 0 1px var(--gram-green-forest-tint-08);
}
.site-header .main-navigation .menu.desktop-menu .menu-item.active a::after {
  display: none !important;
}

/* "More" is a compact disclosure, not a second full-width content band. */
.nav-more-menu {
  top: calc(var(--site-header-height) - 0.2rem);
  left: auto;
  right: max(var(--site-container-padding), calc((100vw - var(--site-container)) / 2 + var(--site-container-padding)));
  width: min(360px, calc(100vw - (2 * var(--site-container-padding))));
  padding: 0.65rem;
  border: 1px solid var(--gram-green-forest-tint-13);
  border-radius: 20px;
  background: rgba(252, 253, 249, 0.98);
  box-shadow: 0 20px 54px rgba(16, 38, 21, 0.15);
}
.nav-more-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  max-width: none;
  padding: 0;
}
.nav-more-item {
  min-height: 58px;
  grid-template-columns: 38px 1fr;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 14px;
}
.nav-more-item .nav-more-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--gram-surfaceSoftGreen);
}
.nav-more-item strong {
  font-size: 0.9375rem;
  color: var(--gram-inkGreen);
}
.nav-more-item:hover,
.nav-more-item:focus-visible {
  background: var(--gram-green-forest-tint-08);
  outline: none;
}
.mobile-navigation .menu-item.active a {
  color: var(--gram-experienceForest);
  background: var(--gram-surfaceSoftGreen);
  border-radius: 14px;
}

/* Shared visual hero for the two library indexes. */
.foods-list-page,
.guides-list-page {
  padding: 3rem 0 6rem;
}
.library-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: 2rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  border: 1px solid var(--gram-green-forest-tint-08);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 15%, rgba(184, 244, 93, 0.34), transparent 34%),
    linear-gradient(120deg, var(--gram-surfaceSoftGreen), rgba(169, 222, 219, 0.54));
}
.library-hero--foods {
  background:
    radial-gradient(circle at 88% 18%, rgba(169, 222, 219, 0.66), transparent 34%),
    linear-gradient(120deg, rgba(238, 249, 231, 0.9), var(--gram-surfaceCanvas));
}
.library-eyebrow,
.library-signal-label,
.guide-card-type {
  color: var(--gram-experienceForest);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
}
.library-hero h1 {
  max-width: 760px;
  margin: 0.65rem 0 1rem;
  font-family: var(--site-font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.library-hero .section-description {
  max-width: 680px;
  margin: 0;
  color: var(--gram-textMuted);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.library-hero-signal {
  position: relative;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  overflow: hidden;
  border-radius: 22px;
  background: var(--gram-experienceForest);
  color: var(--gram-surfaceCanvas);
}
.library-hero-signal > strong {
  margin-top: auto;
  font-family: var(--site-font-display);
  font-size: 4.5rem;
  line-height: 0.92;
  letter-spacing: -0.06em;
  color: var(--gram-experienceFresh);
}
.library-hero-signal > span:not(.library-signal-label) {
  margin-top: 0.45rem;
  font-size: 0.9375rem;
}
.library-hero-signal .library-signal-label {
  color: rgba(252, 253, 249, 0.72);
}
.library-hero-signal svg {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 112px;
  fill: none;
  stroke: var(--gram-supportAqua);
  stroke-width: 3;
  stroke-linecap: round;
}
.library-hero-signal svg circle {
  fill: var(--gram-experienceFresh);
  stroke: var(--gram-experienceForest);
}
.macro-key {
  position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  height: 72px;
}
.macro-key i {
  display: block;
  width: 20px;
  border-radius: 999px;
  background: var(--gram-experienceFresh);
}
.macro-key i:nth-child(1) { height: 42%; }
.macro-key i:nth-child(2) { height: 74%; background: var(--gram-supportAqua); }
.macro-key i:nth-child(3) { height: 100%; background: var(--gram-surfaceCanvas); }

/* Guide cards now lead with a visual signal and shorter copy. */
.guides-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.guide-card {
  padding: 0;
  overflow: hidden;
  border-color: var(--gram-green-forest-tint-13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 24px rgba(16, 38, 21, 0.04);
}
.guide-card:hover,
.guide-card:focus-within {
  border-color: var(--gram-green-forest-tint-18);
  box-shadow: 0 16px 36px rgba(16, 38, 21, 0.1);
  transform: translateY(-3px);
}
.guide-card > a {
  display: flex;
  height: 100%;
  min-height: 390px;
  flex-direction: column;
  padding: 0.7rem;
}
.guide-card-visual {
  position: relative;
  min-height: 124px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1rem;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gram-surfaceSoftGreen), rgba(169, 222, 219, 0.78));
}
.guide-card:nth-child(3n + 2) .guide-card-visual {
  background: linear-gradient(135deg, rgba(184, 244, 93, 0.38), var(--gram-surfaceSoftGreen));
}
.guide-card:nth-child(3n) .guide-card-visual {
  background: linear-gradient(135deg, rgba(169, 222, 219, 0.7), rgba(252, 253, 249, 0.9));
}
.guide-card-index {
  font-family: var(--site-font-display);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.07em;
  color: var(--gram-experienceForest);
}
.guide-card-visual svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--gram-experienceForest);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.guide-card-type {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.guide-card-title {
  margin: 1.35rem 0 0.65rem;
  padding-inline: 0.45rem;
  font-family: var(--site-font-editorial);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.guide-card-desc {
  margin-bottom: 1rem;
  padding-inline: 0.45rem;
  font-size: 0.9375rem;
  line-height: 1.48;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.guide-card-meta {
  margin-top: auto;
  padding: 0.9rem 0.45rem 0.35rem;
  border-top: 1px solid var(--gram-green-forest-tint-08);
  font-size: 0.8125rem;
}
.study-count {
  color: var(--gram-experienceForest);
  background: var(--gram-surfaceSoftGreen);
}

/* Nutrition cards use the calorie value as the visual anchor. */
.foods-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.food-card {
  padding: 0.7rem;
  border-color: var(--gram-green-forest-tint-13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 24px rgba(16, 38, 21, 0.04);
}
.food-card:hover,
.food-card:focus-within {
  border-color: var(--gram-green-forest-tint-18);
  box-shadow: 0 16px 36px rgba(16, 38, 21, 0.1);
  transform: translateY(-3px);
}
.food-card > a {
  display: flex;
  min-height: 300px;
  flex-direction: column;
}
.food-card-visual {
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gram-surfaceSoftGreen), rgba(169, 222, 219, 0.68));
}
.food-card:nth-child(3n + 2) .food-card-visual {
  background: linear-gradient(135deg, rgba(184, 244, 93, 0.32), var(--gram-surfaceSoftGreen));
}
.food-card-energy {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--gram-experienceForest);
}
.food-card-energy strong {
  font-family: var(--site-font-display);
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -0.06em;
}
.food-card-energy small { font-size: 0.85rem; font-weight: 700; }
.food-card-visual svg {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: var(--gram-experienceForest);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.food-card-title {
  margin: 1.15rem 0 0.8rem;
  padding-inline: 0.45rem;
  font-size: 1.22rem;
  line-height: 1.25;
}
.food-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  padding-inline: 0.45rem;
}
.food-card-stats .stat {
  padding: 0;
  background: none;
  color: var(--gram-textMuted);
  font-size: 0.78rem;
}
.food-card-serving {
  margin-top: auto;
  padding: 0.85rem 0.45rem 0.35rem;
  border-top: 1px solid var(--gram-green-forest-tint-08);
  font-size: 0.8125rem;
}

/* Detail pages: visual evidence panels, centered reading measure, fewer
   duplicate blocks, and compact collapsed navigation for long guides. */
.guide-page .guide-hero,
.food-fact-page .food-hero {
  padding: 3rem 0 1.5rem;
}
.guide-hero-panel,
.food-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--gram-green-forest-tint-08);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 18%, rgba(184, 244, 93, 0.32), transparent 28%),
    linear-gradient(120deg, var(--gram-surfaceSoftGreen), rgba(169, 222, 219, 0.5));
}
.guide-title,
.food-fact-page .food-title {
  max-width: 840px;
  margin: 1rem 0 0.85rem;
  font-family: var(--site-font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.65rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.guide-description,
.food-fact-page .food-description {
  max-width: 720px;
  font-size: 1.05rem;
  line-height: 1.55;
}
.guide-badge {
  margin-left: 0.65rem;
  color: var(--gram-experienceForest);
  background: rgba(252, 253, 249, 0.68);
}
.guide-stats {
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.guide-stats span {
  padding: 0.38rem 0.65rem;
  border-radius: 999px;
  background: rgba(252, 253, 249, 0.65);
  color: var(--gram-textMuted);
}
.guide-hero-evidence,
.food-hero-nutrition {
  position: relative;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
  border-radius: 22px;
  background: var(--gram-experienceForest);
  color: var(--gram-surfaceCanvas);
}
.guide-hero-evidence > span,
.nutrition-label {
  color: rgba(252, 253, 249, 0.72);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.guide-hero-evidence > strong,
.food-hero-nutrition > strong {
  margin-top: 0.55rem;
  font-family: var(--site-font-display);
  font-size: 4.8rem;
  line-height: 0.95;
  letter-spacing: -0.07em;
  color: var(--gram-experienceFresh);
}
.guide-hero-evidence > p { margin: 0.45rem 0 0; color: var(--gram-surfaceCanvas); }
.evidence-orbit {
  position: absolute;
  right: -28px;
  bottom: -48px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(169, 222, 219, 0.45);
  border-radius: 50%;
}
.evidence-orbit i {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gram-supportAqua);
}
.evidence-orbit i:nth-child(1) { top: 10px; left: 48px; }
.evidence-orbit i:nth-child(2) { top: 62px; left: -5px; background: var(--gram-experienceFresh); }
.evidence-orbit i:nth-child(3) { top: 92px; right: 4px; }

.guide-toc { padding: 0.75rem 0 1.5rem; }
.guide-toc details {
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border-color: var(--gram-green-forest-tint-13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}
.guide-toc summary {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.15rem;
  list-style: none;
}
.guide-toc summary::-webkit-details-marker { display: none; }
.guide-toc summary span { display: grid; gap: 0.12rem; }
.guide-toc summary small { color: var(--gram-textMuted); font-size: 0.8rem; font-weight: 400; }
.guide-toc summary i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gram-surfaceSoftGreen);
  color: var(--gram-experienceForest);
  font-style: normal;
  font-size: 1.3rem;
}
.guide-toc details[open] summary i { transform: rotate(45deg); }
.guide-toc nav#TableOfContents { padding: 0 1.15rem 1rem; }
.guide-content .content-wrapper,
.food-content .content-wrapper {
  max-width: 820px;
  margin-inline: auto;
}
.guide-body,
.food-fact-page .food-body { max-width: none; font-size: 1.04rem; line-height: 1.78; }
.guide-body > h1:first-child,
.guide-body > h1:first-child + p,
.guide-body > h1:first-child + p + p { display: none; }
.food-fact-page .food-body > h1:first-child + p { display: none; }
.guide-body > h1:first-child + p + p + p {
  margin: 0 0 2.5rem;
  padding: 1.5rem;
  border-left: 4px solid var(--gram-experienceFresh);
  border-radius: 0 16px 16px 0;
  background: var(--gram-surfaceSoftGreen);
  color: var(--gram-inkGreen);
}
.guide-body > hr:first-of-type { display: none; }
.guide-body h2,
.food-fact-page .food-body h2 {
  position: relative;
  margin-top: 4rem;
  padding-top: 0;
  border-top: 0;
  font-family: var(--site-font-display);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
}
.guide-body h2::before,
.food-fact-page .food-body h2::before {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--gram-experienceFresh);
}
.guide-body ul,
.guide-body ol,
.food-fact-page .food-body ul {
  margin: 1.25rem 0 1.5rem;
  padding: 1.25rem 1.25rem 1.25rem 2.6rem;
  border-radius: 16px;
  background: rgba(238, 249, 231, 0.72);
}
.guide-body > p:has(> strong:first-child) {
  padding: 1rem 1.15rem;
  border: 1px solid var(--gram-green-forest-tint-08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}
.food-hero-nutrition > strong small {
  font-family: var(--site-font-body);
  font-size: 0.9rem;
  letter-spacing: 0;
}
.nutrition-macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin-top: 1.25rem;
}
.nutrition-macros span {
  display: grid;
  gap: 0.1rem;
  color: rgba(252, 253, 249, 0.7);
  font-size: 0.65rem;
}
.nutrition-macros b { color: var(--gram-surfaceCanvas); font-size: 0.9rem; }
.food-fact-page .food-body table {
  overflow: hidden;
  border: 1px solid var(--gram-green-forest-tint-13);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
}
.food-fact-page .food-body th { background: var(--gram-surfaceSoftGreen); }

/* Research methodology becomes three scannable proof cards. */
.research-trust-heading {
  max-width: 720px;
  margin-bottom: 2rem;
}
.research-trust-heading h2 {
  margin: 0;
  font-family: var(--site-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.research-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.research-trust-card {
  min-height: 220px;
  padding: 1.5rem;
  border: 1px solid var(--gram-green-forest-tint-13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
}
.research-trust-card:nth-child(2) { background: var(--gram-surfaceSoftGreen); }
.research-trust-card:nth-child(3) { background: rgba(169, 222, 219, 0.42); }
.research-trust-number {
  color: var(--gram-experienceForest);
  font-family: var(--site-font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
}
.research-trust-card h3 { margin: 2.4rem 0 0.55rem; font-size: 1.15rem; }
.research-trust-card p { margin: 0; color: var(--gram-textMuted); line-height: 1.5; }

/* The archive has two facts, so its grid must have two columns. Keeping a
   three-column track created a visible phantom gap and pushed the group left. */
.archive-hero.section-hero { padding-block: 3rem 3.5rem; }
.archive-hero.section-hero .hero-description { margin-bottom: 2rem; }
.archive-hero.section-hero .archive-search { margin-bottom: 1.5rem; }
.archive-hero.section-hero .archive-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 400px;
}
.archive-hero.section-hero .archive-stats .stat { padding: 1rem; }
.archive-hero.section-hero .archive-stats .stat .stat-number {
  margin: 0 0 0.35rem;
  font-size: 1.8rem;
}

@media (max-width: 1023px) {
  .guides-grid,
  .foods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-hero,
  .guide-hero-panel,
  .food-hero-panel { grid-template-columns: minmax(0, 1fr) 220px; }
}

@media (max-width: 767px) {
  .foods-list-page,
  .guides-list-page { padding: 1rem 0 4rem; }
  .library-hero,
  .guide-hero-panel,
  .food-hero-panel {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 22px;
  }
  .library-hero h1,
  .guide-title,
  .food-fact-page .food-title { font-size: clamp(2rem, 8.5vw, 2.35rem); }
  .library-hero-signal { min-height: 160px; }
  .guide-hero-evidence,
  .food-hero-nutrition { min-height: 180px; }
  .guide-hero-evidence > strong,
  .food-hero-nutrition > strong { font-size: 4rem; }
  .guides-grid,
  .foods-grid,
  .research-trust-grid { grid-template-columns: 1fr; }
  .guide-card > a { min-height: 350px; }
  .food-card > a { min-height: 280px; }
  .guide-page .guide-hero,
  .food-fact-page .food-hero { padding-top: 1rem; }
  .guide-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
  .guide-badge { margin-left: 0; }
  .guide-stats { flex-wrap: wrap; }
  .guide-body h2,
  .food-fact-page .food-body h2 { margin-top: 3rem; }
  .research-trust-card { min-height: 180px; }
}