/* =====================================================================
   GO INFO — components.css (chassis)
   Component recipes for the .info estate network theme. The document base,
   skip link, container, Phosphor base, button and card recipes are carried
   verbatim from go-marketing's components.css (they compose the shared
   parent-brand tokens); the estate chrome (header/footer/content) is the
   chassis baseline.

   Token truth is colors_and_type.css — byte-identical to go-marketing's,
   enforced by the token-drift CI guard; this file only composes tokens,
   never redefines them. Color discipline (CLAUDE.md): GO Blue is primary
   everywhere; --co-green is Communities-only — in this theme it appears
   on the Communities ad/CTA and, per the hub canon's declared reading
   (flagged in the hub-templates PR), on the grant-data surfaces that
   route into Communities; coral as a background/text color is ALWAYS
   --hi-coral-d20, never raw --hi-coral (WCAG contrast fix).

   CANON: the estate chrome below is reconciled to
   ui_kits/info-network/Components.jsx (InfoNav / InfoFooter) — the .info
   network's own canon, located 2026-07-10. Values (90/58 header heights,
   70/42 logo, footer structure) are the canon's, not go-marketing's.
   Declared adaptation: containers use var(--max-content) (1280px, the
   sibling realization convention) where the canon mock hardcodes 1200.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Document base (verbatim from go-marketing)
   --------------------------------------------------------------------- */
html, body { margin: 0; }
body {
  background: #fff;
  font-family: var(--font-sans);
  color: var(--neutral-text);
}
*, *::before, *::after { box-sizing: border-box; }

/* Skip link — visually hidden until focused (accessibility floor). */
.go-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--go-blue);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.go-skip-link:focus { left: 0; }

.go-container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--margin-desktop);
}
@media (max-width: 900px) { .go-container { padding: 0 var(--margin-tablet); } }
@media (max-width: 600px) { .go-container { padding: 0 var(--margin-mobile); } }

/* Phone-width overflow guard: the page must never horizontal-scroll.
   `clip` (NOT `hidden` — clip creates no scroll container, so
   position:sticky on the header keeps working) backstops any wide
   element. Same rule as go-marketing. */
html { overflow-x: clip; }

/* ---------------------------------------------------------------------
   Phosphor icon font base (verbatim from go-marketing). No glyph rules
   ship with the chassis — the chrome uses none; add per-glyph :before
   rules here as estate templates need them (same rule as go-marketing).
   --------------------------------------------------------------------- */
