/* Wakaga GrantSignal — the shared shell for every page of the grants product.
 *
 * Source of truth: Tucker's six mockups (deploy/wakaga/*.png), scoped in
 * deploy/wakaga/GRANTSIGNAL_VISUAL_SPEC.md — every colour below was SAMPLED
 * from the mockups, not chosen. Pure white ground, cool near-black ink,
 * slate body text, brown-gold accents, light footer. This face is DESIGNED
 * LIGHT — the mockups commit to it, and these pages do too.
 */
@import url('/app/gs/fonts/fonts.css');
@import url('/app/gs/fonts/fonts2.css');
@import url('/app/gs/fonts/fonts3.css');

:root {
  --gs-ink: #10141f;          /* navy-black — the mockups' headline colour */
  --gs-body: #42464f;
  --gs-muted: #6d7380;
  --gs-gold: #8a621a;          /* text, links, outline icons */
  --gs-gold-bright: #9a742a;   /* button fill — saturated like the mockups */
  --gs-gold-deep: #8a6520;     /* button hover, ribbon */
  --gs-gold-soft: #f3eee1;     /* icon circles */
  --gs-cream: #f7f6f4;         /* bands and the footer */
  --gs-cream2: #fbf8f3;        /* popular plan card, date blocks */
  --gs-page: #ffffff;
  --gs-panel: #ffffff;
  --gs-hair: #e9e7e2;
  --gs-line: #d9d5cc;
  --gs-green: #104b13; --gs-green-pill: #d7f0dd; --gs-green-bg: #ebf7ee; --gs-green-mid: #2e7d32;
  --gs-red: #b41319;  --gs-red-pill: #fcd5d7;  --gs-red-bg: #fceaec;
  --gs-amber: #a7650e; --gs-amber-pill: #fdf2db; --gs-amber-bg: #fdf6e3;
  --gs-blue: #1d4b7a; --gs-blue-bg: #e9eff7;
  /* The mockups set every heading, price and the wordmark in the Times
     family (lining figures rule out Georgia); Tinos is its faithful,
     hostable form. The body sans is the Inter/SF family, not Source Sans. */
  --gs-serif: 'Tinos', 'Times New Roman', Georgia, serif;
  --gs-sans: 'Nunito', 'Lato', 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --gs-shadow: 0 1px 2px rgba(15,18,23,.04), 0 10px 28px rgba(15,18,23,.06);
}

* { box-sizing: border-box; }
body.gs { margin: 0; background: var(--gs-page); color: var(--gs-body);
  font: 15.5px/1.5 var(--gs-sans); -webkit-font-smoothing: antialiased; }
.gs h1, .gs h2, .gs h3, .gs .serif { font-family: var(--gs-serif); color: var(--gs-ink); }
.gs a { color: var(--gs-gold); }
.gsWrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }

/* ---- brand lockup ---------------------------------------------------------- */
.gsBrand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.gsBrand img { width: 38px; height: 30px; }
.gsBrand .gsWords { line-height: 1.15; }
.gsBrand .gsName { display: block; font-family: var(--gs-serif); font-weight: 700; font-size: 19px; color: var(--gs-ink); }
.gsBrand .gsName b { color: var(--gs-gold); font-weight: 700; }
.gsBrand .gsTagline { display: block; font-size: 10px; color: var(--gs-muted); letter-spacing: .01em; }

/* ---- top navigation (marketing and app alike) ------------------------------ */
.gsTop { background: var(--gs-panel); border-bottom: 1px solid var(--gs-hair);
  position: sticky; top: 0; z-index: 50; }
/* The mockups' bar is compact: a small menu in a small size, white. */
.gsTop .gsWrap { display: flex; align-items: center; gap: 22px; min-height: 52px; }
.gsNavLinks { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.gsNavLinks a { color: var(--gs-ink); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.gsNavLinks a:hover, .gsNavLinks a.on { color: var(--gs-gold); }
.gsNavSep { width: 1px; height: 26px; background: var(--gs-hair); }
.gsUser { display: flex; align-items: center; gap: 10px; color: var(--gs-ink); position: relative; }
.gsAvatar { width: 31px; height: 31px; border-radius: 50%; background: var(--gs-gold-bright);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; }
.gsUser .gsWho { line-height: 1.2; font-size: 12.5px; }
.gsUser .gsWho b { display: block; font-size: 13.5px; }
.gsUser .gsWho span { color: var(--gs-muted); font-size: 11.5px; }
.gsMenu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--gs-panel);
  border: 1px solid var(--gs-hair); border-radius: 10px; box-shadow: var(--gs-shadow);
  min-width: 190px; padding: 6px; }
.gsMenu a { display: block; padding: 9px 12px; border-radius: 7px; color: var(--gs-ink);
  text-decoration: none; font-weight: 600; font-size: 15px; }
.gsMenu a:hover { background: var(--gs-cream); }

