/* ===========================================================================
   Govbot civic theme for the mdbook docs site.
   Loaded via additional-css (after mdbook's own CSS + govbot.css), so it wins.
   Two jobs: (1) re-skin mdbook's chrome with the civic tokens from govbot.css,
   (2) host the civic shell layout (sticky .gb-header/.gb-footer) + the full-bleed
   homepage (.gb-landing). Colours come from govbot.css tokens, which already
   switch on [data-theme]; we map mdbook's own vars onto them with !important to
   beat mdbook's html.rust / html.coal theme classes.
   =========================================================================== */

:root {
  --content-max-width: 1000px; /* docs prose: wider than mdBook's 750px, still a comfortable reading line */
  --gb-header-h: 60px;

  /* map mdbook vars -> civic tokens (civic tokens auto-switch light/dark) */
  --bg: var(--gb-bg) !important;
  --fg: var(--gb-text) !important;
  --links: var(--gb-link) !important;
  --inline-code-color: var(--gb-gold-hi) !important;
  --icons: var(--gb-text-muted) !important;
  --icons-hover: var(--gb-text) !important;
  --scrollbar: var(--gb-border-strong) !important;

  --sidebar-bg: var(--gb-surface) !important;
  --sidebar-fg: var(--gb-text-2) !important;
  --sidebar-active: var(--gb-gold-hi) !important;
  --sidebar-spacer: var(--gb-border) !important;
  --sidebar-non-existant: var(--gb-text-muted) !important;

  --theme-popup-bg: var(--gb-elevated) !important;
  --theme-popup-border: var(--gb-border) !important;
  --theme-hover: var(--gb-hover) !important;

  --quote-bg: var(--gb-surface-2) !important;
  --quote-border: var(--gb-border-strong) !important;
  --warning-border: var(--gb-amber) !important;

  --table-border-color: var(--gb-border) !important;
  --table-header-bg: var(--gb-surface-2) !important;
  --table-alternate-bg: var(--gb-row-alt) !important;

  --searchbar-border-color: var(--gb-border) !important;
  --searchbar-bg: var(--gb-surface-2) !important;
  --searchbar-fg: var(--gb-text) !important;
  --searchbar-shadow-color: var(--gb-border-strong) !important;
  --searchresults-border-color: var(--gb-border) !important;
  --searchresults-header-fg: var(--gb-text-2) !important;
  --searchresults-li-bg: var(--gb-surface) !important;
  --search-mark-bg: color-mix(in srgb, var(--gb-gold) 45%, transparent) !important;
}

/* fonts + base typography */
html, body { font-family: var(--gb-font-sans); background: var(--gb-bg); }
.content main h1, .content main h2, .content main h3,
.menu-title { font-family: var(--gb-font-display); letter-spacing: -0.01em; }
.content main a { color: var(--gb-link); }
.content main h1, .content main h2 { border: 0; }

/* mdbook's own theme picker is replaced by the civic toggle in .gb-header */
#theme-toggle, #theme-list { display: none !important; }

/* ---------- the civic header/footer + layout offsets ---------- */
.gb-header { position: sticky; top: 0; z-index: 1100; }

/* mdbook's fixed sidebar + sticky menu-bar start BELOW our header */
#sidebar { top: var(--gb-header-h) !important; height: calc(100vh - var(--gb-header-h)) !important; }
#menu-bar.menu-bar.sticky { top: var(--gb-header-h) !important; }
html { scroll-padding-top: calc(var(--gb-header-h) + var(--menu-bar-height, 50px)); }

/* recolour the menu-bar itself (doc toolbar) */
#menu-bar { background: var(--gb-surface) !important; border-bottom: 1px solid var(--gb-border); }
#menu-bar .icon-button { color: var(--gb-text-2); }

/* footer spans the content area; clear the fixed sidebar when it's showing */
.gb-footer { clear: both; }
@media (min-width: 1080px) {
  html.sidebar-visible .gb-footer { padding-left: calc(var(--sidebar-width) + var(--page-padding, 15px)); }
}

/* ---------- homepage: full-bleed, no mdbook chrome (:has the landing) ---------- */
body:has(.gb-landing) #sidebar,
body:has(.gb-landing) #menu-bar,
body:has(.gb-landing) #sidebar-resize-handle { display: none !important; }
body:has(.gb-landing) #page-wrapper { margin-left: 0 !important; left: 0 !important; transform: none !important; }
body:has(.gb-landing) .gb-footer { padding-left: 0 !important; }
body:has(.gb-landing) #content { max-width: none !important; padding: 0 !important; margin: 0 !important; }
body:has(.gb-landing) #content main { max-width: none !important; margin: 0 !important; padding: 0 !important; }
body:has(.gb-landing) .page { margin-top: 0 !important; }


/* ===========================================================================
   Homepage (.gb-landing, docs/src/readme.md + theme/landing.js).
   Hero → numbers → Projects carousel → Build your own → Our story + Questions
   → firehose finale. px units throughout (mdbook sets html font-size 62.5%).
   The .activity-row / .ar-* / .mini-date / .stream-* rules are carried over
   from the retired dashboard homepage so the ported landing.js renders as before.
   =========================================================================== */