.ph {
  font-family: 'Phosphor' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: never;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Chrome glyphs (canon InfoFooter): social circles + the Canada arrow. */
.ph.ph-arrow-right::before     { content: "\e06c"; }
.ph.ph-envelope-simple::before { content: "\e218"; }
.ph.ph-instagram-logo::before  { content: "\e2d0"; }
.ph.ph-linkedin-logo::before   { content: "\e2ee"; }
/* Hub glyphs. */
.ph.ph-caret-up::before        { content: "\e13c"; }

/* Phosphor FILL face — wired here (not colors_and_type.css, which stays
   byte-identical to go-marketing's under the token-drift guard). The face
   ships in assets/fonts/ (gate G3, self-hosted); this wires it for the
   webcast play glyph per the hub-templates GO. */
@font-face {
  font-family: 'Phosphor-Fill';
  src: url('../fonts/Phosphor-Fill.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: block;
}
.ph-fill {
  font-family: 'Phosphor-Fill' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: never;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ph-fill.ph-play-circle::before { content: "\e3d2"; }

/* Visually hidden (screen-reader-only) utility — form labels etc. */
.go-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   Buttons (COMPONENT-SPECS · Buttons — verbatim from go-marketing)
   --------------------------------------------------------------------- */
.go-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
  transition: background var(--dur-ui) var(--ease-out),
              color var(--dur-ui) var(--ease-out);
}

/* Primary — GO Blue */
.go-btn-primary {
  background: var(--go-blue);
  color: #fff;
  font-size: var(--fs-body);
  padding: 12px 24px;
}
.go-btn-primary:hover { background: var(--go-blue-d10); }

/* Secondary — outline GO Blue */
.go-btn-secondary {
  background: transparent;
  color: var(--go-blue);
  border: 1.5px solid var(--go-blue);
  font-size: var(--fs-body);
  padding: 12px 24px;
  transition: all var(--dur-ui) var(--ease-out);
}
.go-btn-secondary:hover { background: var(--go-blue-a10); }

/* CTA — yellow. Dark text for 9.90:1 contrast. */
.go-btn-cta {
  background: var(--hi-yellow);
  color: var(--neutral-text);
  font-size: var(--fs-body);
  padding: 12px 24px;
}
.go-btn-cta:hover { background: var(--hi-yellow-d10); }

/* Coral — ALWAYS --hi-coral-d20 (4.70:1 with white), never raw --hi-coral. */
.go-btn-coral {
  background: var(--hi-coral-d20);
  color: #fff;
  font-size: var(--fs-body);
  padding: 12px 24px;
}
.go-btn-coral:hover { background: var(--hi-coral-d30); }

/* Pill shape for compact chrome buttons. */
.go-btn-pill { border-radius: var(--radius-pill); }

/* Large CTAs (canon 16–17px). */
.go-btn-lg { font-size: 17px; padding: 16px 30px; }
.go-btn-secondary.go-btn-lg { padding: 14px 28px; border-width: 2px; }

/* ---------------------------------------------------------------------
   Card base (COMPONENT-SPECS · Cards — verbatim base recipe; the estate
   defines its own variants when the strip templates land; go-marketing's
   content-card variants are marketing-specific and not carried).
   --------------------------------------------------------------------- */
.go-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  transition: box-shadow var(--dur-card) var(--ease-out),
              transform var(--dur-card) var(--ease-out);
}
/* Hover/focus affordance (visual-QA 2026-07-15, defect 4): lift + a
   1px GO-blue ring, so interactivity reads even where the elevation
   shift alone is too subtle (and stays visible when reduced-motion
   suppresses the lift). :focus-visible / :focus-within give keyboard
   users the same affordance — never hover-only. */
.go-card:hover,
.go-card:focus-visible,
.go-card:focus-within {
  box-shadow: var(--shadow-md), 0 0 0 1px var(--go-blue-a20);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  /* Motion only — the shadow + ring affordance stays. */
  .go-card,
  .go-card:hover,
  .go-card:focus-visible,
  .go-card:focus-within { transition: none; transform: none; }
}

/* =====================================================================
   ESTATE HEADER — canon InfoNav: keyline, warm bar, logo only; right side
   Contact + the coral Communities pill. Sticky shrink 90px -> 58px via the
   nav.js island toggling .is-compact (keyline 4 -> 3, logo 70 -> 42).
   ===================================================================== */
.go-header {
  position: sticky;
  top: 0;
  z-index: 30;
  font-family: var(--font-sans);
}
.go-header__keyline {
  height: 4px;
  background: var(--hi-yellow);
  transition: height 200ms var(--ease-out);
}
.go-header.is-compact .go-header__keyline { height: 3px; }

.go-header__bar {
  background: var(--warm-bg);
  border-bottom: 1px solid var(--warm-border);
  box-shadow: none;
  transition: box-shadow 200ms var(--ease-out);
}
.go-header.is-compact .go-header__bar { box-shadow: 0 4px 16px rgba(36,41,60,.10); }

.go-header__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 40px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: height 200ms var(--ease-out);
}
.go-header.is-compact .go-header__inner { height: 58px; }
@media (max-width: 900px) { .go-header__inner { padding: 0 var(--margin-tablet); } }
@media (max-width: 600px) { .go-header__inner { padding: 0 var(--margin-mobile); } }

.go-header__brand { display: inline-flex; align-items: center; }
.go-header__logo {
  height: 70px;
  width: auto;
  object-fit: contain;
  transition: height 200ms var(--ease-out);
}
.go-header.is-compact .go-header__logo { height: 42px; }
@media (max-width: 600px) { .go-header__logo { height: 48px; } }

