/* ==========================================================================
   GovGopher design system — the ONE stylesheet the marketing pages and the
   app dashboard both load.

   Layer 1 (:root) is the shared palette, derived from the live dashboard's
   teal + the logo's navy ring, hard-hat amber and cream. static/index.html
   maps its own legacy variable names onto these tokens, so the app and the
   landing page cannot drift apart.

   Layer 2 (.gg *) is the marketing layer. EVERY marketing rule is scoped
   under .gg so that loading this file inside the dashboard shell can only
   ever contribute variables — never a stray element rule.

   No build step, no imports, no webfonts: one request, system fonts, and it
   renders identically with JavaScript disabled.
   ========================================================================== */

:root {
  /* Surfaces — dark navy, deepest first */
  --gg-ink:        #060a11;
  --gg-navy:       #0b1422;
  --gg-navy-soft:  #101c2e;
  --gg-navy-lift:  #16243a;
  --gg-line:       #1e2f47;

  /* Ink — warm off-white so it sits with the amber, not against it */
  --gg-cream:      #fdfbf5;
  --gg-text:       #f2efe8;
  --gg-muted:      #93a3b6;   /* 7.2:1 on --gg-navy */
  --gg-faint:      #8794a6;   /* 6.0:1 — the dimmest text allowed to carry meaning */

  /* Teal — data, links, the app's existing accent (unchanged values) */
  --gg-teal:       #3db8cf;
  --gg-teal-deep:  #2d9fb5;
  --gg-teal-dim:   #14454f;

  /* Amber — the hard hat. The ONE action color: CTAs and highlights. */
  --gg-amber:      #e9ac3a;
  --gg-amber-lift: #f5bd52;
  --gg-amber-deep: #c98c1c;
  --gg-amber-ink:  #1c1405;

  /* Status */
  --gg-good:       #43c878;
  --gg-warn:       #d8a13a;
  --gg-bad:        #ff7b72;

  /* Shape + depth — rounded and soft, never sharp */
  --gg-r-sm:       10px;
  --gg-r:          16px;
  --gg-r-lg:       22px;
  --gg-shadow:     0 18px 44px rgba(0, 0, 0, .38);
  --gg-shadow-sm:  0 6px 18px rgba(0, 0, 0, .30);

  --gg-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;

  /* Derived roles that the two themes disagree on. Amber at full saturation is
     an excellent FILL (dark ink on top) but unreadable as TEXT on a light
     page, so text-amber gets its own token; same for the focus ring. The
     header backdrop needs its own token because it is a translucent color, not
     one of the surface steps. */
  --gg-amber-text: var(--gg-amber);
  --gg-focus:      var(--gg-amber);
  --gg-hdr-bg:     rgba(11, 20, 34, .92);
}

/* ==========================================================================
   Light theme — the same token names, recalibrated. html[data-theme="light"]
   is stamped by a tiny inline snippet BEFORE this sheet paints (no flash);
   first visit follows prefers-color-scheme, after that localStorage.ggTheme.
   Warm off-white surfaces (the logo's cream family), navy ink, the SAME amber
   actions (dark ink on amber passes AA either way), teal deepened for
   light-background contrast. Everything below the tokens — marketing layer and
   dashboard alike — reads through them, so this block IS the light theme.
   ========================================================================== */
