/* ==========================================================================
   gq-system.css — the GreenQbits visual system.
   Graphite / beige, Geist Variable (self-hosted), light by default, dark by
   preference. One file, three jobs:

     1. Tokens + primitives for every surface (public shell, product briefs,
        awaiting-processing, docs, articles, 404). Those pages load ONLY this
        file, so nothing here needs to fight the legacy cascade.
     2. The shared chrome (gq-header / gq-nav / gq-prefs / gq-footer). The
        class names are new on purpose: styles.css locked the old
        .access-header/.access-nav chrome behind hundreds of !important
        declarations, so renaming the markup is what frees it. The data-*
        hooks auth-flow.js needs (data-theme-toggle, data-type-scale,
        data-language-toggle, data-contact-open, data-logout) are unchanged.
     3. A retune of the legacy --access-* tokens for the surfaces that still
        need styles.css for their JS-rendered components (portal, admin, demo,
        Dyson dashboard / strategy). Those bodies carry .gq-legacy; the few
        !important declarations in that block exist only to beat the legacy
        page-background gradients and fonts.

   Rules of the system (AGENTS.md):
     - no decorative gradients, no nested cards, no inert controls
     - motion only for feedback and state; prefers-reduced-motion honoured
     - keyboard-visible focus everywhere; 1:1 / +50% / +100% type scale
     - CSP: no inline styles, no external fonts; icons are CSS or data: URIs
   ========================================================================== */

/* ---------- 0. Font ---------------------------------------------------- */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist_Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Tokens -------------------------------------------------- */
:root {
  color-scheme: light;

  /* beige ground */
  --gq-bg: #ede9e0;
  --gq-surface: #f7f5ef;
  --gq-surface-2: #e4dfd3;
  --gq-line: #d3cdc0;
  --gq-line-strong: #8a8270;   /* control boundaries: >= 3:1 on surface and page (WCAG 1.4.11) */

  /* graphite ink — every text token below clears 4.5:1 on --gq-bg */
  --gq-ink: #1c1e21;
  --gq-ink-2: #3c4046;
  --gq-ink-3: #595e65;
  --gq-ink-4: #767b82;          /* decorative only, never body text */

  /* functional accents, low chroma */
  --gq-green: #2b6a4c;
  --gq-green-soft: #dbe6de;
  --gq-amber: #7f5311;
  --gq-amber-soft: #ede1c9;
  --gq-red: #953a2f;
  --gq-red-soft: #eedbd7;
  --gq-blue: #35597e;
  --gq-blue-soft: #dbe3ed;

  /* controls */
  --gq-primary-bg: #26292d;
  --gq-primary-ink: #f4f1ea;
  --gq-primary-hover: #15171a;
  --gq-focus: #1c1e21;
  --gq-selection: #d6cfbf;
  --gq-backdrop: rgba(28, 30, 33, 0.55);

  /* type: font sizes carry the user's type-scale preference */
  --gq-scale: 1;
  --gq-font: "Geist", "GeistSans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gq-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --gq-fs-xs: calc(0.75rem * var(--gq-scale));
  --gq-fs-sm: calc(0.875rem * var(--gq-scale));
  --gq-fs-ui: calc(0.9375rem * var(--gq-scale));
  --gq-fs-md: calc(1rem * var(--gq-scale));
  --gq-fs-lg: calc(1.125rem * var(--gq-scale));
  --gq-fs-xl: calc(1.375rem * var(--gq-scale));
  --gq-fs-2xl: calc(1.75rem * var(--gq-scale));
  --gq-fs-3xl: calc(2.125rem * var(--gq-scale));

  /* geometry */
  --gq-radius: 6px;
  --gq-radius-lg: 10px;
  --gq-gutter: clamp(1rem, 4vw, 2.5rem);
  --gq-max: 72rem;
  --gq-measure: 64ch;
  --gq-t: 160ms;
  --gq-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --gq-bg: #141517;
  --gq-surface: #1c1e21;
  --gq-surface-2: #272a2e;
  --gq-line: #34383d;
  --gq-line-strong: #70767f;
  --gq-ink: #ece8df;
  --gq-ink-2: #cfcabf;
  --gq-ink-3: #a6a196;
  --gq-ink-4: #7f7a71;
  --gq-green: #8cc2a3;
  --gq-green-soft: #1e2f27;
  --gq-amber: #d8ab60;
  --gq-amber-soft: #342b1a;
  --gq-red: #e48b7e;
  --gq-red-soft: #392321;
  --gq-blue: #9ab8d8;
  --gq-blue-soft: #1f2a37;
  --gq-primary-bg: #ece8df;
  --gq-primary-ink: #1c1e21;
  --gq-primary-hover: #ffffff;
  --gq-focus: #ece8df;
  --gq-selection: #3b4149;
  --gq-backdrop: rgba(0, 0, 0, 0.66);
}

/* Type scale preference. --access-type-multiplier is what styles.css consumes
   on the legacy surfaces; on the self-contained pages it is simply unused. */
:root[data-type-scale="large"]  { --gq-scale: 1.5; --access-type-multiplier: 1.5; }
:root[data-type-scale="xlarge"] { --gq-scale: 2;   --access-type-multiplier: 2; }

@media (prefers-contrast: more) {
  :root {
    --gq-line: #8f877a;
    --gq-line-strong: #1c1e21;
    --gq-ink-2: #1c1e21;
    --gq-ink-3: #2e3236;
  }
  :root[data-theme="dark"] {
    --gq-line: #8a8f97;
    --gq-line-strong: #ece8df;
    --gq-ink-2: #ece8df;
    --gq-ink-3: #d8d3c9;
  }
}

/* ---------- 2. Base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--gq-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  max-width: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--gq-bg);
  color: var(--gq-ink);
  font-family: var(--gq-font);
  font-size: var(--gq-fs-md);
  line-height: 1.55;
  letter-spacing: 0;
  /* break-word (not anywhere): keeps intrinsic sizes honest so flex and grid
     children wrap onto new rows instead of splitting words at large type sizes;
     long tokens such as codes still break when they overflow a line */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gq-selection); color: var(--gq-ink); }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 { margin: 0 0 0.5em; color: var(--gq-ink); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--gq-fs-2xl); letter-spacing: -0.02em; line-height: 1.12; }
h2 { font-size: var(--gq-fs-xl); }
h3 { font-size: var(--gq-fs-lg); }
h4 { font-size: var(--gq-fs-md); }
p, ul, ol, dl { margin: 0 0 0.75em; }
ul, ol { padding-left: 1.2em; }
a { color: var(--gq-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--gq-line-strong); }
a:hover { text-decoration-color: currentColor; }
code, kbd, samp { font-family: var(--gq-mono); font-size: 0.92em; background: var(--gq-surface-2); padding: 0.08em 0.35em; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--gq-line); margin: 1.5rem 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
:disabled, [aria-disabled="true"] { cursor: not-allowed; }
[hidden] { display: none !important; }

/* keyboard focus: one ring for everything, offset so it never hides under a border */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gq-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
:where(input, select, textarea):focus-visible { outline-offset: 1px; }

/* the scroll-progress bar auth-flow.js prepends is a decorative gradient in
   the legacy system; the system has no use for it */