.go-header__actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.go-header__contact {
  font-size: 14px;
  font-weight: 700;
  color: var(--go-blue);
  text-decoration: none;
}
.go-header__contact:focus-visible {
  outline: 2px solid var(--go-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.go-header__login {
  font-size: 13.5px;
  padding: 11px 20px;
}

/* ---------------------------------------------------------------------
   Mobile nav: hamburger toggle + slide-in drawer (<=768px). Supersedes
   the old <=600px rule that silently dropped the Contact link. Canon has
   no responsive spec, so 768px is a build-side breakpoint decision. Both
   header actions move into the drawer — nothing becomes unreachable.
   Pattern, class names, and nav.js behaviour are IDENTICAL to
   go-marketing (one implementation, two mounts).
   --------------------------------------------------------------------- */
.go-nav-toggle {
  display: none; /* shown <=768px only */
  align-items: center;
  gap: 9px;
  margin-left: auto;
  background: none;
  border: 1px solid var(--warm-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--go-blue);
}
.go-nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.go-nav-toggle__bars span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--go-blue);
}
.go-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  font-family: var(--font-sans);
}
.go-drawer[hidden] { display: none; }
.go-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(26, 29, 46, 0.45);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.go-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: #fff;
  border-left: 4px solid var(--hi-yellow);
  box-shadow: var(--shadow-lg);
  padding: 14px 22px 28px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 220ms var(--ease-out);
}
.go-drawer.is-open .go-drawer__scrim { opacity: 1; }
.go-drawer.is-open .go-drawer__panel { transform: none; }
.go-drawer__close {
  display: block;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  color: var(--go-blue);
  padding: 6px 8px;
}
.go-drawer__nav a {
  display: block;
  padding: 11px 8px;
  font-size: 15px;
  color: var(--neutral-text);
  text-decoration: none;
  border-radius: 6px;
}
.go-drawer__nav a:hover,
.go-drawer__nav a:focus-visible { background: var(--warm-bg); }
.go-drawer__nav a.go-drawer__link {
  font-size: 16px;
  font-weight: 700;
  color: var(--go-blue);
}
.go-drawer__nav a.go-drawer__login {
  display: inline-block;
  margin: 20px 8px 0;
  font-size: 13.5px;
  padding: 12px 22px;
  color: #fff;
}
.go-drawer__nav a.go-drawer__login:hover,
.go-drawer__nav a.go-drawer__login:focus-visible { background: var(--hi-coral-d30); }
/* Scroll-lock while the drawer is open (nav.js flips this on <html>). */
.go-drawer-lock { overflow: hidden; }
@media (min-width: 769px) {
  .go-drawer { display: none; } /* belt-and-braces: JS also closes on grow */
}
@media (prefers-reduced-motion: reduce) {
  .go-drawer__scrim, .go-drawer__panel { transition: none; }
}
@media (max-width: 768px) {
  .go-header__actions { display: none; }
  .go-nav-toggle { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .go-header__keyline, .go-header__bar, .go-header__inner, .go-header__logo { transition: none; }
}

/* =====================================================================
   MAIN + content chassis
   ===================================================================== */
.go-main { min-height: 50vh; }
.go-content {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--space-8) var(--margin-desktop);
}
@media (max-width: 900px) { .go-content { padding: var(--space-6) var(--margin-tablet); } }
@media (max-width: 600px) { .go-content { padding: var(--space-4) var(--margin-mobile); } }

.go-entry__title { font-size: var(--fs-h1); color: var(--go-blue); }
.go-empty { text-align: center; padding: var(--space-12) 0; }
.go-empty__title { font-size: var(--fs-h2); color: var(--go-blue); }
.go-empty__note { color: var(--neutral-text-mid); font-size: var(--fs-body); }

/* =====================================================================
   ESTATE FOOTER — canon InfoFooter: warm upper (logo, mission, social
   circles, two yellow-tick link columns) over the GO-blue lower bar
   (.info-network copyright, Canada link, legal links).
   ===================================================================== */
.go-footer { font-family: var(--font-sans); margin-top: var(--space-12); }