html[data-theme="light"] {
  /* Surfaces — warm off-white, deepest first (the footer keeps its step) */
  --gg-ink:        #efe8d8;
  --gg-navy:       #faf6ec;
  --gg-navy-soft:  #fffdf7;
  --gg-navy-lift:  #f1ebdc;
  --gg-line:       #e2d9c2;

  /* Ink — navy text on cream */
  --gg-text:       #1b2940;   /* 12.9:1 on --gg-navy */
  --gg-muted:      #44556b;   /*  7.3:1 */
  --gg-faint:      #53637a;   /*  5.8:1 — dimmest text that carries meaning */

  /* Teal — deepened so links/data labels hold 4.5:1 on the cream surfaces */
  --gg-teal:       #0f6e83;
  --gg-teal-deep:  #0c5e70;
  --gg-teal-dim:   #d2e8ee;

  /* Amber — the fill stays the brand amber (its ink is dark, so contrast is
     carried by the ink); amber-as-TEXT and the focus ring darken to hold AA. */
  --gg-amber-text: #8a5f0b;   /* 4.9:1 on --gg-navy */
  --gg-amber-deep: #a97507;
  --gg-focus:      #a97507;

  /* Status — text-safe on the light surfaces */
  --gg-good:       #1e7b45;
  --gg-warn:       #8a6114;
  --gg-bad:        #bb3a2e;

  --gg-shadow:     0 18px 44px rgba(70, 58, 25, .16);
  --gg-shadow-sm:  0 6px 18px rgba(70, 58, 25, .11);

  --gg-hdr-bg:     rgba(250, 246, 236, .92);

  color-scheme: light;
}

/* ==========================================================================
   Marketing layer — everything below is scoped to .gg
   ========================================================================== */

.gg {
  margin: 0;
  background: var(--gg-navy);
  color: var(--gg-text);
  font-family: var(--gg-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

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

.gg img { max-width: 100%; height: auto; }

/* Underlines are opt-in everywhere; this rule sets no color, so it can't
   collide with anything. */
.gg a { text-decoration: none; }

/* Prose links only. Component anchors — buttons, the brand lockup, the skip
   link, nav items — carry their own color, and a bare `.gg a` colour rule
   outranks a single-class component rule on specificity, which is exactly how a
   CTA ends up with teal-on-amber text at 1.2:1. Excluding classed anchors
   outright means that collision cannot happen, whatever gets added later.
   Body-copy links stay underlined: teal against muted gray is not a 3:1
   difference, so color alone would not mark them. */
.gg a:not([class]) {
  color: var(--gg-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gg a:not([class]):hover { text-decoration-thickness: 2px; }

.gg :focus-visible {
  outline: 3px solid var(--gg-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — keyboard users shouldn't tab the whole header every page */
.gg-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--gg-amber);
  color: var(--gg-amber-ink);
  font-weight: 700;
  border-radius: 0 0 var(--gg-r-sm) 0;
}
.gg-skip:focus { left: 0; }

.gg-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- The badge: the logo PNG is opaque, so it ALWAYS sits on a light disc --
   never bare on a dark surface, where it would read as a white rectangle. */
.gg-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gg-cream);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35),
              inset 0 0 0 1px rgba(255, 255, 255, .55);
  overflow: hidden;
}
.gg-badge img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  display: block;
}
.gg-badge--lg { width: 132px; height: 132px; box-shadow: var(--gg-shadow),
                inset 0 0 0 2px rgba(255, 255, 255, .6); }
@media (min-width: 900px) { .gg-badge--lg { width: 168px; height: 168px; } }

/* --- Header --------------------------------------------------------------- */
.gg-hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--gg-hdr-bg);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--gg-line);
}
.gg-hdr-in {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}
.gg-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  color: var(--gg-text);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.01em;
}
.gg-brand:hover { text-decoration: none; }
.gg-brand b { color: var(--gg-amber-text); font-weight: 800; }

.gg-hdr nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Layout for every nav item; color for the plain ones only, so the Start-free
   button keeps its own ink. */
.gg-hdr nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--gg-r-sm);
  font-weight: 600;
  font-size: 15px;
}
.gg-hdr nav a:not(.gg-btn) { color: var(--gg-text); text-decoration: none; }
.gg-hdr nav a:not(.gg-btn):hover { background: var(--gg-navy-lift); }
.gg-hdr .gg-navlink-quiet { display: none; }

@media (min-width: 620px) {
  .gg-hdr .gg-navlink-quiet { display: inline-flex; }
}

/* Theme toggle — a quiet icon button, top-level in the header. The two icons
   are both in the markup; the active theme picks which one shows, so the
   button needs no JS to render its initial state correctly. Hidden when
   scripts are off (a toggle that cannot toggle is noise). */
