/* ============================================================================
   GREENDA — design tokens for the About Us modules
   Single source of truth. build.py injects this into the top of every
   module.css, scoped to that module's own root class so it cannot leak into
   the rest of the theme (same approach as Greenda — Hero's .gdh block).

   DO NOT edit the copy inside a module.css — edit this file and run:
       python3 build.py

   Values taken verbatim from the Greenda design system
   (_ds/greenda-design-system-.../colors_and_type.css).
   Fonts are NOT declared here: Work Sans is already in the portal, and each
   module exposes optional self-hosted font URL fields that emit @font-face
   via require_css.
   ============================================================================ */

.gmn {
  /* Green ramp — 500 is brand primary */
  --green-50:#E6F0DA; --green-100:#D4E8C2; --green-200:#B7DC9F; --green-300:#9BD17C;
  --green-400:#80C460; --green-500:#78B443; --green-600:#5F9336; --green-700:#477229;
  --green-800:#30521D; --green-900:#193212;

  /* Blue ramp — 900 is brand ink */
  --blue-50:#E6F0FA; --blue-900:#1D2331; --blue-950:#141A26; --blue-975:#0C1119;

  /* Purple accent */
  --purple-500:#8B53FE;

  /* Neutrals — the workhorse ramp */
  --neutral-0:#FFFFFF; --neutral-25:#F8FAF9; --neutral-50:#F3F5F4; --neutral-100:#E9EBEA;
  --neutral-200:#D4D7D6; --neutral-300:#BCC0BF; --neutral-400:#9FA4A3; --neutral-500:#818786;
  --neutral-600:#656C6B; --neutral-700:#4A5251; --neutral-800:#303837; --neutral-900:#1A2221;

  /* On-colour foregrounds */
  --fg-on-green:#0B1A05;

  /* Page canvas used by the About Us design */
  --gd-page-bg:#FAFBFC;

  /* Type — same fallback chain as the existing Greenda modules */
  --font-sans:'Work Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Work Sans','Inter',system-ui,sans-serif;
  --font-hand:'Caveat','Bradley Hand','Segoe Script',cursive;
  --fw-regular:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; --fw-extra:800;
  --fs-xxs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px;
  --fs-lg:20px; --fs-xl:24px; --fs-2xl:30px; --fs-3xl:38px; --fs-4xl:48px;
  --tracking-eyebrow:0.12em;

  /* Radii */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px; --r-pill:999px;

  /* Shadows */
  --shadow-sm:0 1px 2px 0 rgba(29,35,49,0.05), 0 2px 6px -2px rgba(29,35,49,0.06);
  --shadow-md:0 4px 14px -4px rgba(29,35,49,0.10), 0 2px 4px -1px rgba(29,35,49,0.05);

  /* Motion */
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:520ms;

  /* About Us page layout — from the design file */
  --gd-measure:1080px;   /* max-width of every section's inner container */
  --gd-gutter:32px;      /* horizontal section padding */
}

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

/* ==========================================================================
   greenda-mega-nav — module styles
   GENERATED by build.py from src/css/greenda-mega-nav.css — do not edit this file.
   ========================================================================== */

/* greenda-mega-nav — sticky mega-menu navigation .......... prefix: .gmn-
   Layout, spacing and type are taken from
   mega-menu-naviagtion/project/Greenda Hero.dc.html (the nav block).
   Every colour reads a --gmn-* custom property that module.html sets from the
   module's colour fields, so nothing here needs editing to re-brand the bar. */