.scroll-progress { display: none !important; }

/* Skip link: first tab stop on every page */
.gq-skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.5em 0.9em;
  border-radius: var(--gq-radius);
  background: var(--gq-primary-bg);
  color: var(--gq-primary-ink);
  font-size: var(--gq-fs-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.gq-skip:focus-visible { transform: none; outline-color: var(--gq-focus); }

/* ---------- 3. Chrome: header, nav, preferences, footer ------------------ */
.gq-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.625rem var(--gq-gutter);
  padding-left: max(var(--gq-gutter), env(safe-area-inset-left));
  padding-right: max(var(--gq-gutter), env(safe-area-inset-right));
  border-bottom: 1px solid var(--gq-line);
  background: var(--gq-surface);
}
.gq-brand {
  flex: none;
  margin-right: auto;
  color: var(--gq-ink);
  font-size: var(--gq-fs-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.35em 0;
}
.gq-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem 0.5rem;
  min-width: 0;
  max-width: 100%;
}
.gq-nav > a,
.gq-nav > button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.25em;
  padding: 0.25em 0.7em;
  border: 1px solid transparent;
  border-radius: var(--gq-radius);
  background: transparent;
  color: var(--gq-ink-2);
  font-size: var(--gq-fs-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--gq-t) var(--gq-ease), color var(--gq-t) var(--gq-ease), border-color var(--gq-t) var(--gq-ease);
}
.gq-nav > a:hover,
.gq-nav > button:hover { background: var(--gq-surface-2); color: var(--gq-ink); }
.gq-nav > a[aria-current="page"] { color: var(--gq-ink); box-shadow: inset 0 -2px 0 var(--gq-ink); border-radius: var(--gq-radius) var(--gq-radius) 0 0; }
.gq-nav > .gq-nav-primary {
  background: var(--gq-primary-bg);
  border-color: var(--gq-primary-bg);
  color: var(--gq-primary-ink);
  font-weight: 600;
}
.gq-nav > .gq-nav-primary:hover { background: var(--gq-primary-hover); border-color: var(--gq-primary-hover); color: var(--gq-primary-ink); }
.gq-nav > .gq-nav-outline { border-color: var(--gq-line-strong); color: var(--gq-ink); }

/* Display preferences: theme, type scale, language. A sibling of <nav>, so on
   a phone the brand and the preferences share the first row and the links
   take the second; nothing is hidden behind a menu. */
.gq-prefs {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-right: 0.5rem;
  margin-right: 0.25rem;
  border-right: 1px solid var(--gq-line);
}
.gq-prefs:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
.gq-icon-btn,
.gq-scale select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25em;
  min-height: 2.25em;
  padding: 0 0.5em;
  border: 1px solid var(--gq-line);
  border-radius: var(--gq-radius);
  background: var(--gq-surface);
  color: var(--gq-ink-2);
  font-size: var(--gq-fs-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--gq-t) var(--gq-ease), border-color var(--gq-t) var(--gq-ease), color var(--gq-t) var(--gq-ease);
}
.gq-icon-btn:hover,
.gq-scale select:hover { border-color: var(--gq-line-strong); color: var(--gq-ink); }
.gq-icon-btn[aria-pressed="true"] { background: var(--gq-surface-2); border-color: var(--gq-line-strong); color: var(--gq-ink); }
.gq-icon-btn > span { pointer-events: none; }
/* half-disc theme glyph, drawn with borders (no gradient); the filled half
   swaps side when dark is active so the state is not colour-only */
.gq-theme-glyph {
  position: relative;
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  overflow: hidden;
}
.gq-theme-glyph::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: currentColor; }
.gq-icon-btn[aria-pressed="true"] .gq-theme-glyph::before { left: auto; right: 0; }
.gq-scale {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--gq-ink-3);
  font-size: var(--gq-fs-sm);
  font-weight: 600;
}
.gq-scale > span { padding-left: 0.2em; }
.gq-scale select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 1.6em 0 0.55em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23595e65' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5em center;
  background-size: 0.65em auto;
  color: var(--gq-ink);
}
:root[data-theme="dark"] .gq-scale select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a6a196' stroke-width='1.5' stroke-linecap='round'/></svg>");
}

/* Footer: legal identity, contact, location, posture pill. Wraps, never occludes. */
.gq-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 1.25rem var(--gq-gutter);
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--gq-line);
  background: var(--gq-surface);
  color: var(--gq-ink-3);
  font-size: var(--gq-fs-sm);
}
.gq-footer a,
.gq-footer button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gq-ink-2);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--gq-line-strong);
  cursor: pointer;
}
.gq-footer a:hover,
.gq-footer button:hover { color: var(--gq-ink); text-decoration-color: currentColor; }
.gq-footer-legal { color: var(--gq-ink-2); font-weight: 500; }
.gq-footer-links { display: inline-flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.mesh-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-left: auto;
  padding: 0.2em 0.7em;
  border: 1px solid var(--gq-line);
  border-radius: 999px;
  font-size: var(--gq-fs-xs);
  font-weight: 500;
  color: var(--gq-ink-3);
}
.mesh-status-pill::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; flex: none; }
.mesh-status-pill[data-posture="operational"] { color: var(--gq-green); border-color: var(--gq-green); }
.mesh-status-pill[data-posture="degraded"] { color: var(--gq-amber); border-color: var(--gq-amber); }
.mesh-status-pill[data-posture="offline"] { color: var(--gq-red); border-color: var(--gq-red); }

/* ---------- 4. Primitives ---------------------------------------------- */

/* Buttons. Primary = graphite on beige (beige on graphite in dark). */
.access-primary,
.access-secondary,
.gq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.5em;
  padding: 0.4em 1em;
  border: 1px solid transparent;
  border-radius: var(--gq-radius);
  font-family: var(--gq-font);
  font-size: var(--gq-fs-ui);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--gq-t) var(--gq-ease), border-color var(--gq-t) var(--gq-ease), color var(--gq-t) var(--gq-ease), transform var(--gq-t) var(--gq-ease);
}
.access-primary { background: var(--gq-primary-bg); border-color: var(--gq-primary-bg); color: var(--gq-primary-ink); font-weight: 600; }
.access-primary:hover { background: var(--gq-primary-hover); border-color: var(--gq-primary-hover); color: var(--gq-primary-ink); }
.access-secondary,
.gq-btn { background: var(--gq-surface); border-color: var(--gq-line-strong); color: var(--gq-ink); }
.access-secondary:hover,
.gq-btn:hover { background: var(--gq-surface-2); border-color: var(--gq-ink-3); color: var(--gq-ink); }
.access-primary:active,
.access-secondary:active,
.gq-btn:active,
.access-primary.is-pressing,
.access-secondary.is-pressing { transform: translateY(1px); }
.access-primary:disabled,
.access-secondary:disabled,
.gq-btn:disabled { opacity: 0.5; transform: none; }
.access-primary:disabled:hover { background: var(--gq-primary-bg); }
.access-secondary:disabled:hover { background: var(--gq-surface); border-color: var(--gq-line-strong); }
.gq-btn--sm { min-height: 2.125em; padding: 0.25em 0.75em; font-size: var(--gq-fs-sm); }
button, .gq-chip, .portal-card-meta, .portal-chip-list li, .gq-nav > a { overflow-wrap: normal; }