.gg-theme-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--gg-line);
  border-radius: 999px;
  background: transparent;
  color: var(--gg-text);
  cursor: pointer;
}
.gg-theme-btn:hover { border-color: var(--gg-teal); color: var(--gg-teal); }
.gg-theme-btn svg { width: 19px; height: 19px; }
.gg-theme-btn .gg-ic-sun { display: block; }
.gg-theme-btn .gg-ic-moon { display: none; }
html[data-theme="light"] .gg-theme-btn .gg-ic-sun { display: none; }
html[data-theme="light"] .gg-theme-btn .gg-ic-moon { display: block; }
/* data-theme is stamped by the inline snippet — if it is absent, JS is off and
   the page is locked to dark; hide the control that could not do anything. */
html:not([data-theme]) .gg-theme-btn { display: none; }

/* --- Buttons -------------------------------------------------------------- */
.gg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}
.gg-btn:hover { text-decoration: none; }

.gg-btn--amber {
  background: var(--gg-amber);
  color: var(--gg-amber-ink);
  box-shadow: 0 8px 22px rgba(233, 172, 58, .26);
}
.gg-btn--amber:hover { background: var(--gg-amber-lift); }

.gg-btn--ghost {
  background: transparent;
  color: var(--gg-text);
  border-color: var(--gg-line);
}
.gg-btn--ghost:hover { border-color: var(--gg-teal); color: var(--gg-teal); }

.gg-btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* --- Sections ------------------------------------------------------------- */
/* scroll-margin clears the sticky header: without it, jumping to #pricing or
   #faq parks the section heading underneath it. */
.gg-sec { padding: 56px 0; border-top: 1px solid var(--gg-line); }
.gg-sec[id] { scroll-margin-top: 88px; }
.gg-sec:first-of-type { border-top: 0; }
.gg-sec--flat { border-top: 0; }

.gg-eyebrow {
  margin: 0 0 10px;
  color: var(--gg-teal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.gg-h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 800;
}
.gg-lede {
  margin: 0 0 28px;
  max-width: 62ch;
  color: var(--gg-muted);
  font-size: clamp(16px, 2.2vw, 19px);
}

/* --- Hero ----------------------------------------------------------------- */
.gg-hero {
  position: relative;
  padding: 40px 0 52px;
  background:
    radial-gradient(60% 70% at 50% -10%, rgba(45, 159, 181, .16), transparent 70%),
    radial-gradient(50% 60% at 85% 10%, rgba(233, 172, 58, .10), transparent 70%);
}
.gg-hero-in { display: grid; gap: 28px; justify-items: center; text-align: center; }
/* width:100% rather than relying on the parent's justify-items — a shrink-wrapped
   column would collapse the full-width CTA buttons on a phone. */
.gg-hero-copy { display: grid; gap: 20px; width: 100%; }
/* On a phone the mascot leads — it's the friendliest thing on the page and it
   costs nothing above the fold. On desktop it moves back beside the copy. */
.gg-hero-art { order: -1; }
.gg-hero h1 {
  margin: 0 auto;
  font-size: clamp(34px, 8vw, 62px);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 800;
  max-width: 16ch;
}
.gg-hero h1 em { font-style: normal; color: var(--gg-amber-text); }
.gg-hero-sub {
  margin: 0 auto;
  max-width: 56ch;
  color: var(--gg-muted);
  font-size: clamp(17px, 2.6vw, 21px);
}
.gg-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.gg-hero-cta .gg-btn { flex: 1 1 260px; max-width: 340px; }
.gg-hero-note { margin: 0; color: var(--gg-faint); font-size: 14.5px; }

@media (min-width: 900px) {
  .gg-hero { padding: 64px 0 76px; }
  .gg-hero-in {
    grid-template-columns: 1.35fr .65fr;
    align-items: center;
    justify-items: start;
    text-align: left;
    gap: 44px;
  }
  .gg-hero-copy { gap: 24px; }
  .gg-hero h1, .gg-hero-sub { margin-inline: 0; }
  .gg-hero-cta { justify-content: flex-start; }
  .gg-hero-art { order: 0; justify-self: center; }
}

/* --- Stat strip ----------------------------------------------------------- */
.gg-stats {
  display: grid;
  gap: 12px;
  padding: 0 0 8px;
  list-style: none;
  margin: 0;
}
.gg-stats li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 16px 18px;
  background: var(--gg-navy-soft);
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-r);
}
.gg-stats b {
  color: var(--gg-teal);
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}
.gg-stats span { color: var(--gg-muted); font-size: 15px; }

