/* ============================================================================
   GRANT PAGE — grant-page.css
   Complete stylesheet for dedicated grant detail pages (/grants/[slug])
   "Refined Intelligence" layout — warm editorial, decision-first hierarchy

   All classes: gp- prefix. Standalone — requires only nav-v7.css for navbar.
   Fonts: Fraunces (display), DM Sans (body), IBM Plex Mono (data labels)
   Palette: cream/parchment, forest green, sienna CTA, warm neutrals
   ============================================================================ */


/* ============================================================================
   1. DESIGN TOKENS — CSS Custom Properties
   ============================================================================ */

:root {
  /* -- Cream palette (backgrounds) -- */
  --gp-cream:           #FAF7F2;
  --gp-cream-warm:      #f5f0e8;
  --gp-cream-dark:      #ede8de;

  /* -- Neutrals -- */
  --gp-paper:           #ffffff;
  --gp-paper-warm:      #FFFDF9;
  --gp-ink:             #1C1917;
  --gp-ink-2:           #57534E;
  --gp-ink-3:           #6B6560; /* Darkened to ~5.1:1 on cream-warm for WCAG AA */
  --gp-ink-4:           #D6D3D1;
  --gp-ink-5:           #E7E5E4;

  /* -- Forest green (primary) -- */
  --gp-forest:          #2d6a4f;
  --gp-forest-deep:     #1B4332;
  --gp-forest-08:       rgba(45, 106, 79, 0.08);
  --gp-forest-04:       rgba(45, 106, 79, 0.04);

  /* -- Sienna (CTA accent) -- */
  --gp-sienna:          #C4532B;
  --gp-sienna-hover:    #A3401F;
  --gp-sienna-lt:       rgba(196, 83, 43, 0.08);

  /* -- Amber (warning / premium) -- */
  --gp-amber:           #b45309; /* Darkened from #d97706 for WCAG AA contrast on amber-bg */
  --gp-amber-bg:        #fef3c7;

  /* -- Status colors -- */
  --gp-green:           #15803d;
  --gp-green-bg:        #dcfce7;
  --gp-blue:            #1d4ed8;
  --gp-blue-bg:         #dbeafe;
  --gp-red:             #dc2626;
  --gp-red-bg:          #fee2e2;
  --gp-violet:          #7c3aed;
  --gp-violet-bg:       #f3e8ff;

  /* -- Typography stacks -- */
  --gp-display:         'Fraunces', Georgia, serif;
  --gp-body:            'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gp-mono:            'IBM Plex Mono', monospace;

  /* -- Spacing scale (4px base) -- */
  --gp-sp-1:            4px;
  --gp-sp-2:            8px;
  --gp-sp-3:            12px;
  --gp-sp-4:            16px;
  --gp-sp-5:            20px;
  --gp-sp-6:            24px;
  --gp-sp-7:            32px;
  --gp-sp-8:            48px;
  --gp-sp-9:            64px;

  /* -- Border radius -- */
  --gp-r:               8px;
  --gp-r-lg:            12px;
  --gp-r-xl:            16px;
  --gp-r-pill:          20px;

  /* -- Shadows (harmonized with homepage) -- */
  --gp-sh-sm:           0 1px 3px rgba(28, 25, 23, 0.04);
  --gp-sh-md:           0 4px 12px rgba(28, 25, 23, 0.06);
  --gp-sh-lg:           0 12px 32px rgba(28, 25, 23, 0.08);
  --gp-sh-xl:           0 20px 50px rgba(28, 25, 23, 0.10);
  --gp-sh-card:         0 12px 32px rgba(28, 25, 23, 0.08),
                        inset 0 0 60px rgba(250, 247, 242, 0.4);
  --gp-sh-premium:      0 4px 20px rgba(45, 106, 79, 0.10);

  /* -- Borders -- */
  --gp-border-light:    1px solid rgba(28, 25, 23, 0.03);
  --gp-border-mid:      1px solid rgba(28, 25, 23, 0.06);
  --gp-border-subtle:   1px solid rgba(28, 25, 23, 0.03);

  /* -- Transitions -- */
  --gp-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --gp-duration:        0.2s;
  --gp-duration-slow:   0.35s;
}


/* ============================================================================
   2. BASE RESETS + BODY
   ============================================================================ */

body {
  background: var(--gp-cream);
  margin: 0;
}

/* Grain texture overlay — matches homepage SVG noise */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
}

.gp {
  font-family: var(--gp-body);
  color: var(--gp-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gp *,
.gp *::before,
.gp *::after {
  box-sizing: border-box;
}


/* ============================================================================
   3. PAGE CONTAINER
   ============================================================================ */

.gp {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gp-sp-6);
  padding-bottom: var(--gp-sp-8);
}



/* ============================================================================
   4. KEYFRAME ANIMATIONS
   ============================================================================ */

@keyframes gp-fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gp-scoreFill {
  from { width: 0; }
  to   { width: var(--gp-fill-width, 0); }
}

@keyframes gp-slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}


/* ============================================================================
   5. BREADCRUMB (.gp-bc)
   ============================================================================ */

.gp-bc {
  padding: var(--gp-sp-5) 0 var(--gp-sp-3);
  font-size: 12px;
  color: var(--gp-ink-3);
  font-weight: 500;
}

.gp-bc a {
  color: var(--gp-ink-3);
  text-decoration: none;
  transition: color 0.15s var(--gp-ease);
}

.gp-bc a:hover {
  color: var(--gp-forest);
}

.gp-bc .gp-bc__sep {
  margin: 0 5px;
  opacity: 0.35;
}

.gp-bc .gp-bc__current {
  color: var(--gp-ink-2);
  font-weight: 600;
}


/* ============================================================================
   6. HERO CARD (.gp-hero)
   Premium card feel — paper bg, rounded, shadow, overflow hidden
   ============================================================================ */

.gp-hero {
  background: var(--gp-paper);
  border: var(--gp-border-light);
  border-radius: var(--gp-r-xl);
  box-shadow: var(--gp-sh-card);
  overflow: hidden;
  margin-bottom: var(--gp-sp-7);
  animation: gp-fadeUp 0.5s ease-out;
}

/* -- Hero body -- */
.gp-hero__body {
  padding: var(--gp-sp-7) 40px var(--gp-sp-6);
}

/* -- Meta row: freshness indicator + badge cluster -- */
.gp-hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gp-sp-5);
}

.gp-hero__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.gp-hero__fresh {
  font-size: 12px;
  color: var(--gp-ink-3);
  font-weight: 500;
}

.gp-hero__fresh strong {
  color: var(--gp-ink-2);
}

/* -- Main content: title/org left, amount right -- */
.gp-hero__main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gp-sp-7);
}

/* Stacked layout for long/narrative amounts */
.gp-hero__main--stacked {
  flex-direction: column;
  gap: var(--gp-sp-4);
}

.gp-hero__main--stacked .gp-hero__right {
  text-align: left;
  max-width: none;
}

.gp-hero__left {
  flex: 1;
  min-width: 0;
}

.gp-hero__type-row {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-bottom: var(--gp-sp-3);
}

