:root {
  /* Wireframe colors: no additional brand colors are permitted. */
  --ag-ink: #121212;
  --ag-ink-soft: #2a2b2a;
  --ag-paper: #fafaf8;
  --ag-white: #ffffff;
  --ag-sage: #e3e9e2;
  --ag-sage-light: #eff2ee;
  --ag-brand: #026b02;
  --ag-brand-tint: #cbe3cb;
  --ag-brand-pale: #e6f0e6;
  --ag-signal: #b45309;
  --ag-signal-tint: #f6e8d8;
  --ag-line: #e6e8e4;
  --ag-line-strong: #d5d8d3;
  --ag-text-2: #5f625f;
  --ag-text-3: #8a8d8a;
  --ag-font-sans: "IBM Plex Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --ag-font-mono: "IBM Plex Mono", monospace;
  --ag-weight-display: 400;
  --ag-weight-heading: 500;
  --ag-weight-strong: 700;

  --ag-content: 1080px;
  --ag-reading: 680px;
  --ag-gutter: 32px;

  --ag-space-1: 4px;
  --ag-space-2: 8px;
  --ag-space-3: 12px;
  --ag-space-4: 16px;
  --ag-space-5: 20px;
  --ag-space-6: 24px;
  --ag-space-8: 32px;
  --ag-space-10: 40px;
  --ag-space-12: 48px;
  --ag-space-16: 64px;
  --ag-space-20: 80px;
  --ag-space-24: 96px;
  --ag-space-28: 112px;
  --ag-space-32: 128px;

  --ag-leading-display: 1.34;
  --ag-leading-page: 1.4;
  --ag-leading-section: 1.5;
  --ag-leading-heading: 1.55;
  --ag-leading-body: 1.82;
  --ag-leading-compact: 1.65;
  --ag-leading-meta: 1.5;

  --ag-radius-xs: 3px;
  --ag-radius-sm: 4px;
  --ag-radius-md: 6px;
  --ag-radius-lg: 10px;
  --ag-radius-xl: 12px;
  --ag-radius-2xl: 16px;

  --ag-shadow-float: 0 12px 30px rgba(18, 18, 18, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body.ag-body {
  margin: 0;
  background: var(--ag-paper);
  color: var(--ag-ink);
  font-family: var(--ag-font-sans);
  font-size: 16px;
  line-height: var(--ag-leading-body);
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

.ag-body h1,
.ag-body h2,
.ag-body h3,
.ag-body h4,
.ag-body p,
.ag-body ul,
.ag-body ol,
.ag-body figure,
.ag-body blockquote {
  margin: 0;
}

.ag-body h1,
.ag-body h2 {
  font-weight: var(--ag-weight-display);
}

.ag-body h3,
.ag-body h4 {
  font-weight: var(--ag-weight-heading);
}

.ag-body ul,
.ag-body ol {
  padding: 0;
}

.ag-body button,
.ag-body input,
.ag-body select,
.ag-body textarea {
  font: inherit;
}

.ag-body a {
  color: inherit;
  text-decoration: none;
}

.ag-body img,
.ag-body svg {
  display: block;
  max-width: 100%;
}

.ag-wrap {
  width: min(calc(100% - (var(--ag-gutter) * 2)), var(--ag-content));
  margin-inline: auto;
}

.ag-reading {
  max-width: var(--ag-reading);
}

.ag-mono {
  font-family: var(--ag-font-mono);
  letter-spacing: 0.08em;
}

.ag-section {
  padding-block: var(--ag-space-28);
  border-top: 1px solid var(--ag-line);
}

.ag-section--white {
  background: var(--ag-white);
}

.ag-section--compact {
  padding-block: var(--ag-space-20);
}

.ag-section--narrative {
  padding-block: var(--ag-space-24) var(--ag-space-32);
}

.ag-section--reference {
  padding-block: var(--ag-space-20) var(--ag-space-24);
}

.ag-section--showcase {
  padding-block: var(--ag-space-32) var(--ag-space-24);
}

.ag-section-head {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  gap: var(--ag-space-16);
  align-items: end;
  margin-bottom: var(--ag-space-12);
}

.ag-section-head--stack {
  display: block;
}

.ag-kicker {
  display: flex;
  align-items: center;
  gap: var(--ag-space-3);
  color: var(--ag-text-2);
  font-family: var(--ag-font-mono);
  font-size: 12px;
  line-height: var(--ag-leading-meta);
  letter-spacing: 0.14em;
}

.ag-kicker::after {
  width: 32px;
  height: 1px;
  background: var(--ag-ink);
  content: "";
}

.ag-title-display {
  max-width: 780px;
  font-size: 56px;
  font-weight: var(--ag-weight-display);
  line-height: var(--ag-leading-display);
  letter-spacing: 0.015em;
}

.ag-title-page {
  font-size: 48px;
  font-weight: var(--ag-weight-display);
  line-height: var(--ag-leading-page);
  letter-spacing: 0.015em;
}

.ag-title-section {
  font-size: 40px;
  font-weight: var(--ag-weight-display);
  line-height: var(--ag-leading-section);
  letter-spacing: 0.015em;
}

.ag-title-block {
  font-size: 24px;
  font-weight: var(--ag-weight-heading);
  line-height: var(--ag-leading-heading);
}

.ag-title-item {
  font-size: 20px;
  font-weight: var(--ag-weight-heading);
  line-height: var(--ag-leading-heading);
}

.ag-lead {
  max-width: 660px;
  color: var(--ag-text-2);
  font-size: 20px;
  line-height: 1.85;
}

.ag-body-copy {
  max-width: 680px;
  color: var(--ag-ink-soft);
  font-size: 16px;
  line-height: var(--ag-leading-body);
}

.ag-small {
  color: var(--ag-text-2);
  font-size: 14px;
  line-height: var(--ag-leading-compact);
}

.ag-caption {
  color: var(--ag-text-3);
  font-size: 12px;
  line-height: var(--ag-leading-meta);
}

.ag-accent {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}

.ag-accent::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0.14em;
  left: 0;
  height: 0.32em;
  background: var(--ag-brand-tint);
  content: "";
}

.ag-text-brand {
  color: var(--ag-brand);
}

.ag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ag-ink);
}