.gb-landing { --gl-teal: #5CC8DA; --gl-halo: rgba(61,220,132,.16); --gl-fgold: #E5B94E; --gl-key: #93C5FD; --gl-num: #FDBA74; color: var(--gb-text); font-size: 16px; }
:root[data-theme="light"] .gb-landing { --gl-teal: #0E6F80; --gl-halo: rgba(4,26,15,.94); --gl-fgold: #8A6100; --gl-key: #1D4ED8; --gl-num: #B45309; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .gb-landing { --gl-teal: #0E6F80; --gl-halo: rgba(4,26,15,.94); --gl-fgold: #8A6100; --gl-key: #1D4ED8; --gl-num: #B45309; }
}
/* neutralise mdbook's content typography inside the landing */
.gb-landing h1, .gb-landing h2, .gb-landing h3 { margin: 0; border: 0; }
/* mdbook makes every heading a self-link (a.header → "#see-what-your-…" in the URL). The landing's
   headings aren't meant to be links: no click, no pointer (landing.js also unwraps them). */
.gb-landing a.header { color: inherit; text-decoration: none; pointer-events: none; cursor: inherit; }
.gb-landing a:hover { text-decoration: none; }
/* mdbook's `.content a:link` colours every link blue and out-ranks plain class
   rules — pin the landing's button/card/timeline text colours. */
.gb-landing a.gl-btn-primary, .gb-landing a.gl-btn-primary:hover { color: var(--gb-on-primary) !important; }
.gb-landing a.gl-btn-ghost,
.gb-landing a.activity-row, .gb-landing .gl-timeline a { color: var(--gb-text) !important; }
.gb-landing .gl-timeline a:hover { color: var(--gb-gold-hi) !important; }
.gb-landing p { line-height: 1.55; margin: 0; }
.gb-landing ol { margin: 0; padding: 0; list-style: none; }
.gb-landing button { font-family: inherit; }

.gl-wrap { max-width: var(--gb-page-max); margin: 0 auto; padding-left: var(--gb-gutter); padding-right: var(--gb-gutter); box-sizing: border-box; }
.gl-sec { padding-top: 88px; padding-bottom: 88px; }
.gl-band { background: var(--gb-surface); border-top: 1px solid var(--gb-border); border-bottom: 1px solid var(--gb-border); }
.gl-overline { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gb-gold-hi); }
.gl-rule { width: 22px; height: 1px; background: var(--gb-gold); }
/* hero overline: a long rule on each side of the text */
.gl-overline-ruled { display: flex; white-space: nowrap; }
.gl-overline-ruled .gl-rule { flex: 0 1 64px; min-width: 14px; }
.gl-h1 { font-family: var(--gb-font-display); font-weight: 600; font-size: 62px; line-height: 1.04;
  letter-spacing: -0.02em; color: var(--gb-text); }
.gl-accent { color: var(--gb-gold-hi); }
.gl-h2 { font-family: var(--gb-font-display); font-weight: 600; font-size: 38px; line-height: 1.1;
  letter-spacing: -0.01em; color: var(--gb-text); }
.gl-h2-lg { font-size: 44px; }
.gl-h3 { font-family: var(--gb-font-display); font-weight: 600; font-size: 32px; line-height: 1.1; color: var(--gb-text); }
.gl-sub { font-size: 17px; color: var(--gb-text-2); margin-top: 8px !important; }
.gl-p { font-size: 15.5px; line-height: 1.55; color: var(--gb-text-2); }
.gl-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gb-text-2); }
.gl-mono, .gl-code-t { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.gl-mono { color: var(--gb-gold-hi); font-size: .95em; }

/* buttons */
.gl-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.gl-center { justify-content: center; margin-top: 40px; }
.gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  padding: 0 20px; border-radius: var(--gb-radius-pill, 999px); font-size: 15px; font-weight: 600;
  text-decoration: none; box-sizing: border-box; transition: background .15s, border-color .15s; }
.gb-landing .gl-btn-primary { background: var(--gb-gold); border: 1px solid var(--gb-gold); color: var(--gb-on-primary); }
.gb-landing .gl-btn-primary:hover { background: var(--gb-gold-hi); border-color: var(--gb-gold-hi); color: var(--gb-on-primary); }
/* Outline buttons: a 2px full-contrast border so they clearly read as buttons. */
.gb-landing .gl-btn-ghost { background: transparent; border: 2px solid var(--gb-text); color: var(--gb-text); }
.gb-landing .gl-btn-ghost:hover { border-color: var(--gb-gold); background: var(--gb-hover); color: var(--gb-text); }
/* The two Know Your Ballot buttons: an outline in each state's colour (Illinois amber, Michigan green), no fill. */
.gb-landing .gl-btn-state { border-color: var(--sc); }
.gb-landing .gl-btn-state:hover { border-color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, transparent); }
.gb-landing :focus-visible { outline: 3px solid var(--gb-gold-hi); outline-offset: 3px; }

/* hero — the big gold Liberty beside the copy */
.gl-hero { padding-top: 40px; padding-bottom: 8px; }
.gl-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: center; }
.gl-hero-copy { display: flex; flex-direction: column; gap: 22px; }
.gl-lede { font-size: 19px !important; color: var(--gb-text-2); max-width: 560px; }
.gl-art { position: relative; height: 600px; overflow: hidden; }
/* Light mode: the statue's pale line-art highlights wash out on a light page, so she stands in a
   crisp deep-green "night" panel (same idea as the hearings hero, which stays dark in both themes). */
:root[data-theme="light"] .gl-art { border-radius: 28px;
  background: radial-gradient(70% 60% at 50% 42%, rgba(61,220,132,.22), transparent 70%), #06140D; }
:root[data-theme="light"] .gl-halo { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .gl-art { border-radius: 28px;
    background: radial-gradient(70% 60% at 50% 42%, rgba(61,220,132,.22), transparent 70%), #06140D; }
  :root:not([data-theme]) .gl-halo { display: none; }
}
.gl-halo { position: absolute; left: 50%; top: 46%; width: 440px; height: 520px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, var(--gl-halo), transparent); }
.gb-landing .gl-art-img { position: absolute; left: 50%; top: 0; height: 720px; width: auto; max-width: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
/* rising embers (landing.js) over the statue, like sparks off a fireplace */
.gl-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* by the numbers */
.gl-proof { background: var(--gb-surface); border-top: 1px solid var(--gb-border); border-bottom: 1px solid var(--gb-border); }
.gl-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gl-proof-cell { display: flex; flex-direction: column; gap: 6px; padding: 26px 22px; }
.gl-proof-cell + .gl-proof-cell { border-left: 1px solid var(--gb-border); }
.gl-num { font-family: var(--gb-font-display); font-size: 40px; font-weight: 600; line-height: 1; color: var(--gb-gold-hi); }
.gl-num-label { font-size: 14.5px; line-height: 1.4; color: var(--gb-text-2); }

/* projects carousel */
.gl-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.gl-car-nav { display: flex; align-items: center; gap: 10px; flex: none; }
.gl-count { min-width: 44px; text-align: right; font-size: 14px; color: var(--gb-text-muted); }
.gl-navbtn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gb-border-strong);
  background: var(--gb-surface); color: var(--gb-text); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; }