.gp-hero__title {
  font-family: var(--gp-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--gp-ink);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.gp-hero__org {
  font-size: 15px;
  color: var(--gp-ink-2);
}

.gp-hero__right {
  text-align: right;
  flex-shrink: 0;
  max-width: 280px;
}

.gp-hero__amount-label {
  font-family: var(--gp-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gp-ink-3);
  font-weight: 600;
}

.gp-hero__amount {
  font-family: var(--gp-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--gp-forest);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Smaller font for long/narrative amounts */
.gp-hero__amount--long {
  font-size: 20px;
  -webkit-line-clamp: 3;
}

.gp-hero__deadline {
  font-size: 12px;
  color: var(--gp-ink-3);
  margin-top: 3px;
}

/* -- Actions row -- */
.gp-hero__actions {
  display: flex;
  gap: var(--gp-sp-2);
  margin-top: var(--gp-sp-6);
}

/* -- Bookmark & share buttons (JS selectors) -- */
.gp-hero__bookmark,
.gp-hero__share {
  /* Inherits from .gp-btn--ghost */
}

.gp-hero__bookmark-icon {
  transition: transform 0.2s var(--gp-ease);
}

.gp-hero__bookmark.is-saved .gp-hero__bookmark-icon,
.gp-hero__bookmark.is-active .gp-hero__bookmark-icon {
  color: var(--gp-forest);
}


/* ============================================================================
   7. VERDICT STRIP (.gp-verdict)
   5-column grid inside the hero card, cream-warm bg
   ============================================================================ */

.gp-verdict {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: var(--gp-border-mid);
  background: linear-gradient(180deg, var(--gp-cream-warm), var(--gp-cream));
}

.gp-verdict__item {
  padding: 16px var(--gp-sp-4);
  text-align: center;
  border-right: 1px solid rgba(28, 25, 23, 0.04);
  transition: background var(--gp-duration) var(--gp-ease);
}

.gp-verdict__item:last-child {
  border-right: none;
}

.gp-verdict__item:hover {
  background: rgba(28, 25, 23, 0.02);
}

.gp-verdict__label {
  font-family: var(--gp-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gp-ink-3);
  font-weight: 600;
}

.gp-verdict__val {
  font-size: 15px;
  font-weight: 700;
  margin-top: 3px;
  color: var(--gp-ink);
}


/* ============================================================================
   8. BADGE SYSTEM (.gp-badge--*)
   ============================================================================ */

.gp-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--gp-r-pill);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

/* Type badge (Grant, Tax Credit) — solid forest bg */
.gp-badge--type {
  background: var(--gp-forest);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.06em;
}

/* Level badge (Federal, Provincial) */
.gp-badge--level {
  background: var(--gp-cream-dark);
  color: var(--gp-ink-2);
}

/* Status badge — dot rendered via CSS ::before so it persists through JS hydration */
.gp-badge--status {
  font-weight: 700;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gp-badge--status::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Dynamic status classes (set by JS) */
.gp-status--active  { color: var(--gp-green); }
.gp-status--closed  { color: var(--gp-red); }
.gp-status--paused  { color: var(--gp-amber); }
.gp-status--upcoming { color: var(--gp-blue); }

/* Trend badge (Growing, Stable) */
.gp-badge--trend {
  background: var(--gp-green-bg);
  color: var(--gp-green);
}

/* First-Timer Friendly */
.gp-badge--friendly {
  background: var(--gp-blue-bg);
  color: var(--gp-blue);
}

/* Payment model badge */
.gp-badge--payment {
  background: var(--gp-amber-bg);
  color: var(--gp-amber);
}

/* Year/vintage badge */
.gp-badge--year {
  background: var(--gp-violet-bg);
  color: var(--gp-violet);
}

/* Premium label — amber/gold accent */
.gp-badge--premium {
  background: var(--gp-amber-bg);
  color: var(--gp-amber);
  font-family: var(--gp-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Free label — forest green */
.gp-badge--free {
  background: var(--gp-green-bg);
  color: var(--gp-green);
  font-family: var(--gp-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Count badge ("7 steps") */
.gp-badge--count {
  background: var(--gp-amber-bg);
  color: var(--gp-amber);
  font-family: var(--gp-mono);
  font-size: 9px;
  font-weight: 700;
}

/* Red/danger badge ("7 pitfalls") */
.gp-badge--red {
  background: var(--gp-red-bg);
  color: var(--gp-red);
  font-family: var(--gp-mono);
  font-size: 9px;
  font-weight: 700;
}

/* Blue/info badge */
.gp-badge--blue {
  background: var(--gp-blue-bg);
  color: var(--gp-blue);
}

/* Hybrid badge */
.gp-badge--hybrid {
  background: var(--gp-violet-bg);
  color: var(--gp-violet);
  font-family: var(--gp-mono);
  font-size: 9px;
  font-weight: 700;
}


/* ============================================================================
   9. BUTTON SYSTEM (.gp-btn--*)
   ============================================================================ */

.gp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px var(--gp-sp-5);
  min-height: 44px; /* WCAG touch target minimum */
  border-radius: var(--gp-r);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  font-family: var(--gp-body);
  transition: all 0.25s var(--gp-ease);
  line-height: 1;
}

/* Primary (sienna) */
.gp-btn--primary {
  background: var(--gp-sienna);
  color: #fff;
  box-shadow: 0 2px 8px rgba(196, 83, 43, 0.2);
}

.gp-btn--primary:hover {
  background: var(--gp-sienna-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(196, 83, 43, 0.3);
}

/* Ghost (transparent + border) */
.gp-btn--ghost {
  background: transparent;
  color: var(--gp-ink-2);
  border: 1.5px solid rgba(28, 25, 23, 0.10);
}

.gp-btn--ghost:hover {
  border-color: var(--gp-forest);
  color: var(--gp-forest);
  background: var(--gp-forest-04);
  transform: translateY(-1px);
}

/* CTA (forest green) */
.gp-btn--cta {
  background: var(--gp-forest);
  color: #fff;
  box-shadow: 0 2px 8px rgba(45, 106, 79, 0.25);
  white-space: nowrap;
  flex-shrink: 0;
}

.gp-btn--cta:hover {
  background: var(--gp-forest-deep);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(45, 106, 79, 0.35);
}


/* ============================================================================
   10. COLOR UTILITY CLASSES
   ============================================================================ */

.gp-color-forest { color: var(--gp-forest); }
.gp-color-green  { color: var(--gp-green); }
.gp-color-amber  { color: var(--gp-amber); }
.gp-color-red    { color: var(--gp-red); }
.gp-color-blue   { color: var(--gp-blue); }


/* ============================================================================
   11. GEO SUMMARY (.gp-summary)
   Forest left border, paper bg, authority aside
   ============================================================================ */

.gp-summary {
  background: var(--gp-paper);
  border-left: 4px solid var(--gp-forest);
  padding: var(--gp-sp-6) 32px;
  border-radius: 0 var(--gp-r-xl) var(--gp-r-xl) 0;
  margin-bottom: var(--gp-sp-7);
  box-shadow: var(--gp-sh-sm);
  font-size: 15px;
  line-height: 1.8;
  color: var(--gp-ink-2);
  animation: gp-fadeUp 0.5s ease-out 0.08s both;
}

.gp-summary strong {
  color: var(--gp-ink);
}

.gp-summary .gp-summary__authority {
  font-style: italic;
  font-size: 12px;
  color: var(--gp-ink-3);
  margin-top: var(--gp-sp-3);
  display: block;
}


/* ============================================================================
   12. STATUS & CLOSED BANNERS
   ============================================================================ */

.gp-status-banner {
  background: var(--gp-amber-bg);
  border-left: 3px solid var(--gp-amber);
  padding: var(--gp-sp-4) var(--gp-sp-5);
  border-radius: 0 var(--gp-r-lg) var(--gp-r-lg) 0;
  margin-bottom: var(--gp-sp-6);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gp-ink-2);
}

.gp-status-banner strong {
  color: var(--gp-ink);
}

.gp-closed-banner {
  background: var(--gp-red-bg);
  border-left: 3px solid var(--gp-red);
  padding: var(--gp-sp-6);
  border-radius: 0 var(--gp-r-lg) var(--gp-r-lg) 0;
  margin-bottom: var(--gp-sp-6);
  display: flex;
  gap: var(--gp-sp-4);
  align-items: flex-start;
}

.gp-closed-banner__icon {
  font-size: 24px;
  flex-shrink: 0;
}

.gp-closed-banner__text {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gp-ink-2);
}

.gp-closed-banner__text strong {
  color: var(--gp-ink);
  display: block;
  margin-bottom: var(--gp-sp-2);
}

.gp-closed-banner__text p {
  margin: 0 0 var(--gp-sp-4);
}


/* ============================================================================
   13. SECTION CARDS / CHAPTER ACCORDION (.gp-chapter)
   Accordion pattern: clickable header, collapsible body, chevron rotation
   ============================================================================ */

/* -- Chapters wrapper for stagger context -- */
.gp-chapters {
  margin-bottom: var(--gp-sp-6);
}

/* -- Base chapter panel -- */
.gp-chapter {
  background: var(--gp-paper);
  border: var(--gp-border-light);
  border-radius: var(--gp-r-xl);
  margin-bottom: 12px;
  box-shadow: var(--gp-sh-card);
  overflow: hidden;
  transition: border-color var(--gp-duration) var(--gp-ease),
              box-shadow var(--gp-duration) var(--gp-ease);
  animation: gp-fadeUp 0.4s ease-out both;
}

.gp-chapter:hover {
  border-color: rgba(28, 25, 23, 0.06);
  box-shadow: 0 16px 40px rgba(28, 25, 23, 0.10),
              inset 0 0 60px rgba(250, 247, 242, 0.4);
}

/* -- Staggered entrance delays (up to 9 chapters) -- */
.gp-chapter:nth-child(1) { animation-delay: 0.10s; }
.gp-chapter:nth-child(2) { animation-delay: 0.16s; }
.gp-chapter:nth-child(3) { animation-delay: 0.22s; }
.gp-chapter:nth-child(4) { animation-delay: 0.28s; }
.gp-chapter:nth-child(5) { animation-delay: 0.34s; }
.gp-chapter:nth-child(6) { animation-delay: 0.40s; }
.gp-chapter:nth-child(7) { animation-delay: 0.46s; }
.gp-chapter:nth-child(8) { animation-delay: 0.52s; }
.gp-chapter:nth-child(9) { animation-delay: 0.58s; }

/* -- Premium variant: forest left border -- */
.gp-chapter--premium {
  border-left: 3px solid var(--gp-forest);
}

.gp-chapter--premium:hover {
  border-color: rgba(45, 106, 79, 0.12);
  border-left-color: var(--gp-forest);
  box-shadow: var(--gp-sh-premium);
}

/* .gp-section is also used for accordion-style section cards */
.gp-section {
  margin-bottom: var(--gp-sp-5);
}

.gp-section h4 {
  font-family: var(--gp-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-ink);
  margin-bottom: var(--gp-sp-3);
}

.gp-section p {
  font-size: 14px;
  color: var(--gp-ink-2);
  line-height: 1.7;
  margin: 0;
}

/* -- Clickable header -- */
.gp-chapter__head {
  padding: var(--gp-sp-6) 32px;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--gp-duration) var(--gp-ease);
}

.gp-chapter__head:hover {
  background: rgba(28, 25, 23, 0.015);
}

.gp-chapter__head-left {
  display: flex;
  align-items: center;
  gap: var(--gp-sp-5);
  flex: 1;
  min-width: 0;
}

/* -- Chapter number: decorative sienna accent -- */
.gp-chapter__num {
  font-family: var(--gp-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--gp-sienna);
  width: 36px;
  flex-shrink: 0;
  letter-spacing: -0.02em;
  opacity: 0.6;
}

.gp-chapter--premium .gp-chapter__num {
  color: var(--gp-forest);
  opacity: 0.7;
}

/* -- Title + subtitle -- */
.gp-chapter__head-text {
  flex: 1;
  min-width: 0;
}

.gp-chapter__title {
  font-family: var(--gp-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--gp-ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.gp-chapter__subtitle {
  font-size: 13px;
  color: var(--gp-ink-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* -- Right side: badge + chevron -- */
.gp-chapter__head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* -- Chevron (rotatable on open) -- */
.gp-chapter__chevron {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gp-cream-dark);
  transition: transform 0.3s var(--gp-ease),
              background var(--gp-duration) var(--gp-ease);
}

.gp-chapter__chevron svg {
  width: 13px;
  height: 13px;
  stroke: var(--gp-ink-3);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--gp-duration) var(--gp-ease);
}

/* -- Open state -- */
.gp-chapter.is-open .gp-chapter__chevron {
  transform: rotate(180deg);
  background: var(--gp-forest-08);
}

.gp-chapter.is-open .gp-chapter__chevron svg {
  stroke: var(--gp-forest);
}

/* -- Collapsible body (max-height transition) -- */
.gp-chapter__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--gp-ease);
}

.gp-chapter.is-open .gp-chapter__body {
  max-height: 3000px;
}

/* -- Inner content (indented to align with title text) -- */
.gp-chapter__content {
  padding: 0 32px var(--gp-sp-7);
  padding-left: 76px;
  border-top: 1px solid rgba(28, 25, 23, 0.04);
}

.gp-chapter.is-open .gp-chapter__content {
  padding-top: var(--gp-sp-6);
}

/* -- Content headings inside chapters -- */
.gp-chapter__content h3 {
  font-family: var(--gp-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--gp-ink);
  margin-top: var(--gp-sp-7);
  margin-bottom: var(--gp-sp-3);
  letter-spacing: -0.01em;
}

.gp-chapter__content h3:first-child {
  margin-top: 0;
}

.gp-chapter__content h4 {
  font-family: var(--gp-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-ink);
  margin-top: var(--gp-sp-5);
  margin-bottom: var(--gp-sp-3);
}

.gp-chapter__content h4:first-child {
  margin-top: 0;
}


/* ============================================================================
   14. PREMIUM INTELLIGENCE DIVIDER (.gp-premium-divider)
   ============================================================================ */

.gp-premium-divider {
  text-align: center;
  padding: var(--gp-sp-8) 0 var(--gp-sp-7);
  position: relative;
}

.gp-premium-divider__line {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(45, 106, 79, 0.15) 20%,
    rgba(45, 106, 79, 0.30) 50%,
    rgba(45, 106, 79, 0.15) 80%,
    transparent 100%
  );
  margin-bottom: var(--gp-sp-5);
}

.gp-premium-divider__label {
  font-family: var(--gp-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--gp-forest);
  letter-spacing: -0.01em;
  margin-bottom: var(--gp-sp-2);
}

.gp-premium-divider__sub {
  font-size: 13px;
  color: var(--gp-ink-3);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Premium users: hide the divider */
body.is-premium .gp-premium-divider {
  display: none;
}


/* ============================================================================
   15. CHAPTER CONTENT COMPONENTS
   Prose, two-col grid, field labels, check lists, tags, info cards, assess box
   ============================================================================ */

/* -- Prose paragraphs -- */
.gp-prose {
  font-size: 15px;
  line-height: 1.75;
  color: var(--gp-ink-2);
  margin-bottom: var(--gp-sp-5);
}

.gp-prose strong {
  color: var(--gp-ink);
}

/* -- Two-column grid -- */
.gp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gp-sp-7);
}

/* -- Field labels (IBM Plex Mono, micro uppercase) -- */
.gp-field-label {
  font-family: var(--gp-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gp-ink-3);
  font-weight: 600;
  margin-bottom: var(--gp-sp-2);
}

/* -- Eligibility checklist (.gp-check-list) -- */
.gp-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gp-check-list li {
  font-size: 14px;
  line-height: 1.6;
  padding: var(--gp-sp-3) 0;
  border-bottom: var(--gp-border-subtle);
  display: flex;
  gap: 12px;
  color: var(--gp-ink-2);
}

.gp-check-list li:last-child {
  border-bottom: none;
}

.gp-check-list li::before {
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1.5px solid var(--gp-forest);
  border-radius: 4px;
  background: var(--gp-forest-04) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6L5 8.5L9.5 4' stroke='%232d6a4f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* -- Tags / pills (.gp-tags, .gp-tag) -- */
.gp-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--gp-sp-4);
}