.go-footer__upper {
  background: var(--warm-bg);
  border-top: 1px solid var(--warm-border);
}
.go-footer__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 52px 40px 48px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 900px) { .go-footer__inner { grid-template-columns: 1fr 1fr; padding: 48px var(--margin-tablet) 40px; } }
@media (max-width: 600px) { .go-footer__inner { grid-template-columns: 1fr; padding: 40px var(--margin-mobile) 36px; } }

.go-footer__logo { height: 38px; width: auto; margin-bottom: 14px; }
.go-footer__mission {
  font-size: 14px;
  color: var(--neutral-text-mid);
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 300px;
}
.go-footer__social { display: flex; gap: 10px; }
.go-footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--go-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.go-footer__social a .ph { color: var(--go-blue); font-size: 17px; }
.go-footer__social a:focus-visible { outline: 2px solid var(--go-blue); outline-offset: 2px; }

.go-footer__col-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.go-footer__col-head .go-rule {
  width: 20px;
  height: 3px;
  background: var(--hi-yellow);
  border-radius: 2px;
}
.go-footer__col-head .go-label { color: var(--go-blue); }
.go-footer__col-links { display: flex; flex-direction: column; gap: 10px; }
.go-footer__col-links a {
  font-size: 14px;
  color: var(--neutral-text);
  text-decoration: none;
}
.go-footer__col-links a:hover { color: var(--go-blue); }
.go-footer__col-links a:focus-visible { outline: 2px solid var(--go-blue); outline-offset: 2px; }

.go-footer__lower { background: var(--go-blue); }
.go-footer__lower-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 14px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 900px) { .go-footer__lower-inner { padding: 14px var(--margin-tablet); } }
@media (max-width: 600px) { .go-footer__lower-inner { padding: 14px var(--margin-mobile); } }

.go-footer__copyright { font-size: 12.5px; color: rgba(255,255,255,.75); }
.go-footer__legal { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.go-footer__legal a {
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
  text-decoration: none;
}
.go-footer__legal a.is-canada { font-weight: 700; color: #fff; }
.go-footer__legal a:hover { text-decoration: underline; }
.go-footer__legal a:focus-visible { outline: 2px solid var(--hi-yellow); outline-offset: 2px; }

/* =====================================================================
   HUB TEMPLATES — canon GoFireHub (ui_kits/info-network InfoHubs.jsx,
   phase1-hub{,-2grants,-3grants}.html) + the canon shell (Components.jsx
   InfoHero / GrantCard). Desktop values are the canon's; responsive
   behavior follows the sibling realization conventions (the canon mocks
   are 1200px-fixed).

   Color notes:
   - Canon paints the grant-data surfaces (spotlight accents, live-feed
     heading/rows) in the Communities palette; the feed's rows and CTAs
     route INTO Communities. Declared reading of the green rule — flagged
     in the hub-templates PR for review.
   - Coral as TEXT is always --hi-coral-d20 (WCAG fix); raw --hi-coral
     appears only decoratively (urgency dot, Skills card border).
   - The hub urgency green #1F8A5B is a canon literal (no token exists);
     it colors decorative dots only, never text.
   ===================================================================== */

/* Shared: eyebrow rule tick + urgency dot. */
.go-rule {
  width: 28px;
  height: 3px;
  background: var(--hi-yellow);
  border-radius: 2px;
}
.go-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
  background: var(--neutral-text-mid);
}
.go-dot.is-red     { background: var(--hi-coral); }   /* <30 days (decorative) */
.go-dot.is-amber   { background: var(--hi-yellow); }  /* 30-60 days */
.go-dot.is-green   { background: #1F8A5B; }           /* >60 days (canon literal) */
.go-dot.is-neutral { background: var(--neutral-text-mid); }

/* ---------------------------------------------------------------------
   Section 1 — hub hero (InfoHero anatomy on the GoFireHub warm field)
   --------------------------------------------------------------------- */
.go-hub-hero {
  background: var(--warm-bg);
  color: var(--neutral-text);
  border-bottom: 1px solid var(--warm-border);
  overflow: hidden;
}
.go-hub-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 76px 40px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.go-hub-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.go-hub-hero__eyebrow .go-label {
  color: var(--go-blue);
  letter-spacing: .16em;
}
.go-hub-hero__title {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 900;
  line-height: 1.06;
  margin: 0 0 18px;
  color: var(--go-blue);
}
.go-hub-hero__title-em {
  font-style: italic;
  color: var(--hi-coral-d20); /* canon raw coral fails AA as text */
}
.go-hub-hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--neutral-text);
  margin: 0;
  max-width: 520px;
}
.go-hub-hero__media { position: relative; }
.go-hub-hero__frame {
  position: relative;
  height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.go-hub-hero__frame .go-media-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.go-hub-hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* rgba(36,41,60) is the canon veil ink, verbatim (InfoHubs.jsx hero
     gradient) — no alpha ramp token exists for it. */
  background: linear-gradient(180deg, rgba(36, 41, 60, 0) 50%, rgba(36, 41, 60, .5));
}
.go-hub-hero__stat {
  position: absolute;
  left: -24px;
  bottom: 34px;
  background: var(--go-blue);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  box-shadow: var(--shadow-lg);
  max-width: 215px;
}
.go-hub-hero__stat-figure {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: var(--hi-yellow); /* 5.45:1 on go-blue, large text */
}
.go-hub-hero__stat-caption {
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
  line-height: 1.35;
}
@media (max-width: 980px) {
  .go-hub-hero__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 56px var(--margin-tablet);
  }
  .go-hub-hero__title { font-size: 38px; }
  .go-hub-hero__frame { height: 300px; }
  .go-hub-hero__stat { left: 16px; }
}
@media (max-width: 600px) {
  .go-hub-hero__inner { padding: 44px var(--margin-mobile); }
  .go-hub-hero__title { font-size: 32px; }
  .go-hub-hero__frame { height: 220px; }
}