.ag-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

.ag-icon--brand {
  color: var(--ag-brand);
}

.ag-icon--soft {
  color: var(--ag-brand);
}

.ag-icon--ink {
  color: var(--ag-ink);
}

.ag-icon--sm {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  border-radius: 0;
}

.ag-icon--sm svg {
  width: 15px;
  height: 15px;
}

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

.ag-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--ag-radius-sm);
  padding: 12px 24px;
  background: none;
  color: var(--ag-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.ag-body .ag-button--primary {
  background: var(--ag-ink);
  color: var(--ag-white);
}

.ag-button--primary:hover {
  background: var(--ag-ink-soft);
}

.ag-button--secondary {
  border-color: var(--ag-line-strong);
  background: var(--ag-white);
}

.ag-button--secondary:hover {
  border-color: var(--ag-ink);
}

.ag-body .ag-button--white {
  background: var(--ag-white);
  color: var(--ag-ink);
}

.ag-button--white:hover {
  background: var(--ag-line);
}

.ag-body .ag-button--dark-outline {
  border-color: var(--ag-text-2);
  color: var(--ag-white);
}

.ag-button--dark-outline:hover {
  border-color: var(--ag-white);
}

.ag-button--large {
  min-height: 50px;
  padding: 14px 34px;
  font-size: 16px;
}

.ag-button--disabled,
.ag-button:disabled {
  border-color: var(--ag-line);
  background: var(--ag-line);
  color: var(--ag-text-3);
  cursor: not-allowed;
}

.ag-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--ag-ink);
  padding-bottom: 3px;
  color: var(--ag-ink);
  font-size: 16px;
  font-weight: 500;
}

.ag-text-link:hover {
  border-color: var(--ag-brand);
  color: var(--ag-brand);
}

.ag-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ag-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border: 0;
  border-bottom: 1px solid var(--ag-line-strong);
  border-radius: 0;
  padding: 2px 0;
  background: transparent;
  color: var(--ag-text-2);
  font-size: 14px;
  line-height: var(--ag-leading-meta);
}