.gl-navbtn:hover { border-color: var(--gb-gold); }
.gl-navbtn:disabled { opacity: .35; cursor: default; border-color: var(--gb-border); }
.gl-chips { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; padding: 4px;
  scroll-behavior: smooth; }
/* soft fade on whichever edge still has chips scrolled out of view (landing.js toggles the classes) */
.gl-chips.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
                           mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.gl-chips.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
                           mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
.gl-chips.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
                                  mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.gl-chips::-webkit-scrollbar { display: none; }
.gl-chip { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--gb-border-strong);
  background: transparent; color: var(--gb-text-2); font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.gl-chip:hover { border-color: var(--gb-gold); color: var(--gb-text); }
.gl-chip[aria-pressed="true"] { background: var(--gb-gold); border-color: var(--gb-gold); color: var(--gb-on-primary); }
.gl-car { position: relative; display: flex; align-items: flex-start; gap: 20px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px;
  transition: height .35s ease; }
.gl-car::-webkit-scrollbar { display: none; }
.gl-slide { flex: 0 0 84%; scroll-snap-align: start; box-sizing: border-box; display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; padding: 28px; border-radius: 22px;
  background: var(--gb-surface); border: 1px solid var(--gb-border); opacity: .55; transition: opacity .3s ease; }
.gl-slide.is-active { opacity: 1; }
/* a peeking neighbour is capped to the active slide's height and fades out at the bottom */
.gl-car.is-sized .gl-slide:not(.is-active) { max-height: var(--car-h); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.gl-slide-yours { background: transparent; border: 2px dashed var(--gb-border-strong); }
.gl-slide-head { display: flex; flex-direction: column; gap: 12px; }
.gl-slide-cta { align-self: flex-start; margin-top: auto; }
.gl-kick { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--pc); }
.gl-ico { width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex; align-items: center;
  justify-content: center; color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); }
.gl-slide-body { display: flex; flex-direction: column; min-width: 0; }
.gl-body-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.gl-live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--gb-text-muted); }
.gl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gb-green); }
.gl-elect { gap: 12px; padding: 22px; border-radius: 16px; background: var(--gb-row-alt, var(--gb-surface-2)); border: 1px solid var(--gb-border); }
.gl-elect-date { font-family: var(--gb-font-display); font-size: 44px; font-weight: 600; line-height: 1; color: var(--gb-text); }
.gl-pill { align-self: flex-start; display: inline-flex; align-items: center; height: 32px; padding: 0 13px;
  border-radius: 999px; font-size: 14.5px; font-weight: 700; color: var(--gb-amber-hi);
  background: color-mix(in srgb, var(--gb-amber) 15%, transparent); }
.gl-pill[hidden] { display: none; }
.gl-elect-then { padding-top: 12px; border-top: 1px solid var(--gb-border); font-size: 14px; color: var(--gb-text-2); }
.gl-elect-then[hidden] { display: none; }
/* Two states side by side; stacked on narrow screens. */
.gl-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.gl-elect-2 { display: grid; gap: 14px; }
.gl-elect-2 .gl-elect { border-color: color-mix(in srgb, var(--pc) 45%, var(--gb-border)); }
.gl-elect-2 .gl-elect-date { font-size: 34px; }
@media (min-width: 900px) { .gl-elect-2 { grid-template-columns: 1fr 1fr; } }
/* Social media trackers slide: topics, platform buttons and a live auto-scrolling feed of the bots'
   real posts (filled by landing.js). Each post's coloured text (posted date, action chip, topic,
   "View post") and border use --pf: brand green, or on every other post (.is-gold) --gl-fgold, a true
   gold (the brand --gb-gold is green now) — both 4.5:1+ on the card in both themes. */
.gl-bt-group { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.gl-follow { margin-top: auto; padding-top: 6px; }
.gl-bt-h { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gb-text-muted); }
.gl-bts { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-bt { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--gb-border); font-size: 12.5px; color: var(--gb-text-2); }
.gl-bt-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.gl-plats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gb-landing a.gl-plat { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 14px;
  border-radius: 999px; background: var(--gb-primary); color: var(--gb-on-primary) !important; font-size: 15px; font-weight: 600;
  text-decoration: none; transition: filter .15s ease; }
.gb-landing a.gl-plat:hover { filter: brightness(1.08); }
.gl-plat svg { width: 18px; height: 18px; flex: none; }
.gl-bf { border-radius: 18px; border: 1px solid var(--gb-border); background: var(--gb-bg); overflow: hidden; height: 600px; }
.gl-bf-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--gb-border);
  font-size: 13px; font-weight: 600; color: var(--gb-text-2); }