.gmn {
  /* Tints the shared token file does not carry. Scoped to .gmn so they cannot
     leak into the rest of the theme. */
  --blue-100: #C4D9F5;
  --yellow-100: #FFFBCB;
  --yellow-300: #FFF5A6;
  --purple-50: #F5F0FF;
  --purple-200: #D4BFFF;
  --purple-700: #5825B7;
  --red-50: #FDECEB;
  --red-200: #F5A79F;

  --gmn-shadow: 0 18px 40px -16px rgba(29, 35, 49, 0.18), 0 4px 12px -4px rgba(29, 35, 49, 0.06);

  position: relative;
  z-index: 60;
  font-family: var(--font-sans);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.gmn--sticky {
  position: sticky;
  top: 0;
}

/* Placement ---------------------------------------------------------------
   "banded"  — the bar sits in a strip of its own, coloured by the field.
   "overlay" — the strip is transparent and the section below is pulled up
               underneath the floating bar, the way the design has it. The
               pull-up is exactly the height of the top row (never the open
               mega panel), measured by module.js into --gmn-h. */
.gmn--banded {
  background: var(--gmn-shell-bg);
  transition: background var(--dur-3) var(--ease-out);
}

/* The strip exists to blend the bar into the section at the top of the page.
   Once the page scrolls there is nothing to blend into, so it fades out and
   the bar floats over whatever is passing underneath. */
.gmn--banded.gmn--fadestrip.gmn--raise { background: transparent; }

.gmn--overlay {
  background: transparent;
  margin-bottom: calc(-1 * var(--gmn-h, 0px));
}

.gmn-shell {
  padding: var(--gmn-pad-y) var(--gmn-pad-x) 0;
}

/* In "banded" placement the gap below the bar is just the shell's own bottom
   padding. In "overlay" it has to be added to the section underneath instead,
   which module.js handles — see measureOverlay(). */
.gmn--banded .gmn-shell { padding-bottom: max(0px, var(--gmn-pad-below, 0px)); }

.gmn-bar {
  max-width: var(--gmn-max);
  margin: 0 auto;
  background: var(--gmn-bar-bg);
  border-radius: var(--gmn-radius);
  transition: box-shadow var(--dur-3) var(--ease-out);
}

/* Exactly one of these three is set from the "Bar edge" field. */
.gmn--shadow .gmn-bar { box-shadow: var(--gmn-shadow); }
.gmn--flat .gmn-bar { box-shadow: none; }
.gmn--bordered .gmn-bar { box-shadow: inset 0 0 0 1px var(--gmn-border); }

/* A sticky shadowed bar earns its shadow only once the page has moved.
   Scoped to --shadow so "flat" and "bordered" stay as chosen. */
.gmn--shadow.gmn--sticky:not(.gmn--raise) .gmn-bar { box-shadow: none; }
.gmn--shadow.gmn--sticky.gmn--raise .gmn-bar { box-shadow: var(--gmn-shadow); }

.gmn-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Inline SVG does not reliably honour the `hidden` attribute on its own. */
.gmn [hidden] { display: none; }

.gmn-icon {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- top row */

.gmn-desktop { display: block; }
.gmn-mobile { display: none; }

.gmn-row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.4vw, 40px);
  padding: 12px 16px 12px 22px;
  min-width: 0;
}

.gmn-logo {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.gmn-logo img {
  width: auto;
  display: block;
  height: var(--gmn-logo-h);
}

.gmn-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-shrink: 1;
}

.gmn-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--gmn-text);
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}

.gmn-top:hover,
.gmn-top:focus-visible { color: var(--gmn-text-hover); }
.gmn-top[aria-expanded="true"] { color: var(--gmn-text-hover); }

.gmn-top-chev {
  width: 14px;
  height: 14px;
  opacity: 0.5;
  transition: transform var(--dur-2) var(--ease-out);
}

.gmn-top[aria-expanded="true"] .gmn-top-chev { transform: rotate(180deg); }

.gmn-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  flex: none;
}

/* ⌘K search affordance — drops out first as the bar narrows, exactly as the
   design does, so the nav never wraps. */
.gmn-search {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--gmn-muted);
  box-sizing: content-box;
  overflow: hidden;
  max-width: clamp(0px, calc((100vw - 1150px) * 40), 62px);
  border-right: solid var(--gmn-border);
  border-right-width: clamp(0px, calc((100vw - 1150px) * 40), 1px);
  padding-right: clamp(0px, calc((100vw - 1150px) * 40), 14px);
}