.ag-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: var(--ag-radius-xs);
  padding: 2px 8px;
  font-family: var(--ag-font-mono);
  font-size: 12px;
  line-height: var(--ag-leading-meta);
  letter-spacing: 0.06em;
}

.ag-badge--required {
  background: var(--ag-signal);
  color: var(--ag-white);
}

.ag-badge--optional {
  border: 1px solid var(--ag-line);
  background: var(--ag-paper);
  color: var(--ag-text-3);
}

.ag-badge--free {
  background: var(--ag-brand);
  color: var(--ag-white);
}

.ag-badge--risk {
  background: var(--ag-signal-tint);
  color: var(--ag-signal);
}

.ag-rule-list {
  border-top: 1px solid var(--ag-line-strong);
}

.ag-rule-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(0, 1.55fr);
  gap: var(--ag-space-10);
  padding-block: 30px;
  border-bottom: 1px solid var(--ag-line);
}

.ag-rule-row > strong {
  font-size: 16px;
  line-height: var(--ag-leading-heading);
}

.ag-rule-row > div,
.ag-rule-row > p {
  color: var(--ag-text-2);
  font-size: 16px;
  line-height: var(--ag-leading-body);
}

.ag-do-dont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block: 1px solid var(--ag-line-strong);
}

.ag-do-dont > section {
  padding: 32px 36px 36px 0;
  background: transparent;
}

.ag-do-dont > section + section {
  border-left: 1px solid var(--ag-line);
  padding-right: 0;
  padding-left: 36px;
}

.ag-do-dont h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  line-height: var(--ag-leading-heading);
}

.ag-do-dont ul {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  list-style: none;
}

.ag-do-dont li {
  position: relative;
  padding-left: 16px;
  color: var(--ag-text-2);
  font-size: 16px;
  line-height: var(--ag-leading-compact);
}

.ag-do-dont li::before {
  position: absolute;
  top: 0.85em;
  left: 0;
  width: 7px;
  height: 1.5px;
  background: var(--ag-brand);
  content: "";
}

.ag-do-dont .ag-dont li::before {
  background: var(--ag-signal);
}

.ag-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ag-line-strong);
  border-left: 1px solid var(--ag-line-strong);
}

.ag-color {
  min-height: 206px;
  border-right: 1px solid var(--ag-line-strong);
  border-bottom: 1px solid var(--ag-line-strong);
  background: var(--ag-white);
}

.ag-color-swatch {
  height: 86px;
  border-bottom: 1px solid var(--ag-line);
}

.ag-color-meta {
  padding: 16px 18px 18px;
}

.ag-color-meta strong {
  display: block;
  font-size: 14px;
}

.ag-color-meta code {
  display: block;
  margin-top: 3px;
  color: var(--ag-text-3);
  font-family: var(--ag-font-mono);
  font-size: 12px;
}

.ag-color-meta span {
  display: block;
  margin-top: 7px;
  color: var(--ag-text-2);
  font-size: 14px;
  line-height: var(--ag-leading-meta);
}

.ag-type-specimen {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ag-line-strong);
}

.ag-type-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: var(--ag-space-8);
  align-items: baseline;
  padding-block: var(--ag-space-6);
  border-bottom: 1px solid var(--ag-line);
}

.ag-type-meta {
  color: var(--ag-text-3);
  font-family: var(--ag-font-mono);
  font-size: 12px;
  line-height: var(--ag-leading-meta);
}

.ag-space-scale {
  display: grid;
  gap: 12px;
}

.ag-space-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.ag-space-row code {
  color: var(--ag-text-3);
  font-family: var(--ag-font-mono);
  font-size: 12px;
}

.ag-space-bar {
  height: 12px;
  background: var(--ag-brand-tint);
}

.ag-platform-stack {
  margin: 0;
  border: 1px solid var(--ag-line-strong);
  background: var(--ag-white);
}

.ag-platform-stack figcaption {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: var(--ag-space-8);
  align-items: baseline;
  padding: 24px 32px;
  border-bottom: 1px solid var(--ag-line-strong);
}

.ag-platform-stack figcaption span {
  color: var(--ag-brand);
  font-size: 14px;
  font-weight: 700;
}