.gp-tag {
  font-size: 11px;
  padding: 4px 12px;
  background: var(--gp-cream-dark);
  border-radius: var(--gp-r-pill);
  color: var(--gp-ink-2);
  font-weight: 500;
  border: 1px solid rgba(28, 25, 23, 0.04);
  letter-spacing: 0.01em;
  transition: background 0.15s var(--gp-ease),
              border-color 0.15s var(--gp-ease);
}

.gp-tag:hover {
  background: var(--gp-cream-warm);
  border-color: rgba(28, 25, 23, 0.08);
}

/* -- Info cards grid (.gp-info-grid, .gp-info-card) -- */
.gp-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: var(--gp-sp-4);
}

.gp-info-card {
  background: var(--gp-cream-warm);
  padding: var(--gp-sp-4) var(--gp-sp-5);
  border-radius: var(--gp-r-lg);
  border: 1px solid rgba(28, 25, 23, 0.04);
  min-height: 80px;
  transition: border-color var(--gp-duration) var(--gp-ease),
              transform var(--gp-duration) var(--gp-ease);
}

.gp-info-card:hover {
  border-color: rgba(28, 25, 23, 0.08);
  transform: translateY(-1px);
}

.gp-info-card__label {
  display: block;
  font-family: var(--gp-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gp-ink-3);
  font-weight: 600;
  margin-bottom: 6px;
}

.gp-info-card__val {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  color: var(--gp-ink);
}

/* -- Funding details list (.gp-details-list) — replaces info-grid for grant pages -- */
.gp-details-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(28, 25, 23, 0.06);
  border-radius: var(--gp-r-lg);
  overflow: hidden;
  margin-top: var(--gp-sp-4);
}

.gp-details-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04);
  gap: 16px;
}

.gp-details-list__item:last-child {
  border-bottom: none;
}

.gp-details-list__item:nth-child(even) {
  background: rgba(28, 25, 23, 0.015);
}

.gp-details-list__label {
  font-family: var(--gp-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gp-ink-3);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 90px;
}

.gp-details-list__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--gp-ink);
  text-align: right;
  flex: 1;
  line-height: 1.5;
}

/* -- Quick assessment box (.gp-assess) -- */
.gp-assess {
  background: var(--gp-cream-warm);
  border-radius: var(--gp-r-lg);
  padding: var(--gp-sp-6);
  margin-top: var(--gp-sp-5);
  border: 1px solid rgba(28, 25, 23, 0.05);
  position: relative;
}

.gp-assess h4 {
  font-family: var(--gp-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-ink);
  margin-bottom: var(--gp-sp-4);
  letter-spacing: -0.01em;
}

.gp-assess__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gp-sp-4);
}

.gp-assess__item-label {
  font-family: var(--gp-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gp-ink-3);
  font-weight: 600;
}

.gp-assess__item-val {
  font-size: 16px;
  font-weight: 700;
  margin-top: 3px;
  color: var(--gp-ink);
}

/* -- Empty state note -- */
.gp-empty-note {
  font-size: 13px;
  color: var(--gp-ink-3);
  font-style: italic;
}


/* ============================================================================
   16. SCORECARD (.gp-scores, .gp-score)
   Primary scores (3-col) and secondary (4-col) with progress bars
   ============================================================================ */

/* -- Anxiety metrics row (above scorecard) -- */
.gp-anxiety-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gp-sp-3);
  margin-bottom: var(--gp-sp-5);
}

.gp-anxiety-row__item {
  text-align: center;
  padding: var(--gp-sp-4) var(--gp-sp-3);
  background: var(--gp-cream-warm);
  border-radius: var(--gp-r-lg);
  border: 1px solid rgba(28, 25, 23, 0.04);
}

.gp-anxiety-row__label {
  font-family: var(--gp-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gp-ink-3);
  font-weight: 600;
}

.gp-anxiety-row__val {
  font-family: var(--gp-display);
  font-size: 22px;
  font-weight: 700;
  margin-top: var(--gp-sp-1);
  color: var(--gp-ink);
}

/* -- Primary score cards (3-col grid) -- */
.gp-scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gp-sp-3);
  margin-bottom: var(--gp-sp-4);
}

.gp-score {
  padding: 20px;
  border-radius: var(--gp-r-lg);
  text-align: center;
  border: 1px solid rgba(28, 25, 23, 0.06);
  background: var(--gp-paper);
  transition: transform var(--gp-duration) var(--gp-ease),
              box-shadow var(--gp-duration) var(--gp-ease);
}

.gp-score:hover {
  transform: translateY(-2px);
  box-shadow: var(--gp-sh-md);
}

/* Color variants for live score cards */
.gp-score--green {
  background: var(--gp-forest-04);
  border-color: rgba(45, 106, 79, 0.10);
}

.gp-score--amber {
  background: rgba(217, 119, 6, 0.03);
  border-color: rgba(217, 119, 6, 0.10);
}

.gp-score--red {
  background: rgba(220, 38, 38, 0.03);
  border-color: rgba(220, 38, 38, 0.10);
}

/* Locked placeholder cards */
.gp-score--locked {
  background: var(--gp-cream-warm);
  border: 1px dashed rgba(28, 25, 23, 0.10);
  position: relative;
}

.gp-score--locked:hover {
  transform: none;
  box-shadow: none;
}

.gp-score__label {
  font-family: var(--gp-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gp-ink-3);
  font-weight: 600;
}

.gp-score__val {
  font-family: var(--gp-display);
  font-size: 28px;
  font-weight: 700;
  margin: var(--gp-sp-1) 0;
  color: var(--gp-ink);
}

.gp-score__val span {
  font-size: 14px;
  color: var(--gp-ink-3);
  font-weight: 400;
}

/* -- Progress bar inside score card -- */
.gp-score__bar {
  height: 4px;
  background: rgba(28, 25, 23, 0.05);
  border-radius: 2px;
  margin: 6px auto 0;
  max-width: 100px;
  overflow: hidden;
}

.gp-score__fill {
  height: 100%;
  border-radius: 2px;
  animation: gp-scoreFill 0.8s var(--gp-ease) 0.3s both;
}

.gp-score__sub {
  font-size: 10px;
  color: var(--gp-ink-3);
  margin-top: var(--gp-sp-1);
}

.gp-score__desc {
  font-family: var(--gp-body);
  font-size: 11px;
  color: var(--gp-ink-3);
  margin-top: var(--gp-sp-2);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- Secondary scores (4-col, compact) -- */
.gp-scores-secondary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: var(--gp-sp-4);
}

.gp-scores-secondary .gp-score {
  padding: 14px;
}

.gp-scores-secondary .gp-score__val {
  font-size: 18px;
}

/* -- Hydrated scorecard (JS-rendered) -- */
.gp-scorecard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--gp-sp-3);
  margin-bottom: var(--gp-sp-5);
}

.gp-scorecard__card {
  background: var(--gp-cream-warm);
  border: 1px solid rgba(28, 25, 23, 0.05);
  border-radius: var(--gp-r-lg);
  padding: var(--gp-sp-4) var(--gp-sp-5);
  transition: transform var(--gp-duration) var(--gp-ease),
              box-shadow var(--gp-duration) var(--gp-ease);
}

.gp-scorecard__card:hover {
  transform: translateY(-1px);
  box-shadow: var(--gp-sh-md);
}

.gp-scorecard__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gp-sp-2);
}

.gp-scorecard__label {
  font-family: var(--gp-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gp-ink-3);
  font-weight: 600;
}