.gl-bf-live { animation: gl-live 1.8s ease-in-out infinite; }
@keyframes gl-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
.gl-bf-win { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 36px), transparent 100%); }
.gl-bf-win::-webkit-scrollbar { display: none; }
.gl-bf-win:focus-visible { outline: 2px solid var(--gb-gold); outline-offset: -2px; }
.gl-bf-list { display: flex; flex-direction: column; gap: 10px; }
.gl-post { --pf: var(--gb-primary); display: flex; gap: 12px; padding: 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--pf) 45%, var(--gb-border)); background: var(--gb-surface); transition: border-color .2s ease; }
.gl-post.is-gold { --pf: var(--gl-fgold); }
.gl-post:hover { border-color: var(--pf); }
.gl-post-av { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; border: 2px solid var(--tc); box-sizing: border-box; }
.gl-post-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; }
.gl-post-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13px; }
.gl-post-name { font-size: 14px; font-weight: 700; color: var(--gb-text); white-space: nowrap; }
.gl-post-handle { color: var(--gb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gl-post-when { font-weight: 600; color: var(--pf); white-space: nowrap; flex: none; }
.gl-post-plat { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 12px; font-weight: 600; color: var(--gb-text-2); }
.gl-post-plat i { width: 8px; height: 8px; border-radius: 2px; background: var(--plc); }
.gl-post-h { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--gb-text); }
.gl-post-body { font-size: 13.5px; line-height: 1.5; color: var(--gb-text-2); }
.gl-post-ig { display: flex; gap: 12px; align-items: stretch; }
.gl-igcard { width: 112px; flex: none; aspect-ratio: 4 / 5; box-sizing: border-box; padding: 10px; border-radius: 8px; background: #11161F;
  border: 1px solid #273042; display: flex; flex-direction: column; justify-content: space-between; }
.gl-igcard-t { align-self: flex-start; font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px;
  border-radius: 999px; background: var(--tc); color: #080B12; }
.gl-igcard-h { font-size: 10.5px; font-weight: 700; line-height: 1.25; color: #F4F5F7; border-bottom: 2px solid var(--tc); padding-bottom: 4px; }
.gl-post-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gl-post-act { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--pf); background: color-mix(in srgb, var(--pf) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pf) 40%, transparent); }
.gl-post-topic { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--pf); }
.gl-post-topic i { width: 7px; height: 7px; border-radius: 50%; background: var(--tc); }
.gb-landing a.gl-post-link { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--pf) !important; text-decoration: none; }
.gb-landing a.gl-post-link:hover { text-decoration: underline; }
/* "Built together" band (right above Projects): the copy over a dotted workspace of real Govbot pieces,
   with the project's contributors moving around it as live multiplayer cursors (landing.js). */
.gl-crew { position: relative; overflow: hidden; background-color: var(--gb-bg);
  background-image: radial-gradient(color-mix(in srgb, var(--gb-text) 9%, transparent) 1px, transparent 1.4px);
  background-size: 24px 24px; border-top: 1px solid var(--gb-border); border-bottom: 1px solid var(--gb-border); }
.gl-crew-space { position: relative; height: 540px; }
.gl-crew-card { position: absolute; z-index: 1; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--gb-border);
  background: var(--gb-surface); overflow: hidden; }
.gl-crew-term { left: 40px; top: 40px; width: 310px; }
.gl-crew-pr { right: 40px; top: 48px; width: 290px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.gl-crew-yml { left: 40px; bottom: 40px; width: 310px; }
.gl-crew-rss { right: 48px; bottom: 48px; width: 270px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.gl-crew-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--gb-border);
  font-size: 12px; color: var(--gb-text-muted); }
.gl-crew-bar b { width: 9px; height: 9px; border-radius: 50%; }
.gl-crew-bar b + span { margin-left: 6px; }
.gl-crew-code, .gl-crew-yml-code { padding: 11px 13px; font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--gb-text-2); }
.gl-crew-code, .gl-crew-hist { display: flex; flex-direction: column; gap: 5px; }
.gl-crew-code span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-crew-code .gl-crew-in, .gl-crew-code .gl-crew-typed { overflow: visible; }
.gl-crew-code i { font-style: normal; color: var(--gb-primary); }
.gl-crew-caret { display: inline-block; width: 7px; height: 14px; margin-left: 4px; vertical-align: -2px; background: var(--gb-primary);
  animation: gl-blink 1.1s steps(1) infinite; }
@keyframes gl-blink { 50% { opacity: 0; } }
.gl-crew-yml-code { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; row-gap: 3px; white-space: pre; }
.gl-crew-yml-code .ln { color: var(--gb-text-muted); }
.gl-crew-yml-code em { font-style: normal; color: var(--gl-key); }
.gl-crew-yml-code u { text-decoration: none; color: var(--gl-num); }
.gl-crew-pr-top { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--gb-text-muted); }
.gl-crew-merged { margin-left: auto; padding: 2px 8px; border-radius: 999px; color: var(--gb-purple-hi, #C4B5FD);
  background: color-mix(in srgb, #A78BFA 16%, transparent); }
.gl-crew-pr-t { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--gb-text); }
.gl-crew-rss-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  color: var(--gb-primary); background: color-mix(in srgb, var(--gb-primary) 14%, transparent); }
.gl-crew-rss > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.gl-crew-rss-t { font-size: 13.5px; font-weight: 600; color: var(--gb-text); }
.gl-crew-rss-d { font-size: 12px; color: var(--gb-text-muted); }
.gl-crew-copy { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px;
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.gb-landing .gl-crew-text { margin: 0; font-family: var(--gb-font-display); font-weight: 500; font-size: 30px; line-height: 1.3; color: var(--gb-text); }
.gb-landing a.gl-crew-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--gb-border-strong); background: var(--gb-surface); color: var(--gb-text) !important; font-size: 15px; font-weight: 600;
  text-decoration: none; white-space: nowrap; }