.ag-platform-stack figcaption strong {
  font-size: 20px;
  line-height: var(--ag-leading-heading);
}

.ag-platform-layer {
  display: grid;
  grid-template-columns: 176px minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: var(--ag-space-8);
  align-items: center;
  min-height: 112px;
  padding: 24px 32px;
  border-bottom: 1px solid var(--ag-line-strong);
}

.ag-platform-layer-label {
  color: var(--ag-text-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.ag-platform-layer strong {
  font-size: 20px;
  line-height: var(--ag-leading-heading);
}

.ag-platform-layer p {
  color: var(--ag-text-2);
  font-size: 16px;
  line-height: var(--ag-leading-compact);
}

.ag-platform-layer--outcome {
  border-top: 4px solid var(--ag-brand);
}

.ag-platform-layer--agents {
  background: var(--ag-sage-light);
}

.ag-platform-layer--data {
  background: var(--ag-paper);
}

.ag-platform-layer--foundation {
  border-bottom: 0;
  background: var(--ag-ink);
  color: var(--ag-white);
}

.ag-platform-layer--foundation .ag-platform-layer-label,
.ag-platform-layer--foundation p {
  color: var(--ag-line-strong);
}

.ag-platform-conclusion {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: var(--ag-space-8);
  padding: 24px 32px;
  border-top: 1px solid var(--ag-line-strong);
  background: var(--ag-sage);
}

.ag-platform-conclusion span {
  color: var(--ag-brand);
  font-size: 14px;
  font-weight: 700;
}

.ag-platform-conclusion strong {
  font-size: 18px;
  line-height: var(--ag-leading-heading);
}

.ag-compare {
  border-block: 1px solid var(--ag-line-strong);
  background: transparent;
}

.ag-compare-head {
  padding: 30px 0 0;
}

.ag-compare-head h4 {
  font-size: 20px;
  line-height: var(--ag-leading-heading);
}

.ag-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  padding: 26px 0 34px;
}

.ag-compare-pane {
  padding: 22px 24px;
}

.ag-compare-pane--before {
  border-left: 3px solid var(--ag-signal);
  background: transparent;
}

.ag-compare-pane--after {
  border-left: 3px solid var(--ag-brand);
  background: var(--ag-sage-light);
}

.ag-compare-label {
  color: var(--ag-signal);
  font-family: var(--ag-font-mono);
  font-size: 12px;
  line-height: var(--ag-leading-meta);
  letter-spacing: 0.1em;
}

.ag-compare-pane--after .ag-compare-label {
  color: var(--ag-brand);
}

.ag-compare-pane ul {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  list-style: none;
}

.ag-compare-pane li {
  position: relative;
  padding-left: 15px;
  color: var(--ag-ink-soft);
  font-size: 16px;
  line-height: var(--ag-leading-compact);
}

.ag-compare-pane li::before {
  position: absolute;
  top: 0.85em;
  left: 0;
  width: 7px;
  height: 1.5px;
  background: var(--ag-signal);
  content: "";
}

.ag-compare-pane--after li::before {
  background: var(--ag-brand);
}

.ag-compare-arrow {
  display: grid;
  place-items: center;
  padding-inline: 18px;
  color: var(--ag-text-3);
}

.ag-callout {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  padding: 60px 54px;
  background: var(--ag-ink);
  color: var(--ag-white);
}

.ag-callout::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  height: auto;
  background: var(--ag-brand);
  content: "";
}

.ag-callout h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: var(--ag-leading-section);
}

.ag-callout p {
  max-width: 620px;
  margin-top: 12px;
  color: var(--ag-line-strong);
  font-size: 16px;
  line-height: var(--ag-leading-body);
}

.ag-callout .ag-button-row {
  margin-top: 28px;
}

.ag-note {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  border-left: 3px solid var(--ag-brand);
  border-radius: 0;
  padding: 4px 0 4px 18px;
  background: transparent;
  color: var(--ag-ink-soft);
}

.ag-note--risk {
  border-left-color: var(--ag-signal);
  background: transparent;
  color: var(--ag-ink-soft);
}

.ag-note strong {
  display: block;
  font-size: 16px;
  line-height: var(--ag-leading-heading);
}