/* ---------------------------------------------------------------------
   Section 2 — Grant Spotlights (SpotlightTile)
   --------------------------------------------------------------------- */
.go-spotlights { background: #fff; }
.go-spotlights__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 76px 40px;
}
.go-spotlights__title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 900;
  color: var(--go-blue);
  margin: 0 0 6px;
}
.go-spotlights__sub {
  font-size: 16.5px;
  color: var(--neutral-text-mid);
  margin: 0 0 32px;
}
.go-spotlights__grid { display: grid; gap: 24px; }
/* Count variants (canon phase1-hub 2/3/4-grant mocks): <=3 side by side,
   4 as a 2x2. */
.go-spotlights__grid--1 { grid-template-columns: 1fr; }
.go-spotlights__grid--2 { grid-template-columns: repeat(2, 1fr); }
.go-spotlights__grid--3 { grid-template-columns: repeat(3, 1fr); }
.go-spotlights__grid--4 { grid-template-columns: 1fr 1fr; }

.go-spotlight {
  border: 1px solid var(--neutral-border);
  border-left: 4px solid var(--co-green);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
}
.go-spotlight__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.go-spotlight__funder {
  color: var(--co-green-mid-d20); /* #527666, ~5:1 on white */
  font-size: 11px;
}
.go-spotlight__days {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutral-text-mid);
  white-space: nowrap;
}
.go-spotlight__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--neutral-text);
  line-height: 1.2;
  margin: 0 0 12px;
}
.go-spotlight__excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--neutral-text-mid);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.go-spotlight__more { margin: 4px 0 0; }
.go-spotlight__more summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--hi-coral-d20);
}
.go-spotlight__more summary::-webkit-details-marker { display: none; }
.go-spotlight__more summary:focus-visible {
  outline: 2px solid var(--go-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.go-spotlight__more-open,
.go-spotlight__more-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.go-spotlight__more[open] .go-spotlight__more-open { display: none; }
.go-spotlight__more:not([open]) .go-spotlight__more-close { display: none; }
.go-spotlight__gloss {
  font-size: 15px;
  line-height: 1.6;
  color: var(--neutral-text);
  margin: 2px 0 8px;
}
.go-spotlight__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-border);
}
.go-spotlight__fact-key {
  color: var(--neutral-text-mid);
  font-size: 10px;
  margin-bottom: 3px;
  min-height: 2.4em;
  line-height: 1.2;
}
.go-spotlight__fact-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-text);
  margin: 0;
}
@media (max-width: 980px) {
  .go-spotlights__inner { padding: 56px var(--margin-tablet); }
  .go-spotlights__grid--2,
  .go-spotlights__grid--3,
  .go-spotlights__grid--4 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .go-spotlights__inner { padding: 44px var(--margin-mobile); }
  .go-spotlight { padding: 22px 20px; }
  .go-spotlight__facts { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   Section 3 — Live Feed
   --------------------------------------------------------------------- */
.go-live-feed { background: var(--neutral-light); }
.go-live-feed__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 40px;
}
.go-live-feed__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  color: var(--co-green); /* #2E443A — 9.7:1 on --neutral-light */
  margin: 0 0 6px;
}
.go-live-feed__status {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}
.go-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--hi-coral-d20); /* 4.70:1 with white */
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.go-live-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: goLivePulse 1.6s var(--ease-out) infinite;
}
@keyframes goLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .go-live-pill__dot { animation: none; }
}
.go-live-feed__synced {
  font-size: 13px;
  color: var(--neutral-text-mid);
}
.go-live-feed__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.go-feed-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--neutral-border);
  border-left: 4px solid var(--co-green-mid);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  text-decoration: none;
}
.go-feed-row:focus-visible {
  outline: 2px solid var(--go-blue);
  outline-offset: 2px;
}
/* Row-level affordance (visual-QA 2026-07-15, defect 4): a warm tint on
   top of the .go-card lift/ring, so a hovered row is unmistakably a link.
   Focus parity included — never hover-only. */