.gb-landing a.gl-crew-btn:hover { border-color: var(--gb-primary); }
.gl-crew-faces { display: flex; flex: none; }
.gl-crew-faces img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--gb-surface); }
.gl-crew-faces img + img { margin-left: -7px; }
.gl-crew-cursors { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* what the cursors leave behind: sticky notes they write and selection boxes they drag (landing.js) */
.gl-crew-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gl-crew-note { position: absolute; width: 168px; box-sizing: border-box; padding: 10px 12px 9px; border-radius: 3px;
  background: #FDE68A; color: #1F1A05; font-size: 13.5px; font-weight: 600; line-height: 1.35; box-shadow: 0 8px 18px rgba(0,0,0,.28);
  transform: rotate(-2deg) scale(.6); opacity: 0; transition: transform .3s cubic-bezier(.2,1.4,.4,1), opacity .3s ease; }
.gl-crew-note.is-on { transform: rotate(-2deg); opacity: 1; }
.gl-crew-note.is-off { opacity: 0; transition: opacity .6s ease; }
.gl-crew-note small { display: block; margin-top: 5px; font-size: 11px; font-weight: 600; }
.gl-crew-marq { position: absolute; border: 1.5px solid var(--cc); background: color-mix(in srgb, var(--cc) 14%, transparent);
  border-radius: 2px; transition: opacity .5s ease; }
.gl-crew-marq.is-off { opacity: 0; }
.gl-crew-edit { background: color-mix(in srgb, var(--cc) 30%, transparent); border-radius: 2px; }
.gl-cur { position: absolute; left: 0; top: 0; width: 22px; height: 22px; will-change: transform; transition: opacity .4s ease; }
.gl-cur svg { position: absolute; left: 0; top: 0; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.gl-cur-ring { position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cc); opacity: 0; }
.gl-cur-label { position: absolute; top: 18px; left: 14px; width: -webkit-max-content; width: max-content; max-width: none; flex-wrap: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 26px;
  padding: 0 10px 0 4px; border-radius: 999px; background: var(--cc); color: #0B1119; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.gl-cur.flip .gl-cur-label { left: auto; right: 14px; }
/* @sartaj's cursor-chat: types "government data as Git" when it pauses (landing.js) */
.gl-cur-chat { position: absolute; top: 50px; left: 14px; width: -webkit-max-content; width: max-content; max-width: none; padding: 7px 12px; border-radius: 4px 14px 14px 14px;
  background: var(--cc); color: #0B1119; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.28); opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease; }
.gl-cur-chat.is-on { opacity: 1; transform: none; }
.gl-cur.is-lead { z-index: 3; }
.gl-cur.is-saying { z-index: 4; }
.gl-cur.is-you { z-index: 6; opacity: 0; color: var(--gl-fgold); --cc: var(--gl-fgold); }
.gl-cur.is-you.is-on { opacity: 1; }
:root[data-theme="light"] .gl-cur.is-you .gl-cur-label { color: #FFFFFF; }
.gl-cur.is-you .gl-cur-label { padding-left: 9px; }
.gl-crew-space.has-you { cursor: none; }
.gl-crew-space.has-you a, .gl-crew-space.has-you button { cursor: pointer; }
.gl-cur.flip .gl-cur-chat { left: auto; right: 14px; border-radius: 14px 4px 14px 14px; }
.gl-cur-chat::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px;
  background: currentColor; }
/* the typing caret only blinks while the bubble is showing */
.gl-cur-chat.is-on::after { animation: gl-blink 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .gl-cur-chat.is-on::after { animation: none; } }
/* the tag sits inside a 22px cursor box: size it to its own text (max-content) so no browser shrinks it */
.gl-cur-label b { font-weight: inherit; white-space: nowrap; flex: none; }
.gl-cur-label img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
/* narrower screens: copy on top, the workspace windows below it, cursors roaming underneath the copy */
@media (max-width: 1180px) {
  .gl-crew-space { height: auto; padding-top: 48px; padding-bottom: 56px; }
  .gl-crew-copy { position: relative; left: auto; top: auto; transform: none; width: auto; max-width: 620px; margin: 0 auto; }
  .gb-landing .gl-crew-text { font-size: 24px; }
  .gl-crew-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .gl-crew-pr, .gl-crew-rss { display: none; }
  .gl-crew-space { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; column-gap: 24px; row-gap: 36px; }
  .gl-crew-copy { grid-column: 1 / -1; grid-row: 1; }
  .gl-crew-term, .gl-crew-yml { width: auto; grid-row: 2; }
}
@media (max-width: 620px) {
  .gl-crew-space { grid-template-columns: minmax(0, 1fr); row-gap: 20px; padding-top: 40px; padding-bottom: 96px; }
  .gl-crew-copy { margin-bottom: 18px; }
  .gl-crew-term, .gl-crew-yml { grid-row: auto; }
  .gl-crew-term { margin-right: 60px; }
  .gl-crew-yml { margin-left: 30px; }
  .gb-landing .gl-crew-text { font-size: 22px; line-height: 1.35; }
  .gb-landing a.gl-crew-btn { font-size: 13.5px; padding: 0 14px; gap: 8px; }
  .gl-crew-code, .gl-crew-yml-code { font-size: 11.5px; }
  .gl-cur-label { height: 22px; font-size: 11.5px; padding: 0 8px 0 3px; }
  .gl-cur-label img { width: 16px; height: 16px; }
  .gl-cur-chat { top: 44px; font-size: 13px; }
  .gl-crew-faces img:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gl-crew-caret { animation: none; } }
.gl-yours-note { justify-content: center; gap: 10px; padding: 22px; border-radius: 16px; background: var(--gb-row-alt, var(--gb-surface-2)); }
.gl-yours-note a { font-weight: 600; }

/* recent activity rows (ported) */
#activity-list { display: flex; flex-direction: column; gap: 16px; }
.gb-landing .activity-row { display: flex; gap: 14px; align-items: baseline; text-decoration: none; color: inherit; }
.gb-landing .activity-row .tag { font-size: 12px; font-weight: 600; color: var(--gb-link); }
.gb-landing .activity-row .when { font-size: 12px; color: var(--gb-text-2); white-space: nowrap; }
.gb-landing .activity-row.rich { flex-direction: column; align-items: stretch; gap: 9px; padding: 12px 14px; border-radius: 10px;
  --ar-c: var(--gb-primary); border: 2px solid var(--ar-c); background: color-mix(in srgb, var(--ar-c) 6%, var(--gb-surface));
  transition: transform .12s ease, box-shadow .12s ease; }
.gb-landing .activity-row.rich:nth-of-type(even) { --ar-c: var(--gl-fgold); }
.gb-landing .activity-row.rich:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--ar-c); }
@media (prefers-reduced-motion: reduce) { .gb-landing .activity-row.rich:hover { transform: none; } }
.activity-row.rich .ar-head { display: flex; align-items: baseline; gap: 12px; }
.activity-row.rich .ar-idtitle { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; }
.activity-row.rich .ar-head .tag { flex: none; }
.activity-row.rich .ar-head .when { flex: none; margin-left: auto; }
.activity-row.rich .ar-title { flex: 1; min-width: 14ch; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--gb-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.activity-row.rich .desc { font-size: 13px; line-height: 1.35; color: var(--gb-text-2); }
.ar-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-topic { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--gb-surface-2); color: var(--gb-text-2); border: 1px solid var(--gb-border); }
.ar-sponsors { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ar-spon { display: inline-flex; align-items: center; gap: 7px; }
.ar-av { position: relative; overflow: hidden; width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
  color: #fff; letter-spacing: .02em; border: 1.5px solid rgba(255,255,255,0.16); }
.ar-av.is-dem { background: var(--gb-blue); }
.ar-av.is-rep { background: var(--gb-red); }
.ar-av.is-oth { background: var(--gb-gold); color: var(--gb-on-primary); }
.ar-av.is-unk { background: var(--gb-surface-2); color: var(--gb-text-2); border-color: var(--gb-border); }
/* A real headshot (vendored at deploy) covers the monogram; if it 404s the
   <img> is removed and the party-tinted monogram shows through. */
.gb-landing .ar-av-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.ar-spon-name { font-size: 12.5px; color: var(--gb-text); font-weight: 500; }
.ar-party { font-size: 10px; font-weight: 700; margin-left: 3px; }
.ar-party.is-dem { color: var(--gb-link); }
.ar-party.is-rep { color: var(--gb-red); }
.ar-party.is-oth { color: var(--gb-gold); }
.ar-more { font-size: 12px; color: var(--gb-text-2); font-weight: 600; align-self: center; }
/* upcoming hearings: little calendar pages */
.gb-landing .hearing-row { align-items: center; gap: 14px; padding: 12px; border-bottom: 1px solid var(--gb-border); border-radius: 12px; }
.gb-landing .hearing-row:last-child { border-bottom: 0; }
.gb-landing .hearing-row:hover { background: var(--gb-hover); }
.hr-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hr-title { font-size: 15.5px; font-weight: 600; color: var(--gb-text); line-height: 1.35; }
.hr-juris { font-size: 13.5px; color: var(--gb-text-2); }
.mini-date { flex: none; width: 58px; text-align: center; border-radius: 10px; overflow: hidden;
  background: var(--gb-surface-2); border: 1px solid var(--gb-border); position: relative; box-shadow: 0 2px 7px rgba(0,0,0,0.12); }
.mini-date .cal-band { position: relative; background: var(--gb-gold); color: var(--gb-on-primary); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 6px 0 3px; }
.mini-date .cal-band::before, .mini-date .cal-band::after { content: ""; position: absolute; top: 2px; width: 3px; height: 5px;
  border-radius: 2px; background: color-mix(in srgb, var(--gb-on-primary) 42%, transparent); }
.mini-date .cal-band::before { left: 34%; }
.mini-date .cal-band::after { right: 34%; }
.mini-date .cal-day { font-family: var(--gb-font-display); font-size: 24px; line-height: 1.05; color: var(--gb-text); padding: 4px 0 0; }
.mini-date .cal-sub { font-size: 9.5px; color: var(--gb-text-2); padding: 1px 0 5px; letter-spacing: .02em; }
.gb-landing .gb-state h3 { margin: 0; }
.gb-landing .gb-loading { padding: 34px 16px; }

/* build your own */
.gl-sec-intro { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.gl-sec-intro .gl-sub { max-width: 640px; margin-top: 0 !important; }
.gl-build { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.gl-steps { display: flex; flex-direction: column; gap: 14px; }
.gl-step { display: flex; gap: 16px; padding: 20px; border-radius: 18px; background: var(--gb-bg); border: 1px solid var(--gb-border); }
.gl-step-n { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gb-gold); color: var(--gb-gold-hi);
  font-family: var(--gb-font-display); font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.gl-step-b { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.gl-step-t { font-size: 17px; font-weight: 600; color: var(--gb-text); }
.gl-code { position: relative; padding: 14px 92px 14px 16px; border-radius: 12px; background: #05070C; border: 1px solid #273042; }
/* the text scrolls inside its own box, so a long command never slides under Copy */
.gl-code .gl-code-t { display: block; font-size: 13.5px; line-height: 1.7; color: #E8EAF0; white-space: pre; overflow-x: auto; scrollbar-width: thin; }
.gl-copy { position: absolute; top: 8px; right: 8px; height: 34px; min-width: 64px; padding: 0 13px; border-radius: 999px;
  border: 1px solid #3A455C; background: #121826; color: #7CEBB0; font-size: 13px; font-weight: 600; cursor: pointer; }
.gl-copy:hover { border-color: #3DDC84; }
.gl-build-side { display: flex; flex-direction: column; gap: 14px; }
.gl-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 18px; background: var(--gb-bg); border: 1px solid var(--gb-border); }
.gl-prompt { position: relative; padding: 16px 16px 58px; border-radius: 12px; background: var(--gb-surface-2); border: 1px solid var(--gb-border); }
.gl-prompt .gl-code-t { display: block; font-family: var(--gb-font-sans); font-size: 14.5px; line-height: 1.6; color: var(--gb-text); overflow-wrap: anywhere; }
.gl-prompt .gl-copy { top: auto; bottom: 10px; right: 10px; background: var(--gb-surface); color: var(--gb-text); border-color: var(--gb-border-strong); }

/* our story + questions */
.gl-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.gl-story .gl-h2 { font-size: 34px; margin-bottom: 20px; }
.gl-timeline { padding-left: 4px !important; }
.gl-timeline li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 0 0 20px 22px; border-left: 1px solid var(--gb-border-strong); }
.gl-timeline li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--gb-border-strong); }
.gl-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.gl-timeline li.is-now::before { left: -7px; width: 13px; height: 13px; background: var(--gb-gold); z-index: 1;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gb-gold) 25%, transparent), 0 0 16px 5px color-mix(in srgb, var(--gb-gold) 55%, transparent);
  animation: gl-now-core 1.6s ease-in-out infinite; }
/* expanding shockwave ring behind the "now" dot */
.gl-timeline li.is-now::after { content: ""; position: absolute; left: -7px; top: 5px; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--gb-gold-hi); box-sizing: border-box; animation: gl-now-ring 1.6s ease-out infinite; }
/* transform only (cheap): the static glow shadow grows with the dot */
@keyframes gl-now-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.55); } }
@keyframes gl-now-ring {
  0%   { transform: scale(1);   opacity: .95; }
  100% { transform: scale(4.6); opacity: 0; } }