/* Kicker / eyebrow */
.access-kicker,
.eyebrow {
  margin: 0 0 0.4rem;
  color: var(--gq-ink-3);
  font-size: var(--gq-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Lede paragraphs */
.gq-lede,
.product-lede,
.document-lede,
.access-lede,
.portal-hero-lede {
  max-width: var(--gq-measure);
  color: var(--gq-ink-2);
  font-size: var(--gq-fs-lg);
  line-height: 1.5;
}
.gq-note { color: var(--gq-ink-3); font-size: var(--gq-fs-sm); }

/* Chips: state labels, tags, metadata */
.gq-chip,
.portal-card-meta,
.portal-chip-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 1.75em;
  padding: 0.1em 0.65em;
  border: 1px solid var(--gq-line);
  border-radius: 999px;
  background: var(--gq-surface-2);
  color: var(--gq-ink-2);
  font-size: var(--gq-fs-xs);
  font-weight: 500;
  line-height: 1.3;
  vertical-align: middle;
}
.gq-chip--live,
.gq-chip--ok { background: var(--gq-green-soft); border-color: var(--gq-green); color: var(--gq-green); }
.gq-chip--warn { background: var(--gq-amber-soft); border-color: var(--gq-amber); color: var(--gq-amber); }
.gq-chip--soon { color: var(--gq-ink-3); }
.portal-chip-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.portal-card-meta { margin-bottom: 0.5rem; }
.portal-blocker { display: block; margin-top: 0.5rem; color: var(--gq-amber); font-size: var(--gq-fs-sm); font-weight: 500; }
.portal-empty {
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1px dashed var(--gq-line-strong);
  border-radius: var(--gq-radius);
  color: var(--gq-ink-3);
  font-size: var(--gq-fs-sm);
}
.product-cms-list,
.document-card-list { margin: 0.5rem 0 0; padding-left: 1.15em; color: var(--gq-ink-2); font-size: var(--gq-fs-sm); }
.product-cms-list li,
.document-card-list li { margin: 0.2em 0; }

/* Forms */
.access-form,
.public-demo-form,
.contact-form { display: grid; gap: 0.875rem; margin: 0; }
.form-field,
.public-demo-form > label,
.contact-form > label { display: grid; gap: 0.3rem; margin: 0; }
.form-field > label,
.public-demo-form > label,
.contact-form > label,
.service-choice-field > legend { color: var(--gq-ink-2); font-size: var(--gq-fs-sm); font-weight: 500; }
.access-form input:not([type="radio"]):not([type="checkbox"]),
.access-form textarea,
.access-form select,
.public-demo-form input,
.public-demo-form textarea,
.contact-form input,
.contact-form textarea,
.gq-input {
  width: 100%;
  min-height: 2.5em;
  padding: 0.5em 0.75em;
  border: 1px solid var(--gq-line-strong);
  border-radius: var(--gq-radius);
  background: var(--gq-surface);
  color: var(--gq-ink);
  font-size: var(--gq-fs-md);
  line-height: 1.4;
  transition: border-color var(--gq-t) var(--gq-ease);
}
.access-form textarea,
.contact-form textarea { resize: vertical; min-height: 5em; }
.access-form input:hover,
.contact-form input:hover,
.public-demo-form input:hover { border-color: var(--gq-ink-3); }
.access-form input:focus-visible,
.access-form textarea:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.public-demo-form input:focus-visible { border-color: var(--gq-focus); }
.access-form input::placeholder,
.contact-form textarea::placeholder,
.public-demo-form input::placeholder { color: var(--gq-ink-3); opacity: 1; }
[aria-invalid="true"] { border-color: var(--gq-red) !important; }
.field-note { margin: 0; color: var(--gq-ink-3); font-size: var(--gq-fs-xs); line-height: 1.45; }
.bot-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.access-form > .access-primary,
.access-form > .access-secondary,
.public-demo-form > .access-primary,
.contact-form > .access-primary { width: 100%; }

/* Requested-service choice: a radio group, one bordered row per product */
.service-choice-field {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
.service-choice-field > legend { grid-column: 1 / -1; padding: 0; margin: 0 0 0.1rem; float: left; width: 100%; }
.service-choice-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--gq-line-strong);
  border-radius: var(--gq-radius);
  background: var(--gq-surface);
  color: var(--gq-ink);
  font-size: var(--gq-fs-sm);
  cursor: pointer;
  transition: border-color var(--gq-t) var(--gq-ease), background var(--gq-t) var(--gq-ease);
}
.service-choice-card input[type="radio"] { width: 1.05em; height: 1.05em; margin: 0.15em 0 0; accent-color: var(--gq-ink); }
.service-choice-card strong { display: block; font-weight: 600; line-height: 1.3; }
.service-choice-card small { display: block; color: var(--gq-ink-3); font-size: var(--gq-fs-xs); line-height: 1.35; }
.service-choice-card:hover { border-color: var(--gq-ink-3); }
.service-choice-card:has(input:checked) { border-color: var(--gq-ink); background: var(--gq-surface-2); box-shadow: inset 0 0 0 1px var(--gq-ink); }
.service-choice-card:has(input:focus-visible) { outline: 2px solid var(--gq-focus); outline-offset: 2px; }

/* Authenticator manual key box */
.mfa-setup-key-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.6rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--gq-line);
  border-radius: var(--gq-radius);
  background: var(--gq-surface-2);
}
.mfa-setup-key-box > span { grid-column: 1 / -1; color: var(--gq-ink-3); font-size: var(--gq-fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.mfa-setup-key-box code { padding: 0.35em 0.5em; background: var(--gq-surface); border: 1px solid var(--gq-line); border-radius: 4px; font-size: var(--gq-fs-sm); word-break: break-all; user-select: all; }
.mfa-setup-key-box button {
  min-height: 2.125em;
  padding: 0.25em 0.75em;
  border: 1px solid var(--gq-line-strong);
  border-radius: var(--gq-radius);
  background: var(--gq-surface);
  color: var(--gq-ink);
  font-size: var(--gq-fs-sm);
  font-weight: 500;
}

/* Tabs: a segmented control (role=tablist) */
.access-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  margin: 0 0 1rem;
  border: 1px solid var(--gq-line);
  border-radius: var(--gq-radius-lg);
  background: var(--gq-surface-2);
}
.access-tabs [role="tab"] {
  flex: 1 1 auto;
  min-width: max-content;
  min-height: 2.25em;
  padding: 0.3em 0.5em;
  border: 0;
  border-radius: var(--gq-radius);
  background: transparent;
  color: var(--gq-ink-2);
  font-size: var(--gq-fs-sm);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--gq-t) var(--gq-ease), color var(--gq-t) var(--gq-ease);
}
.access-tabs [role="tab"]:hover { color: var(--gq-ink); }
.access-tabs [role="tab"][aria-selected="true"],
.access-tabs [role="tab"].is-active { background: var(--gq-surface); color: var(--gq-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--gq-line-strong); }