.gp-scorecard__value {
  font-family: var(--gp-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--gp-ink);
}

.gp-scorecard__bar {
  height: 4px;
  background: rgba(28, 25, 23, 0.05);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--gp-sp-2);
}

.gp-scorecard__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.8s var(--gp-ease);
}

.gp-scorecard__desc {
  font-size: 12px;
  color: var(--gp-ink-3);
  margin: 0;
  line-height: 1.4;
}

/* -- Inline score bar (JS-rendered in formatScore) -- */
.gp-score-bar {
  height: 4px;
  background: rgba(28, 25, 23, 0.05);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.gp-score-bar__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s var(--gp-ease);
}

/* -- Competitiveness notes callout -- */
.gp-competitiveness-notes {
  margin-top: var(--gp-sp-5);
  padding: var(--gp-sp-4) var(--gp-sp-5);
  background: var(--gp-amber-bg);
  border-radius: var(--gp-r);
  font-size: 13px;
  line-height: 1.7;
  color: var(--gp-ink-2);
}

.gp-competitiveness-notes h4 {
  font-family: var(--gp-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--gp-ink);
  margin-bottom: var(--gp-sp-2);
}

/* -- Analysis callout -- */
.gp-analysis {
  padding: var(--gp-sp-4) var(--gp-sp-5);
  background: var(--gp-amber-bg);
  border-radius: var(--gp-r);
  font-size: 13px;
  line-height: 1.7;
  color: var(--gp-ink-2);
}

.gp-analysis strong {
  color: var(--gp-ink);
}


/* ============================================================================
   17. INSIDER TIP PULL-QUOTE (.gp-pullquote)
   Large quote mark, italic Fraunces, forest border
   ============================================================================ */

.gp-pullquote {
  position: relative;
  padding: var(--gp-sp-7) 36px var(--gp-sp-7) 44px;
  background: var(--gp-forest-04);
  border-left: 4px solid var(--gp-forest);
  border-radius: 0 var(--gp-r-xl) var(--gp-r-xl) 0;
  margin-bottom: var(--gp-sp-5);
  overflow: hidden;
}

/* Large decorative quotation mark watermark */
.gp-pullquote::before {
  content: '\201C';
  font-family: var(--gp-display);
  font-size: 140px;
  color: var(--gp-forest);
  opacity: 0.06;
  position: absolute;
  top: -16px;
  left: 12px;
  line-height: 1;
  pointer-events: none;
}

.gp-pullquote__label {
  font-family: var(--gp-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gp-forest);
  margin-bottom: var(--gp-sp-3);
  position: relative;
}

.gp-pullquote__text {
  font-family: var(--gp-display);
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.7;
  color: var(--gp-ink);
  position: relative;
}

/* Hydrated insider tip variant */
.gp-insider-tip p {
  font-family: var(--gp-display);
  font-size: 17px;
  font-style: italic;
  line-height: 1.7;
  color: var(--gp-ink);
}


/* ============================================================================
   18. REJECTION PITFALLS LIST (.gp-pitfalls)
   Red-tinted header, numbered items with X icons
   ============================================================================ */

.gp-pitfalls {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gp-pitfalls li {
  padding: var(--gp-sp-3) 0;
  border-bottom: var(--gp-border-subtle);
  font-size: 13px;
  color: var(--gp-ink-2);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.gp-pitfalls li:last-child {
  border-bottom: none;
}

.gp-pitfalls li::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gp-red-bg) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 9L9 3M3 3l6 6' stroke='%23dc2626' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  margin-top: 1px;
}


/* ============================================================================
   19. APPLICATION STEPS (.gp-steps)
   Numbered list with forest circle numbers
   ============================================================================ */

.gp-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gp-sp-4);
  counter-reset: step;
}

.gp-steps__item {
  display: flex;
  gap: var(--gp-sp-4);
  padding: var(--gp-sp-4) 0;
  border-bottom: var(--gp-border-subtle);
}

.gp-steps__item:last-child {
  border-bottom: none;
}

.gp-steps__num {
  font-family: var(--gp-mono);
  color: var(--gp-paper);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gp-forest);
  border-radius: 50%;
  margin-top: 2px;
}

.gp-steps__content strong {
  display: block;
  color: var(--gp-ink);
  font-size: 14px;
  margin-bottom: 2px;
}

.gp-steps__content p {
  font-size: 13px;
  color: var(--gp-ink-2);
  margin: 0;
  line-height: 1.6;
}

/* Portal link (after steps) */
.gp-portal-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gp-forest);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding: var(--gp-sp-3) var(--gp-sp-4);
  background: var(--gp-forest-04);
  border-radius: var(--gp-r);
  margin-top: var(--gp-sp-4);
  transition: background var(--gp-duration) var(--gp-ease),
              transform var(--gp-duration) var(--gp-ease);
}

.gp-portal-link:hover {
  background: var(--gp-forest-08);
  transform: translateY(-1px);
}


/* ============================================================================
   20. DOCUMENTS LIST (.gp-docs, .gp-checklist)
   Icon + text items
   ============================================================================ */

.gp-docs {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gp-sp-5);
}

.gp-docs__item {
  display: flex;
  gap: 10px;
  padding: var(--gp-sp-3) 0;
  border-bottom: var(--gp-border-subtle);
  font-size: 13px;
  color: var(--gp-ink-2);
  align-items: flex-start;
}

.gp-docs__item:last-child {
  border-bottom: none;
}

.gp-docs__icon {
  flex-shrink: 0;
  color: var(--gp-forest);
  margin-top: 1px;
}

/* Alternative: checklist variant */
.gp-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gp-sp-5);
}

.gp-checklist__item {
  display: flex;
  gap: 10px;
  padding: var(--gp-sp-3) 0;
  border-bottom: var(--gp-border-subtle);
  font-size: 13px;
  color: var(--gp-ink-2);
  align-items: flex-start;
}

.gp-checklist__item:last-child {
  border-bottom: none;
}

.gp-checklist__box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--gp-forest);
  border-radius: 4px;
  margin-top: 1px;
  background: var(--gp-forest-04);
}

/* Doc-check icon utility */
.gp-doc-check {
  color: var(--gp-forest);
  flex-shrink: 0;
}


/* ============================================================================
   21. BLUR + LOCK — Premium content gating
   ============================================================================ */

/* -- Blur overlay for locked text -- */
.gp-blr {
  filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
  opacity: 0.7;
  pointer-events: none;
  transition: filter 0.3s var(--gp-ease);
}

/* Premium users: remove blur everywhere */
body.is-premium .gp-blr {
  filter: none;
  user-select: auto;
  -webkit-user-select: auto;
  opacity: 1;
  pointer-events: auto;
}

/* -- Lock note -- */
.gp-lock-note {
  font-family: var(--gp-mono);
  font-size: 11px;
  color: var(--gp-forest);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--gp-sp-4);
  padding: var(--gp-sp-3) var(--gp-sp-4);
  background: var(--gp-forest-04);
  border-radius: var(--gp-r);
  border: 1px solid rgba(45, 106, 79, 0.08);
}

.gp-lock-note a {
  color: var(--gp-forest);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gp-lock-note a:hover {
  color: var(--gp-forest-deep);
}

.gp-lock-note svg {
  flex-shrink: 0;
}

.gp-lock-note--muted {
  color: var(--gp-ink-3);
  background: var(--gp-cream-warm);
  border-color: rgba(28, 25, 23, 0.04);
}

/* Premium users: hide lock notes */
body.is-premium .gp-lock-note {
  display: none;
}


/* ============================================================================
   22. LOCKED LIST (.gp-locked-list)
   Step numbers with styled circles, "+N more" footer
   ============================================================================ */

.gp-locked-list {
  border: 1px solid rgba(28, 25, 23, 0.06);
  border-radius: var(--gp-r-lg);
  overflow: hidden;
  margin-bottom: var(--gp-sp-4);
}

.gp-locked-list__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gp-sp-3) 18px;
  background: var(--gp-cream-warm);
  border-bottom: 1px solid rgba(28, 25, 23, 0.06);
}

.gp-locked-list__head--danger {
  background: var(--gp-red-bg);
}

.gp-locked-list__title {
  font-family: var(--gp-display);
  font-size: 14px;
  font-weight: 600;
}

.gp-locked-list__item {
  display: flex;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: var(--gp-border-subtle);
  font-size: 13px;
  color: var(--gp-ink-2);
  align-items: flex-start;
}

.gp-locked-list__item:last-child {
  border-bottom: none;
}

/* Step number in circle */
.gp-step-num {
  font-family: var(--gp-mono);
  color: var(--gp-paper);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gp-forest);
  border-radius: 50%;
  margin-top: 1px;
}

.gp-step-title {
  font-weight: 600;
  color: var(--gp-ink);
}

/* "+N more" footer */
.gp-locked-list__more {
  padding: 10px 18px;
  background: var(--gp-forest-04);
  font-family: var(--gp-mono);
  font-size: 11px;
  color: var(--gp-forest);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid rgba(45, 106, 79, 0.06);
}

.gp-locked-list__more svg {
  flex-shrink: 0;
}

/* Truncation utility */
.gp-truncation {
  /* Used by JS to mark truncated content sections */
}


/* ============================================================================
   23. LOCKED CARD GRID (.gp-locked-grid, .gp-locked-card)
   ============================================================================ */

.gp-locked-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: var(--gp-sp-5);
}

.gp-locked-card {
  border: 1px dashed rgba(28, 25, 23, 0.10);
  border-radius: var(--gp-r-lg);
  padding: var(--gp-sp-5);
  background: var(--gp-cream-warm);
  min-height: 56px;
}

.gp-locked-card__title {
  font-family: var(--gp-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--gp-ink-3);
  margin-bottom: var(--gp-sp-1);
}


/* ============================================================================
   24. STRATEGIC ITEMS (.gp-strat-item)
   ============================================================================ */

.gp-strat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid rgba(28, 25, 23, 0.06);
  border-radius: var(--gp-r-lg);
  margin-bottom: 10px;
  transition: border-color var(--gp-duration) var(--gp-ease),
              transform var(--gp-duration) var(--gp-ease);
}

.gp-strat-item:hover {
  border-color: rgba(28, 25, 23, 0.12);
  transform: translateY(-1px);
}