@media (min-width: 700px) {
  .gg-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  /* auto-fit rather than a fixed count: the strip has five entries, so any
     fixed 2- or 4-column grid strands an orphan on the last row. */
  .gg-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .gg-stats li { flex-direction: column; gap: 4px; }
}

/* --- Generic cards -------------------------------------------------------- */
.gg-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .gg-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .gg-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .gg-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.gg-card {
  padding: 24px;
  background: var(--gg-navy-soft);
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-r-lg);
  box-shadow: var(--gg-shadow-sm);
}
.gg-card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.gg-card p { margin: 0; color: var(--gg-muted); font-size: 15.5px; }

/* Problem / solution pair */
.gg-vs .gg-card--problem { border-color: rgba(255, 123, 114, .25); }
.gg-vs .gg-card--solution { border-color: rgba(233, 172, 58, .35); }
.gg-vs h3 { font-size: 17px; text-transform: uppercase; letter-spacing: .10em; }
.gg-vs .gg-card--problem h3 { color: var(--gg-bad); }
.gg-vs .gg-card--solution h3 { color: var(--gg-amber-text); }
.gg-vs p { color: var(--gg-text); font-size: 17px; }

/* Numbered steps */
.gg-step { position: relative; padding-top: 26px; }
.gg-step .gg-num {
  position: absolute;
  top: -18px;
  left: 24px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gg-amber);
  color: var(--gg-amber-ink);
  font-weight: 800;
  font-size: 18px;
  box-shadow: var(--gg-shadow-sm);
}

/* Feature grid */
.gg-feat h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.gg-feat .gg-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gg-teal);
}

/* Beginner block */
.gg-beginner {
  display: grid;
  gap: 22px;
  padding: 28px 24px;
  background: linear-gradient(180deg, var(--gg-navy-soft), var(--gg-navy));
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-r-lg);
  box-shadow: var(--gg-shadow);
}
.gg-beginner ul { margin: 0; padding-left: 22px; color: var(--gg-muted); }
.gg-beginner li { margin-bottom: 8px; }
.gg-beginner li b { color: var(--gg-text); }

@media (min-width: 860px) {
  .gg-beginner { grid-template-columns: 132px 1fr; align-items: start; padding: 34px; gap: 30px; }
}

/* --- Pricing -------------------------------------------------------------- */
.gg-pricebanner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin: 0 0 26px;
  padding: 14px 18px;
  background: rgba(233, 172, 58, .10);
  border: 1px solid rgba(233, 172, 58, .34);
  border-radius: var(--gg-r);
  color: var(--gg-text);
  font-size: 15.5px;
}
.gg-pricebanner b { color: var(--gg-amber-text); }

/* stretch, not start: equal-height cards let each card's margin-top:auto CTA
   land on a shared baseline across the row. */
.gg-plans { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 700px) { .gg-plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .gg-plans { grid-template-columns: repeat(4, 1fr); } }