.gl-timeline a, .gl-timeline strong { font-size: 16px; font-weight: 600; color: var(--gb-text); text-decoration: none; }
.gl-timeline a:hover { color: var(--gb-gold-hi); }
.gl-timeline li.is-now strong { color: var(--gb-gold-hi); }
/* "Next" — the roadmap from open GitHub issues: a dashed line out of "now" into a hollow node */
.gl-timeline li.is-now { border-left-style: dashed; }
.gl-timeline li.is-next::before { left: -7px; width: 13px; height: 13px; box-sizing: border-box;
  background: var(--gb-bg, transparent); border: 2px solid var(--gb-gold); }
.gl-road { display: grid; gap: 8px; margin-top: 10px; }
.gb-landing .gl-timeline a.gl-road-item { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px;
  border-radius: 12px; border: 1px solid var(--gb-border); background: var(--gb-surface);
  transition: border-color .15s, transform .15s; }
.gb-landing .gl-timeline a.gl-road-item:hover { border-color: var(--gb-gold); transform: translateX(3px); }
.gl-road-item b { font-size: 15px; font-weight: 600; }
.gl-road-item i { font-style: normal; font-size: 14px; font-weight: 400; color: var(--gb-text-2); }
.gb-landing .gl-timeline a.gl-road-cta { align-self: flex-start; margin-top: 10px; font-size: 14.5px; color: var(--gb-gold-hi) !important; }
.gb-landing .gl-timeline a.gl-road-cta { display: inline-flex; align-items: center; gap: 10px; }
.gb-landing .gl-timeline a.gl-road-cta:hover { text-decoration: underline; }
/* GitHub mark in the same green outline chip as the footer's social icons (.gb-social) */
.gl-gh { width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--gb-gold); color: var(--gb-gold-hi); transition: background .15s, border-color .15s; }
.gl-gh svg { width: 17px; height: 17px; display: block; }
.gb-landing .gl-timeline a.gl-road-cta:hover .gl-gh { border-color: var(--gb-gold-hi); background: color-mix(in srgb, var(--gb-gold) 12%, transparent); }
@media (prefers-reduced-motion: reduce) { .gb-landing .gl-timeline a.gl-road-item:hover { transform: none; } }
.gl-timeline span { font-size: 14.5px; color: var(--gb-text-2); }
.gl-faq { border-top: 1px solid var(--gb-border); }
.gl-faq details { padding: 8px 0 14px; border-bottom: 1px solid var(--gb-border); }
.gl-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 44px; font-size: 16.5px; font-weight: 600; color: var(--gb-text); }
.gl-faq summary::-webkit-details-marker { display: none; }
.gl-faq summary::after { content: "+"; font-size: 22px; font-weight: 500; color: var(--gb-gold-hi); }
.gl-faq details[open] summary::after { content: "–"; }
.gl-faq p { margin-top: 4px; font-size: 15px; color: var(--gb-text-2); }

