/* Civic Grid — Agentstead brand component library.
   Foundation layer: primitive palette, semantic aliases, layout and type tokens.
   Everything below the foundation uses semantic tokens only. */

:root[data-brand="civic"] {
  --cg-canvas: #f7f4ee;
  --cg-surface: #fffdf7;
  --cg-ink: #142c48;
  --cg-muted: #56646f;
  --cg-blue: #3156e3;
  --cg-coral: #ff8066;
  --cg-violet: #8b7cf6;
  --cg-yellow: #f4c95d;
  --cg-mint: #55c7a5;
  --cg-sky: #82c8f5;
  --cg-activity: #cceee6;

  --identity-inbox: var(--cg-mint);
  --identity-browser: var(--cg-sky);
  --identity-credential: var(--cg-coral);
  --identity-mfa: var(--cg-yellow);
  --identity-approval: var(--cg-violet);
  --identity-activity: var(--cg-activity);

  --content-max: 1260px;
  --gutter: 28px;
  --radius-panel: 12px;
  --radius-feature: 28px;
  --section-space: 120px;

  /* Derived component tokens. */
  --border-quiet: 1px solid rgb(20 44 72 / 20%);
  --border-trust: 1px solid var(--cg-ink);
  --shadow-offset: 10px 10px 0 rgb(20 44 72 / 10%);
  --shadow-panel: 0 1px 2px rgb(20 44 72 / 6%);
  --transition-ui: 200ms ease-out;

  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --display-xl: clamp(48px, 6.2vw, 92px);
  --display-lg: clamp(40px, 4.4vw, 68px);
  --heading-md: clamp(22px, 2vw, 30px);
  --body-lg: 17px;
  --body: 16px;
  --label: 10px;
}

/* Foundation ------------------------------------------------------------- */

