/* How-To Guides: shared site chrome (header, colophon, subscribe band, footer).
   Tokens and footer mirror the landing page (Design System v2). Every selector is
   gx- prefixed so it never collides with a guide's own report stylesheet. */
:root {
  --gx-sprout-50:#f2fbec; --gx-sprout-500:#5bb42e; --gx-sprout-600:#449122; --gx-sprout-700:#37731e;
  --gx-teal-400:#3faca5; --gx-teal-600:#14706d; --gx-teal-700:#135957;
  --gx-forest-500:#427065; --gx-forest-600:#335953; --gx-forest-700:#294843; --gx-forest-800:#1f3a36;
  --gx-mint-100:#e5f5e7; --gx-mint-300:#b9e8bf;
  --gx-paper-0:#ffffff; --gx-paper-50:#fafcfa; --gx-paper-100:#f4f7f4; --gx-paper-200:#e8ede9;
  --gx-font-display:'Newsreader','Iowan Old Style',Georgia,serif;
  --gx-font-body:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --gx-r-md:10px; --gx-r-lg:16px; --gx-r-pill:999px;
  --gx-shadow-sm:0 1px 2px rgba(31,58,54,.06),0 2px 6px rgba(31,58,54,.04);
}

/* No italics anywhere on a public guide (brand rule). */
em, i, cite, dfn, var, address, blockquote, q { font-style: normal !important; }
html, body { overflow-x: hidden; }

.gx-site, .gx-foot, .gx-band, .gx-colophon {
  font-family: var(--gx-font-body); font-size: 16px; line-height: 1.55; color: var(--gx-forest-800);
  -webkit-font-smoothing: antialiased; box-sizing: border-box; text-align: left;
}
.gx-site *, .gx-foot *, .gx-band *, .gx-colophon * { box-sizing: border-box; }
.gx-site a, .gx-foot a, .gx-band a, .gx-colophon a { border-bottom: 0; word-break: normal; }
.gx-site p, .gx-foot p, .gx-band p, .gx-colophon p { margin: 0; }
.gx-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.gx-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---------- Header: the landing page's brandline, compact ---------- */
.gx-site { background: linear-gradient(180deg,var(--gx-mint-100),var(--gx-paper-50)); border-bottom: 1px solid var(--gx-mint-300); position: relative; z-index: 5; }
.gx-site .gx-wrap { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.gx-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gx-forest-800); }
.gx-brand img { width: 40px; height: auto; display: block; }
.gx-brand span { font-family: var(--gx-font-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; color: var(--gx-forest-800); }
.gx-brand span b { color: var(--gx-sprout-700); font-weight: 600; }
.gx-crumbs { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; min-width: 0; }
.gx-crumbs a { color: var(--gx-teal-600); text-decoration: none; white-space: nowrap; }
.gx-crumbs a:hover { color: var(--gx-sprout-700); }
.gx-crumbs .gx-sep { color: var(--gx-forest-500); font-weight: 500; }
.gx-crumbs .gx-cur { color: var(--gx-forest-600); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36ch; }
/* Top toolbar (mirrors .site-nav in ../../assets/site.css). Current page: white on sprout-700. */
.gx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gx-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; font-size: 15px; font-weight: 600; min-width: 0; }
.gx-nav a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--gx-r-pill); color: var(--gx-forest-700); text-decoration: none; white-space: nowrap; }
.gx-nav a .gx-ico { width: 15px; height: 15px; }
.gx-nav a:hover { background: var(--gx-paper-0); color: var(--gx-sprout-700); }
.gx-nav a[aria-current="page"] { background: var(--gx-sprout-700); color: var(--gx-paper-0); }
.gx-nav + .gx-cta { margin-left: 8px; }
.gx-site .gx-crumbs { flex-basis: 100%; order: 4; }
@media (max-width: 1260px) {
  .gx-nav { order: 3; flex: 0 0 calc(100% + 48px); margin: 0 -24px; padding: 2px 24px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 6px; }
  .gx-nav::-webkit-scrollbar { display: none; }
  .gx-nav a { background: var(--gx-paper-0); border: 1px solid var(--gx-mint-300); padding: 7px 13px; font-size: 14px; }
  .gx-nav a[aria-current="page"] { border-color: var(--gx-sprout-700); }
  .gx-nav + .gx-cta { margin-left: auto; order: 2; }
}
@media (max-width: 760px) {
  .gx-nav { flex-basis: calc(100% + 32px); margin: 0 -16px; padding: 2px 16px; }
}
.gx-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--gx-forest-800); text-decoration: none; }
.gx-cta .gx-ico { color: var(--gx-sprout-700); }
.gx-cta:hover { color: var(--gx-sprout-700); }

