/* =============================================================================
 * assets/styles.css — Site-wide styles for VitaminsChart.
 *
 * Loaded by every page via <link rel="stylesheet" href="/assets/styles.css">.
 *
 * Sections (search for the comment to jump):
 *   1. Theme variables (:root)
 *   2. Base reset + typography
 *   3. Layout helpers (.container, etc.)
 *   4. Top bar / brand / nav / cache-stamp
 *   5. Breadcrumb bar (page-scope variants for the separator)
 *   6. Page header (eyebrow, lead, h1 size by page-scope)
 *   7. Index / home (the matrix table, legend, search, self-interaction)
 *   8. Hub page (per-supplement landing: stat chips, group, pair-grid)
 *   9. Goals / pillar pages (goal grid, supplement pills, pair cards)
 *  10. Detail / matrix page (verdict stamp, summary card, FAQ, sources, etc.)
 *  11. Common (shared) pieces: wg-btn, med-disclaimer, brutal-card, sub-card
 *  12. Disclaimer (footer)
 *  13. Author card (partial)
 *  14. Loading overlay (nav-overlay) + spin keyframe
 *  15. Media queries
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * 1. Theme variables
 * ---------------------------------------------------------------------------
 */
:root {
  --wg-black:  #0a0a0a;
  --wg-secondary:  #708090;
  --wg-white:  #ffffff;
  --wg-gray:   #f5f5f5;
  --wg-border: #0a0a0a;
  --wg-yellow: #ffec00;
}

/* ---------------------------------------------------------------------------
 * 2. Base reset + typography
 * ---------------------------------------------------------------------------
 */