.ag-note p {
  margin-top: 5px;
  font-size: 14px;
  line-height: var(--ag-leading-compact);
}

.ag-detail-list {
  border-top: 1px solid var(--ag-line-strong);
}

.ag-detail-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 42px;
  padding-block: 42px;
  border-bottom: 1px solid var(--ag-line);
}

.ag-detail-name {
  color: var(--ag-brand);
  font-size: 14px;
  font-weight: 500;
  line-height: var(--ag-leading-meta);
}

.ag-detail-content h4 {
  font-size: 24px;
  line-height: var(--ag-leading-heading);
}

.ag-detail-content > p {
  max-width: 680px;
  margin-top: 10px;
  color: var(--ag-ink-soft);
  font-size: 16px;
  line-height: var(--ag-leading-body);
}

.ag-detail-example {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  max-width: 680px;
  margin-top: 20px;
  border-top: 1px solid var(--ag-line);
  padding: 18px 0 0;
  background: transparent;
}

.ag-detail-example span {
  color: var(--ag-text-3);
  font-size: 14px;
  font-weight: 500;
}

.ag-detail-example p {
  color: var(--ag-ink-soft);
  font-size: 16px;
  line-height: var(--ag-leading-compact);
}

.ag-process {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr auto 1fr;
  align-items: stretch;
  border-block: 1px solid var(--ag-line-strong);
}

.ag-process-node {
  border-radius: 0;
  padding: 28px 24px;
}

.ag-process-node--input {
  background: transparent;
}

.ag-process-node--core {
  border-top: 3px solid var(--ag-brand);
  background: transparent;
  color: var(--ag-ink);
}

.ag-process-node--output {
  border-top: 3px solid var(--ag-brand);
  background: var(--ag-sage-light);
  color: var(--ag-ink);
}

.ag-process-label {
  color: var(--ag-text-3);
  font-size: 12px;
  font-weight: 500;
}

.ag-process-node--core .ag-process-label {
  color: var(--ag-brand);
}

.ag-process-node--output .ag-process-label {
  color: var(--ag-brand);
}

.ag-process-node b {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  line-height: var(--ag-leading-heading);
}

.ag-process-node p {
  margin-top: 5px;
  color: var(--ag-text-2);
  font-size: 14px;
  line-height: var(--ag-leading-compact);
}

.ag-process-node--core p {
  color: var(--ag-text-2);
}

.ag-process-node--output p {
  color: var(--ag-text-2);
}

.ag-process-arrow {
  display: grid;
  place-items: center;
  padding-inline: 12px;
  color: var(--ag-text-3);
}

.ag-architecture {
  border-block: 1px solid var(--ag-line-strong);
  border-radius: 0;
  padding: 44px 0 38px;
  background: transparent;
}

.ag-architecture-purpose {
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
}

.ag-architecture-purpose strong {
  display: block;
  font-size: 20px;
  line-height: var(--ag-leading-heading);
}

.ag-architecture-purpose p {
  margin-top: 5px;
  color: var(--ag-text-2);
  font-size: 16px;
  line-height: var(--ag-leading-compact);
}

.ag-architecture-map {
  display: grid;
  grid-template-columns: 1fr auto 1.35fr auto 1fr;
  align-items: center;
}

.ag-architecture-column {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ag-line);
}

.ag-architecture-column > strong {
  margin-bottom: 12px;
  color: var(--ag-text-2);
  font-size: 14px;
  text-align: left;
}

.ag-architecture-item {
  border: 0;
  border-bottom: 1px solid var(--ag-line);
  border-radius: 0;
  padding: 12px 0;
  background: transparent;
  color: var(--ag-ink-soft);
  font-size: 14px;
  text-align: left;
}

.ag-architecture-item--out {
  border-color: var(--ag-line);
  background: transparent;
  color: var(--ag-ink-soft);
  font-weight: 500;
}

.ag-architecture-flow {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding-inline: 16px;
  color: var(--ag-text-3);
}

.ag-architecture-flow span {
  font-size: 12px;
  line-height: var(--ag-leading-meta);
  white-space: nowrap;
}

.ag-architecture-core {
  border-radius: 0;
  padding: 28px 30px;
  background: var(--ag-ink);
  color: var(--ag-white);
}