/* finale: the firehose animation (ported) */
.gl-finale { border-top: 1px solid var(--gb-border); }
.gl-finale-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 28px; }
.gb-landing .gl-finale-sub { max-width: 720px; font-size: 18px; line-height: 1.55; color: var(--gb-text); }
@media (max-width: 620px) { .gb-landing .gl-finale-sub { font-size: 16px; } }
.gb-landing .stream-figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--gb-border); height: 400px;
  background: radial-gradient(120% 150% at 50% 42%, color-mix(in srgb, var(--gb-gold) 9%, transparent), transparent 60%), var(--gb-surface-2); }
#stream-canvas { display: block; width: 100%; height: 100%; }
/* The robot hub carries the Govbot wordmark under it; the wrapper is sized to the
   image (the name sits out of flow) so translate(-50%,-50%) centres the robot on the hub. */
.stream-bot { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: clamp(84px, 14%, 124px); z-index: 2; pointer-events: none; }
.gb-landing .stream-bot-img { display: block; width: 100%; height: auto; max-width: none;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--gb-gold) 40%, transparent)); }
.stream-bot::before { content: ""; position: absolute; inset: -35%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gb-gold) 50%, transparent), transparent);
  animation: stream-bot-pulse 3.4s ease-in-out infinite; }
.stream-bot-name { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 7px; font-family: var(--gb-font-display);
  font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--gb-gold); white-space: nowrap;
  text-shadow: 0 1px 10px color-mix(in srgb, var(--gb-surface-2) 85%, transparent); }
@keyframes stream-bot-pulse { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
.stream-cap { position: absolute; inset: auto 0 14px 0; display: flex; justify-content: space-between; padding: 0 20px;
  font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--gb-text-2); z-index: 2; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .gb-landing .stream-bot-img, .stream-bot::before { animation: none; }
  .gl-car, .gl-chips { scroll-behavior: auto; }
  .gl-car { transition: none; }
  .gl-slide { transition: none; }
  .gl-timeline li.is-now::before, .gl-timeline li.is-now::after { animation: none; }
  .gl-bf-live { animation: none; }
}