.go-feed-row:hover,
.go-feed-row:focus-visible { background: var(--warm-bg); }
.go-feed-row__days {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-text-mid);
  min-width: 82px;
  flex: 0 0 auto;
}
.go-feed-row__name {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--co-green-mid-d20); /* #527666, ~5:1 on white */
}
.go-feed-row__side {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  max-width: 45%;
}
.go-feed-row__meta {
  font-size: 13px;
  color: var(--neutral-text-mid);
  text-align: right;
}
.go-feed-row__go {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--co-panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.go-feed-row__go .ph {
  font-size: 15px;
  color: var(--co-green);
}
.go-live-feed__cta {
  font-size: 14px;
  color: var(--neutral-text-mid);
  margin: 16px 0 0;
}
.go-live-feed__cta a {
  color: var(--co-green);
  font-weight: 700;
}
.go-live-feed__note {
  font-size: 14px;
  color: var(--neutral-text-mid);
  margin: 16px 0 0;
  font-style: italic;
}
.go-live-feed__empty {
  background: #fff;
  border: 1px dashed var(--neutral-border);
  border-radius: var(--radius-md);
  padding: 36px 24px;
  text-align: center;
}
.go-live-feed__empty-note {
  font-size: 15px;
  color: var(--neutral-text-mid);
  margin: 0;
}
@media (max-width: 980px) {
  .go-live-feed__inner { padding: 56px var(--margin-tablet); }
}
@media (max-width: 720px) {
  .go-feed-row { flex-wrap: wrap; }
  .go-feed-row__name { flex-basis: 100%; order: -1; }
  .go-feed-row__side { max-width: 100%; margin-left: auto; }
  .go-feed-row__meta { text-align: left; }
}
@media (max-width: 600px) {
  .go-live-feed__inner { padding: 44px var(--margin-mobile); }
}

/* ---------------------------------------------------------------------
   Communities house ad — wide band (InfoCommunitiesAd wide)
   --------------------------------------------------------------------- */
.go-hub-ad-band { background: #fff; }
.go-hub-ad-band__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 40px 0;
}
.go-hub-ad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--co-green); /* Communities-tied: allowed */
  color: #fff;
  padding: 28px 32px;
  text-decoration: none;
}
.go-hub-ad:focus-visible {
  outline: 2px solid var(--go-blue);
  outline-offset: 2px;
}
.go-hub-ad__lead {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  min-width: 0;
}
.go-hub-ad__logo {
  height: 40px;
  width: auto;
  flex: 0 0 auto;
}
.go-hub-ad__copy { min-width: 0; }
.go-hub-ad__headline {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 4px;
}
.go-hub-ad__body {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
  max-width: 560px;
}
.go-hub-ad__cta {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hi-yellow); /* ~6:1 on co-green */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .go-hub-ad-band__inner { padding: 44px var(--margin-tablet) 0; }
}
@media (max-width: 600px) {
  .go-hub-ad-band__inner { padding: 36px var(--margin-mobile) 0; }
  .go-hub-ad { padding: 24px 20px; }
}