.ag-architecture-core > strong {
  display: flex;
  align-items: center;
  font-size: 18px;
  line-height: var(--ag-leading-heading);
}

.ag-architecture-core ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-top: 16px;
  list-style: none;
}

.ag-architecture-core li {
  position: relative;
  padding-left: 14px;
  color: var(--ag-line-strong);
  font-size: 14px;
  line-height: var(--ag-leading-compact);
}

.ag-architecture-core li::before {
  position: absolute;
  top: 0.85em;
  left: 0;
  width: 6px;
  height: 1.5px;
  background: var(--ag-brand-tint);
  content: "";
}

.ag-architecture-conclusion {
  margin-top: 30px;
  color: var(--ag-brand);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.ag-trigger {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  border-block: 1px solid var(--ag-line-strong);
  background: transparent;
}

.ag-trigger-step {
  min-height: 152px;
  padding: 30px 26px;
}

.ag-trigger-step strong {
  display: block;
  margin-top: 0;
  font-size: 18px;
  line-height: var(--ag-leading-heading);
}

.ag-trigger-step p {
  margin-top: 10px;
  color: var(--ag-text-2);
  font-size: 14px;
  line-height: var(--ag-leading-compact);
}

.ag-trigger-arrow {
  color: var(--ag-brand);
  font-size: 18px;
}

.ag-form {
  max-width: 640px;
}

.ag-field + .ag-field {
  margin-top: 24px;
}

.ag-field label,
.ag-field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
}

.ag-field input,
.ag-field select,
.ag-field textarea {
  width: 100%;
  border: 1px solid var(--ag-line-strong);
  border-radius: var(--ag-radius-md);
  outline: 0;
  padding: 14px 16px;
  background: var(--ag-white);
  color: var(--ag-ink);
  font-family: var(--ag-font-sans);
  font-size: 16px;
  line-height: var(--ag-leading-compact);
}

.ag-field input:focus,
.ag-field select:focus,
.ag-field textarea:focus {
  border-color: var(--ag-brand);
}

.ag-field input[aria-invalid="true"] {
  border-color: var(--ag-signal);
}

.ag-field textarea {
  min-height: 130px;
  resize: vertical;
}

.ag-field-help,
.ag-field-error {
  margin-top: 7px;
  color: var(--ag-text-3);
  font-size: 14px;
  line-height: var(--ag-leading-meta);
}

.ag-field-error {
  color: var(--ag-signal);
}

.ag-screenshot-placeholder {
  overflow: hidden;
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius-xl);
  background: var(--ag-white);
}

.ag-screenshot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  border-bottom: 1px solid var(--ag-line);
  padding-inline: 14px;
  color: var(--ag-text-3);
  font-family: var(--ag-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.ag-screenshot-body {
  display: grid;
  place-items: center;
  min-height: 270px;
  padding: 28px;
  background: var(--ag-paper);
}

.ag-screenshot-message {
  max-width: 360px;
  border: 1px dashed var(--ag-line-strong);
  border-radius: var(--ag-radius-md);
  padding: 22px 26px;
  color: var(--ag-text-2);
  font-size: 16px;
  line-height: var(--ag-leading-compact);
  text-align: center;
}

.ag-header-demo {
  border: 1px solid var(--ag-line);
  background: var(--ag-paper);
}

.ag-header-demo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding-inline: 24px;
}

.ag-header-demo img {
  width: 118px;
  height: auto;
}

.ag-header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.ag-header-nav a {
  color: var(--ag-ink-soft);
  font-size: 14px;
}

.ag-footer-demo {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  border-block: 1px solid var(--ag-line-strong);
  padding: 38px 0;
  background: transparent;
}

.ag-footer-demo-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 20px;
  max-width: 720px;
}

.ag-footer-demo-nav a {
  display: inline-block;
  border-bottom: 1px solid var(--ag-line-strong);
  padding-bottom: 2px;
  color: var(--ag-ink-soft);
  font-size: 14px;
  line-height: var(--ag-leading-compact);
}

.ag-footer-demo-copyright {
  flex: 0 0 auto;
  color: var(--ag-text-3);
  font-size: 12px;
  line-height: var(--ag-leading-meta);
  text-align: right;
}