.gg-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 22px;
  background: var(--gg-navy-soft);
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-r-lg);
  box-shadow: var(--gg-shadow-sm);
}
.gg-plan--best {
  border-color: var(--gg-amber);
  box-shadow: var(--gg-shadow), 0 0 0 1px rgba(233, 172, 58, .35);
}
.gg-plan-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gg-plan h3 { margin: 0; font-size: 20px; font-weight: 800; }
.gg-tag {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--gg-amber);
  color: var(--gg-amber-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.gg-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gg-price .gg-amt { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.gg-price .gg-per { color: var(--gg-muted); font-size: 15px; }
.gg-was { margin: -6px 0 0; color: var(--gg-faint); font-size: 14px; }
.gg-was s { color: var(--gg-faint); }
.gg-was b { color: var(--gg-amber-text); font-weight: 700; }

.gg-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.gg-plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--gg-muted);
  font-size: 15.5px;
}
.gg-plan li::before {
  content: "✓";
  flex: none;
  color: var(--gg-teal);
  font-weight: 800;
}
.gg-plan li.gg-plan-base { color: var(--gg-text); font-weight: 600; }
.gg-plan li.gg-plan-base::before { color: var(--gg-amber-text); content: "★"; }
.gg-plan .gg-btn { margin-top: auto; width: 100%; }
.gg-plan-trial { margin: 0; color: var(--gg-faint); font-size: 13.5px; text-align: center; }

/* --- FAQ (details/summary — no JS) ---------------------------------------- */
.gg-faq { display: grid; gap: 12px; }
.gg-faq details {
  background: var(--gg-navy-soft);
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-r);
  overflow: hidden;
}
.gg-faq summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  min-height: 56px;
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  list-style: none;
}
.gg-faq summary::-webkit-details-marker { display: none; }
.gg-faq summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  color: var(--gg-amber-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.gg-faq details[open] summary::after { content: "–"; }
.gg-faq details[open] summary { border-bottom: 1px solid var(--gg-line); }
.gg-faq .gg-answer { padding: 16px 20px 20px; margin: 0; color: var(--gg-muted); font-size: 16px; }
.gg-faq .gg-answer p { margin: 0 0 10px; }
.gg-faq .gg-answer p:last-child { margin-bottom: 0; }

/* --- Final CTA band ------------------------------------------------------- */
.gg-band {
  margin: 0;
  padding: 48px 0 56px;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(233, 172, 58, .14), transparent 70%),
    var(--gg-navy-soft);
  border-top: 1px solid var(--gg-line);
  text-align: center;
}
.gg-band .gg-h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.gg-band .gg-lede { margin-left: auto; margin-right: auto; }
.gg-band-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.gg-band-cta .gg-btn { flex: 1 1 260px; max-width: 320px; }

/* --- Footer --------------------------------------------------------------- */
.gg-foot {
  padding: 34px 0 44px;
  background: var(--gg-ink);
  border-top: 1px solid var(--gg-line);
  color: var(--gg-muted);
  font-size: 15px;
}
.gg-foot-in { display: grid; gap: 18px; }
.gg-foot-brand { display: flex; align-items: center; gap: 11px; color: var(--gg-text); font-weight: 700; }
.gg-foot p { margin: 0; max-width: 62ch; }
.gg-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.gg-foot nav a { color: var(--gg-muted); font-weight: 600; text-decoration: none; }
.gg-foot nav a:hover { color: var(--gg-teal); text-decoration: underline; }
.gg-foot-legal { color: var(--gg-faint); font-size: 13.5px; }

@media (min-width: 860px) {
  .gg-foot-in { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .gg-foot nav { justify-content: flex-end; align-content: start; }
}

/* --- Long-form legal pages ------------------------------------------------ */
/* Longhand only: this element also carries .gg-wrap, and a padding shorthand
   here would reset that rule's horizontal gutter to zero. */
.gg-legal { padding-top: 44px; padding-bottom: 64px; }
.gg-legal h1 { margin: 0 0 6px; font-size: clamp(30px, 6vw, 42px); letter-spacing: -.02em; }
.gg-legal .gg-updated { margin: 0 0 30px; color: var(--gg-faint); font-size: 14.5px; }
.gg-legal h2 { margin: 34px 0 10px; font-size: 21px; letter-spacing: -.01em; }
.gg-legal p, .gg-legal li { color: var(--gg-muted); max-width: 72ch; }
.gg-legal li { margin-bottom: 7px; }

/* --- Motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gg *, .gg *::before, .gg *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}