.gp-strat-item__title {
  font-family: var(--gp-display);
  font-size: 14px;
  font-weight: 600;
}

.gp-strat-item__lock {
  font-family: var(--gp-mono);
  font-size: 11px;
  color: var(--gp-ink-3);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.gp-strat-item__lock svg {
  flex-shrink: 0;
}


/* ============================================================================
   25. INLINE CTA (.gp-inline-cta)
   Forest-04 bg, flex row, forest CTA button
   ============================================================================ */

.gp-inline-cta {
  margin-top: var(--gp-sp-6);
  padding: var(--gp-sp-5) var(--gp-sp-6);
  background: linear-gradient(135deg, var(--gp-forest-04), rgba(45, 106, 79, 0.07));
  border: 1px solid rgba(45, 106, 79, 0.12);
  border-radius: var(--gp-r-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gp-sp-5);
  transition: border-color var(--gp-duration) var(--gp-ease),
              box-shadow var(--gp-duration) var(--gp-ease);
}

.gp-inline-cta:hover {
  border-color: rgba(45, 106, 79, 0.20);
  box-shadow: 0 4px 16px rgba(45, 106, 79, 0.08);
}

.gp-inline-cta p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gp-ink-2);
  margin: 0;
  flex: 1;
}

.gp-inline-cta p strong {
  color: var(--gp-ink);
}

.gp-inline-cta__left {
  flex: 1;
}

.gp-inline-cta__title {
  font-family: var(--gp-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-ink);
  line-height: 1.3;
}

.gp-inline-cta__sub {
  font-size: 12px;
  color: var(--gp-ink-3);
  margin-top: 3px;
  line-height: 1.4;
}

/* Premium users: hide inline CTAs */
body.is-premium .gp-inline-cta {
  display: none;
}


/* ============================================================================
   26. FLOATING BOTTOM CTA (.gp-float-cta)
   Fixed bottom, frosted glass, slide-up animation
   ============================================================================ */

.gp-float-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-top: 1px solid rgba(28, 25, 23, 0.06);
  box-shadow: 0 -8px 32px rgba(28, 25, 23, 0.10);
  padding: var(--gp-sp-4) var(--gp-sp-7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gp-sp-5);
  transform: translateY(100%);
  opacity: 0;
  transition: transform var(--gp-duration-slow) var(--gp-ease),
              opacity var(--gp-duration-slow) var(--gp-ease);
}

.gp-float-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.gp-float-cta.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* Premium users: always hide */
body.is-premium .gp-float-cta {
  display: none !important;
}

.gp-float-cta__left { }

.gp-float-cta__title {
  font-family: var(--gp-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--gp-ink);
}

.gp-float-cta__sub {
  font-size: 11px;
  color: var(--gp-ink-3);
}

.gp-float-cta__btn {
  background: var(--gp-sienna);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: var(--gp-r-lg);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--gp-body);
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(196, 83, 43, 0.25);
  transition: all var(--gp-duration) var(--gp-ease);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.gp-float-cta__btn:hover {
  background: var(--gp-sienna-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(196, 83, 43, 0.35);
}

.gp-float-cta__alt {
  font-size: 11px;
  color: var(--gp-ink-3);
}

.gp-float-cta__alt a {
  color: var(--gp-forest);
  font-weight: 600;
  text-decoration: none;
}

.gp-float-cta__alt a:hover {
  text-decoration: underline;
}

/* Annual savings badge inside floating CTA */
.gp-float-cta__save {
  font-size: 9px;
  background: var(--gp-green-bg);
  color: var(--gp-green);
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: 600;
  margin-left: 2px;
}


/* ============================================================================
   27. COMPARISON TABLE (.gp-compare)
   Full-width, first row highlighted, current-program column tinted
   ============================================================================ */

.gp-compare-wrap {
  border: 1px solid rgba(28, 25, 23, 0.06);
  border-radius: var(--gp-r-xl);
  overflow: hidden;
  box-shadow: var(--gp-sh-sm);
}

.gp-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.gp-compare thead {
  background: var(--gp-cream-dark);
}

.gp-compare th {
  text-align: left;
  padding: var(--gp-sp-3) var(--gp-sp-4);
  font-family: var(--gp-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gp-ink-3);
  font-weight: 700;
  border-bottom: 2px solid rgba(28, 25, 23, 0.08);
}

.gp-compare th strong {
  color: var(--gp-forest);
  font-size: 10px;
}

.gp-compare td {
  padding: var(--gp-sp-3) var(--gp-sp-4);
  border-bottom: var(--gp-border-subtle);
  color: var(--gp-ink-2);
  font-size: 13px;
  line-height: 1.5;
}

/* Alternating row backgrounds */
.gp-compare tbody tr:nth-child(even) td {
  background: rgba(28, 25, 23, 0.01);
}

/* Amount column — prevent dominating the table */
.gp-compare td:nth-child(2),
.gp-compare th:nth-child(2) {
  max-width: 220px;
  word-break: break-word;
}

/* Program name column */
.gp-compare td:first-child {
  font-weight: 600;
  color: var(--gp-ink);
  font-size: 12px;
}

.gp-compare a {
  color: var(--gp-forest);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--gp-duration);
}

.gp-compare a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--gp-forest-deep);
}


/* ============================================================================
   28. RELATED CARDS GRID (.gp-related)
   3-column grid, hover lift
   ============================================================================ */

.gp-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gp-sp-4);
}

.gp-related-card {
  padding: var(--gp-sp-6);
  border: var(--gp-border-light);
  border-radius: var(--gp-r-xl);
  background: var(--gp-paper);
  box-shadow: var(--gp-sh-sm);
  transition: all 0.25s var(--gp-ease);
  text-decoration: none;
  color: inherit;
  display: block;
}

.gp-related-card:hover {
  border-color: var(--gp-forest);
  transform: translateY(-4px);
  box-shadow: var(--gp-sh-lg);
}

.gp-related-card__title {
  font-family: var(--gp-display);
  font-size: 15px;
  font-weight: 600;
  margin: var(--gp-sp-3) 0 var(--gp-sp-2);
  line-height: 1.3;
  color: var(--gp-ink);
  letter-spacing: -0.01em;
}

.gp-related-card:hover .gp-related-card__title {
  color: var(--gp-forest);
}

.gp-related-card__meta {
  font-size: 12px;
  color: var(--gp-ink-3);
  margin-bottom: 0;
  line-height: 1.5;
}

.gp-related-card__link {
  font-size: 12px;
  color: var(--gp-forest);
  font-weight: 600;
  text-decoration: none;
}

.gp-related-card__link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ============================================================================
   29. STACKING PILLS (.gp-stack-pills, .gp-stack-pill)
   ============================================================================ */

.gp-stack-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gp-sp-2);
  margin-bottom: var(--gp-sp-4);
}

.gp-stack-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: var(--gp-r-pill);
  background: var(--gp-forest-04);
  color: var(--gp-forest);
  border: 1px solid rgba(45, 106, 79, 0.10);
  transition: background var(--gp-duration) var(--gp-ease),
              border-color var(--gp-duration) var(--gp-ease);
}

.gp-stack-pill:hover {
  background: var(--gp-forest-08);
  border-color: rgba(45, 106, 79, 0.18);
}

.gp-stack-pill a {
  color: var(--gp-forest);
  text-decoration: none;
}

.gp-stack-pill a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ============================================================================
   30. STACKING VISUALIZATION (.gp-stack-viz)
   Items list, total bar, note
   ============================================================================ */

.gp-stack-viz {
  margin-bottom: var(--gp-sp-5);
}

.gp-stack-viz__title {
  font-family: var(--gp-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--gp-ink-3);
  margin-bottom: var(--gp-sp-3);
}

.gp-stack-viz__items {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gp-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--gp-sp-2);
}

.gp-stack-viz__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gp-sp-3) var(--gp-sp-4);
  background: var(--gp-cream-warm);
  border-radius: var(--gp-r);
  border: 1px solid rgba(28, 25, 23, 0.04);
  font-size: 13px;
  color: var(--gp-ink-2);
}

.gp-stack-viz__item--current {
  background: var(--gp-forest-04);
  border-color: rgba(45, 106, 79, 0.12);
}

.gp-stack-viz__item-name {
  font-weight: 600;
  color: var(--gp-ink);
}

.gp-stack-viz__item-name a {
  color: var(--gp-forest);
  text-decoration: none;
}

.gp-stack-viz__item-name a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gp-stack-viz__current-label {
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: var(--gp-ink-3);
}

.gp-stack-viz__item-amount {
  font-family: var(--gp-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--gp-forest);
}

/* Total bar */
.gp-stack-viz__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gp-sp-4) var(--gp-sp-5);
  background: var(--gp-forest-04);
  border-radius: var(--gp-r-lg);
  border: 1px solid rgba(45, 106, 79, 0.12);
}

.gp-stack-viz__total-label {
  font-family: var(--gp-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--gp-forest);
}

.gp-stack-viz__total-val,
.gp-stack-viz__total-amount {
  font-family: var(--gp-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--gp-forest);
}

/* Note below viz */
.gp-stack-viz__note {
  font-size: 12px;
  color: var(--gp-ink-3);
  font-style: italic;
  margin-top: var(--gp-sp-3);
  line-height: 1.5;
}


/* ============================================================================
   31. STRATEGIC CARDS GRID (.gp-stack-cards)
   ============================================================================ */

.gp-stack-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gp-sp-4);
  margin-bottom: var(--gp-sp-5);
}

.gp-stack-cards__card {
  background: var(--gp-paper);
  border: var(--gp-border-light);
  border-radius: var(--gp-r-lg);
  padding: var(--gp-sp-5);
  box-shadow: var(--gp-sh-sm);
  transition: transform var(--gp-duration) var(--gp-ease),
              box-shadow var(--gp-duration) var(--gp-ease);
}

.gp-stack-cards__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--gp-sh-md);
}

.gp-stack-cards__title {
  font-family: var(--gp-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-ink);
  margin-bottom: var(--gp-sp-2);
}

.gp-stack-cards__desc {
  font-size: 13px;
  color: var(--gp-ink-2);
  line-height: 1.6;
}