.gmn-search-key {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-xs);
}

.gmn-search .gmn-icon { width: 15px; height: 15px; }

/* ------------------------------------------------------- language switcher */

.gmn-lang { position: relative; }

.gmn-lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 7px 0 6px;
  background: var(--gmn-chip-bg);
  border: 1px solid var(--gmn-chip-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  color: var(--gmn-text);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.gmn-lang-btn:hover { border-color: var(--gmn-chip-border-hover); }
.gmn-lang-btn .gmn-icon { width: 14px; height: 14px; opacity: 0.45; }
.gmn-lang-btn .gmn-lang-globe { width: 17px; height: 17px; opacity: 0.7; }

.gmn-flag {
  width: 24px;
  height: 17px;
  flex: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  background-size: cover;
  background-position: center;
  display: block;
}

/* Never render an empty chip if the language code is missing. */
.gmn-code:empty { display: none; }

.gmn-code {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 17px;
  flex: none;
  border-radius: 3px;
  background: var(--gmn-panel-hover-bg);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gmn-text);
}

.gmn-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 216px;
  padding: 8px;
  background: var(--gmn-panel-bg);
  border: 1px solid var(--gmn-border);
  border-radius: var(--r-lg);
  box-shadow: var(--gmn-shadow);
  z-index: 40;
}

.gmn-lang-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--gmn-panel-title);
  text-decoration: none;
  transition: background var(--dur-2) var(--ease-out);
}

.gmn-lang-opt:hover,
.gmn-lang-opt:focus-visible { background: var(--gmn-panel-hover-bg); }
.gmn-lang-opt[aria-current="true"] { background: var(--gmn-panel-hover-bg); }
.gmn-lang-opt .gmn-flag { width: 30px; height: 22px; }
.gmn-lang-opt .gmn-code { min-width: 30px; height: 22px; font-size: 11px; }
.gmn-lang-opt-label { flex: 1; text-align: left; }
.gmn-lang-opt .gmn-icon { width: 19px; height: 19px; color: var(--gmn-panel-hover-text); }

/* ------------------------------------------------------------ bar buttons */

.gmn-signin {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--gmn-text);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out);
}

.gmn-signin:hover { color: var(--gmn-text-hover); }

.gmn-cta {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  color: var(--gmn-cta-text);
  background: var(--gmn-cta-bg);
  padding: 11px 20px;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background var(--dur-2) var(--ease-out);
}

.gmn-cta:hover { background: var(--gmn-cta-hover-bg); }

/* ---------------------------------------------------------- mega panels */

.gmn-panel {
  border-top: 1px solid var(--gmn-border);
  background: var(--gmn-panel-bg);
  border-radius: 0 0 var(--gmn-radius) var(--gmn-radius);
}

.gmn-panel[hidden] { display: none; }

.gmn-panel-in {
  padding: 34px 40px 38px;
  display: grid;
  gap: 40px;
  align-items: start;
}

.gmn-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.gmn-col--rich { gap: 22px; }

.gmn-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gmn-eyebrow);
}

/* Compact row: icon tile + label */
.gmn-link {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--gmn-panel-title);
  text-decoration: none;
  padding: 10px;
  margin: -10px;
  border-radius: var(--r-md);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

/* Rich row: icon tile + title + description */
.gmn-link--rich {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
}

a.gmn-link:hover,
a.gmn-link:focus-visible {
  background: var(--gmn-panel-hover-bg);
  color: var(--gmn-panel-hover-text);
}

/* Each tone is one colour field; the fill and outline are tints of it, so a
   marketer re-brands a whole tile style by changing a single swatch. */
.gmn-tile {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  --gmn-tile: var(--gmn-tile-green);
  background: var(--green-50);
  border: 1px solid var(--green-200);
  color: var(--gmn-tile-icon);
}