.ag-hero-demo {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(360px, 1.12fr);
  gap: 56px;
  align-items: center;
  min-height: 560px;
  border-block: 1px solid var(--ag-line-strong);
  padding: 64px 0;
  background: var(--ag-paper);
}

.ag-hero-copy .ag-lead {
  margin-top: 22px;
}

.ag-hero-copy .ag-button-row {
  margin-top: 30px;
}

.ag-hero-diagram {
  border-block: 1px solid var(--ag-line-strong);
  border-radius: 0;
  padding: 30px 0;
  background: transparent;
}

.ag-hero-diagram > strong {
  display: block;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: var(--ag-leading-heading);
  text-align: center;
}

.ag-hero-diagram-flow {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.ag-hero-diagram-group {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ag-line);
}

.ag-hero-diagram-chip {
  border: 0;
  border-bottom: 1px solid var(--ag-line);
  border-radius: 0;
  padding: 11px 0;
  background: transparent;
  color: var(--ag-ink-soft);
  font-size: 14px;
  line-height: var(--ag-leading-meta);
  text-align: left;
}

.ag-hero-diagram-core {
  border-radius: 0;
  padding: 26px 18px;
  background: var(--ag-ink);
  color: var(--ag-white);
  text-align: center;
}

.ag-hero-diagram-core img {
  width: 86px;
  margin: 0 auto 10px;
  filter: grayscale(1) brightness(0) invert(1);
}

.ag-hero-diagram-core strong {
  display: block;
  font-size: 16px;
}

.ag-hero-diagram-core span {
  display: block;
  margin-top: 5px;
  color: var(--ag-line-strong);
  font-size: 12px;
}

.ag-hero-diagram-arrow {
  color: var(--ag-brand);
  font-size: 18px;
}

.ag-hero-diagram-note {
  margin-top: 16px;
  color: var(--ag-brand);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.ag-variant-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--ag-line-strong);
}

.ag-variant {
  padding: 28px 28px 30px 0;
  background: transparent;
}

.ag-variant + .ag-variant {
  border-left: 1px solid var(--ag-line);
  padding-right: 0;
  padding-left: 28px;
}

.ag-variant strong {
  display: block;
  font-size: 18px;
  line-height: var(--ag-leading-heading);
}

.ag-variant p {
  margin-top: 8px;
  color: var(--ag-text-2);
  font-size: 16px;
  line-height: var(--ag-leading-compact);
}

.ag-variant em {
  display: block;
  margin-top: 16px;
  color: var(--ag-brand);
  font-family: var(--ag-font-mono);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.08em;
}

.ag-token-table {
  width: 100%;
  border-collapse: collapse;
  border-block: 1px solid var(--ag-line-strong);
  background: transparent;
}

.ag-token-table th,
.ag-token-table td {
  border-right: 0;
  border-bottom: 1px solid var(--ag-line);
  padding: 16px 18px 16px 0;
  text-align: left;
  vertical-align: top;
}

.ag-token-table th:last-child,
.ag-token-table td:last-child {
  border-right: 0;
}

.ag-token-table tr:last-child td {
  border-bottom: 0;
}