/* Strategic cards (singular .gp-stack-card — used by _renderStrategicCards) */
.gp-stack-card {
  background: var(--gp-paper);
  border: var(--gp-border-light);
  border-radius: var(--gp-r-lg);
  padding: 14px 16px;
  box-shadow: var(--gp-sh-sm);
  transition: transform var(--gp-duration) var(--gp-ease),
              box-shadow var(--gp-duration) var(--gp-ease);
}

.gp-stack-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--gp-sh-md);
}

.gp-stack-card__label {
  font-family: var(--gp-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--gp-ink-3);
  margin-bottom: var(--gp-sp-1);
}

.gp-stack-card__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--gp-ink);
  margin-bottom: var(--gp-sp-1);
}

.gp-stack-card__detail {
  font-size: 12px;
  color: var(--gp-ink-2);
  line-height: 1.5;
}

.gp-stack-card__detail a {
  color: var(--gp-forest);
  text-decoration: none;
}

.gp-stack-card__detail a:hover {
  text-decoration: underline;
}


/* ============================================================================
   32. STACKING PARTNERS (hydrated by JS)
   ============================================================================ */

.gp-stacking {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gp-stacking__partner {
  border: 1px solid rgba(28, 25, 23, 0.06);
  border-radius: var(--gp-r-lg);
  padding: var(--gp-sp-4) var(--gp-sp-5);
}

.gp-stacking__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gp-sp-3);
}

.gp-stacking__link {
  color: var(--gp-forest);
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}

.gp-stacking__link:hover {
  text-decoration: underline;
}

.gp-stacking__badge {
  font-family: var(--gp-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--gp-r-pill);
  white-space: nowrap;
}

.gp-stacking__badge--yes {
  background: var(--gp-green-bg);
  color: var(--gp-green);
}

.gp-stacking__badge--no {
  background: var(--gp-red-bg);
  color: var(--gp-red);
}

.gp-stacking__notes {
  font-size: 12px;
  color: var(--gp-ink-3);
  margin-top: var(--gp-sp-2);
  line-height: 1.5;
}

.gp-stacking-max {
  font-size: 13px;
  color: var(--gp-ink-2);
  margin-top: var(--gp-sp-3);
  padding: var(--gp-sp-3) var(--gp-sp-4);
  background: var(--gp-amber-bg);
  border-radius: var(--gp-r);
}


/* ============================================================================
   33. ELIGIBLE / INELIGIBLE LISTS (.gp-list)
   ============================================================================ */

.gp-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gp-list li {
  padding: var(--gp-sp-2) 0;
  border-bottom: var(--gp-border-subtle);
  font-size: 13px;
  color: var(--gp-ink-2);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.gp-list li:last-child {
  border-bottom: none;
}

.gp-list--eligible li::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gp-green-bg) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6L5 8.5L9.5 4' stroke='%2315803d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  margin-top: 1px;
}

.gp-list--ineligible li::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gp-red-bg) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 9L9 3M3 3l6 6' stroke='%23dc2626' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  margin-top: 1px;
}


/* ============================================================================
   34. RISK BADGE + CONTACT INFO (hydrated by JS)
   ============================================================================ */

.gp-risk-badge {
  font-family: var(--gp-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--gp-r-pill);
  display: inline-block;
  margin-bottom: var(--gp-sp-3);
}

.gp-risk--none,
.gp-risk--minimal { background: var(--gp-green-bg); color: var(--gp-green); }
.gp-risk--low     { background: var(--gp-blue-bg); color: var(--gp-blue); }
.gp-risk--moderate { background: var(--gp-amber-bg); color: var(--gp-amber); }
.gp-risk--high,
.gp-risk--significant { background: var(--gp-red-bg); color: var(--gp-red); }

/* Contact info */
.gp-contact {
  display: flex;
  flex-direction: column;
  gap: var(--gp-sp-2);
}

.gp-contact__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gp-forest);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding: var(--gp-sp-2) var(--gp-sp-3);
  border-radius: var(--gp-r);
  transition: background 0.15s var(--gp-ease);
}

.gp-contact__link:hover {
  background: var(--gp-forest-04);
}

.gp-contact__icon {
  font-size: 16px;
  flex-shrink: 0;
}


/* ============================================================================
   35. ASSESSMENT SECTION (.gp-assessment)
   Container for the personalized verdict + match criteria grid
   ============================================================================ */

.gp-assessment {
  margin-bottom: var(--gp-sp-7);
}

.gp-assessment__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gp-sp-5);
}

.gp-assessment__title {
  font-family: var(--gp-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--gp-ink);
  margin: 0;
}

.gp-assessment__retake {
  font-size: 12px;
  color: var(--gp-forest);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s var(--gp-ease);
}

.gp-assessment__retake:hover {
  color: var(--gp-forest-deep);
  text-decoration: underline;
}

.gp-assessment__body {
  display: flex;
  flex-direction: column;
  gap: var(--gp-sp-6);
}

/* -- Verdict box: MOST VISUALLY PROMINENT element below the hero --
   Strong container, big Fraunces recommendation text, warm background */
.gp-verdict-box {
  background: var(--gp-paper);
  border: 2px solid var(--gp-forest);
  border-radius: var(--gp-r-xl);
  padding: var(--gp-sp-7) var(--gp-sp-8);
  margin-bottom: var(--gp-sp-6);
  box-shadow: 0 8px 32px rgba(45, 106, 79, 0.12),
              inset 0 0 60px rgba(250, 247, 242, 0.5);
  text-align: center;
  position: relative;
  display: flex;
  gap: var(--gp-sp-5);
  align-items: flex-start;
}

.gp-verdict-box::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--gp-r-xl);
  background: linear-gradient(135deg,
    rgba(45, 106, 79, 0.06) 0%,
    rgba(45, 106, 79, 0.02) 50%,
    rgba(196, 83, 43, 0.04) 100%);
  z-index: 0;
  pointer-events: none;
}

.gp-verdict-box__label {
  font-family: var(--gp-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gp-forest);
  margin-bottom: var(--gp-sp-3);
  position: relative;
  z-index: 1;
}

.gp-verdict-box__text {
  font-family: var(--gp-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gp-ink);
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
  margin: 0;
}

.gp-verdict-box__sub {
  font-size: 14px;
  color: var(--gp-ink-2);
  margin-top: var(--gp-sp-3);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.gp-verdict-box__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.gp-verdict-box__content {
  flex: 1;
  text-align: left;
  position: relative;
  z-index: 1;
}

.gp-verdict-box__reason {
  font-size: 13px;
  color: var(--gp-ink-2);
  line-height: 1.5;
  margin-top: var(--gp-sp-2);
}

.gp-verdict-box__premium {
  font-size: 12px;
  color: var(--gp-forest);
  margin-top: var(--gp-sp-4);
  line-height: 1.5;
}

.gp-verdict-box__premium a {
  color: var(--gp-forest);
  text-decoration: underline;
  font-weight: 600;
}

.gp-verdict-box__premium a:hover {
  color: var(--gp-forest-deep);
}

/* Premium verdict metrics: 3-column grid inside verdict box */
.gp-verdict-box__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gp-sp-3);
  margin-top: var(--gp-sp-5);
}

.gp-verdict-box__metric {
  background: rgba(28, 25, 23, 0.02);
  border-radius: var(--gp-r);
  padding: var(--gp-sp-4);
  text-align: center;
}

.gp-verdict-box__metric-label {
  font-family: var(--gp-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gp-ink-3);
  margin-bottom: var(--gp-sp-2);
}

.gp-verdict-box__metric-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--gp-ink);
}

/* Strong recommendation variant */
.gp-verdict-box--strong {
  border-color: var(--gp-forest);
  background: linear-gradient(
    180deg,
    rgba(45, 106, 79, 0.04) 0%,
    var(--gp-paper) 100%
  );
}

/* Moderate / caution variant */
.gp-verdict-box--moderate {
  border-color: var(--gp-amber);
  box-shadow: 0 8px 32px rgba(217, 119, 6, 0.10),
              inset 0 0 60px rgba(250, 247, 242, 0.5);
}

/* Weak / not recommended */
.gp-verdict-box--weak {
  border-color: var(--gp-red);
  box-shadow: 0 8px 32px rgba(220, 38, 38, 0.08),
              inset 0 0 60px rgba(250, 247, 242, 0.5);
}

/* -- Match criteria section: header + grid + optional tip -- */
.gp-match {
  display: flex;
  flex-direction: column;
  gap: var(--gp-sp-4);
}

.gp-match__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gp-match__title {
  font-family: var(--gp-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-ink);
  margin: 0;
}

.gp-match__score {
  display: flex;
  align-items: center;
  gap: var(--gp-sp-3);
}

.gp-match__score-label {
  font-size: 13px;
  font-weight: 700;
}

.gp-match__score-detail {
  font-size: 12px;
  color: var(--gp-ink-3);
}

.gp-match__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.gp-match__tip {
  font-size: 12px;
  font-style: italic;
  line-height: 1.6;
  padding: var(--gp-sp-4) var(--gp-sp-5);
  background: var(--gp-forest-04);
  border-radius: var(--gp-r);
  border-left: 3px solid var(--gp-forest);
  color: var(--gp-ink-2);
}

.gp-match__tip--visible {
  filter: none;
}

.gp-match__item {
  padding: var(--gp-sp-4) var(--gp-sp-5);
  border-radius: var(--gp-r-lg);
  border: 1px solid rgba(28, 25, 23, 0.06);
  background: var(--gp-paper);
  display: flex;
  gap: var(--gp-sp-3);
  align-items: flex-start;
}

.gp-match__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  font-size: 14px;
  font-weight: 700;
}

.gp-match__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gp-ink);
  line-height: 1.3;
}

.gp-match__val {
  font-size: 14px;
  font-weight: 600;
  color: var(--gp-ink);
  margin-top: 2px;
}

/* Pass state — green tint */
.gp-match__item--pass {
  background: rgba(21, 128, 61, 0.03);
  border-color: rgba(21, 128, 61, 0.12);
}

.gp-match__item--pass .gp-match__icon {
  background: var(--gp-green-bg);
  color: var(--gp-green);
}

/* Fail state — red tint */
.gp-match__item--fail {
  background: rgba(220, 38, 38, 0.03);
  border-color: rgba(220, 38, 38, 0.10);
}

.gp-match__item--fail .gp-match__icon {
  background: var(--gp-red-bg);
  color: var(--gp-red);
}