/* ---------- Colophon: the public byline that replaces each report footer ---------- */
.gx-colophon { border-top: 1px solid var(--gx-paper-200); background: var(--gx-paper-50); }
.gx-colophon .gx-wrap { padding-top: 22px; padding-bottom: 22px; font-size: 14px; color: var(--gx-forest-600); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.gx-colophon b { color: var(--gx-forest-800); font-weight: 600; }

/* ---------- Subscribe band ---------- */
.gx-band { background: linear-gradient(135deg,var(--gx-forest-700),var(--gx-teal-700)); color: var(--gx-paper-0); }
.gx-band .gx-wrap { padding-top: 36px; padding-bottom: 36px; display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; }
.gx-band .gx-band-t { font-family: var(--gx-font-display); font-weight: 500; font-size: clamp(22px,2.6vw,28px); letter-spacing: -.01em; color: var(--gx-paper-0); flex: 1 1 320px; }
.gx-band .gx-band-t span { display: block; font-family: var(--gx-font-body); font-size: 15px; font-weight: 400; color: #d7f7da; margin-top: 4px; letter-spacing: 0; }
.gx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--gx-r-pill); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.gx-btn--solid { background: var(--gx-sprout-600); color: var(--gx-paper-0); }
.gx-btn--solid:hover { background: var(--gx-sprout-700); color: var(--gx-paper-0); }
.gx-btn--ghost { border: 1px solid rgba(255,255,255,.55); color: var(--gx-paper-0); }
.gx-btn--ghost:hover { background: rgba(255,255,255,.12); color: var(--gx-paper-0); }

/* ---------- Footer: same as the landing page ---------- */
.gx-foot { background: var(--gx-paper-100); border-top: 1px solid var(--gx-paper-200); }
.gx-foot .gx-wrap { padding-top: 36px; padding-bottom: 40px; display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.gx-foot .gx-fb { display: flex; align-items: center; gap: 10px; font-family: var(--gx-font-display); font-weight: 600; font-size: 19px; color: var(--gx-forest-800); }
.gx-foot .gx-fb img { width: 40px; height: auto; display: block; }
.gx-foot nav { display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 15px; font-weight: 500; }
.gx-foot nav a { color: var(--gx-forest-700); text-decoration: none; }
.gx-foot nav a:hover { color: var(--gx-sprout-700); }
.gx-foot .gx-spacer { flex: 1; }
.gx-foot .gx-fine { font-size: 14px; color: var(--gx-forest-600); }
.gx-foot .gx-fine a { color: var(--gx-teal-600); font-weight: 600; text-decoration: none; }

.gx-site a:focus-visible, .gx-foot a:focus-visible, .gx-band a:focus-visible { outline: 2px solid var(--gx-sprout-500); outline-offset: 3px; border-radius: 6px; }

@media (max-width: 760px) {
  .gx-wrap { padding: 0 16px; }
  .gx-site .gx-wrap { padding-top: 12px; padding-bottom: 12px; }
  .gx-crumbs { order: 3; flex-basis: 100%; }
  .gx-crumbs .gx-cur { max-width: 60vw; }
  .gx-cta span { display: none; }
  .gx-cta { padding: 8px; border-radius: var(--gx-r-pill); background: var(--gx-paper-0); border: 1px solid var(--gx-paper-200); }
  .gx-band .gx-wrap { padding-top: 28px; padding-bottom: 28px; }
}