.ag-token-table th {
  background: transparent;
  color: var(--ag-text-3);
  font-family: var(--ag-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.ag-token-table td {
  color: var(--ag-text-2);
  font-size: 14px;
  line-height: var(--ag-leading-compact);
}

.ag-token-table td:first-child {
  color: var(--ag-ink);
  font-weight: 700;
}

.ag-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-block: 1px solid var(--ag-line-strong);
  background: transparent;
}

.ag-checkitem {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 122px;
  padding: 26px 28px 28px 0;
  background: transparent;
}

.ag-checkitem:nth-child(even) {
  border-left: 1px solid var(--ag-line);
  padding-right: 0;
  padding-left: 28px;
}

.ag-checkitem:nth-child(n + 3) {
  border-top: 1px solid var(--ag-line);
}

.ag-checkitem strong {
  display: block;
  font-size: 16px;
  line-height: var(--ag-leading-heading);
}

.ag-checkitem p {
  margin-top: 8px;
  color: var(--ag-text-2);
  font-size: 14px;
  line-height: var(--ag-leading-compact);
}

@media (max-width: 1200px) {
  .ag-title-display {
    font-size: 48px;
  }

  .ag-title-page {
    font-size: 44px;
  }

  .ag-title-section {
    font-size: 36px;
  }
}

@media (max-width: 960px) {
  .ag-section-head,
  .ag-hero-demo {
    grid-template-columns: 1fr;
  }

  .ag-color-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ag-platform-stack figcaption,
  .ag-platform-layer,
  .ag-platform-conclusion {
    grid-template-columns: 144px minmax(0, 1fr);
  }

  .ag-platform-layer {
    grid-template-areas:
      "label title"
      "label description";
  }

  .ag-platform-layer-label {
    grid-area: label;
    align-self: start;
  }

  .ag-platform-layer strong {
    grid-area: title;
  }

  .ag-platform-layer p {
    grid-area: description;
  }

  .ag-architecture-map {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ag-architecture-flow {
    padding-block: 6px;
  }

  .ag-architecture-flow svg {
    transform: rotate(90deg);
  }

  .ag-architecture-core ul {
    grid-template-columns: 1fr;
  }

  .ag-process {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ag-process-arrow {
    padding-block: 4px;
  }

  .ag-process-arrow svg {
    transform: rotate(90deg);
  }

  .ag-hero-diagram-flow {
    grid-template-columns: 1fr;
  }

  .ag-hero-diagram-arrow {
    transform: rotate(90deg);
    text-align: center;
  }
}

@media (max-width: 720px) {
  :root {
    --ag-gutter: 20px;
  }

  .ag-section {
    padding-block: 76px;
  }

  .ag-section--narrative {
    padding-block: 72px 88px;
  }

  .ag-section--reference {
    padding-block: 64px 72px;
  }

  .ag-section--showcase {
    padding-block: 88px 72px;
  }

  .ag-title-display {
    font-size: 40px;
  }

  .ag-title-page {
    font-size: 36px;
  }

  .ag-title-section {
    font-size: 32px;
  }

  .ag-callout h3 {
    font-size: 24px;
  }

  .ag-do-dont,
  .ag-compare-grid,
  .ag-variant-grid,
  .ag-checklist {
    grid-template-columns: 1fr;
  }

  .ag-do-dont > section + section {
    border-top: 1px solid var(--ag-line);
    border-left: 0;
    padding-left: 0;
  }

  .ag-compare-arrow {
    padding-block: 9px;
  }

  .ag-compare-arrow svg {
    transform: rotate(90deg);
  }

  .ag-color-grid {
    grid-template-columns: 1fr;
  }

  .ag-platform-stack figcaption,
  .ag-platform-layer,
  .ag-platform-conclusion {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 20px;
  }

  .ag-platform-layer {
    grid-template-areas:
      "label"
      "title"
      "description";
    min-height: 0;
  }

  .ag-rule-row,
  .ag-type-row,
  .ag-detail-row,
  .ag-detail-example {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ag-trigger {
    grid-template-columns: 1fr;
  }

  .ag-trigger-arrow {
    transform: rotate(90deg);
    text-align: center;
  }

  .ag-callout {
    padding: 44px 28px;
  }

  .ag-callout::before {
    left: 28px;
  }

  .ag-header-nav a:not(.ag-button) {
    display: none;
  }

  .ag-footer-demo {
    flex-direction: column;
    gap: 30px;
  }

  .ag-footer-demo-copyright {
    text-align: left;
  }

  .ag-footer-demo-nav {
    gap: 24px;
  }

  .ag-hero-demo {
    min-height: auto;
    padding: 46px 0;
  }

  .ag-variant + .ag-variant {
    border-top: 1px solid var(--ag-line);
    border-left: 0;
    padding: 26px 0;
  }

  .ag-variant {
    padding: 26px 0;
  }

  .ag-checkitem,
  .ag-checkitem:nth-child(even) {
    min-height: 0;
    border-left: 0;
    padding: 24px 0;
  }

  .ag-checkitem:nth-child(n + 2) {
    border-top: 1px solid var(--ag-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}