/* ---------------------------------------------------------------------
   Section 4 — Expert Content (ExpertCard + the bordered-GrantCard
   treatment: type badge, human-powered overlay, webcast play glyph)
   --------------------------------------------------------------------- */
.go-hub-expert { background: #fff; }
.go-hub-expert__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 76px 40px;
}
.go-hub-expert__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: var(--go-blue);
  margin: 0 0 28px;
}
.go-hub-expert__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.go-expert-card {
  border: 1px solid var(--neutral-border);
  border-left: 4px solid var(--go-blue);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.go-expert-card:focus-visible {
  outline: 2px solid var(--go-blue);
  outline-offset: 2px;
}
/* Variant veils (canon INFO_TYPE). Grantseeking Skills swaps the canon
   green for coral — the go-marketing inc/card.php exception: green is
   Communities-only, and Skills is not Communities. Borders are
   decorative (no AA floor). */
.go-expert-card--funded,
.go-expert-card--grantscast          { border-left-color: var(--go-blue); }
.go-expert-card--grants-intelligence { border-left-color: #A673BB; } /* canon literal */
.go-expert-card--grantseeking-skills { border-left-color: var(--hi-coral); }
.go-expert-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.go-expert-card__media .go-media-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.go-expert-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 6px rgba(36, 41, 60, .4); /* canon veil ink (see hero veil note) */
}
.go-expert-card__type {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1.5px #fff;
  background: var(--hi-yellow);   /* funded/grantscast default */
  color: var(--neutral-text);     /* canon badge text #1A1D2E == the token */
}
.go-expert-card--grants-intelligence .go-expert-card__type {
  background: #855C96;            /* canon literal, 5.2:1 with white */
  color: #fff;
}
.go-expert-card--grantseeking-skills .go-expert-card__type {
  background: var(--hi-coral-d20); /* 4.70:1 with white */
  color: #fff;
}
.go-expert-card__hp {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 48px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}
.go-expert-card__body {
  display: flex;
  flex-direction: column;
  padding: 18px;
  flex: 1;
}
.go-expert-card__name {
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--neutral-text);
  line-height: 1.32;
  margin: 0 0 8px;
}
.go-expert-card__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--neutral-text-mid);
  margin: 0 0 8px;
}
.go-expert-card__meta {
  font-size: 12px;
  color: var(--neutral-text-mid);
  margin-top: auto;
}
@media (max-width: 980px) {
  .go-hub-expert__inner { padding: 56px var(--margin-tablet); }
  .go-hub-expert__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .go-hub-expert__inner { padding: 44px var(--margin-mobile); }
}

/* ---------------------------------------------------------------------
   Section 5a — specialist band
   --------------------------------------------------------------------- */
.go-hub-specialist {
  background: var(--go-blue);
  color: #fff;
}
.go-hub-specialist__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}
.go-hub-specialist__copy { max-width: 620px; }
.go-hub-specialist__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  margin: 0 0 10px;
}
.go-hub-specialist__body {
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
  margin: 0;
}
@media (max-width: 980px) {
  .go-hub-specialist__inner { padding: 48px var(--margin-tablet); }
}
@media (max-width: 600px) {
  .go-hub-specialist__inner { padding: 40px var(--margin-mobile); }
}