/* Neutral state — default */
.gp-match__item--neutral {
  background: var(--gp-cream-warm);
  border-color: rgba(28, 25, 23, 0.05);
}

.gp-match__item--neutral .gp-match__icon {
  background: var(--gp-cream-dark);
  color: var(--gp-ink-3);
}


/* ============================================================================
   36. NO-QUIZ PROMPT (.gp-no-quiz)
   Centered, dashed border — shown when user hasn't taken quiz
   ============================================================================ */

.gp-no-quiz {
  text-align: center;
  padding: var(--gp-sp-7) var(--gp-sp-6);
  border: 2px dashed rgba(28, 25, 23, 0.10);
  border-radius: var(--gp-r-xl);
  background: var(--gp-cream-warm);
  margin-bottom: var(--gp-sp-6);
}

.gp-no-quiz__title {
  font-family: var(--gp-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--gp-ink);
  margin-bottom: var(--gp-sp-3);
}

.gp-no-quiz__desc {
  font-size: 14px;
  color: var(--gp-ink-2);
  line-height: 1.6;
  margin-bottom: var(--gp-sp-5);
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.gp-no-quiz__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* ============================================================================
   37. FOOTER (.gp-footer)
   4-column layout, dark bg, newsletter form
   ============================================================================ */

.gp-footer {
  background: #1C1917;
  color: #f5f0e8;
  padding: var(--gp-sp-8) 0 var(--gp-sp-7);
  margin-top: var(--gp-sp-9);
}

.gp-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gp-sp-6);
}

.gp-footer__columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: var(--gp-sp-8);
  margin-bottom: var(--gp-sp-8);
}

.gp-footer__col h4 {
  font-family: var(--gp-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f5f0e8;
  margin: 0 0 var(--gp-sp-5);
}

.gp-footer__col a {
  display: block;
  color: var(--gp-ink-3);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: var(--gp-sp-2);
  line-height: 1.6;
  transition: color 0.15s var(--gp-ease);
}

.gp-footer__col a:hover {
  color: #f5f0e8;
}

/* Newsletter column */
.gp-footer__newsletter p {
  color: var(--gp-ink-3);
  font-size: 13px;
  margin: 0 0 var(--gp-sp-4);
  line-height: 1.5;
}

.gp-footer__form {
  display: flex;
  flex-direction: column;
  gap: var(--gp-sp-2);
}

.gp-footer__form input[type="email"] {
  padding: 10px 14px;
  border: 1px solid rgba(168, 162, 158, 0.25);
  border-radius: var(--gp-r);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f0e8;
  font-size: 13px;
  font-family: var(--gp-body);
  transition: border-color var(--gp-duration) var(--gp-ease);
}

.gp-footer__form input[type="email"]::placeholder {
  color: var(--gp-ink-3);
}

.gp-footer__form input[type="email"]:focus {
  outline: none;
  border-color: var(--gp-forest);
}

.gp-footer__form button {
  padding: 10px 14px;
  background: var(--gp-forest);
  color: #fff;
  border: none;
  border-radius: var(--gp-r);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--gp-body);
  cursor: pointer;
  transition: background var(--gp-duration) var(--gp-ease),
              transform var(--gp-duration) var(--gp-ease);
}

.gp-footer__form button:hover {
  background: var(--gp-forest-deep);
  transform: translateY(-1px);
}

/* Bottom row */
.gp-footer__bottom {
  text-align: center;
  padding-top: var(--gp-sp-6);
  border-top: 1px solid rgba(168, 162, 158, 0.12);
}

.gp-footer__bottom p {
  color: var(--gp-ink-3);
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
}

.gp-footer__bottom a {
  color: var(--gp-ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.7;
}

.gp-footer__bottom a:hover {
  color: #f5f0e8;
  opacity: 1;
}


/* ============================================================================
   38. BOTTOM SPACER (clear floating CTA)
   ============================================================================ */

.gp-bottom-spacer {
  height: 80px;
}


/* ============================================================================
   39. RESPONSIVE — TABLET (max-width: 900px)
   ============================================================================ */

@media (max-width: 900px) {
  /* Hero stacks vertically */
  .gp-hero__main {
    flex-direction: column;
    gap: var(--gp-sp-3);
  }

  .gp-hero__right {
    text-align: left;
    max-width: none;
  }

  /* Verdict wraps to 3+2 */
  .gp-verdict {
    grid-template-columns: repeat(3, 1fr);
  }

  .gp-verdict__item:nth-child(4),
  .gp-verdict__item:nth-child(5) {
    border-top: 1px solid rgba(28, 25, 23, 0.04);
  }

  /* Hero meta stacks */
  .gp-hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gp-sp-2);
  }

  /* Info grid to 2 columns on tablet */
  .gp-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer columns wrap to 2 */
  .gp-footer__columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--gp-sp-6);
  }

  /* Verdict box slightly smaller text */
  .gp-verdict-box__text {
    font-size: 26px;
  }

  .gp-verdict-box {
    padding: var(--gp-sp-6) var(--gp-sp-7);
  }
}


/* ============================================================================
   40. RESPONSIVE — MOBILE (max-width: 700px)
   ============================================================================ */

@media (max-width: 700px) {
  /* Tighter page padding */
  .gp {
    padding: 0 var(--gp-sp-4);
  }

  /* Hero body reduced padding */
  .gp-hero__body {
    padding: var(--gp-sp-6);
  }

  .gp-hero__title {
    font-size: 26px;
  }

  .gp-hero__amount {
    font-size: 24px;
  }

  /* Hero actions wrap */
  .gp-hero__actions {
    flex-wrap: wrap;
  }

  .gp-hero__actions .gp-btn {
    flex: 1;
    justify-content: center;
  }

  /* Two-column -> single column */
  .gp-two-col {
    grid-template-columns: 1fr;
  }

  /* Scorecard: 3-col -> 2-col */
  .gp-scores {
    grid-template-columns: 1fr 1fr;
  }

  /* Secondary scores: 4-col -> 2-col */
  .gp-scores-secondary {
    grid-template-columns: 1fr 1fr;
  }

  /* Anxiety row: 3-col -> 2-col */
  .gp-anxiety-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Locked grid: 2-col -> single */
  .gp-locked-grid {
    grid-template-columns: 1fr;
  }

  /* Related cards: 3-col -> single */
  .gp-related {
    grid-template-columns: 1fr;
  }

  /* Chapter content: no left offset on mobile */
  .gp-chapter__content {
    padding-left: var(--gp-sp-4);
    padding-right: var(--gp-sp-4);
  }

  /* Chapter heading tighter */
  .gp-chapter__head {
    padding: var(--gp-sp-5) var(--gp-sp-4);
  }

  .gp-chapter__head-left {
    gap: var(--gp-sp-3);
  }

  /* Chapter subtitle wraps on mobile */
  .gp-chapter__subtitle {
    white-space: normal;
  }

  /* Premium divider tighter */
  .gp-premium-divider {
    padding: var(--gp-sp-6) 0 var(--gp-sp-5);
  }

  /* Inline CTA stacks vertically */
  .gp-inline-cta {
    flex-direction: column;
    text-align: center;
    gap: var(--gp-sp-3);
  }

  .gp-inline-cta__left {
    text-align: center;
  }

  .gp-inline-cta .gp-btn--cta {
    width: 100%;
    justify-content: center;
  }

  /* Info grid single column */
  .gp-info-grid {
    grid-template-columns: 1fr;
  }

  /* Details list stacks label above value on mobile */
  .gp-details-list__item {
    flex-direction: column;
    gap: 2px;
  }

  .gp-details-list__value {
    text-align: left;
  }

  /* Comparison table horizontal scroll */
  .gp-compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gp-compare {
    min-width: 500px;
  }

  /* Strategic items stack */
  .gp-strat-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gp-sp-2);
  }

  /* Floating CTA compact */
  .gp-float-cta {
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    justify-content: center;
    text-align: center;
  }

  .gp-float-cta__btn {
    width: 100%;
    justify-content: center;
  }

  /* Footer stacks */
  .gp-footer__columns {
    grid-template-columns: 1fr;
    gap: var(--gp-sp-6);
  }

  /* Hydrated scorecard */
  .gp-scorecard {
    grid-template-columns: 1fr 1fr;
  }

  /* Verdict box: reduced prominence on mobile but still dominant */
  .gp-verdict-box {
    padding: var(--gp-sp-6) var(--gp-sp-5);
  }

  .gp-verdict-box__text {
    font-size: 24px;
  }

  /* Match grid single column on mobile */
  .gp-match__grid {
    grid-template-columns: 1fr;
  }

  /* Match score wraps */
  .gp-match__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gp-sp-2);
  }

  /* Verdict box stacks icon + content */
  .gp-verdict-box__icon {
    display: none;
  }

  .gp-verdict-box__content {
    text-align: center;
  }

  /* Premium verdict metrics: 3-col -> 1-col */
  .gp-verdict-box__metrics {
    grid-template-columns: 1fr;
  }

  /* Stacking viz items */
  .gp-stack-cards {
    grid-template-columns: 1fr;
  }

  /* GEO summary reduced padding */
  .gp-summary {
    padding: var(--gp-sp-5) var(--gp-sp-5);
  }
}


/* ============================================================================
   41. RESPONSIVE — SMALL MOBILE (max-width: 480px)
   ============================================================================ */

@media (max-width: 480px) {
  /* Verdict goes 2-col */
  .gp-verdict {
    grid-template-columns: repeat(2, 1fr);
  }

  .gp-verdict__item:nth-child(3),
  .gp-verdict__item:nth-child(5) {
    border-top: 1px solid rgba(28, 25, 23, 0.04);
  }

  /* Score cards single column */
  .gp-scores {
    grid-template-columns: 1fr;
  }

  .gp-scores-secondary {
    grid-template-columns: 1fr 1fr;
  }

  /* Anxiety row single column */
  .gp-anxiety-row {
    grid-template-columns: 1fr;
  }

  /* Hero title smaller */
  .gp-hero__title {
    font-size: 22px;
  }

  /* Float CTA fully stacked */
  .gp-float-cta {
    flex-direction: column;
    gap: var(--gp-sp-2);
  }

  /* Assess grid single column */
  .gp-assess__grid {
    grid-template-columns: 1fr;
  }

  /* Hydrated scorecard single col */
  .gp-scorecard {
    grid-template-columns: 1fr;
  }

  /* Verdict box smallest */
  .gp-verdict-box__text {
    font-size: 22px;
  }

  .gp-verdict-box {
    padding: var(--gp-sp-5) var(--gp-sp-4);
  }
}