* { box-sizing: border-box; }
html, body {
  background: var(--wg-white);
  color: var(--wg-black);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

/* Default heading sizes (matrix/detail is the largest) */
h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--wg-black);
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
p  { margin: 0 0 1rem; color: #333; }
a  { color: var(--wg-black); }
code {
  background: var(--wg-gray);
  border: 1px solid var(--wg-border);
  padding: 1px 6px;
  font-size: 0.9em;
  font-weight: 600;
}

/* Page-scope heading overrides. Pages that want smaller hero text add a
 * body class so this section can keep the cascade one level deep. */
.page-hub h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.page-hub h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.page-hub h3 { font-size: clamp(1.05rem, 1.8vw, 1.3rem); }

.page-pillar h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.page-pillar h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.page-pillar h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

.page-guide h1 { font-weight: 800; letter-spacing: -0.03em; font-size: 2.2rem; margin: 0 0 1rem; }
.page-guide p  { font-size: 1.05rem; color: #333; line-height: 1.6; margin: 0 0 1.25rem; }
body.page-guide { background: #f5f5f5; font-family: ui-sans-serif, system-ui, sans-serif; padding: 2rem; }
.page-guide .box {
  max-width: 640px; margin: 4rem auto; background: #fff;
  border: 3px solid #0a0a0a; box-shadow: 6px 6px 0 #ffec00;
  padding: 2.5rem; border-radius: 16px;
}
.page-guide .btn {
  display: inline-block; padding: 0.75rem 1.5rem; background: #0a0a0a; color: #fff;
  text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  border: 2px solid #0a0a0a; box-shadow: 3px 3px 0 #ffec00;
}
.page-guide .btn:hover {
  transform: translate(1px, 1px); box-shadow: 2px 2px 0 #ffec00; color: #fff; text-decoration: none;
}
.page-guide .btn-outline { background: #fff; color: #0a0a0a; box-shadow: 3px 3px 0 #0a0a0a; }

.page-home h1 {
  font-size: 1.4rem;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  /* Comic Sans with the global -0.03em letter-spacing collapses letters
   * into each other; widen it back to default so it reads cleanly. */
  letter-spacing: 0;
}   /* matches the old Bootstrap h1 sizing on the home page */
.page-home p  { color: #333; }
body.page-home { background-color: #f8f9fa; }
/* ---------------------------------------------------------------------------
 * 3. Layout helpers
 * ---------------------------------------------------------------------------
 */
.container { max-width: 1100px; padding: 0 1.5rem; }
.page-home .container-fluid {
  max-width: 100%;
  padding: 0 10px;
}

/* ---------------------------------------------------------------------------
 * 4. Top bar / brand / nav / cache-stamp
 * ---------------------------------------------------------------------------
 */
.topbar {
  background: var(--wg-white);
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #ff8c42, #ff5e8a, #d6336c) 1;
}
.topbar-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 0; flex-wrap: wrap; gap: 1rem;
}
.topbar-right {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.topbar-nav {
  display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap;
}
.brand {
  font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--wg-black) !important; text-decoration: none;
}
.brand-mark {
  display: inline-block; background: var(--wg-yellow);
  border: 2px solid var(--wg-black); padding: 2px 8px; margin-right: 6px;
}
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wg-black);
  text-decoration: none;
  padding: 6px 10px;
  border: 2px solid transparent;
}
.nav-link:hover {
  background: var(--wg-yellow);
  border-color: var(--wg-black);
  color: var(--wg-black);
  text-decoration: none;
}
.nav-link.is-active {
  background: transparent;
  color: var(--wg-black);
  border-color: transparent;
  text-decoration: none;
  /* Bold underline that grows from the centre on click — softer than a chip */
  border-bottom: 3px solid var(--wg-black);
  padding-bottom: 3px;            /* compensate for the extra border weight so the link height stays the same */
  font-weight: 800;                /* bump one step from the regular 700 */
}
.cache-stamp {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #444;
  border: 2px solid var(--wg-border); padding: 4px 10px;
  background: var(--wg-white);
}

/* ---------------------------------------------------------------------------
 * 5. Breadcrumb bar
 * ---------------------------------------------------------------------------
 */
.breadcrumb-bar {
  background: var(--wg-gray);
  border-bottom: 1px solid var(--wg-border);
  padding: 0.6rem 0;
  font-size: 0.9rem;
}
.breadcrumb-trail {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
.breadcrumb-trail li { display: inline-flex; align-items: center; gap: 0.5rem; }
.breadcrumb-trail li + li::before {
  content: "›"; color: #888; font-weight: 700;
}
.breadcrumb-trail a {
  color: #444; text-decoration: none; border-bottom: 1px solid transparent;
}
.breadcrumb-trail a:hover { border-bottom-color: #444; }
.breadcrumb-trail li:last-child { color: #000; font-weight: 700; }

/* Pillar pages use a slash separator instead of chevron */
.page-pillar .breadcrumb-trail li + li::before { content: "/"; }
.page-pillar .breadcrumb-trail a {
  color: var(--wg-black); border-bottom: none;
}
.page-pillar .breadcrumb-trail a:hover { text-decoration: underline; border-bottom: none; }

/* ---------------------------------------------------------------------------
 * 6. Page header (eyebrow + lead)
 * ---------------------------------------------------------------------------
 */
.page-header { padding: 4rem 0 3rem; border-bottom: 1px solid var(--wg-border); }
.page-hub  .page-header { padding: 3rem 0 2rem; }
.page-pillar .page-header { padding: 3.5rem 0 2.5rem; }

.eyebrow {
  display: inline-block; font-size: 0.85rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  background: #fff;
  color: #555;
  padding: 6px 12px; margin-bottom: 1.25rem;
  border: 2.5px solid rgba(236, 64, 122, .55);
  border-radius: .5rem;
}
.page-pillar .page-header .eyebrow {
  font-size: 0.78rem; padding: 5px 10px; margin-bottom: 1rem;
}
.page-hub .page-header .eyebrow {
  padding: 6px 12px; margin-bottom: 1rem;
}

.page-header .lead {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: #444; max-width: 60ch; margin-top: 1rem;
}
.page-hub .page-header .lead {
  font-size: 1.15rem; max-width: 60ch;
}
.page-pillar .page-header .lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 65ch;
}

/* Optional big icon next to a page title (used on goals/404) */
.page-header i.page-icon {
  font-size: 2.5rem; color: var(--wg-black);
  background: var(--wg-yellow); border: 3px solid var(--wg-black);
  padding: 14px 18px; display: inline-block; margin-bottom: 1.5rem;
  box-shadow: 4px 4px 0 var(--wg-border);
}

/* ---------------------------------------------------------------------------
 * 7. Home page — the matrix
 * ---------------------------------------------------------------------------
 */
/* body itself is set on the document; this is here as a reminder */
body.page-home { background-color: #f8f9fa; }
.matrix-wrapper {
  /* Needs to be a scroll container on BOTH axes (not just x) for the
     sticky <th> (top) and sticky first-column <td> (left) to engage
     reliably across browsers. The max-height creates the actual
     vertical scroll context the page used to provide. */
  --matrix-max-h: calc(100vh - 220px);
  overflow: auto;
  max-height: var(--matrix-max-h);
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 15px;
  /* Allow horizontal overflow to extend past the rounded corners. */
  position: relative;
}
.matrix-table {
  font-size: 0.75rem;
  margin-bottom: 0;
  min-width: 1200px;
}
.matrix-table th, .matrix-table td {
  padding: 4px 6px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  min-width: 28px;
}
.matrix-table th {
  position: sticky;
  top: 0;
  background: #2c3e50;
  color: white;
  z-index: 10;
  font-weight: 600;
  font-size: 0.7rem;
  /* Smooth fade between fully opaque (at rest) and the
     "stuck-and-floating" state set by the .is-scrolled-y class. */
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.matrix-table th:first-child {
  left: 0;
  /* Top-left corner: must sit above the column header row AND the
     sticky first column. 12 > 11 (other th) and > 5 (sticky td). */
  z-index: 12;
  background: #1a252f;
  min-width: 120px;
  max-width: 140px;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
/* When the user has actually scrolled vertically inside the wrapper,
   fade the column-header row (and its top-left corner cell) so it's
   visibly floating above the data. */
.matrix-wrapper.is-scrolled-y .matrix-table th { opacity: 0.85; }
.matrix-wrapper.is-scrolled-y .matrix-table th:first-child { opacity: 0.92; }
.matrix-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background: #f8f9fa;
  font-weight: 500;
  /* Same fade treatment, gated on horizontal scroll instead. */
  transition: background-color 0.15s ease, opacity 0.15s ease;
  min-width: 120px;
  max-width: 140px;
  text-align: left;
  font-size: 0.7rem;
  padding: 2px 6px;
  line-height: 1.2;
  word-wrap: break-word;
  white-space: normal;
}
/* When the user has scrolled horizontally, fade the sticky row-label
   column (and the corner cell) so the column the eye is following
   underneath reads cleanly. */
.matrix-wrapper.is-scrolled-x .matrix-table td:first-child { opacity: 0.85; }
.matrix-table td:first-child:hover { z-index: 6; }
.matrix-table .fixed-header { position: sticky; top: 0; z-index: 10; }

/* Bootstrap-compatible cell colors (slightly stronger than the default) */
.table-success { background-color: #d4edda !important; }
.table-info    { background-color: #d1ecf1 !important; }
.table-danger  { background-color: #f8d7da !important; }

/* Self-interaction cell background */
.self-interaction { background-color: #FFFFE0 !important; }

.legend {
  margin: 20px 0;
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.legend-item {
  display: inline-flex; align-items: center; margin-right: 25px;
}
.legend-icon {
  font-size: 1.2rem; margin-right: 8px; width: 24px; text-align: center;
}
.badge-count {
  font-size: 0.8rem; background: #6c757d; color: white;
  padding: 2px 10px; border-radius: 12px;
}
.highlight {
  background-color: #fff3cd !important;
  transition: background-color 0.3s;
}
.sticky-col {
  position: sticky; left: 0; background-color: white;
  z-index: 5; border-right: 2px solid #dee2e6;
}
.header-tooltip { cursor: help; }

.cell-content {
  display: flex; align-items: center; justify-content: center; min-height: 24px;
}
.cell-link {
  display: block; width: 100%; height: 100%;
  color: inherit; text-decoration: none;
}
.cell-link:hover { text-decoration: none; color: inherit; }

.supplement-name-cell {
  display: flex; flex-direction: column; line-height: 1.2; padding: 2px 0;
  word-wrap: break-word; overflow-wrap: break-word;
}
.supplement-name-cell .main-name { font-weight: 600; }
.supplement-name-cell .bracket-name {
  font-size: 0.6rem; color: #6c757d; font-weight: 400;
  word-wrap: break-word; overflow-wrap: break-word; max-width: 130px;
}

/* ---------------------------------------------------------------------------
 * 8. Hub page — per-supplement landing
 * ---------------------------------------------------------------------------
 */
.stat-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.stat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 6px 10px; border: 2px solid var(--wg-border);
}
.stat-chip.red   { background: #ffd1d1; }
.stat-chip.green { background: #d4edda; }
.stat-chip.blue  { background: #cfe7ff; }

.group { padding: 2rem 0; border-bottom: 1px solid var(--wg-border); }
.group:last-child { border-bottom: none; }
.group-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 1rem; }
.group-head h2 { text-transform: uppercase; letter-spacing: -0.01em; }
.group-head .num {
  font-size: 0.95rem; font-weight: 800;
  background: var(--wg-black); color: var(--wg-yellow);
  padding: 3px 9px; letter-spacing: 0.06em;
}
.group-head p { color: #555; margin: 0.5rem 0 0; max-width: 60ch; }

.pair-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.6rem;
}
.pair-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 0.9rem; background: var(--wg-white);
  border: 2px solid var(--wg-border); border-left-width: 10px;
  text-decoration: none; color: var(--wg-black); font-weight: 700; font-size: 0.95rem;
  box-shadow: 2px 2px 0 var(--wg-border);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pair-link:hover {
  text-decoration: none; color: var(--wg-black);
  transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--wg-border);
}
.pair-link.red   { border-left-color: #d6336c; }
.pair-link.green { border-left-color: #198754; }
.pair-link.blue  { border-left-color: #0d6efd; }
.pair-link .arrow { color: #999; }

.cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }

.footer-note {
  background: var(--wg-gray); border-top: 3px solid var(--wg-border);
  padding: 2rem 0; margin-top: 3rem; font-size: 0.95rem; color: #444; text-align: center;
}

/* ---------------------------------------------------------------------------
 * 9. Goals / pillar pages
 * ---------------------------------------------------------------------------
 */
.goal-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin: 2.5rem 0;
}
.goal-card {
  display: block; text-decoration: none; color: var(--wg-black);
  background: var(--wg-white);
  border: 3px solid var(--wg-border);
  padding: 1.5rem;
  box-shadow: 4px 4px 0 var(--wg-border);
  transition: transform 0.08s ease;
}
.goal-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--wg-border);
  text-decoration: none;
}
.goal-card .goal-icon {
  display: inline-block;
  font-size: 1.6rem; color: var(--wg-black);
  background: var(--wg-yellow); border: 2px solid var(--wg-black);
  padding: 8px 12px; margin-bottom: 1rem;
}
.goal-card h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.goal-card .goal-tagline { color: #555; font-size: 0.95rem; margin: 0; }

.supplement-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1.5rem;
}
.supplement-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--wg-gray); color: var(--wg-black);
  border: 2px solid var(--wg-border);
  padding: 5px 10px; text-decoration: none;
}
.supplement-pill:hover { background: var(--wg-yellow); text-decoration: none; }

.pair-list {
  list-style: none; padding: 0; margin: 1.5rem 0;
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.pair-card {
  display: block; text-decoration: none; color: var(--wg-black);
  background: var(--wg-white);
  border: 3px solid var(--wg-border);
  padding: 1rem 1.25rem;
  box-shadow: 3px 3px 0 var(--wg-border);
}
.pair-card:hover {
  transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--wg-border); text-decoration: none;
}
.pair-card .pair-names { font-weight: 800; font-size: 1.05rem; line-height: 1.2; margin-bottom: 0.4rem; }
.pair-card .pair-verdict {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #d4edda; color: #155724;
  border: 2px solid #155724;
  padding: 2px 8px;
}
.pair-card .pair-cta {
  display: block; margin-top: 0.5rem; font-size: 0.8rem; color: #555;
}
.pair-card .pair-cta i { margin-left: 4px; }

.no-pairs {
  border: 2px dashed var(--wg-border);
  background: #fffbe6;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
}

.back-to-pillar {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wg-black);
  text-decoration: none;
  margin: 2rem 0 0;
}
.back-to-pillar:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * 10. Detail / matrix page (interaction report)
 * ---------------------------------------------------------------------------
 */
.verdict-stamp {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 1rem 1.5rem;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  border: 3px solid var(--wg-border);
  box-shadow: 6px 6px 0 var(--wg-border);
}
.verdict-stamp .bi { font-size: 1.6em; }
.verdict-stamp-green { background: #d4edda; color: #0a3d1f; }
.verdict-stamp-blue  { background: #cfe7ff; color: #0a2a4a; }
.verdict-stamp-red   { background: var(--wg-yellow); color: var(--wg-black); }

/* Big yellow callout band (softened — full #ffec00 is too loud) */
.quick-answer {
  background: #fff3a3;
  border-top: 3px solid var(--wg-border);
  border-bottom: 3px solid var(--wg-border);
  padding: 2.25rem 0;
}
.quick-answer h2 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  text-transform: uppercase; letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.quick-answer p { color: #1a1a1a; font-size: 1.1rem; margin: 0; }
.quick-answer h2 i { color: #b8860b; } /* amber accent instead of pure black icon */

/* Card grid (brutalist) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 3rem 0;
}

/* Caution box (yellow with red accent) */
.caution-box {
  background: #fff3cd;
  border: 3px solid var(--wg-border);
  border-left: 12px solid #d6336c;
  padding: 1.5rem 1.75rem;
  border-radius: 12px;
  margin-top: 2rem;
  box-shadow: 4px 4px 0 var(--wg-border);
}
.caution-box strong {
  display: block; font-size: 1.1rem; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 0.5rem; color: var(--wg-black);
}
.caution-box p, .caution-box { color: #1a1a1a; }

/* Section heading */
.section-head {
  display: flex; align-items: baseline; gap: 14px;
  margin: 3rem 0 1.25rem;
  border-bottom: 3px solid var(--wg-border);
  padding-bottom: 0.5rem;
}
.section-head .num {
  font-size: 0.95rem; font-weight: 800;
  background: var(--wg-black); color: var(--wg-yellow);
  padding: 3px 9px; letter-spacing: 0.06em;
}
.section-head h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  text-transform: uppercase; letter-spacing: -0.01em;
}

/* Slug display */
.slug-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 0.75rem; font-size: 0.95rem; color: #555;
}
.slug-row code { background: var(--wg-white); }

/* Byline chips row */
.byline-row {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: 1.5rem;
}
.byline-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; padding: 5px 10px;
  background: #fff; border: 2px solid var(--wg-border);
  color: #222; letter-spacing: 0.01em;
}
/* Goals pages (page-pillar): borderless byline chips. Scoped to
 * .page-pillar so matrix/detail pages keep their boxed chips. */
.page-pillar .byline-row { gap: 1.25rem; }
.page-pillar .byline-chip {
  padding: 0;
  background: transparent;
  border: 0;
}

/* Matrix/detail pages (page-detail): same borderless treatment. */
.page-detail .byline-row { gap: 1.25rem; }
.page-detail .byline-chip {
  padding: 0;
  background: transparent;
  border: 0;
}

/* Hub pages (page-hub): same borderless treatment. */
.page-hub .byline-row { gap: 1.25rem; }
.page-hub .byline-chip {
  padding: 0;
  background: transparent;
  border: 0;
}
/* Home page (page-home): same borderless treatment. */
.page-home .byline-row { gap: 1.25rem; }
.page-home .byline-chip {
  padding: 0;
  background: transparent;
  border: 0;
}
.byline-chip i { color: #b8860b; }
.byline-tip { color: #888; font-size: 0.78rem; margin-left: 4px; }

/* FAQ block */
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; padding: 0; margin: 0; list-style: none; }
.faq-item {
  background: var(--wg-white);
  border: 2px solid var(--wg-border);
  border-radius: 12px;
  padding: 0;
  box-shadow: 3px 3px 0 var(--wg-border);
  overflow: hidden;
}
.faq-q {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0;
  padding: 1.1rem 1.25rem; cursor: pointer;
  font-weight: 800; font-size: 1.05rem; color: var(--wg-black);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-q::after {
  content: "+"; font-size: 1.4rem; font-weight: 800; color: #777;
  transition: transform 0.15s ease;
}
.faq-item[open] .faq-q::after { content: "−"; }
.faq-a {
  padding: 0 1.25rem 1.25rem; margin: 0;
  color: #333; font-size: 1.02rem; line-height: 1.6;
  border-top: 1px dashed #ddd;
  padding-top: 1rem;
}

/* Related pairs grid */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}
.related-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem;
  background: var(--wg-white);
  border: 2px solid var(--wg-border);
  text-decoration: none; color: var(--wg-black);
  font-weight: 700; font-size: 0.95rem;
  box-shadow: 2px 2px 0 var(--wg-border);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.related-link:hover {
  text-decoration: none; color: var(--wg-black);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--wg-border);
}
.related-link .arrow { color: #999; }

/* Sources block */
.sources-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0.5rem;
}
.sources-list li {
  padding: 0.6rem 0.9rem;
  background: var(--wg-white);
  border: 2px solid var(--wg-border);
  border-left: 8px solid var(--wg-border);
  font-size: 0.98rem;
}
.sources-list a { color: #1a4a8a; text-decoration: underline; text-underline-offset: 2px; }
.sources-list .src-pub {
  display: inline-block;
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--wg-black); color: var(--wg-yellow);
  padding: 2px 6px; margin-right: 0.5rem;
}

/* Form notes + common stacks */
.sub-card {
  background: var(--wg-white);
  border: 2px solid var(--wg-border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 3px 3px 0 var(--wg-border);
}
.sub-card h3 {
  font-size: 1.2rem; text-transform: uppercase; letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.sub-card .card-num { margin-bottom: 0.4rem; }
.stacks-pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.stacks-pill {
  display: inline-block;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--wg-yellow); color: var(--wg-black);
  border: 2px solid var(--wg-border);
  padding: 4px 9px;
}

/* ---------------------------------------------------------------------------
 * 11. Shared components (used by multiple pages)
 * ---------------------------------------------------------------------------
 */

/* Neo-brutalist card (detail page card grid) */
.brutal-card {
  background: var(--wg-white);
  border: 2px solid var(--wg-border);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 4px 4px 0 var(--wg-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brutal-card:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 0 var(--wg-border);
}
.brutal-card h3 {
  font-size: 1.35rem; margin-bottom: 0.75rem;
  text-transform: uppercase; letter-spacing: -0.01em;
}
.brutal-card .card-num {
  display: inline-block; font-size: 0.8rem; font-weight: 800;
  background: var(--wg-black); color: var(--wg-yellow);
  padding: 3px 8px; margin-bottom: 0.75rem;
  letter-spacing: 0.08em;
}
.brutal-card p { font-size: 1.02rem; color: #333; margin: 0; }

/* Big summary hero card (dark) */
.summary-card {
  background: var(--wg-black);
  color: var(--wg-white);
  border: 3px solid var(--wg-border);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 6px 6px 0 var(--wg-yellow);
  margin: 3rem 0;
}
.summary-card h2 {
  color: var(--wg-yellow);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.summary-card p { color: #f5f5f5; font-size: 1.2rem; line-height: 1.55; margin: 0; }
.summary-card .meta-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.25rem; }
.summary-card .chip {
  display: inline-block; font-weight: 800; text-transform: uppercase;
  font-size: 0.8rem; letter-spacing: 0.08em;
  padding: 5px 10px;
  border: 2px solid var(--wg-yellow);
  color: var(--wg-black);
  background: var(--wg-yellow);
}
.summary-card .chip-outline {
  background: transparent; color: var(--wg-yellow);
}

/* Bulleted list with brutalist check bullets */
.brutal-list {
  list-style: none; padding: 0; margin: 0;
}
.brutal-list li {
  position: relative; padding: 0.75rem 0 0.75rem 2rem;
  border-bottom: 1px solid var(--wg-border);
  font-size: 1.05rem; color: #222;
}
.brutal-list li:last-child { border-bottom: none; }
.brutal-list li::before {
  content: "\F26E"; /* bi-check2 */
  font-family: "bootstrap-icons";
  position: absolute; left: 0; top: 0.85rem;
  width: 1.25rem; height: 1.25rem;
  background: var(--wg-yellow); color: var(--wg-black);
  border: 2px solid var(--wg-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800;
}

/* Buttons (neo-brutalist) — used by matrix and hub */
.wg-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.875rem 1.75rem;
  font-weight: 700; font-size: 1rem; text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid var(--wg-border);
  background: var(--wg-white);
  color: var(--wg-black);
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--wg-border);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wg-btn:hover {
  text-decoration: none;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--wg-border);
  color: var(--wg-black);
}
.wg-btn-primary {
  background: var(--wg-black);
  color: var(--wg-white);
  box-shadow: 4px 4px 0 var(--wg-yellow);
}
.wg-btn-primary:hover {
  background: var(--wg-black);
  color: var(--wg-white);
  box-shadow: 2px 2px 0 var(--wg-yellow);
}
.wg-btn-yellow { background: var(--wg-yellow); }

/* Medical disclaimer (used by matrix + hub + goals) */
.med-disclaimer,
.pillar-disclaimer {
  background: #fff3cd;
  border: 3px solid var(--wg-border);
  border-left: 12px solid #d6336c;
  padding: 1.25rem 1.5rem;
  margin: 2rem auto;
  max-width: 1100px;
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--wg-border);
}
.pillar-disclaimer { margin: 2rem auto 3rem; }
.med-disclaimer strong,
.pillar-disclaimer strong {
  display: block; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem;
}
.med-disclaimer p,
.pillar-disclaimer p { margin: 0; font-size: 0.95rem; color: #1a1a1a; }

/* ---------------------------------------------------------------------------
 * 12. Disclaimer (footer)
 * ---------------------------------------------------------------------------
 */
.disclaimer {
  border-top: 3px solid #0a0a0a;
  padding: 1.5rem 0;
  margin-top: 3rem;
}
.disclaimer h3 {
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}
.disclaimer p { color: #444; font-size: 0.95rem; margin: 0; }

/* ---------------------------------------------------------------------------
 * 13. Author card (partial) — bubbly pink CTA + neo-brutalist shadows
 * ---------------------------------------------------------------------------
 */
/* Neo-brutalist hard shadows Bootstrap doesn't ship. */
.brutal-shadow         { box-shadow: 6px 6px 0 #ffb6c1, 6px 6px 0 4px #ffe1ea; }
.brutal-shadow-sm      { box-shadow: 4px 4px 0 #ffb6c1, 4px 4px 0 3px #ffe1ea; }
.brutal-shadow-xs      { box-shadow: 2px 2px 0 #ffb6c1, 2px 2px 0 2px #ffe1ea; }
.brutal-border-dashed  { border-style: dashed !important; }
/* Author photo (partials/author-card.inc.php)
   - Default (desktop): 200x250 box, cover-cropped from the source portrait.
   - Tablet (<992px): 160x200
   - Mobile (<768px): 140x175, centered.
   object-fit: cover means the photo fills the box without stretching —
   the source is 964x1280 (portrait), so a bit gets cropped at the top/bottom
   on wider boxes, but the head-and-shoulders framing stays intact. */
.author-photo {
  width: 200px;
  height: 250px;
  object-fit: cover;
  object-position: center 25%;
}
@media (max-width: 991.98px) { .author-photo { width: 160px; height: 200px; } }
@media (max-width: 767.98px) { .author-photo { width: 140px; height: 175px; margin-inline: auto; } }
/* On md+ viewports, let the photo fill its column instead of staying a small fixed thumb. */
@media (min-width: 768px) {
  .author-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 420px;
  }
}
.author-eyebrow { font-size: 0.75rem; letter-spacing: 0.08em; }

/* Author card body paragraphs — same playful font family as the DM hero
 * CTAs and the .author-cta-heading, but at a regular weight so the body
 * copy stays readable. */
.author-card-paragraph {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-weight: 400;
  letter-spacing: .005em;
}

/* Author greeting ("Hey, I'm Caroline") — girly pink pill that matches
 * the DM hero CTA family. Inline label, not a button, so no hover
 * transform / cursor change. */
.author-greeting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .5rem 1rem;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  color: #fff;
  background: linear-gradient(135deg, #ff8fb1 0%, #ec407a 55%, #d6336c 100%);
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow:
    0 0 0 3px #ffb6c1,
    0 6px 14px -4px rgba(236, 64, 122, .45),
    inset 0 1px 0 rgba(255, 255, 255, .45);
  text-shadow: 0 1px 2px rgba(173, 20, 87, .35);
}
.author-greeting::before {
  content: "✨";
  display: inline-block;
  animation: dm-hero-cta-sparkle 2.6s ease-in-out infinite;
  filter: drop-shadow(0 1px 0 rgba(173, 20, 87, .25));
}

/* Bubbly CTA — soft pinks + glow. */
.author-cta {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 182, 193, .55) 0, transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(255, 192, 203, .45) 0, transparent 42%),
    radial-gradient(circle at 60% 30%, rgba(255, 228, 235, .7) 0, transparent 55%),
    linear-gradient(180deg, #fff0f3 0%, #ffe1ea 100%);
  border: 1.5px solid rgba(236, 64, 122, .35);
  box-shadow:
    0 0 0 6px rgba(255, 192, 203, .25),
    0 12px 30px -10px rgba(236, 64, 122, .35),
    inset 0 0 24px rgba(255, 255, 255, .55);
  position: relative;
  overflow: hidden;
}
.author-cta::before,
.author-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #ffd1dc 60%, transparent 70%);
  opacity: .55;
  pointer-events: none;
}
.author-cta::before { top: -18px; left: -22px; width: 70px; height: 70px; }
.author-cta::after  { bottom: -26px; right: -18px; width: 90px; height: 90px; opacity: .4; }
.author-cta-heading {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  letter-spacing: .04em;
  text-shadow: 0 1px 0 #fff, 0 2px 6px rgba(236, 64, 122, .35);
}
.author-cta-link {
  color: #d6336c;
  text-decoration: none;
  border-bottom: 1.5px dotted rgba(214, 51, 108, .55);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.author-cta-link:hover,
.author-cta-link:focus {
  color: #ad1457;
  border-bottom-color: #ad1457;
}
.author-cta-sparkle {
  display: inline-block;
  animation: author-cta-pulse 2.4s ease-in-out infinite;
}
@keyframes author-cta-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.18); opacity: .85; }
}

/* ---------------------------------------------------------------------------
 * 14. Loading overlay (shown when navigating to a cell detail page)
 * ---------------------------------------------------------------------------
 */
.nav-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 1.25rem;
  opacity: 0; transition: opacity 0.15s ease;
}
.nav-overlay.is-visible { display: flex; opacity: 1; }
.nav-overlay .spinner {
  width: 64px; height: 64px;
  border: 6px solid #0a0a0a;
  border-top-color: #ffec00;
  border-radius: 50%;
  animation: nav-spin 0.8s linear infinite;
}
.nav-overlay .nav-label {
  font-size: 1.1rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #0a0a0a;
  background: #ffec00; border: 2px solid #0a0a0a;
  padding: 8px 16px; box-shadow: 4px 4px 0 #0a0a0a;
}
@keyframes nav-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
 * 14b. /dm.php — "DM me" page
 * Pink palette lifted from the author card (--wg-pink family) so this page
 * reads as a sibling of the support block, not a separate product surface.
 * ---------------------------------------------------------------------------
 */
.page-dm { background: #fff7fa; }

.page-dm .page-header {
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 182, 193, .55) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(255, 192, 203, .45) 0, transparent 50%),
    linear-gradient(180deg, #fff0f3 0%, #ffe1ea 100%);
  border-bottom: 2px solid #ffb6c1;
}

/* Pink letter card with decorative blob overlays (decorative-only — no
 * layout/typography utilities would replace this). */
.dm-letter {
  background: #fff;
  border: 2px solid #ffb6c1;
  box-shadow: 6px 6px 0 #ffe1ea, 6px 6px 0 4px #ffb6c1;
  border-radius: 1.25rem;
  position: relative;
  overflow: hidden;
}
.dm-letter::before,
.dm-letter::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 182, 193, .35) 0, transparent 70%);
  pointer-events: none;
}
.dm-letter::before { top: -40px; left: -30px;  width: 140px; height: 140px; }
.dm-letter::after  { bottom: -50px; right: -40px; width: 180px; height: 180px; opacity: .55; }

/* Mobile: smaller shadows + tinier decorative blobs so the card fits
 * a 375px viewport without the right edge bleeding off-screen. */
@media (max-width: 640px) {
  .dm-letter {
    box-shadow: 3px 3px 0 #ffe1ea, 3px 3px 0 2px #ffb6c1;
    border-radius: 1rem;
  }
  .dm-letter::before { top: -28px; left: -24px;  width: 80px;  height: 80px;  }
  .dm-letter::after  { bottom: -32px; right: -24px; width: 100px; height: 100px; }
  .dm-letter.px-md-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

.dm-divider {
  border-color: #ffb6c1;
  opacity: .6;
}

.dm-hint {
  display: none;
  color: #ad1457;
  margin-bottom: .75rem;
}

.dm-letter p { color: #444; }

/* Tier card — pink gradient + brutalist shadow is the brand, not layout. */
.dm-tier {
  position: relative;
  background: linear-gradient(180deg, #fff0f3 0%, #ffe1ea 100%);
  border: 2px solid #ffb6c1;
  border-radius: 1rem;
  box-shadow: 4px 4px 0 #ffe1ea, 4px 4px 0 3px #ffb6c1;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dm-tier:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #ffe1ea, 2px 2px 0 3px #ffb6c1;
}
.dm-tier.is-featured {
  background: linear-gradient(180deg, #ffe1ea 0%, #ffc0cb 100%);
  border-color: #d6336c;
}
.dm-tier-amount {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-size: 2.1rem;
  font-weight: 800;
  color: #ad1457;
  line-height: 1;
}
.dm-tier-label {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #d6336c;
}
.dm-tier-perk {
  display: block;
  margin-top: .75rem;
  font-size: .85rem;
  color: #555;
  min-height: 2.5em; /* keeps the four cards visually level */
}
.dm-tier-badge {
  position: absolute;
  top: -10px; right: -8px;
  background: #ad1457;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 999px;
  transform: rotate(6deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .15);
}
.dm-tier-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: .75rem;
  padding: .5rem 1rem;
  background: #ad1457;
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid #ad1457;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.dm-tier-cta:hover {
  background: #fff;
  color: #ad1457;
  transform: translate(1px, 1px);
}

/* Small "drop a line at …" caption that sits above the hero CTAs. */
.dm-hero-email {
  color: #ad1457;
  font-style: italic;
  margin-top: 1rem;
  opacity: .85;
}
.dm-hero-email-link {
  color: #d6336c;
  text-decoration: none;
  border-bottom: 1.5px dotted rgba(214, 51, 108, .55);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.dm-hero-email-link:hover,
.dm-hero-email-link:focus {
  color: #ad1457;
  border-bottom-color: #ad1457;
}

/* Hero CTAs ("email me", "see gift ideas") — bubbly pink pills, the
 * girly counterpoint to the brutalist wg-btn used elsewhere. Match the
 * "slide into my inbox" eyebrow + the .author-cta card vibe. */
.dm-hero-cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: .95rem 1.75rem;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #ff8fb1 0%, #ec407a 55%, #d6336c 100%);
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow:
    0 0 0 3px #ffb6c1,
    0 8px 18px -6px rgba(236, 64, 122, .55),
    inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  text-shadow: 0 1px 2px rgba(173, 20, 87, .35);
}
.dm-hero-cta::before {
  content: "✨";
  display: inline-block;
  animation: dm-hero-cta-sparkle 2.6s ease-in-out infinite;
  filter: drop-shadow(0 1px 0 rgba(173, 20, 87, .25));
}
.dm-hero-cta:hover,
.dm-hero-cta:focus {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05) saturate(1.05);
  box-shadow:
    0 0 0 3px #ffc0cb,
    0 14px 26px -8px rgba(236, 64, 122, .7),
    inset 0 1px 0 rgba(255, 255, 255, .5);
}
.dm-hero-cta:active {
  transform: translateY(0) scale(.99);
  box-shadow:
    0 0 0 3px #ffb6c1,
    0 4px 10px -4px rgba(236, 64, 122, .55),
    inset 0 1px 0 rgba(255, 255, 255, .45);
}
/* Soft-pink secondary variant (used by "see gift ideas") */
.dm-hero-cta--ghost {
  background: #fff;
  color: #d6336c;
  border: 2px solid #ffb6c1;
  box-shadow:
    0 0 0 3px #fff0f3,
    0 8px 18px -6px rgba(236, 64, 122, .25),
    inset 0 1px 0 rgba(255, 255, 255, .6);
  text-shadow: none;
}
.dm-hero-cta--ghost::before { content: "🎁"; }
.dm-hero-cta--ghost:hover,
.dm-hero-cta--ghost:focus {
  color: #ad1457;
  background: #fff0f3;
  box-shadow:
    0 0 0 3px #ffe1ea,
    0 14px 26px -8px rgba(236, 64, 122, .4),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}
@keyframes dm-hero-cta-sparkle {
  0%, 100% { transform: scale(1)    rotate(0deg);   opacity: 1;   }
  50%      { transform: scale(1.25) rotate(15deg);  opacity: .85; }
}

/* ---------------------------------------------------------------------------
 * 15. Media queries (consolidated at the bottom for cascade clarity)
 * ---------------------------------------------------------------------------
 */
@media (max-width: 640px) {
  .topbar-inner {
    flex-direction: column;        /* stack brand above nav */
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
  .topbar-right {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .topbar-nav {
    justify-content: center;
    gap: 0.5rem;
  }
  .topbar-slot { text-align: center; }
  .nav-link { font-size: 0.78rem; padding: 5px 8px; }
  .goal-grid { grid-template-columns: 1fr; }
  .pair-list { grid-template-columns: 1fr; }
  /* DM page: tighten the hero header on small screens so the
   * "slide into my inbox" eyebrow isn't floating in a sea of whitespace. */
  .page-dm .page-header { padding: 2.25rem 0 1.5rem; }
  .page-dm .eyebrow { margin-bottom: .85rem; }
  /* Gift tier grid: 2x2 is fine, but let long perks wrap & breathe. */
  .dm-tier-perk { min-height: 0; font-size: .82rem; }
  .dm-tier-amount { font-size: 1.75rem; }
  /* CTAs stack full-width on phones so the pill text doesn't cram. */
  .dm-hero-cta { width: 100%; justify-content: center; }
}
@media (max-width: 768px) {
  .matrix-table { font-size: 0.65rem; }
  .matrix-table th, .matrix-table td { padding: 2px 4px; min-width: 22px; }
  .matrix-table th:first-child, .matrix-table td:first-child {
    min-width: 80px; max-width: 100px; font-size: 0.6rem;
  }
  .supplement-name-cell .bracket-name { max-width: 90px; }
  .summary-card { padding: 1.75rem; }
  .verdict-stamp { font-size: 1rem; padding: 0.75rem 1rem; }
  /* Tighter sticky offset on small viewports where the page header stacks. */
  .matrix-wrapper { --matrix-max-h: calc(100vh - 280px); }
}