/* ---- buttons --------------------------------------------------------------- */
.gsBtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--gs-gold-bright); color: #fff; border: 1px solid var(--gs-gold-bright);
  border-radius: 8px; padding: 10px 19px; font: 600 15px var(--gs-sans);
  text-decoration: none; cursor: pointer; }
.gsBtn:hover { background: var(--gs-gold-deep); border-color: var(--gs-gold-deep); }
.gsBtn::after { content: '→'; font-size: 17px; }
.gsBtn.noArrow::after { content: none; }
.gsBtnGhost { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--gs-panel); color: var(--gs-ink); border: 1.5px solid var(--gs-line);
  border-radius: 8px; padding: 10px 19px; font: 600 15px var(--gs-sans);
  text-decoration: none; cursor: pointer; }
.gsBtnGhost:hover { border-color: var(--gs-gold); color: var(--gs-gold); }
.gsBtn.sm, .gsBtnGhost.sm { padding: 9px 16px; font-size: 15px; }
/* .gs a (0-1-1) outguns .gsBtn (0-1-0) — restate the button colours. */
.gs a.gsBtn, .gs button.gsBtn { color: #fff; }
.gs a.gsBtnGhost, .gs button.gsBtnGhost { color: var(--gs-ink); }
.gs a.gsBtnGhost:hover, .gs button.gsBtnGhost:hover { color: var(--gs-gold); }
.gsMore { font-weight: 600; text-decoration: none; white-space: nowrap; }
.gsMore::after { content: ' →'; }

/* ---- hero photography ------------------------------------------------------ */
/* The golden-hour capitol photo, fading into the page on its left edge and
   warmed with a gold wash so the daylight PD photograph reads like the
   mockups' dusk shot. The motto overlays its sky. */
.gsHeroArt { position: relative; min-height: 300px; }
.gsPhoto { position: absolute; inset: 0; overflow: hidden; }
.gsPhoto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%);
  mask-image: linear-gradient(90deg, transparent, #000 34%); }
.gsPhoto::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(250,240,215,.28) 45%, rgba(214,160,66,.18)); }
.gsHeroArt .gsMotto { position: absolute; top: 24px; right: 28px; z-index: 2; }