.gmn-tile .gmn-icon { opacity: 0.7; }
.gmn-tile--blue { --gmn-tile: var(--gmn-tile-blue); background: var(--blue-50); border-color: var(--blue-100); }
.gmn-tile--yellow { --gmn-tile: var(--gmn-tile-yellow); background: var(--yellow-100); border-color: var(--yellow-300); }
.gmn-tile--purple { --gmn-tile: var(--gmn-tile-purple); background: var(--purple-50); border-color: var(--purple-200); }
.gmn-tile--red { --gmn-tile: var(--gmn-tile-red); background: var(--red-50); border-color: var(--red-200); }
.gmn-tile--plain { background: transparent; border-color: transparent; }

@supports (color: color-mix(in srgb, red, blue)) {
  .gmn-tile:not(.gmn-tile--plain) {
    background: color-mix(in srgb, var(--gmn-tile) 16%, transparent);
    border-color: color-mix(in srgb, var(--gmn-tile) 42%, transparent);
  }
}

.gmn-link-title {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  color: var(--gmn-panel-title);
}

a.gmn-link--rich:hover .gmn-link-title,
a.gmn-link--rich:focus-visible .gmn-link-title { color: var(--gmn-panel-hover-text); }

.gmn-link-desc {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--gmn-panel-desc);
  line-height: 1.45;
  margin-top: 3px;
}

.gmn-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--gmn-badge-bg);
  border: 1px solid var(--gmn-badge-border);
  font-size: var(--fs-xxs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gmn-badge-text);
  vertical-align: 2px;
}

/* Rows set to "No link" render as <span>, so they never take the hover fill
   or the pointer cursor — they read as ordinary text, which is what a
   not-yet-live item should read as. */
.gmn-link--static { cursor: default; }

/* Text column — blurb plus optional app-store buttons */
.gmn-col-text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--gmn-panel-desc);
  text-wrap: pretty;
}

.gmn-stores {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gmn-store {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 15px;
  border: 1px solid var(--gmn-chip-border);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

a.gmn-store:hover {
  background: var(--gmn-chip-bg);
  border-color: var(--gmn-chip-border-hover);
}

.gmn-store img { width: 24px; height: 24px; flex: none; }
.gmn-store-lines { display: flex; flex-direction: column; line-height: 1.15; }
.gmn-store-small {
  font-size: 10px;
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gmn-panel-desc);
}
.gmn-store-big { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--gmn-panel-title); }

/* Promo card */
.gmn-promo {
  display: block;
  border-radius: var(--r-md);
  padding: 22px;
  text-decoration: none;
  background: var(--gmn-promo-dark-bg);
}

.gmn-promo--tint { background: var(--gmn-promo-tint-bg); border: 1px solid var(--gmn-promo-tint-border); }

/* The promo card is an <a>, so its parts are spans — they need blockifying. */
.gmn-promo-media {
  display: block;
  height: 122px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(#274a2a, #16311b);
}

.gmn-promo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gmn-promo-eyebrow {
  display: block;
  margin-top: 16px;
  font-size: var(--fs-xxs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gmn-promo-dark-eyebrow);
}

.gmn-promo-title {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--gmn-promo-dark-title);
  line-height: 1.3;
}

.gmn-promo--tint .gmn-promo-eyebrow { color: var(--gmn-promo-tint-eyebrow); }
.gmn-promo--tint .gmn-promo-title { color: var(--gmn-promo-tint-title); }

.gmn-promo-stats { margin-top: 14px; display: flex; gap: 26px; }
.gmn-promo-media img { display: block; }
.gmn-promo-stat { display: block; }
.gmn-promo-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extra);
  color: var(--gmn-promo-stat);
  font-feature-settings: "tnum" 1;
}
.gmn-promo-unit { display: block; font-size: var(--fs-xs); color: var(--gmn-panel-desc); }
.gmn-promo--dark .gmn-promo-num { color: var(--gmn-promo-dark-eyebrow); }
.gmn-promo--dark .gmn-promo-unit { color: var(--neutral-400); }

/* --------------------------------------------------------------- mobile */

.gmn-mobile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
}