/* responsive */
@media (max-width: 860px) {
  .gl-wrap { padding-left: 16px; padding-right: 16px; }
  .gl-sec { padding-top: 56px; padding-bottom: 56px; }
  .gl-hero { padding-top: 32px; }
  .gl-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gl-h1 { font-size: 38px; }
  .gl-lede { font-size: 17px !important; }
  .gl-art { height: 380px; }
  .gb-landing .gl-art-img { height: 470px; }
  .gl-halo { width: 300px; height: 360px; }
  .gl-h2, .gl-h2-lg { font-size: 30px; }
  .gl-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-proof-cell + .gl-proof-cell { border-left: 0; }
  .gl-proof-cell:nth-child(n+3) { border-top: 1px solid var(--gb-border); }
  .gl-proof-cell:nth-child(even) { border-left: 1px solid var(--gb-border) !important; }
  .gl-sec-head { flex-direction: column; align-items: flex-start; }
  .gl-slide { flex-basis: 100%; grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 20px; }
  .gl-slide-cta { margin-top: 6px; }
  .gl-bf { height: 520px; }
  .gl-follow { margin-top: 4px; }
  .gl-h3 { font-size: 27px; }
  .gl-build, .gl-story { grid-template-columns: minmax(0, 1fr); }
  .gl-elect-date { font-size: 36px; }
  .gl-num { font-size: 30px; white-space: nowrap; }
  .gl-proof-cell { padding: 20px 14px; }
  .gl-center { flex-direction: column; align-items: stretch; }
}
@media (max-width: 620px) { .gb-landing .stream-figure { height: 440px; } }
/* phone: the post's handle drops to its own line so the name, posted date and platform fit */
@media (max-width: 620px) {
  .gl-post-top { flex-wrap: wrap; row-gap: 2px; }
  .gl-post-handle { order: 5; flex-basis: 100%; }
  .gl-igcard { width: 92px; }
  .gl-post { padding: 12px; gap: 10px; }
  .gl-post-av { width: 32px; height: 32px; }
  .gl-post-act { border-radius: 10px; padding: 3px 9px; }
  .gl-bf-win { padding: 10px; }
  .gb-landing a.gl-plat { font-size: 14px; padding: 0 10px; gap: 7px; white-space: nowrap; }
}
@media (max-width: 560px) {
  .stream-bot-name { font-size: 13px; margin-top: 5px; }
  .stream-cap { font-size: 9px; letter-spacing: .06em; padding: 0 12px; }
}

/* ---- Mobile hero: Liberty stands IN the hero, beside the headline (not stacked below it) ----
   The copy takes the left ~62%; the statue fills the hero's full height on the right, bleeding
   to the screen edge, with her torch + embers rising beside the headline. In light mode the
   phone hero becomes the same deep-green "night" panel the statue uses on desktop, so her pale
   line-art still glows (the hearings hero does the same: dark in both themes). */
/* Tablets: keep the desktop side-by-side columns, just narrower. */
@media (min-width: 621px) and (max-width: 860px) {
  .gl-hero-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
  .gl-art { height: 480px; }
  .gb-landing .gl-art-img { height: 560px; }
}
@media (max-width: 620px) {
  .gl-hero { position: relative; overflow: hidden; padding-top: 28px; padding-bottom: 36px; }
  .gl-hero-grid { position: relative; display: block; }
  .gl-hero-copy { position: relative; z-index: 2; max-width: 62%; gap: 16px; }
  .gl-hero-copy .gl-h1 { font-size: 34px; }
  .gl-hero-copy .gl-lede, .gl-hero-copy .gl-h1 { text-shadow: 0 1px 14px var(--gb-bg), 0 0 2px var(--gb-bg); }
  .gl-hero-copy .gl-btns { flex-direction: column; align-items: flex-start; }
  /* the overline runs the full hero width on its own line, above the statue's torch */
  .gl-hero-copy .gl-overline-ruled { width: calc(100vw - 64px); font-size: 12px; letter-spacing: .1em; }
  /* too long for one phone line: break after the dot ("Open civic data ·" / "Government Transparency") */
  .gl-hero-copy .gl-overline-ruled > span:not(.gl-rule) { text-align: center; line-height: 1.5; }
  .gl-hero-copy .gl-overline-ruled .gl-ol-2 { display: block; }
  .gl-art { position: absolute; z-index: 1; top: 34px; bottom: -36px; right: -16px; width: 70%; height: auto;
    border-radius: 0 !important; background: none !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%);
            mask-image: linear-gradient(to right, transparent 0, #000 26%); }
  .gb-landing .gl-art-img { height: 100%; top: 0; left: auto; right: -14%; transform: none; }
  .gl-halo { left: 62%; width: 280px; height: 420px; }
}
@media (max-width: 620px) {
  :root[data-theme="light"] .gl-hero {
    --gb-bg: #06140D; --gb-text: #F4F5F7; --gb-text-2: #F4F5F7; --gb-border-strong: #3A455C;
    --gb-hover: rgba(255,255,255,0.05); --gb-primary: #3DDC84; --gb-primary-hi: #7CEBB0;
    --gb-gold: #3DDC84; --gb-gold-hi: #7CEBB0; --gb-on-primary: #04140B;
    border-radius: 24px; background: radial-gradient(80% 60% at 78% 30%, rgba(61,220,132,.20), transparent 70%), #06140D; }
}
@media (max-width: 620px) and (prefers-color-scheme: light) {
  :root:not([data-theme]) .gl-hero {
    --gb-bg: #06140D; --gb-text: #F4F5F7; --gb-text-2: #F4F5F7; --gb-border-strong: #3A455C;
    --gb-hover: rgba(255,255,255,0.05); --gb-primary: #3DDC84; --gb-primary-hi: #7CEBB0;
    --gb-gold: #3DDC84; --gb-gold-hi: #7CEBB0; --gb-on-primary: #04140B;
    border-radius: 24px; background: radial-gradient(80% 60% at 78% 30%, rgba(61,220,132,.20), transparent 70%), #06140D; }
}