.gsHero { background: linear-gradient(180deg, #fbfaf7, var(--gs-page)); border-bottom: 1px solid var(--gs-hair); }
.gsHero .gsWrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px;
  align-items: center; padding-top: 40px; padding-bottom: 40px; }
.gsHero h1 { font-size: 51px; line-height: 1.06; margin: 0 0 20px; font-weight: 700; }
.gsHero .gsSub { font-size: 17px; max-width: 560px; margin: 0 0 26px; }
.gsCtaRow { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.gsPerks { display: flex; gap: 34px; flex-wrap: wrap; }
.gsPerk { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--gs-body); }
.gsPerkIcon { width: 44px; height: 44px; border-radius: 50%; background: var(--gs-panel);
  border: 1.5px solid var(--gs-line); display: inline-flex; align-items: center;
  justify-content: center; color: var(--gs-gold); font-size: 19px; flex: 0 0 auto; }
/* Motto: a SHORT gold bar above spaced serif caps in ink, italic lines below. */
.gsMotto { text-align: left; }
.gsMotto::before { content: ''; display: block; width: 56px; height: 3px;
  background: var(--gs-gold-bright); margin-bottom: 14px; }
.gsMotto .caps { font-family: var(--gs-serif); letter-spacing: .3em; font-size: 15px;
  color: var(--gs-ink); font-weight: 600; line-height: 1.75; text-transform: uppercase; }
.gsMotto .lines { font-family: var(--gs-serif); font-style: italic; color: var(--gs-body);
  margin-top: 12px; line-height: 1.7; font-size: 16px; }

/* smaller page hero (authed + inner pages) */
.gsPageHero { background: linear-gradient(180deg, #fbfaf7, #fdfcfa); border-bottom: 1px solid var(--gs-hair); }
.gsPageHero .gsWrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px;
  align-items: center; padding-top: 26px; padding-bottom: 26px; }
.gsPageHero h1 { font-size: 37px; margin: 0 0 7px; }
.gsPageHero .gsKicker { font-family: var(--gs-serif); letter-spacing: .28em; font-size: 13px;
  text-transform: uppercase; color: var(--gs-gold); margin-bottom: 10px; font-weight: 600; }
.gsPageHero .gsLede { font-family: var(--gs-serif); font-size: 18px; color: var(--gs-body); margin: 0 0 10px; }

/* ---- stat band (marketing) + open stat row (dashboard) --------------------- */
.gsStatBand { background: var(--gs-cream); border-bottom: 1px solid var(--gs-hair); }
.gsStatBand .gsWrap { display: flex; align-items: center; gap: 38px; padding-top: 19px;
  padding-bottom: 19px; flex-wrap: wrap; }
.gsStat { display: flex; align-items: center; gap: 15px; }
.gsStat + .gsStat { border-left: 1px solid var(--gs-line); padding-left: 44px; }
.gsStatIcon { width: 52px; height: 52px; border-radius: 50%; background: var(--gs-gold-soft);
  color: var(--gs-gold); display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; flex: 0 0 auto; }
.gsStat .n { font-family: var(--gs-serif); font-weight: 700; font-size: 30px; color: var(--gs-ink); line-height: 1.1; }
.gsStat .l { font-weight: 600; color: var(--gs-ink); font-size: 15.5px; }
.gsStat .s { color: var(--gs-muted); font-size: 13px; }
.gsStatAccent { margin-left: auto; text-align: right; font-family: var(--gs-serif);
  font-style: italic; color: var(--gs-ink); font-size: 17px; line-height: 1.5; }
.gsStatAccent::after { content: ''; display: block; width: 44px; height: 2px;
  background: var(--gs-gold-bright); margin: 10px 0 0 auto; }

/* The dashboard's stat row is OPEN — no card, hairline separators only. */
.gsTiles { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.gsTile { display: flex; gap: 15px; align-items: center; padding: 14px 30px 14px 0; }
.gsTile + .gsTile { border-left: 1px solid var(--gs-hair); padding-left: 30px; }
.gsTile .ico { width: 60px; height: 60px; border-radius: 50%; background: var(--gs-gold-soft);
  color: var(--gs-gold); display: inline-flex; align-items: center; justify-content: center;
  font-size: 25px; flex: 0 0 auto; }
.gsTile .n { font-family: var(--gs-serif); font-weight: 700; font-size: 32px; color: var(--gs-ink); line-height: 1; }
.gsTile .l { font-weight: 700; color: var(--gs-ink); font-size: 15.5px; }
.gsTile .s { color: var(--gs-muted); font-size: 13px; }

/* ---- sections & cards ------------------------------------------------------ */
.gsSection { padding: 34px 0 8px; }
.gsSection > .gsWrap > .gsHead, .gsHead { display: flex; align-items: baseline; gap: 18px;
  justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; }
.gsHead h2 { font-size: 26px; margin: 0; font-weight: 700; }
.gsHead .note { font-family: var(--gs-serif); font-style: italic; color: var(--gs-muted); }
.gsGrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gsGrid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gsCard { background: var(--gs-panel); border: 1px solid var(--gs-hair); border-radius: 10px;
  padding: 17px; box-shadow: var(--gs-shadow); }
.gsCard h3 { margin: 7px 0 5px; font-size: 18.5px; }
/* Photo thumbs bleed to the card's top corners; tag sits BELOW the photo. */
.gsThumb { height: 130px; border-radius: 9px 9px 0 0; margin: -20px -20px 14px; overflow: hidden;
  background: linear-gradient(135deg, #efe4c8, #d9c493 55%, #b9995a); }
.gsThumb img { width: 100%; height: 100%; object-fit: cover; }
.gsTag { display: inline-flex; align-items: center; gap: 5px; background: var(--gs-gold-soft);
  color: var(--gs-gold); font: 700 11.5px var(--gs-sans); letter-spacing: .08em;
  padding: 4px 10px; border-radius: 5px; text-transform: uppercase; }
.gsTag::before { content: '✦'; font-size: 10px; }
.gsTag.plain::before { content: none; }
.gsTag.federal { background: #d1e6d1; color: #152f2b; }
.gsTag.federal::before { content: none; }
.gsMoney { color: var(--gs-gold); font-weight: 700; }
.gsFeatured { color: var(--gs-gold); font-weight: 700; font-size: 13.5px; }
.gsFeatured::before { content: '★ '; }

/* module cards (dashboard) */
.gsModules { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.gsModule { background: var(--gs-panel); border: 1px solid var(--gs-hair); border-radius: 10px;
  box-shadow: var(--gs-shadow); text-align: center; padding: 26px 16px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gsModule .ico { width: 90px; height: 90px; border-radius: 50%; background: var(--gs-gold-soft);
  color: var(--gs-gold); display: flex; align-items: center; justify-content: center;
  font-size: 42px; margin-bottom: 14px; }
.gsModule h3 { margin: 0; font-size: 20.5px; }
.gsModule p { color: var(--gs-muted); font-size: 14.5px; margin: 4px 0 18px; flex: 1; }

/* steps (how it works) — gold arrows BETWEEN the steps */
.gsSteps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: start; }
.gsStepArrow { color: var(--gs-gold); font-size: 26px; align-self: center; padding: 0 4px; }
.gsStep { text-align: center; padding: 8px; }
.gsStep .ico { width: 74px; height: 74px; border-radius: 50%; background: var(--gs-gold-soft);
  color: var(--gs-gold); display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 12px; }
.gsStep h3 { margin: 0 0 8px; font-size: 21px; }
.gsStep p { color: var(--gs-muted); font-size: 14.5px; margin: 0 auto; max-width: 240px; }

/* ---- lists: activity, deadlines ------------------------------------------- */
.gsRows { background: var(--gs-panel); border: 1px solid var(--gs-hair); border-radius: 10px;
  box-shadow: var(--gs-shadow); padding: 6px 18px; }
.gsRow { display: flex; align-items: center; gap: 12px; padding: 10px 2px;
  border-bottom: 1px solid var(--gs-hair); font-size: 15px; }
.gsRow:last-child { border-bottom: 0; }
.gsRow .when { margin-left: auto; color: var(--gs-muted); font-size: 13.5px; white-space: nowrap; }
.gsDate { width: 52px; flex: 0 0 auto; text-align: center; background: var(--gs-cream2);
  border: 1px solid var(--gs-hair); border-radius: 9px; padding: 6px 0; line-height: 1.15; }
.gsDate .m { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--gs-gold); text-transform: uppercase; }
.gsDate .d { font-family: var(--gs-serif); font-size: 20px; font-weight: 700; color: var(--gs-ink); }
.gsDays { margin-left: auto; background: #f4efe3; color: #84591f;
  border-radius: 99px; font-weight: 700; font-size: 13px; padding: 5px 12px; white-space: nowrap; }

/* ---- pricing --------------------------------------------------------------- */
.gsPlan { position: relative; background: var(--gs-panel); border: 1.5px solid var(--gs-hair);
  border-radius: 10px; padding: 20px; box-shadow: var(--gs-shadow);
  display: flex; flex-direction: column; }
.gsPlan.pop { border-color: var(--gs-gold-bright); background: var(--gs-cream2); }
.gsPop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gs-gold-deep); color: #fff; font: 700 12.5px var(--gs-sans);
  border-radius: 99px; padding: 4px 14px; white-space: nowrap; }
.gsPlan h3 { margin: 0 0 4px; font-size: 21px; }
.gsPlan .sub { color: var(--gs-muted); font-size: 14px; min-height: 38px; }
.gsPrice { font-family: var(--gs-serif); font-weight: 800; font-size: 35px; color: var(--gs-ink);
  margin: 10px 0 2px; }
.gsPrice small { font-family: var(--gs-sans); font-weight: 600; font-size: 15px; color: var(--gs-muted); }
.gsChecks { list-style: none; margin: 14px 0 20px; padding: 0; flex: 1; }
.gsChecks li { padding: 5px 0 5px 26px; position: relative; font-size: 14.8px; }
.gsChecks li::before { content: '✓'; position: absolute; left: 2px; color: var(--gs-gold);
  font-weight: 700; }
.gsAddon { display: flex; align-items: center; gap: 18px; background: var(--gs-panel);
  border: 1px solid var(--gs-hair); border-radius: 10px; box-shadow: var(--gs-shadow);
  padding: 20px 24px; }
.gsAddon .ico { width: 60px; height: 60px; border-radius: 12px; background: var(--gs-gold-soft);
  color: var(--gs-gold); display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; flex: 0 0 auto; }

/* ---- case page ------------------------------------------------------------- */
.gsCrumbs { font-size: 14px; color: var(--gs-muted); padding: 16px 0 4px; }
.gsCrumbs a { color: var(--gs-muted); text-decoration: none; }
.gsCrumbs a:hover { color: var(--gs-gold); }
.gsCaseHead { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; padding: 8px 0 4px;
  align-items: start; }
.gsCaseHead h1 { font-size: 36px; margin: 6px 0 10px; line-height: 1.1; }
.gsCaseHead .meta { color: var(--gs-muted); font-size: 15px; }
.gsCaseHead .meta b { color: var(--gs-ink); }
.gsLive { display: inline-flex; align-items: center; gap: 7px; background: var(--gs-green-bg);
  color: var(--gs-green-mid); border-radius: 99px; font-weight: 700; font-size: 13.5px; padding: 6px 14px; }
.gsLive::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gs-green-mid); }
.gsFacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; text-align: center; }
.gsFact { padding: 8px 14px; }
.gsFact + .gsFact { border-left: 1px solid var(--gs-hair); }
.gsFact .ico { color: var(--gs-gold); font-size: 24px; }
.gsFact .v { font-family: var(--gs-serif); font-weight: 700; font-size: 21px; color: var(--gs-ink); }
.gsFact .l { color: var(--gs-muted); font-size: 13.5px; }
/* The countdown is GOLD in the mockups, not red. */
.gsFact .warn { color: var(--gs-gold); font-weight: 700; font-size: 13.5px; }

.gsTabs { display: flex; gap: 26px; border-bottom: 1px solid var(--gs-hair); margin-top: 14px; }
.gsTabs button { background: none; border: 0; padding: 12px 2px; font: 600 16px var(--gs-sans);
  color: var(--gs-muted); border-bottom: 3px solid transparent; cursor: pointer; }
.gsTabs button.on { color: var(--gs-gold); border-bottom-color: var(--gs-gold-bright); }

.gsCaseGrid { display: grid; grid-template-columns: 1fr 330px; gap: 28px; padding: 20px 0 48px; }

/* timeline */
.gsTl { position: relative; padding-left: 34px; }
.gsTl::before { content: ''; position: absolute; left: 10px; top: 14px; bottom: 14px;
  width: 2px; background: var(--gs-hair); }
.gsTlItem { position: relative; margin-bottom: 16px; }
.gsTlDot { position: absolute; left: -34px; top: 18px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--gs-panel); border: 2px solid var(--gs-line);
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.gsTlDot.green { background: var(--gs-green-mid); border-color: var(--gs-green-mid); }
.gsTlDot.red { background: #d23b3b; border-color: #d23b3b; }
.gsTlDot.new { background: var(--gs-gold-bright); border-color: var(--gs-gold-bright);
  box-shadow: 0 0 0 5px rgba(150,115,47,.22); }
.gsTlNew { position: absolute; left: -78px; top: 20px; font: 700 11px var(--gs-sans);
  letter-spacing: .1em; color: var(--gs-gold); }
.gsTlCard { background: var(--gs-panel); border: 1px solid var(--gs-hair); border-radius: 12px;
  box-shadow: var(--gs-shadow); padding: 13px 15px; }
.gsTlCard.amber { background: var(--gs-amber-bg); border-color: #ecd9ad; }
.gsTlCard.red { background: var(--gs-red-bg); border-color: #f3c2c5; }
.gsTlCard.green { background: var(--gs-green-bg); border-color: #bfe3c8; }
.gsTlCard.upcoming { opacity: .8; }
.gsTlTop { display: flex; align-items: flex-start; gap: 14px; }
/* Icon squares are GRADIENTS with white glyphs, per the mockups. */
.gsTlIcon { width: 52px; height: 52px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 23px;
  color: #fff; background: linear-gradient(135deg, #e6bd55, #b5852c); }
.gsTlIcon.green { background: linear-gradient(135deg, #8fd6a4, #3f9e5f); }
.gsTlIcon.red { background: linear-gradient(135deg, #ef8a86, #d23b3b); }
.gsTlIcon.gray { background: #eceef1; color: var(--gs-muted); }
.gsTlTitle { font-family: var(--gs-serif); font-weight: 700; font-size: 18px; color: var(--gs-ink); }
.gsTlWhen { color: var(--gs-muted); font-size: 13.5px; margin: 2px 0 6px; }
.gsTlBody { font-size: 15px; }
.gsTlChev { margin-left: 8px; color: var(--gs-muted); background: none; border: 0;
  font-size: 15px; cursor: pointer; padding: 4px; flex: 0 0 auto; }
/* Pills are pale tints with a coloured icon and coloured caps — NEVER solid. */
.gsPill { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  border-radius: 99px; font: 700 12px var(--gs-sans); letter-spacing: .06em;
  padding: 6px 13px; text-transform: uppercase; }
.gsPill i { font-style: normal; display: inline-flex; width: 15px; height: 15px;
  border-radius: 50%; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.gsPill.review { background: var(--gs-amber-pill); color: var(--gs-amber); }
.gsPill.review i { background: var(--gs-amber); }
.gsPill.action { background: var(--gs-red-pill); color: var(--gs-red); }
.gsPill.action i { background: var(--gs-red); }
.gsPill.done { background: var(--gs-green-pill); color: var(--gs-green); }
.gsPill.done i { background: var(--gs-green-mid); }
.gsPill.progress { background: var(--gs-blue-bg); color: var(--gs-blue); }
.gsPill.upcoming { background: #eceae3; color: var(--gs-muted); }
/* Comment sub-cards are cool gray with an attribution line. */
.gsQuote { background: #f2f3f5; border: 1px solid #e5e7ea; border-radius: 9px;
  padding: 12px 15px; margin-top: 10px; font-size: 14.5px; }
.gsQuote .by { color: var(--gs-muted); font-size: 13px; margin-top: 6px; }

/* right rail */
.gsPanel { background: var(--gs-panel); border: 1px solid var(--gs-hair); border-radius: 10px;
  box-shadow: var(--gs-shadow); padding: 17px; margin-bottom: 18px; }
.gsPanel h3 { margin: 0 0 12px; font-size: 19px; }
.gsActions { display: flex; flex-direction: column; gap: 10px; }
.gsActions .gsBtn, .gsActions .gsBtnGhost { justify-content: center; }
.gsLinks { list-style: none; margin: 0; padding: 0; }
.gsLinks li { border-bottom: 1px solid var(--gs-hair); }
.gsLinks li:last-child { border-bottom: 0; }
.gsLinks a { display: flex; align-items: center; gap: 11px; padding: 11px 2px;
  color: var(--gs-ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.gsLinks a:hover { color: var(--gs-gold); }
.gsTeam { list-style: none; margin: 0; padding: 0; }
.gsTeam li { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.gsTeam .who { line-height: 1.25; }
.gsTeam .who b { display: block; font-size: 15px; color: var(--gs-ink); }
.gsTeam .who span { color: var(--gs-muted); font-size: 13px; }
.gsRole { margin-left: auto; background: var(--gs-cream); border: 1px solid var(--gs-hair);
  color: var(--gs-body); border-radius: 99px; font: 600 12.5px var(--gs-sans); padding: 4px 12px; }

/* ---- find grants ----------------------------------------------------------- */
.gsUpsell { display: flex; align-items: center; gap: 14px 16px; flex-wrap: wrap;
  background: #f5f2e9; border: 1px solid var(--gs-hair); border-radius: 10px;
  padding: 16px 22px; margin: 22px 0; }
.gsUpsell .ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  background: var(--gs-gold-bright); color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 20px; }
.gsUpsell > div { flex: 1 1 240px; min-width: 0; }
.gsFindGrid { display: grid; grid-template-columns: 250px 1fr; gap: 28px; padding-bottom: 60px; }
.gsFilters { background: var(--gs-panel); border: 1px solid var(--gs-hair); border-radius: 10px;
  box-shadow: var(--gs-shadow); padding: 20px; align-self: start; position: sticky; top: 84px; }
.gsFilters h2 { font-size: 23px; margin: 0 0 12px; }
.gsFilters .grp { margin-bottom: 16px; }
.gsFilters .grp > b { display: block; font-size: 15px; color: var(--gs-ink); margin-bottom: 7px; }
.gsFilters input[type=text], .gsFilters input[type=search], .gsFilters input[type=date],
.gsFilters select {
  width: 100%; padding: 10px 11px; border: 1px solid var(--gs-line); border-radius: 8px;
  font: 15px var(--gs-sans); background: #fff; color: var(--gs-ink); }
.gsFilters label.opt { display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 14.8px; cursor: pointer; }
.gsFilters input[type=radio], .gsFilters input[type=checkbox] { accent-color: var(--gs-gold-bright);
  width: 16px; height: 16px; }
.gsResult { background: var(--gs-panel); border: 1px solid var(--gs-hair); border-radius: 10px;
  box-shadow: var(--gs-shadow); padding: 14px 18px; margin-bottom: 12px; }
.gsResult .row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.gsResult h3 { margin: 0; font-size: 19px; }
.gsResult .agency { color: var(--gs-muted); font-size: 14.5px; }
/* Meta columns: small muted LABEL ABOVE the bold value, gold outline icon left,
   hairline separators between the columns. */
.gsResMeta { display: flex; align-items: center; margin-left: auto; }
.gsResMeta .m { display: flex; align-items: center; gap: 10px; padding: 0 22px;
  font-size: 14px; color: var(--gs-muted); line-height: 1.3; }
.gsResMeta .m + .m { border-left: 1px solid var(--gs-hair); }
.gsResMeta .m .ico { color: var(--gs-gold); font-size: 20px; }
.gsResMeta .m .lab { display: block; font-size: 12.5px; color: var(--gs-muted); }
.gsResMeta .m b { display: block; color: var(--gs-ink); font-size: 15px; }
.gsResOpen { border-top: 1px solid var(--gs-hair); margin-top: 16px; padding-top: 16px; }
.gsResCols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px; margin: 14px 0 18px; }
.gsResCols h4 { font-family: var(--gs-serif); font-size: 17px; margin: 0 0 8px; color: var(--gs-ink); }
.gsKV { font-size: 14.5px; }
.gsKV div { display: flex; gap: 10px; padding: 3px 0; }
.gsKV .k { color: var(--gs-muted); min-width: 148px; }
.gsDots { list-style: none; padding: 0; margin: 0; font-size: 14.5px; }
.gsDots li { padding: 3px 0 3px 18px; position: relative; }
.gsDots li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--gs-gold-bright); }
.gsEligLink { color: var(--gs-gold); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; }
.gsEligLink::after { content: ' →'; }
.gsPager { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 18px 0; }
.gsPager button { min-width: 38px; height: 38px; border: 1px solid var(--gs-hair); background: var(--gs-panel);
  border-radius: 8px; font: 600 15px var(--gs-sans); color: var(--gs-ink); cursor: pointer; }
.gsPager button.on { background: var(--gs-gold-bright); border-color: var(--gs-gold-bright); color: #fff; }

/* ---- resource center ------------------------------------------------------- */
.gsTopics { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.gsTopic { background: var(--gs-panel); border: 1px solid var(--gs-hair); border-radius: 10px;
  padding: 20px 18px; box-shadow: var(--gs-shadow); text-decoration: none; display: block; }
.gsTopic .ico { width: 52px; height: 52px; border-radius: 50%; background: var(--gs-gold-soft);
  color: var(--gs-gold); display: inline-flex; align-items: center; justify-content: center;
  font-size: 23px; margin-bottom: 10px; }
.gsTopic h3 { margin: 0 0 6px; font-size: 18.5px; }
.gsTopic p { color: var(--gs-muted); font-size: 13.8px; margin: 0 0 8px; }
.gsTopic .arrow { color: var(--gs-gold); font-size: 18px; }
.gsFaq { border: 1px solid var(--gs-hair); border-radius: 10px; background: var(--gs-panel);
  box-shadow: var(--gs-shadow); padding: 4px 22px; }
.gsFaq details { border-bottom: 1px solid var(--gs-hair); }
.gsFaq details:last-child { border-bottom: 0; }
.gsFaq summary { cursor: pointer; list-style: none; display: flex; align-items: center;
  padding: 14px 0; font-weight: 600; font-size: 15.5px; color: var(--gs-ink); }
.gsFaq summary::-webkit-details-marker { display: none; }
.gsFaq summary::after { content: '+'; margin-left: auto; color: var(--gs-gold); font-size: 22px; }
.gsFaq details[open] summary::after { content: '–'; }
.gsFaq .a { padding: 0 0 16px; font-size: 15px; }
.gsCatTag { font: 700 11px var(--gs-sans); letter-spacing: .1em; color: var(--gs-gold);
  text-transform: uppercase; }

/* ---- footer — LIGHT, per the mockups --------------------------------------- */
.gsFoot { background: var(--gs-cream); border-top: 1px solid var(--gs-hair); margin-top: 54px;
  color: var(--gs-body); }
.gsFoot .gsWrap { display: flex; align-items: center; gap: 24px; padding-top: 18px;
  padding-bottom: 18px; flex-wrap: wrap; }
.gsFoot .motto { flex: 1; text-align: center; font-family: var(--gs-serif); font-style: italic;
  color: var(--gs-body); font-size: 15.5px; min-width: 260px; }
.gsFoot .links { display: flex; gap: 18px; font-size: 13.5px; }
.gsFoot .links a { color: var(--gs-muted); text-decoration: none; }
.gsFoot .links a:hover { color: var(--gs-gold); }

/* the shared app footer, restyled to match — light strip, hairline top */
body.gs .gbxFooter { display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap; margin-top: 54px; padding: 18px 28px;
  background: var(--gs-cream); border-top: 1px solid var(--gs-hair);
  color: var(--gs-muted); font-size: 13.5px; }
body.gs .gbxFooter a { color: var(--gs-muted); text-decoration: none; margin-right: 16px; }
body.gs .gbxFooter a:hover { color: var(--gs-gold); }
body.gs .gbxFooter .gbxOwner { color: var(--gs-muted); }
/* the impersonation banner, minimally styled without the main suite */
body.gs .impBanner { background: #6b21a8; color: #fff; padding: 10px 20px; display: flex;
  gap: 14px; align-items: center; justify-content: center; font-size: 15px; }
body.gs .impBanner button { background: #fff; color: #6b21a8; border: 0; border-radius: 7px;
  padding: 6px 12px; font-weight: 700; cursor: pointer; }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .gsHero .gsWrap, .gsPageHero .gsWrap, .gsCaseHead { grid-template-columns: 1fr; }
  .gsHeroArt { display: none; }
  .gsGrid3, .gsGrid4, .gsResCols { grid-template-columns: 1fr 1fr; }
  .gsSteps { grid-template-columns: 1fr 1fr; }
  .gsStepArrow { display: none; }
  .gsModules { grid-template-columns: repeat(2, 1fr); }
  .gsCaseGrid, .gsFindGrid { grid-template-columns: 1fr; }
  .gsFilters { position: static; }
  .gsHero h1 { font-size: 42px; }
  .gsResMeta { margin-left: 0; }
}
@media (max-width: 640px) {
  .gsGrid3, .gsGrid4, .gsSteps, .gsResCols, .gsModules { grid-template-columns: 1fr; }
  .gsNavLinks { gap: 14px; }
  .gsStat + .gsStat, .gsTile + .gsTile { border-left: 0; padding-left: 0; }
}

/* Over photography the motto needs the mockups' clear-sky luck manufactured:
   a soft white glow keeps the serif legible over dome and trees alike. */
.gsHeroArt .gsMotto .caps, .gsHeroArt .gsMotto .lines {
  text-shadow: 0 0 6px rgba(255,255,255,.95), 0 0 16px rgba(255,255,255,.8),
    0 0 28px rgba(255,255,255,.6);
}

/* ---- compatibility skin ----------------------------------------------------
   The deep tools (the drafting workspace, the guides, the staff console) run
   the shared product's own pages. body.gs is stamped by nav.js on every page
   of this product, and these rules make those pages wear the shell's voice —
   serif headings and the navy/gold palette come free from the .gs rules
   above; this covers the controls. */
body.gs .accentBtn, body.gs button.accent, body.gs .primary, body.gs .deepBtn,
body.gs .resumeBtn {
  background: var(--gs-gold-bright); border: 1px solid var(--gs-gold-bright);
  color: #fff; border-radius: 8px; }
body.gs .accentBtn:hover, body.gs button.accent:hover, body.gs .primary:hover,
body.gs .deepBtn:hover { background: var(--gs-gold-deep); border-color: var(--gs-gold-deep); }
body.gs .miniBtn, body.gs .btn { border-radius: 8px; }
body.gs input:not([type=checkbox]):not([type=radio]), body.gs select, body.gs textarea {
  border-color: var(--gs-line); border-radius: 8px; }
body.gs .productHead .productName { font-family: var(--gs-serif); color: var(--gs-ink); }
body.gs dialog { border: 1px solid var(--gs-hair); border-radius: 12px;
  box-shadow: var(--gs-shadow); }

/* Five tiles must hold one line on a laptop; below 1500px they slim down. */
@media (max-width: 1520px) {
  .gsTile { padding: 12px 20px 12px 0; gap: 12px; }
  .gsTile + .gsTile { padding-left: 20px; }
  .gsTile .ico { width: 50px; height: 50px; font-size: 21px; }
  .gsTile .n { font-size: 27px; }
  .gsTile .l { font-size: 14px; }
  .gsTile .s { font-size: 12px; }
}

/* ---- mobile ---------------------------------------------------------------- */
/* The desktop grids collapse above; this block is the phone pass Monk asked
   for: a burger menu, stacked facts, timeline cards that breathe, and no
   horizontal scroll anywhere. */
.gsTlMain { flex: 1; min-width: 0; }
.gsTlHead { display: flex; align-items: flex-start; gap: 12px; }
.gsTlTt { flex: 1; min-width: 0; }
.gsBurger { display: none; background: none; border: 1px solid var(--gs-line);
  border-radius: 8px; width: 40px; height: 36px; align-items: center;
  justify-content: center; cursor: pointer; color: var(--gs-ink); font-size: 17px;
  flex: 0 0 auto; }
.gsMobilePanel { display: none; background: var(--gs-panel);
  border-bottom: 1px solid var(--gs-hair); box-shadow: var(--gs-shadow); }
.gsMobilePanel.open { display: block; }
.gsMobilePanel a { display: block; padding: 13px 22px; color: var(--gs-ink);
  text-decoration: none; font-weight: 700; font-size: 15px;
  border-bottom: 1px solid var(--gs-hair); }
.gsMobilePanel a:last-child { border-bottom: 0; }
.gsMobilePanel a.on { color: var(--gs-gold); }
.gsMobilePanel .sep { height: 6px; background: var(--gs-cream);
  border-bottom: 1px solid var(--gs-hair); }

@media (max-width: 960px) {
  .gsNavLinks > a:not(.gsBtn):not(.gsLogin):not(.gsKeep) { display: none; }
  .gsNavSep { display: none; }
  .gsBurger { display: inline-flex; }
  .gsUser .gsWho, .gsUser > [aria-hidden] { display: none; }
  .gsBrand .gsTagline { display: none; }
}

@media (max-width: 700px) {
  body.gs { overflow-x: hidden; }
  .gsWrap { padding: 0 16px; }
  .gsHero h1 { font-size: 34px; }
  .gsPageHero h1 { font-size: 29px; }
  .gsCaseHead h1 { font-size: 27px; }
  .gsHead h2 { font-size: 22px; }
  /* facts stack: icon left, words right, hairlines between */
  .gsFacts { grid-template-columns: 1fr; text-align: left; }
  .gsFact { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px;
    align-items: center; padding: 10px 0; }
  .gsFact .ico { grid-row: 1 / span 4; font-size: 21px; }
  .gsFact + .gsFact { border-left: 0; border-top: 1px solid var(--gs-hair); }
  .gsFact .v { font-size: 17.5px; }
  /* timeline: slimmer rail, pill drops under the title, no clipped NEW */
  .gsTlNew { display: none; }
  .gsTl { padding-left: 24px; }
  .gsTl::before { left: 6px; }
  .gsTlDot { left: -24px; width: 15px; height: 15px; font-size: 8px; top: 16px; }
  .gsTlIcon { width: 38px; height: 38px; font-size: 17px; border-radius: 9px; }
  .gsTlHead { flex-wrap: wrap; }
  .gsTlTt { flex: 1 1 calc(100% - 52px); }
  .gsTlHead .gsPill { order: 5; margin: 8px 0 0; }
  /* label-over-value metas wrap into a tidy two-column run */
  .gsResMeta { margin: 10px 0 0; flex-wrap: wrap; width: 100%; }
  .gsResMeta .m { border-left: 0 !important; padding: 5px 16px 5px 0; }
  .gsRow { flex-wrap: wrap; }
  .gsDays { font-size: 12px; padding: 4px 10px; }
  .gsBtn, .gsBtnGhost { padding: 10px 15px; font-size: 14.5px; }
  .gsStatBand .gsWrap { gap: 14px; }
  .gsStat + .gsStat { border-left: 0; padding-left: 0; }
  .gsStatAccent { margin-left: 0; text-align: left; }
  .gsStatAccent::after { margin-left: 0; }
  .gsFoot .gsWrap { justify-content: center; text-align: center; }
  .gsTabs { gap: 18px; }
}

/* Below the wide-desktop width the five stat tiles become a grid, so a
   wrapped row can never indent against the first tile ("Active Grants sat
   further left than everything else"). */
@media (max-width: 1520px) {
  .gsTiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 2px 26px; }
  .gsTile, .gsTile + .gsTile { padding: 10px 0; border-left: 0; }
}