/* Filter pills (aria-pressed toggles) */
.product-filter-group,
.awaiting-filter-bar,
.gq-filters { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.product-filter-group button,
.awaiting-filter-bar button,
.gq-filters button {
  min-height: 2.125em;
  padding: 0.2em 0.8em;
  border: 1px solid var(--gq-line-strong);
  border-radius: 999px;
  background: var(--gq-surface);
  color: var(--gq-ink-2);
  font-size: var(--gq-fs-sm);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--gq-t) var(--gq-ease), color var(--gq-t) var(--gq-ease), border-color var(--gq-t) var(--gq-ease);
}
.product-filter-group button:hover,
.awaiting-filter-bar button:hover,
.gq-filters button:hover { border-color: var(--gq-ink-3); color: var(--gq-ink); }
.product-filter-group button[aria-pressed="true"],
.awaiting-filter-bar button[aria-pressed="true"],
.gq-filters button[aria-pressed="true"] { background: var(--gq-primary-bg); border-color: var(--gq-primary-bg); color: var(--gq-primary-ink); }

/* Status output (role=status). Text carries the state; the glyph and colour
   are reinforcement, never the only cue. */
.access-result {
  display: block;
  min-height: 1.5em;
  margin: 0;
  color: var(--gq-ink-2);
  font-size: var(--gq-fs-sm);
  line-height: 1.45;
}
.access-result[data-state="pending"] { color: var(--gq-ink-2); }
.access-result[data-state="success"] { color: var(--gq-green); font-weight: 500; }
.access-result[data-state="error"] { color: var(--gq-red); font-weight: 500; }
.access-result[data-state="success"]:not(:empty)::before { content: "\2713\00a0"; }
.access-result[data-state="error"]:not(:empty)::before { content: "\26A0\00a0"; }
.access-result[data-state="pending"]:not(:empty)::before { content: "\2026\00a0"; }
.access-result.is-updating { animation: gq-settle var(--gq-t) var(--gq-ease); }
@keyframes gq-settle { from { opacity: 0.4; } to { opacity: 1; } }

/* Dialog (native <dialog>) */
.contact-dialog {
  width: min(92vw, 30rem);
  max-height: min(90dvh, 44rem);
  padding: 0;
  border: 1px solid var(--gq-line-strong);
  border-radius: var(--gq-radius-lg);
  background: var(--gq-surface);
  color: var(--gq-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  overflow: auto;
}
.contact-dialog::backdrop { background: var(--gq-backdrop); }
.contact-dialog .contact-form { position: relative; padding: 1.25rem; }
.contact-dialog h2 { margin: 0 2.75rem 0.5rem 0; font-size: var(--gq-fs-xl); }
.dialog-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-grid;
  place-items: center;
  width: 2.125em;
  height: 2.125em;
  padding: 0;
  border: 1px solid var(--gq-line);
  border-radius: 50%;
  background: var(--gq-surface);
  color: var(--gq-ink-2);
  font-size: var(--gq-fs-md);
  line-height: 1;
}
.dialog-close:hover { border-color: var(--gq-line-strong); color: var(--gq-ink); }

/* Definition-style table (label | text rows) */
.document-table,
.gq-table {
  display: grid;
  margin: 0;
  border: 1px solid var(--gq-line);
  border-radius: var(--gq-radius);
  background: var(--gq-surface);
  overflow: hidden;
}
.document-table > div,
.gq-table > div {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--gq-line);
}
.document-table > div:first-child,
.gq-table > div:first-child { border-top: 0; }
.document-table strong,
.gq-table strong { font-size: var(--gq-fs-sm); font-weight: 600; }
.document-table p,
.gq-table p { margin: 0; color: var(--gq-ink-2); font-size: var(--gq-fs-sm); }
@media (max-width: 40em) {
  .document-table > div,
  .gq-table > div { grid-template-columns: minmax(0, 1fr); }
}

/* Native disclosure */
.product-module-detail {
  border: 1px solid var(--gq-line);
  border-radius: var(--gq-radius);
  background: var(--gq-surface);
}
.product-module-detail + .product-module-detail { margin-top: 0.5rem; }
.product-module-detail > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.25rem 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
}
.product-module-detail > summary::-webkit-details-marker { display: none; }
.product-module-detail > summary::after { content: "+"; color: var(--gq-ink-3); font-size: 1.25em; font-weight: 500; line-height: 1; }
.product-module-detail[open] > summary::after { content: "\2212"; }
.product-module-detail > summary > span {
  display: inline-flex;
  align-items: center;
  min-height: 1.75em;
  padding: 0.1em 0.65em;
  border: 1px solid var(--gq-line);
  border-radius: 999px;
  background: var(--gq-surface-2);
  color: var(--gq-ink-2);
  font-size: var(--gq-fs-xs);
  font-weight: 500;
}
.product-module-detail > summary > strong { font-weight: 600; font-size: var(--gq-fs-md); }
.product-module-detail > :not(summary) { margin: 0 1rem 1rem; }
.product-module-detail > p { color: var(--gq-ink-2); font-size: var(--gq-fs-sm); }
.product-module-detail > .product-cms-list { margin-top: -0.5rem; }
.product-module-detail > .access-primary,
.product-module-detail > .access-secondary { display: inline-flex; }

/* Blocks (single-level surfaces, never nested) and their grids */
.gq-block,
.product-document-block,
.product-module-step,
.product-cms-module,
.awaiting-review-card,
.awaiting-cms-card,
.document-linked-card,
.awaiting-product-grid > article,
.product-status-matrix > div {
  min-width: 0;
  padding: 1rem 1.125rem;
  border: 1px solid var(--gq-line);
  border-radius: var(--gq-radius-lg);
  background: var(--gq-surface);
}
.gq-grid,
.product-document-grid,
.product-cms-grid,
.awaiting-review-grid,
.awaiting-cms-grid,
.awaiting-product-grid,
.document-linked-grid,
.product-status-matrix,
.product-module-map,
.awaiting-process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
}
.gq-block h2,
.product-document-block h2,
.product-status-matrix > div h2,
.awaiting-review-card h2,
.document-linked-card strong,
.product-cms-module strong,
.awaiting-cms-card strong { display: block; margin: 0 0 0.35rem; font-size: var(--gq-fs-md); font-weight: 600; line-height: 1.3; }
.gq-block p,
.product-document-block p,
.product-status-matrix > div p,
.awaiting-review-card p,
.document-linked-card p,
.product-cms-module p,
.awaiting-cms-card p,
.product-module-step p { margin: 0; color: var(--gq-ink-2); font-size: var(--gq-fs-sm); }
.awaiting-review-card ul,
.product-status-matrix ul { margin: 0.4rem 0 0; padding-left: 1.15em; color: var(--gq-ink-2); font-size: var(--gq-fs-sm); }
.product-cms-module > .access-primary,
.product-cms-module > .access-secondary,
.awaiting-cms-card > .access-primary,
.awaiting-cms-card > .access-secondary,
.awaiting-product-grid > article > .access-primary,
.awaiting-product-grid > article > .access-secondary { margin-top: 0.875rem; }
.product-cms-module.available,
.awaiting-cms-card.available { border-left: 3px solid var(--gq-green); }
.product-cms-module.limited,
.awaiting-cms-card.limited { border-left: 3px solid var(--gq-amber); }
.product-cms-module.path,
.awaiting-cms-card.path { border-left: 3px solid var(--gq-blue); }