.cg-root {
  margin: 0;
  overflow-x: hidden;
  background: var(--cg-canvas);
  color: var(--cg-ink);
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.cg-root * {
  box-sizing: border-box;
}

.cg-root :where(a) {
  color: var(--cg-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cg-root :focus-visible {
  outline: 2px solid var(--cg-blue);
  outline-offset: 3px;
}

.cg-display-xl,
.cg-display-lg,
.cg-heading {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

.cg-display-xl {
  font-size: var(--display-xl);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.05em;
}

.cg-display-lg {
  font-size: var(--display-lg);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.cg-heading {
  font-size: var(--heading-md);
  font-weight: 600;
  line-height: 1.1;
}

.cg-lede {
  margin: 0;
  color: var(--cg-muted);
  font-size: var(--body-lg);
  line-height: 1.65;
}

.cg-body {
  margin: 0;
  font-size: var(--body);
  line-height: 1.65;
}

.cg-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}

.cg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Layout ----------------------------------------------------------------- */

.cg-container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.cg-section {
  padding-block: var(--section-space);
  scroll-margin-top: 88px;
}

.cg-section + .cg-section {
  padding-top: 0;
}

.cg-section-header {
  display: grid;
  gap: 20px 48px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: var(--border-quiet);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.cg-section-header-lede {
  padding-bottom: 6px;
}

.cg-grid {
  display: grid;
  gap: var(--gutter);
  margin-top: 40px;
}

.cg-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cg-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cg-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cg-grid-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.cg-split {
  display: grid;
  gap: var(--gutter);
  margin-top: 40px;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cg-divider {
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--border-quiet);
}

.cg-signal-bar {
  display: grid;
  height: 8px;
  grid-template-columns: repeat(6, 1fr);
}

.cg-signal-bar span:nth-child(1) { background: var(--cg-blue); }
.cg-signal-bar span:nth-child(2) { background: var(--cg-coral); }
.cg-signal-bar span:nth-child(3) { background: var(--cg-violet); }
.cg-signal-bar span:nth-child(4) { background: var(--cg-yellow); }
.cg-signal-bar span:nth-child(5) { background: var(--cg-mint); }
.cg-signal-bar span:nth-child(6) { background: var(--cg-sky); }

/* Labels ----------------------------------------------------------------- */

.cg-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  background: rgb(20 44 72 / 8%);
  color: var(--cg-ink);
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.cg-label-plain {
  padding: 0;
  background: none;
}

.cg-label-routing { background: rgb(49 86 227 / 12%); }
.cg-label-inbox { background: rgb(85 199 165 / 22%); }
.cg-label-browser { background: rgb(130 200 245 / 26%); }
.cg-label-credential { background: rgb(255 128 102 / 20%); }
.cg-label-mfa { background: rgb(244 201 93 / 30%); }
.cg-label-approval { background: rgb(139 124 246 / 20%); }
.cg-label-activity { background: var(--identity-activity); }

.cg-label-index {
  color: var(--cg-blue);
}

/* Buttons ---------------------------------------------------------------- */

.cg-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-inline: 22px;
  border: 1px solid var(--cg-blue);
  border-radius: 8px;
  background: var(--cg-blue);
  color: var(--cg-surface);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-ui), border-color var(--transition-ui),
    color var(--transition-ui);
}

.cg-button:hover {
  background: #2544c4;
  border-color: #2544c4;
}

.cg-button-secondary {
  border-color: var(--cg-ink);
  background: transparent;
  color: var(--cg-ink);
}

.cg-button-secondary:hover {
  background: var(--cg-ink);
  color: var(--cg-surface);
}

.cg-button-quiet {
  border-color: rgb(20 44 72 / 20%);
  background: var(--cg-surface);
  color: var(--cg-ink);
}

.cg-button-quiet:hover {
  border-color: var(--cg-ink);
  background: var(--cg-surface);
}

.cg-button-sm {
  min-height: 38px;
  padding-inline: 14px;
  font-size: 13px;
}

.cg-button[disabled],
.cg-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
}

.cg-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Status pills — semantic fill + Ink text + explicit label. --------------- */

.cg-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid rgb(20 44 72 / 24%);
  border-radius: 999px;
  background: var(--cg-surface);
  color: var(--cg-ink);
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.cg-status-inbox { background: rgb(85 199 165 / 34%); }
.cg-status-browser { background: rgb(130 200 245 / 40%); }
.cg-status-credential { background: rgb(255 128 102 / 32%); }
.cg-status-mfa { background: rgb(244 201 93 / 46%); }
.cg-status-approval { background: rgb(139 124 246 / 30%); }
.cg-status-activity { background: var(--identity-activity); }
.cg-status-routing { background: rgb(49 86 227 / 16%); }

.cg-status-on-ink {
  border-color: rgb(255 253 247 / 26%);
  background: rgb(244 201 93 / 92%);
  color: var(--cg-ink);
}

/* Panels ----------------------------------------------------------------- */

.cg-panel {
  padding: 24px;
  border: var(--border-quiet);
  border-radius: var(--radius-panel);
  background: var(--cg-surface);
  box-shadow: var(--shadow-panel);
}

.cg-panel-media {
  display: block;
  margin-bottom: 20px;
  overflow: hidden;
  border: var(--border-quiet);
  border-radius: var(--radius-panel);
  background: var(--cg-canvas);
}

.cg-panel-media img,
img.cg-panel-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.cg-panel .cg-panel-media {
  margin: -24px -24px 20px;
  border: 0;
  border-bottom: var(--border-quiet);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}

.cg-panel-trust {
  border: var(--border-trust);
  box-shadow: none;
}

.cg-panel-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.cg-panel-note {
  padding: 22px 24px;
  border: 0;
  border-left: 4px solid var(--cg-ink);
  border-radius: 0;
  background: var(--cg-surface);
  box-shadow: none;
}

.cg-panel-note-inbox { border-left-color: var(--identity-inbox); }
.cg-panel-note-browser { border-left-color: var(--identity-browser); }
.cg-panel-note-credential { border-left-color: var(--identity-credential); }
.cg-panel-note-mfa { border-left-color: var(--identity-mfa); }
.cg-panel-note-approval { border-left-color: var(--identity-approval); }
.cg-panel-note-routing { border-left-color: var(--cg-blue); }
.cg-panel-note-activity { border-left-color: var(--identity-activity); }

/* Feature panel — signal fill + Ink outline + offset shadow. */
.cg-panel-feature {
  padding: 32px;
  border: var(--border-trust);
  border-radius: var(--radius-feature);
  background: rgb(130 200 245 / 26%);
  box-shadow: var(--shadow-offset);
}

.cg-panel-feature-inbox { background: rgb(85 199 165 / 26%); }
.cg-panel-feature-browser { background: rgb(130 200 245 / 26%); }
.cg-panel-feature-credential { background: rgb(255 128 102 / 24%); }
.cg-panel-feature-mfa { background: rgb(244 201 93 / 34%); }
.cg-panel-feature-approval { background: rgb(139 124 246 / 22%); }
.cg-panel-feature-activity { background: var(--identity-activity); }
.cg-panel-feature-routing { background: rgb(49 86 227 / 12%); }

/* Technical panel — Ink surface, Surface text, Yellow status. */
.cg-panel-technical {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--cg-ink);
  border-radius: var(--radius-panel);
  background: var(--cg-ink);
  color: var(--cg-surface);
}

.cg-panel-technical pre {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.cg-panel-technical-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.cg-panel-technical .cg-label {
  background: rgb(255 253 247 / 12%);
  color: var(--cg-surface);
}

.cg-panel-technical .cg-code {
  border: 0;
  background: transparent;
  color: var(--cg-surface);
}

.cg-callout {
  margin: 40px 0 0;
  padding: 28px 32px;
  border: var(--border-trust);
  background: rgb(130 200 245 / 26%);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.cg-callout-browser { background: rgb(130 200 245 / 26%); }
.cg-callout-credential { background: rgb(255 128 102 / 24%); }
.cg-callout-mfa { background: rgb(244 201 93 / 34%); }
.cg-callout-inbox { background: rgb(85 199 165 / 26%); }
.cg-callout-approval { background: rgb(139 124 246 / 22%); }
.cg-callout-activity { background: var(--identity-activity); }
.cg-callout-routing { background: rgb(49 86 227 / 12%); }

.cg-callout .cg-label {
  display: block;
  margin-bottom: 12px;
}

/* Code ------------------------------------------------------------------- */

.cg-code {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  border: var(--border-quiet);
  border-radius: var(--radius-panel);
  background: var(--cg-surface);
  color: var(--cg-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  tab-size: 2;
}

.cg-code-inline {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgb(20 44 72 / 7%);
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Metric / token cards --------------------------------------------------- */

.cg-metric {
  padding: 20px;
  border: var(--border-quiet);
  border-radius: var(--radius-panel);
  background: var(--cg-surface);
}

.cg-metric-value {
  display: block;
  margin: 14px 0 6px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.cg-metric-note {
  margin: 0;
  color: var(--cg-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Color documentation ---------------------------------------------------- */

.cg-swatch {
  overflow: hidden;
  border: var(--border-quiet);
  border-radius: var(--radius-panel);
  background: var(--cg-surface);
}

.cg-swatch-chip {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 92px;
  padding: 12px 14px;
}

.cg-swatch-chip .cg-label {
  background: rgb(255 253 247 / 62%);
}

.cg-swatch-body {
  padding: 14px;
  border-top: var(--border-quiet);
}

.cg-swatch-role {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.cg-swatch-meaning {
  margin: 0;
  color: var(--cg-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Primitive card — one identity service per card. ------------------------ */

.cg-primitive {
  overflow: hidden;
  border: var(--border-quiet);
  border-radius: var(--radius-panel);
  background: var(--cg-surface);
}

.cg-primitive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
}

.cg-primitive-inbox .cg-primitive-head { background: rgb(85 199 165 / 30%); }
.cg-primitive-browser .cg-primitive-head { background: rgb(130 200 245 / 36%); }
.cg-primitive-credential .cg-primitive-head { background: rgb(255 128 102 / 28%); }
.cg-primitive-mfa .cg-primitive-head { background: rgb(244 201 93 / 42%); }
.cg-primitive-approval .cg-primitive-head { background: rgb(139 124 246 / 26%); }
.cg-primitive-activity .cg-primitive-head { background: var(--identity-activity); }

.cg-primitive-body {
  padding: 16px 14px 18px;
}

.cg-primitive-name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.cg-primitive-copy {
  margin: 0;
  color: var(--cg-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Workspace card — product evidence, not dashboard chrome. --------------- */

.cg-workspace {
  overflow: hidden;
  border: 1px solid var(--cg-ink);
  border-radius: var(--radius-panel);
  background: var(--cg-surface);
  box-shadow: var(--shadow-offset);
}

.cg-workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--cg-ink);
  color: var(--cg-surface);
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cg-workspace-identity {
  padding: 22px 20px;
  border-bottom: var(--border-quiet);
}

.cg-workspace-name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.cg-workspace-address {
  color: var(--cg-muted);
  font-family: var(--font-mono);
  font-size: 13px;
}

.cg-workspace-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cg-workspace-service {
  padding: 16px 18px;
  border-top: var(--border-quiet);
  border-right: var(--border-quiet);
}

.cg-workspace-service:nth-child(2n) {
  border-right: 0;
}

.cg-workspace-service-inbox { background: rgb(85 199 165 / 18%); }
.cg-workspace-service-browser { background: rgb(130 200 245 / 22%); }
.cg-workspace-service-credential { background: rgb(255 128 102 / 16%); }
.cg-workspace-service-mfa { background: rgb(244 201 93 / 24%); }
.cg-workspace-service-approval { background: rgb(139 124 246 / 16%); }
.cg-workspace-service-activity { background: rgb(204 238 230 / 60%); }

.cg-workspace-service-state {
  display: block;
  margin: 12px 0 4px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.cg-workspace-service-detail {
  color: var(--cg-muted);
  font-size: 13px;
}

.cg-workspace-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--cg-ink);
}

/* Tables ----------------------------------------------------------------- */

.cg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}

.cg-table caption {
  margin-bottom: 12px;
  color: var(--cg-muted);
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}

.cg-table th,
.cg-table td {
  padding: 12px 14px;
  border-bottom: var(--border-quiet);
  vertical-align: top;
}

.cg-table thead th {
  border-bottom: 1px solid var(--cg-ink);
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cg-table tbody th {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

/* Lists ------------------------------------------------------------------ */

.cg-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cg-list li {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-bottom: var(--border-quiet);
  font-size: 15px;
  line-height: 1.5;
}

.cg-list li:last-child {
  border-bottom: 0;
}

.cg-list-marker {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.cg-list-do .cg-list-marker { color: #2f7f66; }
.cg-list-dont .cg-list-marker { color: #c2503a; }

.cg-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cg-checklist li {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border: var(--border-quiet);
  border-radius: var(--radius-panel);
  background: var(--cg-surface);
  font-size: 15px;
  line-height: 1.5;
}

.cg-checklist li + li {
  margin-top: 10px;
}

.cg-checklist-index {
  flex: 0 0 auto;
  color: var(--cg-blue);
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  padding-top: 4px;
}

.cg-definitions {
  margin: 0;
}

.cg-definitions dt {
  padding-top: 14px;
  border-top: var(--border-quiet);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.cg-definitions dd {
  margin: 2px 0 14px;
  color: var(--cg-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Forms ------------------------------------------------------------------ */

.cg-field {
  display: block;
}

.cg-field + .cg-field {
  margin-top: 18px;
}

.cg-field-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cg-input,
.cg-select,
.cg-textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgb(20 44 72 / 24%);
  border-radius: 8px;
  background: var(--cg-surface);
  color: var(--cg-ink);
  font-family: var(--font-sans);
  font-size: 15px;
  transition: border-color var(--transition-ui);
}

.cg-textarea {
  min-height: 110px;
  resize: vertical;
}

.cg-input:focus,
.cg-select:focus,
.cg-textarea:focus {
  border-color: var(--cg-blue);
  outline: 0;
}

.cg-input[aria-invalid="true"] {
  border-color: var(--cg-coral);
}

.cg-field-hint {
  margin: 8px 0 0;
  color: var(--cg-muted);
  font-size: 13px;
}

.cg-field-error {
  margin: 8px 0 0;
  color: #c2503a;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

.cg-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
}

.cg-check input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--cg-blue);
}

/* Page chrome ------------------------------------------------------------ */

.cg-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--cg-surface);
  border-bottom: var(--border-quiet);
}

.cg-topbar-inner {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cg-topbar-mark {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: var(--cg-ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.cg-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cg-toc a {
  color: var(--cg-ink);
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.cg-toc a:hover {
  color: var(--cg-blue);
}

.cg-hero {
  padding-block: 96px var(--section-space);
  border-bottom: var(--border-quiet);
}

.cg-hero-grid {
  display: grid;
  gap: 48px var(--gutter);
  align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cg-hero-copy {
  display: grid;
  gap: 24px;
  justify-items: start;
}

.cg-hero-copy .cg-lede {
  max-width: 46ch;
}

.cg-hero-qualifier {
  font-size: var(--body);
}

.cg-spec {
  display: grid;
  gap: 0;
  margin: 0;
  border: var(--border-quiet);
  border-radius: var(--radius-panel);
  background: var(--cg-surface);
}

.cg-spec div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
}

.cg-spec div + div {
  border-top: var(--border-quiet);
}

.cg-spec dt {
  color: var(--cg-muted);
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cg-spec dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.cg-stack {
  display: grid;
  gap: 16px;
  align-content: start;
}

.cg-stack-lg {
  gap: 28px;
}

.cg-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cg-footer {
  padding-block: 48px;
  border-top: var(--border-quiet);
  background: var(--cg-surface);
}

.cg-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cg-skip-link {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  transform: translateY(-180%);
  background: var(--cg-yellow);
  color: var(--cg-ink);
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cg-skip-link:focus {
  transform: translateY(0);
}

.cg-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cg-menu-trigger {
  display: none;
  width: 42px;
  height: 38px;
  padding: 8px;
  border: 1px solid var(--cg-ink);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.cg-menu-trigger span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 5px 0;
  background: var(--cg-ink);
}

.cg-mobile-nav {
  display: none;
}

.cg-topbar.is-scrolled {
  box-shadow: var(--shadow-panel);
}

.cg-panel-technical .cg-button-secondary {
  border-color: rgb(255 253 247 / 45%);
  background: transparent;
  color: var(--cg-surface);
}

.cg-panel-technical .cg-button-secondary:hover {
  border-color: var(--cg-surface);
  background: var(--cg-surface);
  color: var(--cg-ink);
}

.cg-copy-button {
  flex: 0 0 auto;
}

.cg-copy-status {
  color: var(--cg-surface);
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.menu-open {
  overflow: hidden;
}

.cg-prose {
  max-width: 72ch;
  margin: 40px 0 0;
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: 1.7;
}

.cg-prose > :first-child {
  margin-top: 0;
}

.cg-prose h2 {
  margin: 48px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.cg-prose h3 {
  margin: 36px 0 12px;
  font-family: var(--font-display);
  font-size: var(--heading-md);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.cg-prose p,
.cg-prose ul,
.cg-prose ol,
.cg-prose blockquote,
.cg-prose table,
.cg-prose pre,
.cg-prose img,
.cg-prose hr {
  margin-block: 20px;
}

.cg-prose ul,
.cg-prose ol {
  padding-left: 1.5em;
}

.cg-prose li + li {
  margin-top: 8px;
}

.cg-prose pre {
  overflow-x: auto;
  padding: 18px 20px;
  border: 1px solid var(--cg-ink);
  border-radius: var(--radius-panel);
  background: var(--cg-ink);
  color: var(--cg-surface);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
}

.cg-prose code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgb(20 44 72 / 7%);
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.cg-prose pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

.cg-prose blockquote {
  margin-inline: 0;
  padding: 22px 24px;
  border-left: 4px solid var(--cg-ink);
  background: var(--cg-surface);
}

.cg-prose table {
  width: 100%;
  border-collapse: collapse;
}

.cg-prose th,
.cg-prose td {
  padding: 12px 14px;
  border: var(--border-quiet);
  text-align: left;
}

.cg-prose th {
  background: var(--cg-surface);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cg-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-panel);
}

.cg-prose hr {
  border: 0;
  border-top: var(--border-quiet);
}

/* Motion ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root[data-brand="civic"] {
    --transition-ui: 0ms;
  }

  .cg-root * {
    animation: none !important;
    transition: none !important;
  }
}

/* Responsive ------------------------------------------------------------- */

@media (width <= 1180px) {
  .cg-grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cg-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 900px) {
  :root[data-brand="civic"] {
    --gutter: 20px;
    --section-space: 72px;
  }

  .cg-section-header,
  .cg-split,
  .cg-grid-2,
  .cg-grid-3,
  .cg-grid-4,
  .cg-grid-6 {
    grid-template-columns: minmax(0, 1fr);
  }

  .cg-workspace-services {
    grid-template-columns: minmax(0, 1fr);
  }

  .cg-workspace-service {
    border-right: 0;
  }

  .cg-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cg-hero {
    padding-block: 56px var(--section-space);
  }

  .cg-toc {
    display: none;
  }

  .cg-topbar-actions {
    display: none;
  }

  .cg-menu-trigger {
    display: block;
  }

  .cg-mobile-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    padding: 12px var(--gutter) 20px;
    border-bottom: var(--border-quiet);
    background: var(--cg-surface);
  }

  .cg-mobile-nav:not(.is-open) {
    display: none;
  }

  .cg-mobile-nav a {
    padding: 14px 0;
    border-bottom: var(--border-quiet);
    color: var(--cg-ink);
    font-family: var(--font-mono);
    font-size: var(--label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .cg-mobile-nav .cg-button {
    width: 100%;
    margin-top: 14px;
  }
}