.gmn-burger {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 13px;
  background: var(--gmn-chip-bg);
  border: 1px solid var(--gmn-chip-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  color: var(--gmn-text);
}

.gmn-burger .gmn-icon { width: 20px; height: 20px; opacity: 0.7; }

.gmn-sheet {
  border-top: 1px solid var(--gmn-border);
  padding: 18px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: calc(100vh - var(--gmn-sheet-offset, 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gmn-sheet[hidden] { display: none; }

.gmn-sheet-langwrap { display: flex; flex-direction: column; gap: 9px; }

.gmn-sheet-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--gmn-panel-desc);
}

.gmn-sheet-langs {
  display: flex;
  gap: 8px;
  padding: 5px;
  background: var(--gmn-chip-bg);
  border: 1px solid var(--gmn-chip-border);
  border-radius: 16px;
}

.gmn-sheet-lang {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-height: 56px;
  padding: 0 14px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--gmn-panel-title);
  text-decoration: none;
}

.gmn-sheet-lang[aria-current="true"] {
  background: var(--gmn-bar-bg);
  border-color: var(--gmn-cta-bg);
}

.gmn-sheet-lang .gmn-flag { width: 34px; height: 25px; }
.gmn-sheet-lang .gmn-code { min-width: 34px; height: 25px; font-size: 12px; }

.gmn-sheet-nav { display: flex; flex-direction: column; }

.gmn-sheet-item { border-bottom: 1px solid var(--gmn-border); }

.gmn-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--gmn-panel-title);
  text-decoration: none;
  text-align: left;
}

.gmn-sheet-top .gmn-icon { width: 20px; height: 20px; opacity: 0.35; }
.gmn-sheet-top[aria-expanded="true"] .gmn-icon { transform: rotate(90deg); }

.gmn-sheet-sub { padding: 2px 0 16px; display: flex; flex-direction: column; gap: 18px; }
.gmn-sheet-sub[hidden] { display: none; }
.gmn-sheet-col { display: flex; flex-direction: column; gap: 12px; }

.gmn-sheet-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--gmn-panel-title);
  text-decoration: none;
}

.gmn-sheet-ctas { display: flex; flex-direction: column; gap: 10px; }

.gmn-sheet-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: var(--r-pill);
  background: var(--gmn-cta-bg);
  color: var(--gmn-cta-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  text-decoration: none;
}

.gmn-sheet-cta--ghost {
  background: transparent;
  border: 1px solid var(--gmn-chip-border);
  color: var(--gmn-panel-title);
}

/* Narrow desktop: tighten the bar and drop the sign-in link before anything
   can overflow. Below the mobile breakpoint both reappear in the sheet. */
@media (max-width: 1080px) {
  .gmn-row { gap: 10px; padding-left: 16px; }
  .gmn-top { padding: 9px 8px; }
  .gmn-actions { gap: 10px; }
  .gmn-signin { display: none; }
  .gmn-cta { padding: 10px 16px; }
}

/* --------------------------------------------------------- mode switching
   JS sets .gmn--mobile / .gmn--desktop from the module's breakpoint field.
   The media query is the pre-JS (and no-JS) fallback at the default width. */

@media (max-width: 880px) {
  .gmn:not(.gmn--desktop) .gmn-desktop { display: none; }
  .gmn:not(.gmn--desktop) .gmn-mobile { display: block; }
}

.gmn--mobile .gmn-desktop { display: none; }
.gmn--mobile .gmn-mobile { display: block; }
.gmn--desktop .gmn-mobile { display: none; }
.gmn--desktop .gmn-desktop { display: block; }

/* Panels animate in only once JS has taken over, so a no-JS visitor still
   sees them via :focus-within / hover with no half-faded state. */
.gmn--ready .gmn-panel { animation: gmn-panel-in var(--dur-3) var(--ease-out); }

@keyframes gmn-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.gmn :focus-visible {
  outline: 2px solid var(--gmn-cta-bg);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  .gmn *,
  .gmn *::before,
  .gmn *::after { animation: none !important; transition: none !important; }
}