/* ---------------------------------------------------------------------
   Section 5b — Integration (InfoIntegration): Receive + Work cards
   --------------------------------------------------------------------- */
.go-hub-integration {
  background: var(--warm-bg);
  border-top: 1px solid var(--warm-border);
}
.go-hub-integration__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 76px 40px;
}
.go-hub-integration__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: var(--go-blue);
  text-align: center;
  margin: 0 0 10px;
}
.go-hub-integration__sub {
  font-size: 16.5px;
  color: var(--neutral-text-mid);
  text-align: center;
  margin: 0 auto 36px;
  max-width: 560px;
  line-height: 1.6;
}
.go-hub-integration__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.go-int-card {
  background: #fff;
  border: 1px solid var(--warm-border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}
.go-int-card--receive { border-top: 5px solid var(--hi-yellow); }
.go-int-card--work    { border-top: 5px solid var(--co-green); } /* Communities-tied */
.go-int-card__kicker { margin-bottom: 10px; }
.go-int-card--receive .go-int-card__kicker { color: var(--hi-yellow-d50); }
.go-int-card--work    .go-int-card__kicker { color: var(--co-green); }
.go-int-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--neutral-text);
  margin: 0 0 8px;
}
.go-int-card__body {
  font-size: 14.5px;
  color: var(--neutral-text-mid);
  line-height: 1.55;
  margin: 0 0 18px;
}
.go-int-card__form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.go-int-card__email {
  flex: 1;
  min-width: 170px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  padding: 12px 14px;
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-sm);
}
/* :disabled look lives in the shared gated-form honesty recipe (end of file). */
.go-int-card__note {
  font-size: 13px;
  color: var(--neutral-text-mid);
  margin: 10px 0 0;
}
/* Communities CTA — green is the Communities button color (tied element). */
.go-btn-communities {
  background: var(--co-green);
  color: #fff;
  font-size: var(--fs-body);
  padding: 13px 24px;
}
.go-btn-communities:hover { background: var(--co-green-mid-d20); }
.go-hub-integration__cross {
  text-align: center;
  margin: 24px 0 0;
}
.go-hub-integration__cross a {
  font-size: 15px;
  font-weight: 700;
  color: var(--go-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.go-hub-integration__cross a:hover { text-decoration: underline; }
.go-hub-integration__cross a:focus-visible {
  outline: 2px solid var(--go-blue);
  outline-offset: 2px;
}
@media (max-width: 980px) {
  .go-hub-integration__inner { padding: 56px var(--margin-tablet); }
  .go-hub-integration__cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .go-hub-integration__inner { padding: 44px var(--margin-mobile); }
  .go-int-card { padding: 24px 20px; }
}

/* =====================================================================
   Gated-form honesty (visual-QA 2026-07-15, defect 3).
   A control that LOOKS functional but silently won't act is a false
   promise to the eye: while the subscribe endpoint filter is unarmed,
   the disabled controls must read INERT at a glance, and the gating
   line must read as a NOTICE (not a link, not fine print) placed above
   the controls. Copy is untouched — styling + placement only. Same
   recipe as go-marketing's gated forms (one gating language, two
   themes). Placed at end-of-file so it wins order ties against the
   per-mount note classes it composes with.
   ===================================================================== */
form[data-form] input:disabled,
form[data-form] select:disabled,
form[data-form] textarea:disabled {
  background: var(--warm-bg);
  border-style: dashed;
  color: var(--neutral-text-mid);
  cursor: not-allowed;
}
form[data-form] input:disabled::placeholder {
  color: var(--neutral-text-mid);
  opacity: .7;
}
form[data-form] button:disabled {
  background: var(--neutral-border);
  color: var(--neutral-text-mid);
  cursor: not-allowed;
  box-shadow: none;
}
form[data-form] button:disabled:hover { background: var(--neutral-border); }
.go-gate-note {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-text);
  background: var(--hi-yellow-a20);
  border-left: 4px solid var(--hi-yellow);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 0 0 14px;
}