/* Numbered step blocks */
.product-section-index,
.product-module-step > span,
.awaiting-process > article > span,
.awaiting-product-grid > article > span,
.gq-step-index {
  display: inline-grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  margin-bottom: 0.6rem;
  border-radius: 50%;
  background: var(--gq-primary-bg);
  color: var(--gq-primary-ink);
  font-size: var(--gq-fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.product-module-step > strong,
.awaiting-process > article > strong,
.awaiting-product-grid > article > strong { display: block; margin: 0 0 0.3rem; font-weight: 600; line-height: 1.3; }
.awaiting-process > article { min-width: 0; padding: 1rem 1.125rem; border: 1px solid var(--gq-line); border-radius: var(--gq-radius-lg); background: var(--gq-surface); }
.awaiting-process > article > p,
.awaiting-product-grid > article > p { margin: 0; color: var(--gq-ink-2); font-size: var(--gq-fs-sm); }
.awaiting-product-grid > article > small { display: block; margin-top: 0.4rem; color: var(--gq-ink-3); font-size: var(--gq-fs-xs); }

/* Section header row: heading left, controls right */
.portal-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: 0 0 1rem;
}
.portal-section-header h2 { margin: 0; }
.portal-section-header .access-kicker { margin-bottom: 0.25rem; }
.gq-section { display: grid; gap: 1rem; }
.gq-section + .gq-section,
.gq-divider { padding-top: 1.5rem; border-top: 1px solid var(--gq-line); }
.product-action-row,
.document-card-actions,
.gq-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.product-inline-action { display: grid; gap: 0.25rem; justify-items: start; }

/* ---------- 5. Public shell (/) ---------------------------------------- */
.gq-shell {
  width: 100%;
  max-width: var(--gq-max);
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 2.5rem) var(--gq-gutter) 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "access" "products";
  gap: 2rem var(--gq-gutter);
  align-items: start;
}
.gq-shell-intro { grid-area: intro; }
.gq-shell-products { grid-area: products; }
.gq-access { grid-area: access; }
@media (min-width: 60em) {
  .gq-shell {
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 26rem);
    grid-template-areas: "intro access" "products access";
    gap: 2.5rem clamp(2rem, 5vw, 4rem);
  }
}
.gq-shell-intro h1 { margin: 0 0 0.75rem; font-size: var(--gq-fs-3xl); }
.gq-shell-intro .gq-lede { margin-bottom: 0.75rem; }
.gq-shell-intro .gq-note { max-width: var(--gq-measure); margin: 0; }
.gq-shell-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.75rem 1.5rem;
  margin: 1.5rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--gq-line);
}
.gq-shell-facts > div { display: grid; gap: 0.15rem; }
.gq-shell-facts dt { color: var(--gq-ink-3); font-size: var(--gq-fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.gq-shell-facts dd { margin: 0; color: var(--gq-ink); font-size: var(--gq-fs-sm); }

/* Product index: four rows, one product each, no marketing chapters */
.gq-index { display: block; }
.gq-index-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.gq-index-head h2 { margin: 0; font-size: var(--gq-fs-lg); }
.gq-chapters {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--gq-line);
  border-radius: var(--gq-radius-lg);
  background: var(--gq-surface);
  overflow: hidden;
}
.gq-chapter {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-areas: "n head" "n body" "n status";
  gap: 0.25rem 0.75rem;
  padding: 1rem 1.125rem;
  border-top: 1px solid var(--gq-line);
}
.gq-chapter:first-child { border-top: 0; }
.gq-chapter .n { grid-area: n; color: var(--gq-ink-3); font-size: var(--gq-fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 0.35em; }
.gq-chapter-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.gq-chapter-head h3 { margin: 0; font-size: var(--gq-fs-lg); font-weight: 600; }
.gq-chapter-head .gq-chapter-domain { color: var(--gq-ink-3); font-size: var(--gq-fs-sm); }
.gq-oneliner { grid-area: body; margin: 0; color: var(--gq-ink-2); font-size: var(--gq-fs-sm); max-width: 60ch; }
.gq-platforms { grid-area: status; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.35rem; }
.gq-platforms .gq-chapter-cta {
  margin-left: auto;
  min-height: 2.125em;
  padding: 0.2em 0.75em;
  border: 1px solid var(--gq-line-strong);
  border-radius: var(--gq-radius);
  background: var(--gq-surface);
  color: var(--gq-ink);
  font-size: var(--gq-fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.gq-platforms .gq-chapter-cta:hover { background: var(--gq-surface-2); border-color: var(--gq-ink-3); }
@media (min-width: 40em) {
  .gq-chapter { grid-template-columns: 2.25rem minmax(0, 1fr); }
}
@media (max-width: 30em) {
  .gq-platforms .gq-chapter-cta { margin-left: 0; width: 100%; }
}

/* Access panel: Login / Register / Help. Inline (not a modal), the reason
   the page exists. */
.gq-access {
  padding: 1.25rem;
  border: 1px solid var(--gq-line);
  border-radius: var(--gq-radius-lg);
  background: var(--gq-surface);
  min-width: 0;
}
.gq-access-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.875rem; }
.gq-access-head h2 { flex: none; margin: 0; font-size: var(--gq-fs-lg); }
.gq-access-head .gq-note { margin: 0; }
.gq-access .access-form h2 { font-size: var(--gq-fs-lg); margin: 0; }
.gq-access .access-form + .access-result,
.gq-access .help-panel + .access-result { margin-top: 0.875rem; }
.gq-access .access-result { padding-top: 0.75rem; border-top: 1px solid var(--gq-line); }
.gq-access .access-result:empty { border-top: 0; padding-top: 0; min-height: 0; }
.gq-access .form-field { position: relative; }
.gq-access .form-field:has(#login-password) .field-note,
.gq-access .form-field:has(#register-password) .field-note { text-align: left; }
.help-panel { display: grid; gap: 0.875rem; }
.help-panel h2 { margin: 0; font-size: var(--gq-fs-lg); }
.help-panel h3 { margin: 0 0 0.25rem; font-size: var(--gq-fs-md); }
.help-panel > p { margin: 0; color: var(--gq-ink-2); font-size: var(--gq-fs-sm); }
.help-grid { display: grid; margin: 0; padding: 0; border: 1px solid var(--gq-line); border-radius: var(--gq-radius); overflow: hidden; }
.help-grid article {
  display: grid;
  grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--gq-line);
  font-size: var(--gq-fs-sm);
}
.help-grid article:first-child { border-top: 0; }
.help-grid article > span { font-weight: 600; color: var(--gq-ink); }
.help-grid article > p { margin: 0; color: var(--gq-ink-2); }
.help-panel .public-demo-form { padding-top: 0.875rem; border-top: 1px solid var(--gq-line); }
.help-panel > .access-secondary { justify-self: start; }
@media (max-width: 26em) {
  .help-grid article { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 6. Protected page frame (briefs, awaiting, docs, generic) --- */
.gq-main {
  width: 100%;
  max-width: var(--gq-max);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem) var(--gq-gutter) 3rem;
  display: grid;
  gap: 2rem;
  align-content: start;
}
.gq-crumbs { margin: 0; }
.gq-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0; padding: 0; list-style: none; color: var(--gq-ink-3); font-size: var(--gq-fs-sm); }
.gq-crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--gq-line-strong); }
.gq-crumbs a { color: var(--gq-ink-2); }
.gq-crumbs [aria-current="page"] { color: var(--gq-ink); font-weight: 500; }

/* Title block with an "on this page" list beside it */
.gq-titlebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 3rem;
  align-items: start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gq-line);
}
@media (min-width: 52em) {
  .gq-titlebar { grid-template-columns: minmax(0, 1fr) auto; }
}
.gq-titlebar h1 { margin: 0 0 0.4rem; font-size: var(--gq-fs-3xl); }
.product-subtitle { margin: 0 0 0.5rem; color: var(--gq-ink-2); font-size: var(--gq-fs-lg); font-weight: 500; }
.gq-titlebar .product-lede,
.gq-titlebar .document-lede { margin: 0; }
.gq-titlebar .product-action-row { margin-top: 1.25rem; }
.gq-onpage,
.product-contents-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gq-onpage a,
.product-contents-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2em;
  padding: 0.2em 0.6em;
  border-radius: var(--gq-radius);
  color: var(--gq-ink-2);
  font-size: var(--gq-fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.gq-onpage a:hover,
.product-contents-nav a:hover { background: var(--gq-surface-2); color: var(--gq-ink); }
.gq-onpage a > span,
.product-contents-nav a > span { color: var(--gq-ink-3); font-size: var(--gq-fs-xs); font-variant-numeric: tabular-nums; }
@media (min-width: 52em) {
  .gq-onpage,
  .product-contents-nav { flex-direction: column; min-width: 11rem; }
  .gq-onpage a,
  .product-contents-nav a { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); }
}
.gq-onpage-label { margin: 0 0 0.25rem; padding-left: 0.6rem; color: var(--gq-ink-3); font-size: var(--gq-fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* Fact strip: label / value / note cells with hairlines in both directions */
.product-reference-strip,
.gq-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1px;
  border: 1px solid var(--gq-line);
  border-radius: var(--gq-radius-lg);
  background: var(--gq-line);
  overflow: hidden;
}
.product-reference-strip > article,
.gq-facts > div { min-width: 0; padding: 0.875rem 1rem; background: var(--gq-surface); }
.product-reference-strip span,
.gq-facts dt { display: block; color: var(--gq-ink-3); font-size: var(--gq-fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.product-reference-strip strong,
.gq-facts dd { display: block; margin: 0.25rem 0; font-size: var(--gq-fs-md); font-weight: 600; line-height: 1.3; }
.product-reference-strip p { margin: 0; color: var(--gq-ink-2); font-size: var(--gq-fs-sm); }

/* Product switcher */
.product-switch-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem 2rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid var(--gq-line);
  border-bottom: 1px solid var(--gq-line);
}
@media (min-width: 52em) { .product-switch-panel { grid-template-columns: minmax(0, 1fr) auto; } }
.product-switch-panel h2 { margin: 0 0 0.25rem; font-size: var(--gq-fs-lg); }
.product-switch-panel p { margin: 0; color: var(--gq-ink-2); font-size: var(--gq-fs-sm); }
.product-switch-nav { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.product-switch-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2.125em;
  padding: 0.2em 0.8em;
  border: 1px solid var(--gq-line-strong);
  border-radius: 999px;
  color: var(--gq-ink-2);
  font-size: var(--gq-fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.product-switch-nav a > span { color: var(--gq-ink-3); font-size: var(--gq-fs-xs); font-variant-numeric: tabular-nums; }
.product-switch-nav a:hover { border-color: var(--gq-ink-3); color: var(--gq-ink); }
.product-switch-nav a[aria-current="page"] { background: var(--gq-primary-bg); border-color: var(--gq-primary-bg); color: var(--gq-primary-ink); }
.product-switch-nav a[aria-current="page"] > span { color: inherit; opacity: 0.75; }

/* CMS source note */
.product-cms-panel,
.gq-source-note { padding-top: 1.25rem; border-top: 1px solid var(--gq-line); color: var(--gq-ink-2); font-size: var(--gq-fs-sm); }
.product-cms-panel h2 { font-size: var(--gq-fs-md); margin: 0 0 0.35rem; }
.product-cms-panel p { margin: 0; max-width: var(--gq-measure); }
.product-cms-status,
.awaiting-cms-status { margin: 0 0 0.875rem; }

/* Docs (document-shell) */
.document-shell {
  width: 100%;
  max-width: var(--gq-max);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem) var(--gq-gutter) 3rem;
  display: grid;
  gap: 1.5rem;
  align-content: start;
}
.document-hero { padding-bottom: 1.5rem; border-bottom: 1px solid var(--gq-line); }
.document-hero h1 { margin: 0 0 0.5rem; font-size: var(--gq-fs-3xl); }
.document-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
@media (min-width: 56em) {
  .document-layout { grid-template-columns: 14rem minmax(0, 1fr); }
  .document-rail { position: sticky; top: 1rem; }
}
.document-rail { display: grid; gap: 1rem; }
.document-index { display: flex; flex-wrap: wrap; gap: 0.125rem 0.25rem; }
@media (min-width: 56em) { .document-index { flex-direction: column; } }
.document-index a {
  display: inline-flex;
  min-height: 2em;
  padding: 0.2em 0.6em;
  border-radius: var(--gq-radius);
  color: var(--gq-ink-2);
  font-size: var(--gq-fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.document-index a:hover { background: var(--gq-surface-2); color: var(--gq-ink); }
.portal-rail-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--gq-line);
  border-radius: var(--gq-radius);
  background: var(--gq-surface);
}
.portal-rail-list > div { display: grid; gap: 0.1rem; }
.portal-rail-list dt { color: var(--gq-ink-3); font-size: var(--gq-fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.portal-rail-list dd { margin: 0; font-size: var(--gq-fs-sm); font-weight: 500; }
.document-content { min-width: 0; }
.document-content > section { padding: 1.25rem 0; border-top: 1px solid var(--gq-line); }
.document-content > section:first-child { padding-top: 0; border-top: 0; }
.document-content > section:target { scroll-margin-top: 1rem; }
.document-content h2 { margin: 0 0 0.5rem; font-size: var(--gq-fs-xl); }
.document-content p { max-width: var(--gq-measure); }
.document-content p:last-child { margin-bottom: 0; }
.document-linked-grid { margin-top: 1rem; }
.document-linked-card strong { font-size: var(--gq-fs-md); }
.document-table.boundary-table > div { grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); }
.boundary-table { width: 100%; border-collapse: collapse; font-size: var(--gq-fs-sm); }
.boundary-table th,
.boundary-table td { padding: 0.6rem 0.75rem; border-top: 1px solid var(--gq-line); text-align: left; vertical-align: top; }
.boundary-table thead th { border-top: 0; color: var(--gq-ink-3); font-size: var(--gq-fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.gq-table-scroll { overflow-x: auto; max-width: 100%; }

/* Generic public documents (articles, public notes, 404) */
.access-main { width: 100%; max-width: var(--gq-max); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2rem) var(--gq-gutter) 3rem; }
.access-hero { max-width: var(--gq-measure); }
.access-hero h1 { margin: 0 0 0.5rem; font-size: var(--gq-fs-3xl); }
.access-hero .access-lede { margin: 0 0 1rem; }
.access-hero .gq-actions { margin-top: 1.25rem; }
.gq-prose { max-width: var(--gq-measure); }
.gq-prose h2 { margin-top: 1.5rem; }
.gq-prose > :first-child { margin-top: 0; }
.gq-empty { padding: 1.5rem; border: 1px dashed var(--gq-line-strong); border-radius: var(--gq-radius-lg); color: var(--gq-ink-2); }
.gq-empty p:last-child { margin: 0; }
.gq-index-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.gq-index-list > li { padding: 1rem 1.125rem; border: 1px solid var(--gq-line); border-radius: var(--gq-radius-lg); background: var(--gq-surface); }
.gq-index-list h2 { margin: 0 0 0.25rem; font-size: var(--gq-fs-lg); }
.gq-index-list p { margin: 0; color: var(--gq-ink-2); font-size: var(--gq-fs-sm); }
.gq-index-list .gq-meta { display: block; margin-top: 0.4rem; color: var(--gq-ink-3); font-size: var(--gq-fs-xs); }

/* ---------- 7. Legacy surfaces (portal / admin / demo / dashboard / strategy)
   These bodies keep styles.css for their JS-rendered components. styles.css
   pins the portal palette with !important on selectors as specific as
   ":root:not([data-theme=light]) body.access-body.portal-body:not(.welcome-body)"
   (0,6,1). The L prefix below is a specificity bump (0,7,2) so this block wins
   deterministically; it is the only place in the system that needs one. The
   block retunes the two legacy token families (--access-* and --llm-*) to the
   graphite/beige system, removes the legacy page gradients, and takes the
   serif display headings down to Geist at reading sizes. */
html:root:root:root:root:root:root body.gq-legacy {
  --access-bg: var(--gq-bg) !important;
  --access-paper: var(--gq-surface) !important;
  --access-paper-strong: var(--gq-surface) !important;
  --access-ink: var(--gq-ink) !important;
  --access-muted: var(--gq-ink-3) !important;
  --access-line: var(--gq-line) !important;
  --access-green: var(--gq-green) !important;
  --access-teal: var(--gq-blue) !important;
  --access-gold: var(--gq-amber) !important;
  --access-clay: var(--gq-red) !important;
  --access-bluewash: var(--gq-blue-soft) !important;
  --access-sagewash: var(--gq-green-soft) !important;
  --access-rosewash: var(--gq-red-soft) !important;
  --llm-bg: var(--gq-bg) !important;
  --llm-paper: var(--gq-surface) !important;
  --llm-soft: var(--gq-surface-2) !important;
  --llm-ink: var(--gq-ink) !important;
  --llm-muted: var(--gq-ink-3) !important;
  --llm-faint: var(--gq-ink-3) !important;
  --llm-line: var(--gq-line) !important;
  --llm-accent: var(--gq-green) !important;
  --llm-accent-2: var(--gq-blue) !important;
  --llm-accent-soft: var(--gq-green-soft) !important;
  --llm-positive: var(--gq-green) !important;
  --llm-negative: var(--gq-red) !important;
  --llm-warning: var(--gq-amber) !important;
  /* a third legacy family (portal42+ layers) was referenced with hard-coded
     fallbacks and never declared, which is why those cards stayed white in
     dark mode; declare it here */
  --access-surface: var(--gq-surface) !important;
  --access-border: var(--gq-line) !important;
  --access-accent: var(--gq-green) !important;
  --access-text: var(--gq-ink) !important;
  --surface-radius: var(--gq-radius-lg) !important;
  --surface-shadow: none !important;
  background: var(--gq-bg) !important;
  background-image: none !important;
  color: var(--gq-ink) !important;
  color-scheme: light !important;
  font-family: var(--gq-font) !important;
}
html:root:root:root:root:root:root[data-theme="dark"] body.gq-legacy { color-scheme: dark !important; }

/* chrome geometry restated above the legacy element rules (label, select,
   button, a) that reach into any descendant of .access-body */
html:root:root:root:root:root:root body.gq-legacy .gq-header { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.5rem 1rem !important; padding: 0.625rem var(--gq-gutter) !important; border-bottom: 1px solid var(--gq-line) !important; background: var(--gq-surface) !important; position: static !important; box-shadow: none !important; }
html:root:root:root:root:root:root body.gq-legacy .gq-brand { color: var(--gq-ink) !important; font-family: var(--gq-font) !important; font-size: var(--gq-fs-lg) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; text-decoration: none !important; }
html:root:root:root:root:root:root body.gq-legacy .gq-scale { display: inline-flex !important; align-items: center !important; gap: 0.3em !important; color: var(--gq-ink-3) !important; font-size: var(--gq-fs-sm) !important; font-weight: 600 !important; }
html:root:root:root:root:root:root body.gq-legacy .gq-scale > span { flex: none !important; white-space: nowrap !important; }
html:root:root:root:root:root:root body.gq-legacy .gq-scale select,
html:root:root:root:root:root:root body.gq-legacy .gq-icon-btn { min-width: 2.25em !important; min-height: 2.25em !important; padding: 0 0.5em !important; border: 1px solid var(--gq-line) !important; border-radius: var(--gq-radius) !important; background-color: var(--gq-surface) !important; color: var(--gq-ink-2) !important; font-size: var(--gq-fs-sm) !important; font-weight: 600 !important; box-shadow: none !important; transform: none !important; }
html:root:root:root:root:root:root body.gq-legacy .gq-scale select {
  padding-right: 1.6em !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  color: var(--gq-ink) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23595e65' stroke-width='1.5' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.5em center !important;
  background-size: 0.65em auto !important;
}
html:root:root:root:root:root:root[data-theme="dark"] body.gq-legacy .gq-scale select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a6a196' stroke-width='1.5' stroke-linecap='round'/></svg>") !important;
}
/* buttons: one primary/secondary look across the legacy surfaces (colour and
   type only; the legacy card layouts keep their own widths) */
html:root:root:root:root:root:root body.gq-legacy .access-primary { background: var(--gq-primary-bg) !important; background-image: none !important; border-color: var(--gq-primary-bg) !important; color: var(--gq-primary-ink) !important; font-family: var(--gq-font) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; border-radius: var(--gq-radius) !important; }
html:root:root:root:root:root:root body.gq-legacy .access-primary:hover { background: var(--gq-primary-hover) !important; border-color: var(--gq-primary-hover) !important; }
html:root:root:root:root:root:root body.gq-legacy .access-secondary { background: var(--gq-surface) !important; background-image: none !important; border: 1px solid var(--gq-line-strong) !important; color: var(--gq-ink) !important; font-family: var(--gq-font) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; border-radius: var(--gq-radius) !important; }
html:root:root:root:root:root:root body.gq-legacy .access-secondary:hover { background: var(--gq-surface-2) !important; }
html:root:root:root:root:root:root body.gq-legacy .access-primary:disabled,
html:root:root:root:root:root:root body.gq-legacy .access-secondary:disabled { opacity: 0.5 !important; }
html:root:root:root:root:root:root body.gq-legacy .gq-icon-btn[aria-pressed="true"] { background-color: var(--gq-surface-2) !important; border-color: var(--gq-line-strong) !important; color: var(--gq-ink) !important; }
html:root:root:root:root:root:root body.gq-legacy .gq-nav > a,
html:root:root:root:root:root:root body.gq-legacy .gq-nav > button { min-height: 2.25em !important; padding: 0.25em 0.7em !important; border: 1px solid transparent !important; border-radius: var(--gq-radius) !important; background: transparent !important; color: var(--gq-ink-2) !important; font-family: var(--gq-font) !important; font-size: var(--gq-fs-sm) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; box-shadow: none !important; width: auto !important; }
html:root:root:root:root:root:root body.gq-legacy .gq-nav > a:hover,
html:root:root:root:root:root:root body.gq-legacy .gq-nav > button:hover { background: var(--gq-surface-2) !important; color: var(--gq-ink) !important; }
html:root:root:root:root:root:root body.gq-legacy .gq-nav > a[aria-current="page"] { color: var(--gq-ink) !important; box-shadow: inset 0 -2px 0 var(--gq-ink) !important; }
html:root:root:root:root:root:root body.gq-legacy .gq-nav > .gq-nav-primary { background: var(--gq-primary-bg) !important; border-color: var(--gq-primary-bg) !important; color: var(--gq-primary-ink) !important; }
html:root:root:root:root:root:root body.gq-legacy .gq-footer { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.5rem 1.25rem !important; padding: 1.25rem var(--gq-gutter) !important; border-top: 1px solid var(--gq-line) !important; background: var(--gq-surface) !important; color: var(--gq-ink-3) !important; font-family: var(--gq-font) !important; font-size: var(--gq-fs-sm) !important; box-shadow: none !important; }
html:root:root:root:root:root:root body.gq-legacy .gq-footer a,
html:root:root:root:root:root:root body.gq-legacy .gq-footer button { padding: 0 !important; border: 0 !important; background: none !important; color: var(--gq-ink-2) !important; font: inherit !important; text-decoration: underline !important; min-height: 0 !important; width: auto !important; }
html:root:root:root:root:root:root body.gq-legacy .gq-skip { font-family: var(--gq-font) !important; }
html:root:root:root:root:root:root body.gq-legacy :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--gq-focus) !important; outline-offset: 2px !important; box-shadow: none !important; transform: none !important; }

/* headings: Geist, reading sizes; the legacy portal used serif display type */
html:root:root:root:root:root:root body.gq-legacy h1,
html:root:root:root:root:root:root body.gq-legacy h2,
html:root:root:root:root:root:root body.gq-legacy h3,
html:root:root:root:root:root:root body.gq-legacy .portal-section-header h2,
html:root:root:root:root:root:root body.gq-legacy .portal-subheading { font-family: var(--gq-font) !important; letter-spacing: -0.015em !important; }
html:root:root:root:root:root:root body.gq-legacy .portal-hero-copy h1,
html:root:root:root:root:root:root body.gq-legacy .portal-hero h1,
html:root:root:root:root:root:root body.gq-legacy .admin-hero h1,
html:root:root:root:root:root:root body.gq-legacy .product-hero-copy h1 { max-width: none !important; font-size: var(--gq-fs-3xl) !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; font-weight: 600 !important; }
html:root:root:root:root:root:root body.gq-legacy .portal-hero-lede { font-size: var(--gq-fs-lg) !important; }
html:root:root:root:root:root:root body.gq-legacy .access-kicker { color: var(--gq-ink-3) !important; font-family: var(--gq-font) !important; }
/* the contents card sat inside the hero card: no nested cards */
html:root:root:root:root:root:root body.gq-legacy .portal-contents-card,
html:root:root:root:root:root:root body.gq-legacy .product-contents-card { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
/* legacy painted the portal column white in light and near-black in dark; the
   page ground is the system's beige/graphite, panels sit on --gq-surface */
html:root:root:root:root:root:root body.gq-legacy .portal-main,
html:root:root:root:root:root:root body.gq-legacy .portal-workspace,
html:root:root:root:root:root:root body.gq-legacy .portal-hero-dashboard,
html:root:root:root:root:root:root body.gq-legacy .admin-main { background: transparent !important; background-image: none !important; }
/* Dyson dashboard / strategy suite (parcifal-suite.css): the widget chrome
   tokens follow the system; chart series colours are product-owned in JS */
.gq-legacy .pf-suite,
:root[data-theme="dark"] .gq-legacy .pf-suite {
  --pf-bg: var(--gq-surface-2);
  --pf-card: var(--gq-surface);
  --pf-text: var(--gq-ink);
  --pf-subtext: var(--gq-ink-3);
  --pf-border: var(--gq-line);
  --pf-grid: var(--gq-line);
  --pf-input: var(--gq-surface);
  --pf-accent: var(--gq-green);
  --pf-accent-ink: var(--gq-green);
  --pf-accent-soft: var(--gq-green-soft);
  border-radius: var(--gq-radius-lg);
}
/* the legacy scroll-progress gradient and any pointer-tilt transforms */
html:root:root:root:root:root:root body.gq-legacy .scroll-progress { display: none !important; }

/* ---------- 8. Motion, print, narrow, landscape ------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (pointer: coarse) {
  .gq-nav > a, .gq-nav > button, .gq-icon-btn, .gq-scale select { min-height: 2.5em; }
}
/* phones in landscape: keep vertical rhythm tight so the page is not one
   header and one heading */
@media (max-height: 30em) and (orientation: landscape) {
  .gq-shell, .gq-main, .access-main { padding-top: 0.75rem; }
  .gq-shell { gap: 1.25rem var(--gq-gutter); }
  .gq-shell-intro h1, .gq-titlebar h1, .document-hero h1, .access-hero h1 { font-size: var(--gq-fs-2xl); }
  .document-rail { position: static; }
}
@media (max-width: 40em) {
  .gq-brand { font-size: var(--gq-fs-md); }
  .gq-prefs { padding-right: 0; margin-right: 0; border-right: 0; }
  .gq-nav { flex-basis: 100%; justify-content: flex-start; gap: 0.25rem 0.375rem; }
  .gq-nav > a, .gq-nav > button { padding: 0.25em 0.55em; }
  .gq-nav > .gq-nav-primary { margin-left: auto; }
}
@media print {
  .gq-header, .gq-footer, .gq-skip, .gq-prefs, .gq-nav, .contact-dialog, .mesh-status-pill { display: none !important; }
  body { background: #fff; color: #000; }
  a { text-decoration: none; }
}

/* text-styled button (e.g. an email that opens the contact dialog) */
.gq-linklike { padding: 0; border: 0; background: none; color: var(--gq-ink); font: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--gq-line-strong); cursor: pointer; }
.gq-linklike:hover { text-decoration-color: currentColor; }

/* Awaiting-processing sections: the JS-inserted help panel follows the last section */
.awaiting-help-panel { padding-top: 1.5rem; border-top: 1px solid var(--gq-line); }
.awaiting-help-panel .portal-section-header { margin-bottom: 1rem; }
.awaiting-review-card .access-kicker { margin-bottom: 0.25rem; }
.awaiting-review-card h2 { font-size: var(--gq-fs-md); }