/* ============================================================================
   42. PRINT STYLES
   ============================================================================ */

@media print {
  .gp-float-cta,
  .gp-inline-cta,
  .gp-btn,
  .gp-footer {
    display: none !important;
  }

  .gp-chapter__body {
    max-height: none !important;
    overflow: visible !important;
  }

  .gp-chapter {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }

  .gp-hero {
    box-shadow: none;
    border: 1px solid #ddd;
  }

  .gp-blr {
    filter: none;
  }

  body::after {
    display: none;
  }
}


/* ============================================================================
   43. REDUCED MOTION PREFERENCE
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .gp-hero,
  .gp-summary,
  .gp-chapter {
    animation: none;
  }

  .gp-chapter__chevron {
    transition: none;
  }

  .gp-chapter__body {
    transition: none;
  }

  .gp-score__fill {
    animation: none;
  }

  .gp-btn--primary:hover,
  .gp-btn--cta:hover,
  .gp-btn--ghost:hover,
  .gp-float-cta__btn:hover,
  .gp-related-card:hover,
  .gp-stack-cards__card:hover,
  .gp-stack-card:hover,
  .gp-info-card:hover,
  .gp-scorecard__card:hover {
    transform: none;
  }

  .gp-float-cta {
    transition: none;
  }
}


/* ============================================================================
   TOOLTIPS — JS-positioned tooltip for truncated values
   Uses [data-tip] attribute. Tooltip element (.gp-tip) is appended to <body>
   by grant-page.js to escape overflow:hidden on .gp-hero, .gp-chapter, etc.
   ============================================================================ */

[data-tip] {
  cursor: help;
}

/* Tooltip bubble — appended to <body> by JS, positioned absolutely */
.gp-tip {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 340px;
  padding: 10px 14px;
  background: var(--gp-ink, #1C1917);
  color: var(--gp-cream, #FAF7F2);
  font-family: var(--gp-body, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(28, 25, 23, 0.2);
  white-space: normal;
  word-break: break-word;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}

.gp-tip.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Arrow — below-pointing (tooltip above element) */
.gp-tip--above::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--gp-ink, #1C1917);
}

/* Arrow — above-pointing (tooltip below element) */
.gp-tip--below::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--gp-ink, #1C1917);
}


/* ============================================================================
   SCROLL SPY — "Margin Notes" floating right-edge navigation
   Fixed position, doesn't affect content flow. Labels left, dot right.
   Single continuous line as pseudo-element for guaranteed straight alignment.
   Shows at viewports >= 1200px. Hidden on narrower screens.
   ============================================================================ */

/* Spy is outside .gp — needs its own box-sizing reset */
.gp-spy,
.gp-spy *,
.gp-spy *::before,
.gp-spy *::after {
  box-sizing: border-box;
}

.gp-spy {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: none;
}

@media (min-width: 1200px) {
  .gp-spy { display: block; }
}

/* Container: items stacked vertically, line as background */
.gp-spy__items {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  /* Single continuous line through all dots */
  background-image: linear-gradient(rgba(28,25,23,0.12), rgba(28,25,23,0.12));
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 2px calc(100% - 28px);
}

/* ── Each item: label + dot in a row, dot on the right ── */
.gp-spy__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  position: relative;
}

/* ── The dot ── */
.gp-spy__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--gp-ink-5);
  background: var(--gp-cream);
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* ── Dot states — all dots stay 10px, no size change ── */
.gp-spy__item[data-state="past"] .gp-spy__dot {
  background: var(--gp-forest);
  border-color: var(--gp-forest);
}

.gp-spy__item[data-state="active"] .gp-spy__dot {
  background: var(--gp-forest);
  border-color: var(--gp-forest);
  box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.12);
}

.gp-spy__item[data-state="future"] .gp-spy__dot {
  border-color: var(--gp-ink-5);
  background: var(--gp-cream);
}

/* ── Label (left of dot) ── */
.gp-spy__name {
  font-family: var(--gp-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--gp-ink-4);
  white-space: nowrap;
  text-align: right;
  transition: all 0.25s;
  line-height: 1;
}

.gp-spy__item[data-state="past"] .gp-spy__name {
  color: var(--gp-ink-3);
}

.gp-spy__item[data-state="active"] .gp-spy__name {
  color: var(--gp-forest);
  font-weight: 700;
}

.gp-spy__item:hover .gp-spy__name {
  color: var(--gp-ink-2);
}

.gp-spy__item[data-state="active"]:hover .gp-spy__name {
  color: var(--gp-forest);
}



/* ============================================================================
   VISUAL RHYTHM — Section differentiation and editorial flow
   ============================================================================ */

/* -- Scorecard (§3) — warm inset, no card shadow -- */
.gp-chapter[data-section="3"] {
  background: var(--gp-cream-warm);
  border-color: rgba(28, 25, 23, 0.04);
  box-shadow: inset 0 2px 8px rgba(28, 25, 23, 0.03);
}

.gp-chapter[data-section="3"] .gp-chapter__head:hover {
  background: rgba(28, 25, 23, 0.02);
}

/* -- Premium sections — forest left accent for depth -- */
.gp-chapter--premium {
  border-left: 3px solid rgba(45, 106, 79, 0.12);
}

.gp-chapter--premium .gp-chapter__body {
  border-top: 1px solid rgba(45, 106, 79, 0.06);
}

/* -- How to Win (§4) — slightly warm background to differentiate from §5 -- */
.gp-chapter[data-section="4"] {
  background: var(--gp-paper-warm);
}

/* -- Application Playbook (§5) — stays white (contrast with §4) -- */

/* -- Funding Stack (§6) — forest tint for the strategic section -- */
.gp-chapter[data-section="6"] {
  background: rgba(45, 106, 79, 0.015);
  border-left-color: rgba(45, 106, 79, 0.20);
}

/* -- Free sections after premium zone — lighter, humbler treatment -- */
.gp-chapter[data-section="7"],
.gp-chapter[data-section="8"] {
  box-shadow: var(--gp-sh-sm);
  border-color: rgba(28, 25, 23, 0.04);
  border-left: none;
}

/* -- Comparison (§7) — editorial separator before return to free content -- */
.gp-chapter[data-section="7"] {
  margin-top: 8px;
  position: relative;
}

.gp-chapter[data-section="7"]::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(28, 25, 23, 0.08), transparent);
}

/* -- Premium divider — visual landmark between free and premium zones -- */
.gp-premium-divider {
  margin: 32px 0 24px;
  padding: 20px 0;
  text-align: center;
  position: relative;
}

.gp-premium-divider::before,
.gp-premium-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 110px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 106, 79, 0.18), transparent);
}

.gp-premium-divider::before { left: 0; }
.gp-premium-divider::after { right: 0; }

/* -- Breathing room between major page zones -- */
#gp-assessment {
  margin-bottom: 24px;
}

.gp-chapter[data-section="2"] {
  margin-bottom: 20px;
}

.gp-chapter[data-section="3"] {
  margin-bottom: 4px;
}


/* ============================================================================
   ANXIETY ROW — Sentiment color variants
   ============================================================================ */

.gp-anxiety-row__item--green {
  background: rgba(21, 128, 61, 0.05);
  border-color: rgba(21, 128, 61, 0.12);
}

.gp-anxiety-row__item--green .gp-anxiety-row__val {
  color: var(--gp-green);
}

.gp-anxiety-row__item--amber {
  background: rgba(180, 83, 9, 0.04);
  border-color: rgba(180, 83, 9, 0.10);
}

.gp-anxiety-row__item--amber .gp-anxiety-row__val {
  color: var(--gp-amber);
}

.gp-anxiety-row__item--red {
  background: rgba(220, 38, 38, 0.04);
  border-color: rgba(220, 38, 38, 0.10);
}

.gp-anxiety-row__item--red .gp-anxiety-row__val {
  color: var(--gp-red);
}


/* ============================================================================
   FUNDING DETAILS — Polished key-value display with icons
   ============================================================================ */

.gp-details__heading {
  font-family: var(--gp-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--gp-sp-3);
  color: var(--gp-ink);
}

.gp-details-list__icon {
  flex-shrink: 0;
  color: var(--gp-ink-3);
  margin-right: 6px;
  vertical-align: -2px;
}

/* Amount row highlight */
.gp-details-list__item--highlight {
  background: var(--gp-forest-04) !important;
  border-bottom-color: rgba(45, 106, 79, 0.08);
}

.gp-details-list__item--highlight .gp-details-list__icon {
  color: var(--gp-forest);
}

.gp-details-list__value--amount {
  color: var(--gp-forest-deep);
  font-size: 15px;
  font-weight: 700;
}


/* ============================================================================
   COMPARISON TABLE — Difficulty pills and amount column
   ============================================================================ */

.gp-compare__amt {
  max-width: 220px;
  font-size: 12px;
  color: var(--gp-ink-2);
}

/* Difficulty badge pills */
.gp-compare__pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.gp-compare__pill.gp-color-green {
  background: rgba(21, 128, 61, 0.08);
  color: var(--gp-green);
}

.gp-compare__pill.gp-color-amber {
  background: rgba(180, 83, 9, 0.06);
  color: var(--gp-amber);
}

.gp-compare__pill.gp-color-red {
  background: rgba(220, 38, 38, 0.06);
  color: var(--gp-red);
}

/* Neutral pill (no color class) */
.gp-compare__pill:not(.gp-color-green):not(.gp-color-amber):not(.gp-color-red) {
  background: rgba(28, 25, 23, 0.04);
  color: var(--gp-ink-2);
}

/* Current row — stronger emphasis */
.gp-compare__row--current td {
  background: rgba(45, 106, 79, 0.07);
  color: var(--gp-ink);
  font-weight: 600;
}

.gp-compare__row--current td:first-child {
  border-left: 3px solid var(--gp-forest);
  padding-left: calc(var(--gp-sp-4) - 3px);
}

.gp-compare__row--current td:first-child::before {
  content: '← You are here';
  display: block;
  font-family: var(--gp-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gp-forest);
  font-weight: 700;
  margin-bottom: 2px;
}