/* Generated by scripts/design/build-site-css.mjs from design/css. Generated, do not edit. source 160dd7cdfdce */
/* Reset. Generated into assets/site/agentics.css. Do not link this file. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}

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

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

p, h1, h2, h3, h4, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; }

a { color: var(--accent); }

:focus { outline: none; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Motion tokens. Durations, easings, and spring presets.
   The generator also writes these into tokens.css from tokens.json.
   The no-preference block does not override reduced motion. */

@media (prefers-reduced-motion: no-preference) {
  :root {
    --dur-instant: 0ms;
    --dur-hover: 120ms;
    --dur-enter: 200ms;
    --dur-sheet: 320ms;
    --dur-slow: 480ms;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in: cubic-bezier(.55, 0, 1, .45);
    --ease-linear: linear;
    --spring-snappy: cubic-bezier(.2, .9, .2, 1);
    --spring-snappy-duration: 320ms;
    --spring-gentle: cubic-bezier(.22, 1, .36, 1);
    --spring-gentle-duration: 480ms;
    --spring-drawer: cubic-bezier(.32, .72, 0, 1);
    --spring-drawer-duration: 320ms;
    --spring-sheet: cubic-bezier(.32, .72, 0, 1);
    --spring-sheet-duration: 420ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-overlay,
  .ag-overlay *,
  .ag-toast,
  .ag-toast *,
  .ag-film,
  .ag-film *,
  .ag-video-card,
  .ag-video-card *,
  .ag-progress-fill {
    animation: none !important;
    transition: none !important;
  }
}

:root[data-motion="reduced"] .ag-overlay,
:root[data-motion="reduced"] .ag-overlay *,
:root[data-motion="reduced"] .ag-toast,
:root[data-motion="reduced"] .ag-progress-fill {
  animation: none;
  transition: none;
}

/* Type roles, links, focus. */

.ag-display {
  font-family: var(--font-sans);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  font-weight: var(--w-display);
  letter-spacing: var(--tr-display);
  color: var(--ink);
  text-wrap: balance;
}

.ag-h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  font-weight: var(--w-h1);
  letter-spacing: var(--tr-h1);
  color: var(--ink);
  text-wrap: balance;
}

.ag-h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  font-weight: var(--w-h2);
  letter-spacing: var(--tr-h2);
  color: var(--ink);
  text-wrap: balance;
}

.ag-h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  font-weight: var(--w-h3);
  letter-spacing: var(--tr-h3);
  color: var(--ink);
}

.ag-lead {
  max-width: 40rem;
  color: var(--ink-dim);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-lead);
  letter-spacing: var(--tr-lead);
}

.ag-body, .ag-panel p, .ag-card p {
  color: var(--ink-dim);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}

.ag-meta {
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}

.ag-eyebrow {
  margin: 0;
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--w-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}

.ag-num, .ag-amount {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
  font-weight: var(--w-amount);
  letter-spacing: var(--tr-amount);
}

.ag-amount-hero {
  font-family: var(--font-sans);
  font-size: var(--t-amount-hero);
  line-height: var(--lh-amount-hero);
  font-weight: var(--w-amount-hero);
  letter-spacing: var(--tr-amount-hero);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.ag-hash {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--t-hash);
  line-height: var(--lh-hash);
  font-weight: var(--w-hash);
  letter-spacing: var(--tr-hash);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.ag-link {
  color: var(--accent);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.eyebrow {
  margin: 0 0 var(--stack-title-lead);
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--w-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}

.lead, .ag-measure {
  max-width: 40rem;
  color: var(--ink-dim);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-lead);
  letter-spacing: var(--tr-lead);
}

.ag-body.ag-measure { font-size: var(--t-body); line-height: var(--lh-body); font-weight: var(--w-body); letter-spacing: var(--tr-body); }

.bond-site { background: var(--bg); color: var(--ink); }
.card { color: inherit; }

.ag-link-row {
  display: flex;
  align-items: center;
  min-height: var(--target);
  color: var(--accent);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}

h1, h2, h4, h5, h6, th { font-weight: var(--w-h1); }
h3, strong, b { font-weight: var(--w-h3); }

code, pre, .ag-code {
  font-family: var(--font-mono);
  font-size: var(--t-hash);
  line-height: var(--lh-hash);
  font-weight: var(--w-hash);
  letter-spacing: var(--tr-hash);
  overflow-wrap: anywhere;
}

pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

p a:not(.ag-btn),
li a:not(.ag-btn),
label a,
.ag-lead a,
.ag-body a {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.ag-footer a,
.ag-nav a { text-decoration: none; }

/* Container, section, stack, grid, split. */

.ag-container, .container {
  width: min(var(--w-container), 100%);
  margin-inline: auto;
  padding-inline: max(20px, 4vw);
}

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

.ag-section { margin-top: var(--section-gap); }
.ag-section.ag-band { margin-top: var(--space-6); }
.ag-band .ag-panel { padding: var(--space-4); }
.ag-band .ag-cta { margin-top: var(--space-4); }

.ag-hero {
  padding-top: var(--hero-pad-top);
  padding-bottom: var(--hero-pad-bottom);
}

.ag-stack { display: grid; }
.ag-stack > * + * { margin-top: var(--stack-lead-body); }
.ag-hero .ag-eyebrow + .ag-display,
.ag-hero .ag-eyebrow + .ag-h1,
.ag-hero .ag-eyebrow + h1,
.ag-section .ag-eyebrow + .ag-h2,
.ag-section .ag-eyebrow + h2 { margin-top: var(--stack-title-lead); }
.ag-display + .ag-lead,
.ag-h1 + .ag-lead,
h1 + .ag-lead,
.ag-h2 + .ag-lead,
h2 + .ag-lead { margin-top: var(--stack-title-lead); }

.ag-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cta-gap);
  margin-top: var(--stack-lead-body);
}

.ag-grid {
  display: grid;
  gap: var(--grid-gap);
  margin-top: var(--stack-lead-body);
}

.ag-grid--cols-2,
.ag-grid--cols-3,
.ag-grid--cols-4 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 641px) {
  .ag-grid--cols-2,
  .ag-grid--cols-3,
  .ag-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
  .ag-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ag-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ag-split {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .ag-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

.ag-artifact { min-width: 0; }

.ag-artifact-stack { position: relative; min-height: 280px; }
.ag-artifact-stack .ag-receipt {
  position: relative;
  margin-top: var(--space-6);
  margin-left: var(--space-6);
}
.ag-artifact-stack .ag-approval {
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-2);
}

@media (min-width: 769px) {
  .ag-artifact-stack .ag-receipt {
    position: absolute;
    top: var(--space-6);
    left: var(--space-6);
    right: 0;
    margin: 0;
  }
  .ag-artifact-stack .ag-approval {
    position: relative;
    max-width: calc(100% - var(--space-6));
  }
}

@media (max-width: 480px) {
  .ag-hero .ag-cta { flex-direction: column; align-items: stretch; }
  .ag-hero .ag-cta .ag-btn { width: 100%; }
  .ag-artifact-stack { min-height: 0; }
  .ag-artifact-stack .ag-receipt,
  .ag-artifact-stack .ag-approval { margin-left: 0; max-width: none; }
}

/* Controls, surfaces, status, product artifacts, chrome. */

.ag-icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
}
.ag-icon--16 { width: 16px; height: 16px; }
.ag-icon--20 { width: 20px; height: 20px; }
.ag-icon--24 { width: 24px; height: 24px; }

.ag-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target);
  min-width: var(--target);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
  text-decoration: none;
  cursor: pointer;
}

.ag-btn--primary,
.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.ag-btn--secondary,
.btn-secondary,
.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.ag-btn--tertiary,
.btn-tertiary {
  background: transparent;
  color: var(--accent);
  border-color: transparent;
}

.ag-btn--destructive,
.btn-danger {
  background: transparent;
  color: var(--denied);
  border-color: var(--line);
}

.ag-btn--destructive.is-confirm,
.btn-danger.is-confirm {
  background: var(--denied);
  color: var(--bg);
  border-color: var(--denied);
}

.ag-btn--block { width: 100%; }
.ag-btn--lg { min-height: calc(var(--target) + var(--space-1)); }

.ag-btn:hover,
.btn:hover { border-color: var(--line-strong); }

.ag-btn--primary:hover,
.btn-primary:hover { background: var(--ink-dim); border-color: var(--ink-dim); }

.ag-btn:disabled,
.ag-btn.is-disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ag-btn.is-loading .ag-spin { display: block; }

.ag-spin {
  animation: ag-spin var(--dur-sheet) linear infinite;
  transform-origin: center;
}

@keyframes ag-spin { to { transform: rotate(360deg); } }

.ag-field { display: grid; gap: var(--space-2); }
.ag-field label,
.auth-card label,
.field label {
  color: var(--ink);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}

.ag-input,
.ag-select,
.ag-textarea,
.auth-card input,
.auth-card textarea,
.field input,
.help-search input {
  width: 100%;
  min-height: var(--target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}

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

@media (max-width: 480px) {
  .ag-input, .ag-select, .ag-textarea,
  .auth-card input, .field input, .help-search input {
    min-height: calc(var(--target) + var(--space-1));
  }
}

.ag-field .ag-help,
.ag-field .help,
.hint {
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}

.ag-field.is-error .ag-error,
.ag-field .error,
.error {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
  color: var(--denied);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}

.ag-segmented {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  padding: var(--space-1);
  background: var(--bg-well);
  border-radius: var(--radius-control);
}

.ag-segmented button {
  flex: 1 0 auto;
  min-height: var(--target);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--ink-dim);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}

.ag-segmented button[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
}

.info-card,
.ag-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: var(--panel-pad);
}

.ag-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

.ag-callout {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--bg-well);
  border-radius: var(--radius-card);
  padding: var(--panel-pad);
  color: var(--ink-dim);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}

.ag-list { list-style: none; margin: 0; padding: 0; }
.ag-list > li,
.ag-list > a {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: var(--target);
  padding-block: var(--space-3);
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.ag-list > li:first-child,
.ag-list > a:first-child { border-top: 0; }

.ag-faq details { border-bottom: 1px solid var(--line); }
.ag-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--target);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.ag-faq summary::-webkit-details-marker { display: none; }

.ag-table { width: 100%; border-collapse: collapse; }
.ag-table th {
  position: sticky;
  top: 0;
  text-align: left;
  background: var(--bg-well);
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-meta);
  padding: var(--space-3);
}
.ag-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}
.ag-table .num, .ag-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .ag-table thead { display: none; }
  .ag-table, .ag-table tbody, .ag-table tr, .ag-table td { display: block; width: 100%; }
  .ag-table tr {
    margin-bottom: var(--grid-gap);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
  }
  .ag-table td { border: 0; padding: var(--space-2) 0; }
  .ag-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--ink-mute);
    font-size: var(--t-meta);
    line-height: var(--lh-meta);
    font-weight: var(--w-meta);
    letter-spacing: var(--tr-meta);
  }
}

.ag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--space-5);
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--bg-well);
  color: var(--ink-dim);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.ag-chip .ag-icon { width: 14px; height: 14px; }
.ag-chip--allowed, .ag-chip-allowed { color: var(--allowed); background: var(--allowed-tint); }
.ag-chip--denied, .ag-chip-denied { color: var(--denied); background: var(--denied-tint); }
.ag-chip--needs-you, .ag-chip-needs-you { color: var(--needs-you); background: var(--needs-you-tint); }
.ag-chip--verified, .ag-chip-verified { color: var(--verified); background: var(--verified-tint); }
.ag-chip--self-reported, .ag-chip-self-reported {
  color: var(--self-reported);
  background: var(--self-reported-tint);
  border-color: var(--self-reported);
  border-style: dashed;
}
.ag-chip--neutral {
  color: var(--ink-mute);
  background: transparent;
  border-color: var(--line-strong);
}

.ag-window {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-2);
  min-width: 0;
  overflow: hidden;
}
.ag-window-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target);
  padding: 0 var(--space-4);
  background: var(--bg-well);
  border-bottom: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}
.ag-window-dots { display: flex; gap: var(--space-2); }
.ag-window-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}
.ag-window-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.ag-approval, .ag-receipt {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.ag-approval-head, .ag-receipt-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.ag-kv { display: grid; gap: var(--space-2); margin: 0; }
.ag-kv > div, .ag-kv-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
}
.ag-kv dt, .ag-kv-row dt {
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}
.ag-kv dd, .ag-kv-row dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}

.ag-approval-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.ag-rule {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--ink-dim);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}

@media (max-width: 480px) {
  .ag-receipt .ag-receipt-more { display: none; }
  .ag-receipt.is-open .ag-receipt-more { display: block; }
  .ag-receipt-toggle { display: inline-flex; }
}
@media (min-width: 481px) {
  .ag-receipt-toggle { display: none; }
  .ag-receipt .ag-receipt-more { display: block; }
}

.ag-timeline { display: grid; }
.ag-timeline-step {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  position: relative;
  padding-bottom: var(--space-4);
}
.ag-timeline-step::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 22px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.ag-timeline-step:last-child::before { display: none; }
.ag-timeline-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-mute);
}
.ag-timeline-dot.is-allowed { color: var(--allowed); border-color: var(--allowed); }
.ag-timeline-dot.is-needs-you { color: var(--needs-you); border-color: var(--needs-you); }
.ag-timeline-dot.is-verified { color: var(--verified); border-color: var(--verified); }
.ag-timeline-name {
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
  color: var(--ink);
}
@media (min-width: 768px) {
  .ag-timeline:not(.ag-timeline--compact) {
    display: flex;
    gap: 0;
  }
  .ag-timeline:not(.ag-timeline--compact) .ag-timeline-step {
    flex: 1;
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }
  .ag-timeline:not(.ag-timeline--compact) .ag-timeline-step::before {
    left: 24px;
    right: 0;
    top: 9px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}
.ag-timeline--compact { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ag-timeline--compact .ag-timeline-step { padding: 0; grid-template-columns: 20px auto; }
.ag-timeline--compact .ag-timeline-step::before { display: none; }

.ag-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: calc(64px + env(safe-area-inset-top));
  padding-inline: max(20px, 4vw);
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.ag-nav-brand, .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  text-decoration: none;
  min-height: var(--target);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-h3);
}
.ag-mark, .brand .mark {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-chip);
  background: url("/design/mark.svg") center / cover no-repeat;
}
.ag-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.ag-nav-links a, .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 var(--space-2);
  color: var(--ink-dim);
  text-decoration: none;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
  white-space: nowrap;
}
.ag-nav-links a[aria-current="page"], .nav-link[aria-current="page"] { color: var(--ink); }
.ag-nav-brand:hover,
.ag-nav-links a:hover,
.nav-link:hover {
  color: var(--ink);
  background: transparent;
}
.ag-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.ag-nav-menu, .nav-burger {
  display: none;
  width: var(--target);
  height: var(--target);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
}
@media (max-width: 768px) {
  .ag-nav { height: calc(56px + env(safe-area-inset-top)); }
  .ag-nav-links, .ag-nav-actions .ag-btn--secondary, .ag-nav-actions .btn-ghost { display: none; }
  .ag-nav-menu, .nav-burger { display: inline-flex; }
}
@media (max-width: 1100px) and (min-width: 769px) {
  .ag-nav-links a { padding-inline: var(--space-1); }
}

.ag-nav-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: calc(72px + env(safe-area-inset-top)) max(20px, 4vw) max(24px, env(safe-area-inset-bottom));
  background: var(--bg);
  visibility: hidden;
  overflow: auto;
}
.ag-nav-sheet.is-open { visibility: visible; }
.ag-nav-sheet a {
  display: flex;
  align-items: center;
  min-height: 56px;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
  border-bottom: 1px solid var(--line);
}

.ag-footer, .footer {
  margin-top: var(--space-4);
  padding-block: var(--space-4);
  background: var(--bg);
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
}
.ag-footer-grid, .footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.ag-footer-brand, .footer-brand { grid-column: 1 / -1; min-width: 0; }
.ag-footer .ag-nav-brand, .footer .brand { min-height: 0; }
.ag-footer-brand p, .footer-brand p {
  margin: var(--space-1) 0 0;
  color: var(--ink-dim);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
}
@media (min-width: 641px) {
  .ag-footer-grid, .footer-grid {
    grid-template-columns: minmax(128px, 1fr) repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-4);
  }
  .ag-footer-brand, .footer-brand { grid-column: auto; }
}
.ag-foot-label, .foot-label {
  margin: 0 0 var(--space-2);
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--w-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.ag-footer ul, .footer ul { list-style: none; margin: 0; padding: 0; }
.ag-footer li, .footer li { line-height: var(--lh-meta); }
.ag-footer li + li, .footer li + li { margin-top: var(--space-2); }
.ag-footer li a, .footer li a { display: block; }
.ag-footer a, .footer a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: var(--t-ui);
  line-height: var(--lh-meta);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
@media (max-width: 640px) {
  .ag-footer a, .footer a {
    display: flex;
    align-items: center;
    min-height: var(--target);
    line-height: var(--lh-ui);
  }
  .ag-footer li + li, .footer li + li { margin-top: 0; }
}
.ag-footer-bottom, .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}
.ag-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target);
  color: var(--ink-dim);
  text-decoration: none;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.ag-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--allowed);
}

.ag-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-topbar);
  display: none;
  padding: var(--space-3) max(20px, 4vw) max(12px, env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transform: translateY(110%);
  visibility: hidden;
}
.ag-sticky-cta.is-on {
  visibility: visible;
  transform: none;
  transition: transform var(--dur-enter) var(--ease);
}
@media (max-width: 768px) {
  .ag-sticky-cta, .dp-apply-stick { display: grid; gap: var(--space-2); }
  body.has-sticky { padding-bottom: calc(var(--target) + var(--space-8) + env(safe-area-inset-bottom)); }
}

.ag-skip, .skip {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: var(--z-toast);
  transform: translateY(-160%);
  background: var(--ink);
  color: var(--bg);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  text-decoration: none;
  min-height: var(--target);
  display: inline-flex;
  align-items: center;
}
.ag-skip:focus, .skip:focus, .ag-skip:focus-visible, .skip:focus-visible { transform: none; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  height: var(--target);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
}
.ag-footer .theme-toggle, .footer .theme-toggle {
  width: 28px;
  height: 28px;
}
@media (max-width: 640px) {
  .ag-footer .theme-toggle, .footer .theme-toggle {
    width: var(--target);
    height: var(--target);
  }
}

.ag-feature { display: grid; gap: var(--space-2); align-content: start; }
.ag-feature .ag-icon { color: var(--ink); }
.ag-step-index {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--t-hash);
  line-height: var(--lh-hash);
  font-weight: var(--w-hash);
  letter-spacing: var(--tr-hash);
}

.ag-bonded-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target);
  color: var(--allowed);
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
  text-decoration: none;
}
.ag-bonded-badge[data-badge-state="paused"],
.ag-bonded-badge[data-badge-state="under_review"] {
  color: var(--ink-mute);
}
.ag-bonded-badge svg { flex: none; }
.ag-bonded-sub {
  color: var(--ink-mute);
  font-size: var(--t-sm);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}

/* Docs, help, status, auth, reading. Layout and the classes those pages already use. */

.docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  width: min(var(--w-container), 100%);
  margin-inline: auto;
  padding: var(--space-6) max(20px, 4vw) var(--section-gap);
  align-items: start;
}
@media (min-width: 900px) {
  .docs-layout { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .docs-layout { grid-template-columns: 220px minmax(0, var(--w-measure)) 180px; }
}
.docs-nav { min-width: 0; }
@media (min-width: 900px) {
  .docs-nav { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow: auto; }
}
.docs-nav h5, .docs-toc h6 {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--ink-mute);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--w-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.docs-nav a, .docs-toc a {
  display: flex;
  align-items: center;
  min-height: var(--target);
  color: var(--ink-dim);
  text-decoration: none;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}
.docs-nav a[aria-current="page"] { color: var(--accent); }
.docs-main { min-width: 0; max-width: var(--w-measure); }
.docs-main p, .docs-main li { color: var(--ink-dim); }
.docs-main h2 { margin-top: var(--space-8); }
.docs-main h3 { margin-top: var(--space-6); }
.docs-toc { display: none; }
@media (min-width: 1200px) {
  .docs-toc { display: block; position: sticky; top: 80px; }
}
.docs-nav-toggle {
  display: flex;
  width: 100%;
  min-height: var(--target);
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
  text-align: left;
}
@media (min-width: 900px) { .docs-nav-toggle { display: none; } }
.docs-nav.is-collapsed #docs-nav-links { display: none; }
@media (min-width: 900px) { .docs-nav.is-collapsed #docs-nav-links { display: block; } }

.docs-crumb {
  margin-bottom: var(--space-3);
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}
.docs-copy-page { margin-top: var(--space-3); }

.code, .code-frame, pre, .connect-config {
  background: var(--bg-well);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: auto;
  max-width: 100%;
}
.code, .code-frame, pre { padding: var(--space-4); margin: var(--space-4) 0; }
.code code, pre code, .connect-config code {
  font-family: var(--font-mono);
  font-size: var(--t-hash);
  line-height: var(--lh-hash);
  font-weight: var(--w-hash);
  letter-spacing: var(--tr-hash);
}
.docs-main code:not(pre code) {
  font-family: var(--font-mono);
  font-size: var(--t-hash);
  background: var(--bg-well);
  border-radius: var(--radius-chip);
  padding: 0 var(--space-1);
}
.code-copy, .docs-layout .code-tab {
  min-height: var(--target);
  min-width: var(--target);
}
.steps { list-style: none; display: grid; gap: var(--grid-gap); margin: var(--space-6) 0; padding: 0; }
.steps > li {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.steps .n {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.path-grid { display: grid; gap: var(--grid-gap); margin-top: var(--space-6); }
@media (min-width: 800px) { .path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.path-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: var(--target);
  padding: var(--panel-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.path-kicker {
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.endpoint, .callout {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: var(--panel-pad);
  margin: var(--space-4) 0;
}
.callout { background: var(--bg-well); }
.method {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-5);
  padding: 0 var(--space-2);
  border-radius: var(--radius-chip);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
}
.method.get { color: var(--allowed); background: var(--allowed-tint); }
.method.post { color: var(--accent); background: var(--accent-soft); }
.method.patch { color: var(--needs-you); background: var(--needs-you-tint); }
.method.delete { color: var(--denied); background: var(--denied-tint); }
.param-table, .schema-grid { width: 100%; border-collapse: collapse; }
.param-table th, .schema-grid th {
  text-align: left;
  background: var(--bg-well);
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-meta);
  padding: var(--space-2) var(--space-3);
}
.param-table td, .schema-grid td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}
.pname, .fname, .ptype, .ftype { font-family: var(--font-mono); }
.docs-next {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.help-layout {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 900px) {
  .help-layout { grid-template-columns: 240px minmax(0, 1fr) 260px; align-items: start; }
}
.help-cats { display: grid; gap: var(--space-1); margin-top: var(--space-4); }
.help-cats button {
  min-height: var(--target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-dim);
  text-align: left;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.help-cats button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--line);
}
.faq-list { display: grid; gap: var(--grid-gap); }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: var(--panel-pad);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--target);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h2, .faq-item summary h3 { margin: 0; }
.help-contact {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: var(--panel-pad);
}
.help-contact h2 { margin-top: var(--space-4); }
.help-contact h2:first-child { margin-top: 0; }
.help-more { margin-top: var(--space-2); }
.help-more li + li { margin-top: var(--space-2); }
.help-more a { color: var(--ink); }

.status-banner, .status-list, .incident-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.status-banner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: var(--space-4);
}
.status-list, .incident-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.status-row, .incident-list li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--line);
}
.status-row:first-child, .incident-list li:first-child { border-top: 0; }
.status-dot {
  width: 8px;
  height: 8px;
  margin-top: var(--space-2);
  border-radius: 50%;
  background: var(--needs-you);
}
.status-dot.ok, .status-dot.up { background: var(--allowed); }
.status-dot.down { background: var(--denied); }
.status-name {
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.status-word, .status-meta {
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}

.auth-main, .shell {
  padding: var(--hero-pad-top) max(20px, 4vw) var(--hero-pad-bottom);
}
.auth-card {
  width: min(var(--w-form), 100%);
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: var(--space-6) var(--panel-pad);
}
.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-h3);
}
.auth-card h1, .auth-card .sub, .auth-card .new-here { text-align: center; }
.auth-card .sub { margin-top: var(--space-2); color: var(--ink-mute); }
.auth-card .new-here { margin: var(--space-2) 0 var(--space-5); }
.oauth, .oauth a, .sso-btn, .submit, .text-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--target);
}
.oauth { display: grid; gap: var(--space-2); }
.oauth a, .sso-btn, .submit {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.submit, .auth-card .ag-btn--primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.last-used {
  margin-left: auto;
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.more-options { margin-top: var(--space-2); }
.more-options summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target);
  cursor: pointer;
  color: var(--ink-dim);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.sso-panel { display: none; margin-top: var(--space-3); }
.sso-panel.open { display: block; }
.password-panel { margin-top: var(--space-3); }
.text-toggle {
  margin-top: var(--space-2);
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.auth-note {
  width: min(var(--w-form), 100%);
  margin: var(--space-4) auto 0;
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}
.banner {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-well);
  border-radius: var(--radius-control);
  color: var(--ink-dim);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}
.start-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}
.start-steps li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target);
  color: var(--ink-mute);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.start-steps li.is-current { color: var(--ink); }
.start-steps .n {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.start-steps li.is-current .n { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.reading {
  width: min(var(--w-measure), 100%);
  margin-inline: auto;
  padding: var(--hero-pad-top) max(20px, 4vw) var(--section-gap);
}
.reading p + p { margin-top: var(--space-4); }

.page { padding-bottom: var(--section-gap); }
.page-intro { padding-top: var(--hero-pad-top); }
.page-intro .lead, .section-lead {
  margin-top: var(--stack-title-lead);
  max-width: 40rem;
  color: var(--ink-dim);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-lead);
  letter-spacing: var(--tr-lead);
}
.section-title { margin-top: var(--section-gap); }

.input, select.input, textarea.input {
  width: 100%;
  min-height: var(--target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}

.dp { padding: var(--space-7) 0 var(--space-10); }
.dp-hero { max-width: var(--w-measure); }
.dp-apply { scroll-margin-top: calc(64px + var(--space-4)); }
.dp-slot-line { margin-top: var(--space-5); color: var(--ink-dim); }
.dp-seats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  max-width: var(--w-form);
}
.dp-seat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: var(--target);
  margin: 0;
  padding: var(--space-3);
  color: var(--ink);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.dp-cta { display: flex; flex-wrap: wrap; gap: var(--cta-gap); margin-top: var(--space-6); }
.dp-layout { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
.dp-layout > *, .dp-proof-grid > * { min-width: 0; }
.dp-copy h2 { margin-top: var(--space-8); }
.dp-copy h2:first-child { margin-top: 0; }
.dp-list, .ag-list.dp-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.dp-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); align-items: start; border: 0; padding: 0; min-height: 0; }
.dp-list svg, .dp-list .ag-icon { color: var(--accent); }
.dp-list p { margin: var(--space-1) 0 0; color: var(--ink-dim); }
.dp-weeks { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.dp-weeks li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.dp-weeks span {
  color: var(--ink-mute);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
  font-variant-numeric: tabular-nums;
}
.dp-who { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.dp-step {
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--w-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.dp-dots { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.dp-dots li { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--line-strong); }
.dp-dots li[aria-current="step"] { background: var(--ink); }
.dp-fields { display: grid; gap: var(--space-4); }
.dp-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dp-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--denied);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}
.dp-success { display: grid; gap: var(--space-3); }
.dp-proof { margin-top: var(--section-gap); }
.dp-proof-grid { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.dp-hash {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  min-height: var(--target);
  min-width: var(--target);
}
.dp-table-card { padding: 0; overflow: hidden; }
@media (min-width: 768px) { .dp-who { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .dp-proof-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; }
  .dp-weeks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dp-weeks li { grid-template-columns: 1fr; }
}
@media (min-width: 1440px) {
  .dp-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, var(--w-form));
    align-items: start;
    gap: var(--space-6) var(--space-8);
  }
  .dp-hero { grid-column: 1; grid-row: 1; }
  .dp-copy { grid-column: 1; grid-row: 2; }
  .dp-apply { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(64px + var(--space-4)); }
}
@media (max-width: 389px) { .dp-weeks li { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .dp-seats { grid-template-columns: 1fr; } }

.what, .lede, .receipt-what { color: var(--ink-dim); }
.receipt-id, .hash-row { display: flex; align-items: center; gap: var(--space-2); }
.table-scroll, .table-wrap { overflow-x: auto; max-width: 100%; }
.h2 { font-size: var(--t-h2); line-height: var(--lh-h2); font-weight: var(--w-h2); letter-spacing: var(--tr-h2); }
.code-head, .response-head, .status-head, .page-tools {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.help-tools { display: grid; gap: var(--space-2); min-width: 0; }
.code-lang, .schema-note, .history-note, .help-empty, .note, .magic-msg {
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}
.code-body, .code-pane, .code-tabs, .tool-list, .dev-page, .workflow-page, .example-row, .signin-row, .link-grid, .next-row, .lang-switch, .sso-block, .field-row, .help-live, .wait, .empty, .is-empty, .enterprise, .copy-page, .response, .receipt, .receipt-top, .hash-text, .hash-copy, .ico, .label, .chev, .spin, .amount, .link-card, .signin-light, .step-n, .lang-pick { min-width: 0; }
.is-active { color: var(--accent); }
.chip, .chip-allowed, .chip-needs, .chip-self {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--space-6);
  padding: 0 var(--space-2);
  border-radius: var(--radius-chip);
  border: 1px solid var(--line);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-meta);
}
.chip-allowed { color: var(--allowed); background: var(--allowed-tint); }
.chip-needs { color: var(--needs-you); background: var(--needs-you-tint); }
.chip-self { color: var(--self-reported); background: var(--self-reported-tint); }

.roi-grid, .cs-grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 800px) {
  .roi-grid, .cs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}


/* ported case-study layout */
/* /companies/case-study — template. Tokens only. noindex page. */

body.study-page {
  }

.study-page .page-intro,
.study-wrap {
  max-width: var(--w-measure);
}

.study-page h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-head);
  font-weight: var(--w-ui);
  margin: 0;
}

.study-kicker {
  margin: 0 0 var(--space-2);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-xs);
}

.study-lead {
  margin: var(--space-4) 0 0;
  color: var(--ink-dim);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
}

.study-note {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--bg-well);
  color: var(--ink-dim);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.study-grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (min-width: 768px) {
  .study-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.study-point {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.study-point h2 {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-head);
}

.study-point p {
  margin: var(--space-2) 0 0;
  color: var(--ink-mute);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.study-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.study-section {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  scroll-margin-top: 96px;
}

.study-section h2 {
  margin: 0;
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-head);
  font-weight: var(--w-ui);
}

.study-section .section-lead {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--ink-mute);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.study-field {
  margin: 0 0 var(--space-4);
}

.study-field:last-child {
  margin-bottom: 0;
}

.study-label {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-head);
}

.study-page input,
.study-page textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--target);
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  box-shadow: none;
}

.study-page textarea {
  min-height: 96px;
  resize: vertical;
}

.study-page input:focus,
.study-page input:focus-visible,
.study-page textarea:focus,
.study-page textarea:focus-visible,
.study-page button:focus-visible,
.study-page a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: none;
}

.field-help {
  margin: var(--space-2) 0 0;
  color: var(--ink-mute);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-hash);
}

.receipt-row {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.study-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.map {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.map th,
.map td {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.map th {
  color: var(--ink-mute);
  font-weight: var(--w-ui);
}

.map td:last-child,
.map th:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--t-hash);
  font-variant-numeric: tabular-nums;
}

.study-field-after-map {
  margin-top: var(--space-5);
}

@media (prefers-reduced-motion: reduce) {
  .study-page input,
  .study-page textarea,
  .study-page .btn {
    transition: none;
  }
}

@media print {
  body.study-page {
    background: var(--surface);
  }
  .study-page .nav,
  .study-page .footer,
  .study-page .nav-scrim,
  .study-page .nav-sheet,
  .study-page .no-print {
    display: none;
  }
  .study-page .page {
    padding: 0;
  }
  .study-section {
    break-inside: avoid;
  }
}


/* ported contracts layout */
/* Layout for /trust/contracts. Cards, chips, buttons, hashes, focus,
   and type come from the shared sheets. No colors are defined here. */

.contracts-page .c-prose {
  max-width: var(--w-measure);
}

.contracts-page .c-section {
  margin-top: var(--space-8);
}

.contracts-page .c-section h2 {
  margin: 0;
}

.contracts-page .c-prose p,
.contracts-page .c-section > p {
  margin: var(--space-3) 0 0;
  color: var(--ink-dim);
}

.contracts-page .c-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.contracts-page .c-span-6 { grid-column: span 6; min-width: 0; }
.contracts-page .c-span-4 { grid-column: span 4; min-width: 0; }
.contracts-page .c-span-12 { grid-column: span 12; min-width: 0; }

.contracts-page .ag-card h3 {
  margin: var(--space-2) 0 0;
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-head);
  font-weight: var(--w-ui);
}

.contracts-page .ag-card p {
  margin: var(--space-2) 0 0;
  color: var(--ink-dim);
}

.contracts-page .c-icon {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--ink);
}

.contracts-page .c-open-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.contracts-page .c-open-list li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.contracts-page .c-id {
  font-family: var(--font-mono);
  font-size: var(--t-hash);
  line-height: var(--lh-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.contracts-page .c-severity {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--ink-mute);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: var(--w-ui);
}

.contracts-page .c-open-body {
  min-width: 0;
  color: var(--ink-dim);
}

.contracts-page a.ag-hash {
  min-height: var(--target);
  color: var(--ink);
  text-decoration: none;
}

.contracts-page a.ag-hash:hover {
  color: var(--accent);
}

.contracts-page .c-hash-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.contracts-page .c-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.contracts-page .c-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

@media (max-width: 1023px) {
  .contracts-page .c-grid { gap: var(--space-4); }
  .contracts-page .c-span-4 { grid-column: span 6; }
}

@media (max-width: 767px) {
  .contracts-page .c-section { margin-top: var(--space-7); }
  .contracts-page .c-span-6,
  .contracts-page .c-span-4,
  .contracts-page .c-span-12 { grid-column: span 12; }
  .contracts-page .c-open-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

/* Part B. Homepage product UI, pricing, walk, verify, network, bond, reading. */

.hero {
  width: min(var(--w-container), 100%);
  margin-inline: auto;
  padding: var(--hero-pad-top) max(20px, 4vw) var(--section-gap);
}
.hero .ag-timeline { margin-top: var(--space-8); }
.ag-card.is-open { border-color: var(--ink); }
.ag-card.is-cue, .ag-btn.is-cue { outline: 2px solid var(--accent); outline-offset: 2px; }
.travel-art {
  width: min(100%, 420px);
  height: auto;
  display: block;
  margin-inline: auto;
}
.chains-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.chain { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 0; }
.spacer { flex: 1; }

.ag-yn { text-align: center; color: var(--ink); }
.ag-yn .ag-icon { vertical-align: middle; }
.ag-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.price-grid { display: grid; gap: var(--grid-gap); margin-top: var(--space-6); }
@media (min-width: 800px) {
  .price-grid.three, .price-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price-grid.four, .price-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--panel-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.price-card.is-featured { border-color: var(--ink); }
.selling {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding: var(--panel-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.shot-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--panel-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.price-card h3, .plan-head { margin: 0; }
.kicker, .plan-note, .support, .fee-note, .usage-line, .overage, .enterprise-line, .blurb, .audience {
  color: var(--ink-dim);
}
.plan-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-6) 0;
}
.plan-tabs button {
  min-height: var(--target);
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.plan-tabs button[aria-selected="true"],
.plan-tabs button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.plan-panel[hidden] { display: none; }
.compare-jump { margin: var(--space-4) 0; }
.compare-scroll, .compare-block { max-width: 100%; min-width: 0; }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}
.compare thead th {
  position: sticky;
  top: calc(64px + env(safe-area-inset-top));
  background: var(--bg);
  font-weight: var(--w-ui);
}
.compare .group td {
  background: var(--bg-well);
  color: var(--ink);
  font-weight: var(--w-ui);
}
.ag-plan-picker { display: none; }
@media (max-width: 640px) {
  .ag-plan-picker { display: flex; }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare td { display: block; width: 100%; }
  .compare td { display: none; }
  .compare td:first-child { display: block; font-weight: var(--w-ui); }
  .compare[data-show="1"] td:nth-child(2),
  .compare[data-show="2"] td:nth-child(3),
  .compare[data-show="3"] td:nth-child(4),
  .compare[data-show="4"] td:nth-child(5),
  .compare[data-show="5"] td:nth-child(6) { display: block; }
  .price-grid.three, .price-grid.four, .price-grid.cols-3, .price-grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
}
.faq-layout { display: grid; gap: 0; margin-top: var(--space-6); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--target);
  padding: var(--space-3) 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-body);
}
.faq-panel { display: grid; grid-template-rows: 0fr; }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-a { overflow: hidden; color: var(--ink-dim); }
.faq-a p { margin: 0 0 var(--space-3); }
.chev { width: 16px; height: 16px; flex: none; }
.faq-item.is-open .chev-v { display: none; }
.pop {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-5);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-well);
  color: var(--ink);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-meta);
}

.tx-stage { width: min(100%, 420px); margin-inline: auto; min-width: 0; }
.tx-viewport { display: grid; min-width: 0; }
.tx-empty {
  margin: 0;
  padding: var(--space-4);
  color: var(--ink-dim);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.tx-viewport > .tx-card { grid-area: 1 / 1; width: 100%; }
.tx-card { transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.tx-card.is-enter { opacity: 0; transform: translate3d(0, 12px, 0); }
.tx-card.is-leave { z-index: 0; opacity: 0; transform: translate3d(0, -10px, 0); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .tx-card { transition: none; }
  .tx-card.is-enter, .tx-card.is-leave { opacity: 1; transform: none; }
}
.tx-kicker, .record-kicker {
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--w-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.tx-amount, .record-standing {
  margin: var(--space-3) 0 0;
  color: var(--ink);
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  font-weight: var(--w-h2);
  letter-spacing: var(--tr-h2);
  overflow-wrap: anywhere;
}
.board-empty, .ag-empty {
  display: grid;
  gap: var(--space-3);
  padding: var(--panel-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.bond-card, .sheet-wrap { min-width: 0; }
.record-facts, .receipt-facts {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.record-facts div, .receipt-facts div {
  display: grid;
  grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr);
  gap: var(--space-2);
}

.walk-rail {
  display: flex;
  gap: var(--space-1);
  margin: var(--space-4) 0;
  overflow-x: auto;
  max-width: 100%;
}
.walk-rail button, .walk-rail a {
  flex: none;
  min-height: var(--target);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}
.walk-rail [aria-current="step"], .walk-rail [aria-current="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.e-shell, .learn, .legal-page {
  width: min(var(--w-measure), 100%);
  margin-inline: auto;
  padding: var(--hero-pad-top) max(20px, 4vw) var(--section-gap);
}
.e-card, .form-card, .info-grid .doc-card {
  margin-top: var(--space-4);
  padding: var(--panel-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.e-sub, .e-h { color: var(--ink-dim); }
.e-list { padding-left: 1.2em; }
.e-btn, .e-toolbar a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  margin-right: var(--space-3);
}
.docs-main table, .reading table, .e-shell table, .learn table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
main { min-width: 0; }


/* Public class registry. Pages keep their content hooks; the shell supplies the look. */
.ab-a { min-width: 0; }
.ab-b { min-width: 0; }
.ab-card { min-width: 0; }
.ab-grid { min-width: 0; }
.ab-tag { min-width: 0; }
.accent { min-width: 0; }
.active { min-width: 0; }
.algo { min-width: 0; }
.api-search { min-width: 0; }
.approve-chip { min-width: 0; }
.auth-box { min-width: 0; }
.blk { min-width: 0; }
.board { min-width: 0; }
.board-block { min-width: 0; }
.board-hero { min-width: 0; }
.board-note { min-width: 0; }
.bond-card-agent { min-width: 0; }
.bond-card-compact { min-width: 0; }
.bond-card-flag { min-width: 0; }
.bond-card-legal { min-width: 0; }
.bond-card-link { min-width: 0; }
.bond-home { min-width: 0; }
.btn-lg { min-width: 0; }
.btn-sm { min-width: 0; }
.card-actions { min-width: 0; }
.card-hov { min-width: 0; }
.card-top { min-width: 0; }
.cert-badge { min-width: 0; }
.check { min-width: 0; }
.check-detail { min-width: 0; }
.check-icon { min-width: 0; }
.check-list { min-width: 0; }
.check-name { min-width: 0; }
.check-word { min-width: 0; }
.checks { min-width: 0; }
.choice { min-width: 0; }
.choice-row { min-width: 0; }
.claim-list { min-width: 0; }
.code-1 { min-width: 0; }
.cta { min-width: 0; }
.dev-actions { min-width: 0; }
.docs-verify { min-width: 0; }
.dot { min-width: 0; }
.e-callout { min-width: 0; }
.e-col-6 { min-width: 0; }
.e-fine { min-width: 0; }
.e-form { min-width: 0; }
.e-grid { min-width: 0; }
.e-input { min-width: 0; }
.e-mini { min-width: 0; }
.e-section { min-width: 0; }
.e-table { min-width: 0; }
.e-title { min-width: 0; }
.endpoint-desc { min-width: 0; }
.endpoint-head { min-width: 0; }
.endpoint-path { min-width: 0; }
.error-msg { min-width: 0; }
.example-card { min-width: 0; }
.extra-actions { min-width: 0; }
.fact-group { min-width: 0; }
.facts { min-width: 0; }
.field-msg { min-width: 0; }
.flow { min-width: 0; }
.flow-actions { min-width: 0; }
.footer-brand { min-width: 0; }
.footer-social { min-width: 0; }
.form-actions { min-width: 0; }
.form-grid { min-width: 0; }
.form-group { min-width: 0; }
.gap-3 { min-width: 0; }
.gate { min-width: 0; }
.ghost { min-width: 0; }
.glow-accent { min-width: 0; }
.grad-text { min-width: 0; }
.grid { min-width: 0; }
.grid-3 { min-width: 0; }
.h1 { min-width: 0; }
.h3 { min-width: 0; }
.hero-card { min-width: 0; }
.hero-copy { min-width: 0; }
.hero-cta { min-width: 0; }
.hero-grid { min-width: 0; }
.hero-visual { min-width: 0; }
.hood { min-width: 0; }
.is-highlight { min-width: 0; }
.legal-doc { min-width: 0; }
.live-more { min-width: 0; }
.meter { min-width: 0; }
.meter-k { min-width: 0; }
.meter-v { min-width: 0; }
.meters { min-width: 0; }
.msg { min-width: 0; }
.msgs { min-width: 0; }
.mute { min-width: 0; }
.nav-menu { min-width: 0; }
.none { min-width: 0; }
.note-k { min-width: 0; }
.page-hero { min-width: 0; }
.pattern-a { min-width: 0; }
.pattern-badge { min-width: 0; }
.pause-all { min-width: 0; }
.phone { min-width: 0; }
.phone-hi { min-width: 0; }
.phone-screen { min-width: 0; }
.phone-top { min-width: 0; }
.pill { min-width: 0; }
.pill-accent { min-width: 0; }
.pill-danger { min-width: 0; }
.pill-info { min-width: 0; }
.pill-muted { min-width: 0; }
.pill-proof { min-width: 0; }
.pill-success { min-width: 0; }
.pill-warn { min-width: 0; }
.plan-copy { min-width: 0; }
.pricing-page { min-width: 0; }
.processor-table { min-width: 0; }
.proof-card { min-width: 0; }
.proof-grid { min-width: 0; }
.prose { min-width: 0; }
.quiet { min-width: 0; }
.rail { min-width: 0; }
.rcat { min-width: 0; }
.receipt-body { min-width: 0; }
.receipt-fee { min-width: 0; }
.receipt-meta { min-width: 0; }
.receipt-name { min-width: 0; }
.recipe-grid { min-width: 0; }
.record-basis { min-width: 0; }
.record-export { min-width: 0; }
.related { min-width: 0; }
.req { min-width: 0; }
.required { min-width: 0; }
.rg-name { min-width: 0; }
.rg-tag { min-width: 0; }
.row { min-width: 0; }
.sdk-tab { min-width: 0; }
.sdk-tabs { min-width: 0; }
.sellers-empty-title { min-width: 0; }
.sheet { min-width: 0; }
.sheet-block { min-width: 0; }
.sheet-hero { min-width: 0; }
.sheet-lead { min-width: 0; }
.sheet-share { min-width: 0; }
.small { min-width: 0; }
.status-mark { min-width: 0; }
.submit-btn { min-width: 0; }
.success { min-width: 0; }
.success-msg { min-width: 0; }
.tag-example { min-width: 0; }
.talk-card { min-width: 0; }
.tape { min-width: 0; }
.tape-bar { min-width: 0; }
.tape-list { min-width: 0; }
.tech { min-width: 0; }
.terms-archive { min-width: 0; }
.terms-changes { min-width: 0; }
.terms-summary { min-width: 0; }
.terms-version { min-width: 0; }
.tok-com { min-width: 0; }
.tok-kw { min-width: 0; }
.tok-num { min-width: 0; }
.tok-prop { min-width: 0; }
.tok-str { min-width: 0; }
.token { min-width: 0; }
.two { min-width: 0; }
.tx-dots { min-width: 0; }
.tx-legal { min-width: 0; }
.tx-line { min-width: 0; }
.tx-seller { min-width: 0; }
.v-head { min-width: 0; }
.verify { min-width: 0; }
.verify-card { min-width: 0; }
.verify-form { min-width: 0; }
.verify-page { min-width: 0; }
.verify-result { min-width: 0; }
.walk { min-width: 0; }
.walk-amt { min-width: 0; }
.walk-bar { min-width: 0; }
.walk-card { min-width: 0; }
.walk-console { min-width: 0; }
.walk-console-bar { min-width: 0; }
.walk-console-body { min-width: 0; }
.walk-controls { min-width: 0; }
.walk-count { min-width: 0; }
.walk-end { min-width: 0; }
.walk-hint { min-width: 0; }
.walk-intro { min-width: 0; }
.walk-kicker { min-width: 0; }
.walk-label { min-width: 0; }
.walk-note { min-width: 0; }
.walk-ok { min-width: 0; }
.walk-row { min-width: 0; }
.walk-split { min-width: 0; }
.walk-stage { min-width: 0; }
.walk-value { min-width: 0; }
.warn { min-width: 0; }
.wrap { min-width: 0; }
.yearly { min-width: 0; }

/* One overlay system: dialog, danger confirm, approval review,
   side drawer, bottom sheet, toast, video lightbox. */

.ag-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  pointer-events: none;
}

.ag-overlay-scrim {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--scrim);
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity var(--dur-enter) var(--ease);
}

.ag-overlay[data-open] .ag-overlay-scrim { opacity: 1; }

.ag-dialog,
.ag-drawer,
.ag-sheet,
.ag-lightbox {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  outline: none;
  max-height: min(86dvh, 760px);
}

.ag-dialog {
  width: min(440px, 100%);
  border-radius: var(--radius-sheet);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-enter) var(--ease), transform var(--spring-snappy-duration) var(--spring-snappy);
}

.ag-overlay[data-open] .ag-dialog {
  opacity: 1;
  transform: none;
}

.ag-dialog-bar,
.ag-drawer-bar,
.ag-lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}

.ag-dialog-kicker,
.ag-sheet-kicker {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
  color: var(--ink);
}

.ag-overlay-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  height: var(--target);
  margin-right: calc(var(--space-2) * -1);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
}

.ag-overlay-close:hover { background: var(--bg-well); color: var(--ink); }

.ag-dialog-body,
.ag-sheet-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  overflow: auto;
}

.ag-dialog-who {
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}

.ag-overlay .ag-amount-hero,
.ag-dialog .ag-amount-hero,
.ag-drawer .ag-amount-hero,
.ag-sheet .ag-amount-hero {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-amount-hero);
  line-height: var(--lh-amount-hero);
  font-weight: var(--w-amount-hero);
  letter-spacing: var(--tr-amount-hero);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.ag-overlay .ag-body {
  margin: 0;
  color: var(--ink-dim);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-body);
}

.ag-rule-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-well);
  border-radius: var(--radius-card);
  color: var(--ink);
}

.ag-rule-row p { margin: 0; }

.ag-rule-row .ag-rule-title {
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}

.ag-rule-row .ag-rule-note {
  margin-top: var(--space-1);
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}

.ag-keyed {
  display: grid;
  margin: 0;
}

.ag-keyed > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  min-height: var(--target);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}

.ag-keyed dt {
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-ui);
}

.ag-keyed dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
  font-variant-numeric: tabular-nums;
}

.ag-dialog-foot,
.ag-drawer-summary,
.ag-sheet-foot {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
}

.ag-dialog-foot .ag-btn,
.ag-sheet-foot .ag-btn { flex: 1; }

.ag-callout--danger {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--denied-tint);
  color: var(--denied);
  border-radius: var(--radius-card);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}

.ag-confirm-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ag-confirm-field span {
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
  color: var(--ink);
}

.ag-checkline {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--target);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}

.ag-sent {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.ag-sent-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--allowed);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}

.ag-irreversible {
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
}

.ag-overlay--drawer {
  justify-content: end;
  padding: 0;
}

.ag-drawer {
  width: min(420px, 100%);
  height: 100%;
  max-height: none;
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  transform: translateX(24px);
  opacity: 0;
  transition: transform var(--spring-drawer-duration) var(--spring-drawer), opacity var(--dur-enter) var(--ease);
}

.ag-overlay[data-open] .ag-drawer {
  transform: none;
  opacity: 1;
}

.ag-drawer-body {
  flex: 1;
  overflow: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ag-drawer-summary {
  flex-direction: column;
  align-items: stretch;
  background: var(--bg);
}

.ag-summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--target);
  align-items: center;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
  font-variant-numeric: tabular-nums;
}

.ag-summary-row strong {
  font-size: var(--t-amount);
  line-height: var(--lh-amount);
  font-weight: var(--w-amount);
  letter-spacing: var(--tr-amount);
}

.ag-overlay--sheet {
  align-items: end;
  padding: 0;
}

.ag-sheet {
  width: min(480px, 100%);
  border-radius: var(--radius-sheet);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  transform: translateY(16px);
  opacity: 0;
  transition: transform var(--spring-sheet-duration) var(--spring-sheet), opacity var(--dur-enter) var(--ease);
}

.ag-overlay[data-open] .ag-sheet {
  transform: none;
  opacity: 1;
}

.ag-sheet-handle {
  width: 36px;
  height: 4px;
  margin: var(--space-3) auto 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}

.ag-progress {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  overflow: hidden;
}

.ag-progress-fill {
  position: absolute;
  inset: 0;
  background: var(--allowed);
  transform: scaleX(0);
  transform-origin: left center;
}

.ag-progress.is-on .ag-progress-fill {
  animation: ag-progress var(--spring-sheet-duration) var(--ease-linear) forwards;
}

.ag-progress-label {
  position: relative;
  z-index: 1;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}

@keyframes ag-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.ag-toast-region {
  position: fixed;
  z-index: var(--z-toast);
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(420px, calc(100% - var(--space-6)));
  pointer-events: none;
}

.ag-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--target);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-1);
  pointer-events: auto;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}

.ag-toast button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  height: var(--target);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--bg);
  cursor: pointer;
}

.ag-lightbox {
  width: min(1080px, 100%);
  max-height: min(92dvh, 860px);
  border-radius: var(--radius-panel);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-enter) var(--ease), transform var(--spring-gentle-duration) var(--spring-gentle);
}

.ag-overlay[data-open] .ag-lightbox {
  opacity: 1;
  transform: none;
}

.ag-lightbox-title {
  margin: 0;
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  font-weight: var(--w-h3);
  letter-spacing: var(--tr-h3);
}

.ag-lightbox-duration {
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
  font-variant-numeric: tabular-nums;
}

.ag-lightbox-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 0;
  min-height: 0;
}

.ag-lightbox-stage video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62dvh;
  background: var(--bg-well);
}

.ag-chapters {
  list-style: none;
  margin: 0;
  padding: var(--space-3);
  border-left: 1px solid var(--line);
  overflow: auto;
}

.ag-chapters button {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--target);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}

.ag-chapters button[aria-current="true"] { background: var(--bg-well); }

.ag-chapters time {
  color: var(--ink-mute);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .ag-lightbox-stage { grid-template-columns: 1fr; }
  .ag-chapters { border-left: 0; border-top: 1px solid var(--line); }
  .ag-keyed > div { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* Film section and video cards. Product shots, large type, chapters. */

.ag-film {
  display: grid;
  gap: var(--space-6);
}

.ag-film-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--bg-well);
}

.ag-film-stage video,
.ag-film-stage img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-well);
}

.ag-film-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

.ag-film-caption h2 {
  margin: 0;
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  font-weight: var(--w-h2);
  letter-spacing: var(--tr-h2);
}

.ag-video-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.ag-video-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.ag-video-card-media {
  position: relative;
  display: block;
  background: var(--bg-well);
}

.ag-video-card-media img,
.ag-video-card-media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-well);
}

.ag-video-play {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  height: var(--target);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
}

.ag-video-duration {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-chip);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  font-weight: var(--w-meta);
  letter-spacing: var(--tr-meta);
  font-variant-numeric: tabular-nums;
}

.ag-video-card-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-4) var(--space-4);
}

.ag-video-card-copy strong {
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  font-weight: var(--w-h3);
  letter-spacing: var(--tr-h3);
}

.ag-video-card-copy span {
  color: var(--ink-dim);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-body);
  letter-spacing: var(--tr-ui);
}

.ag-chapter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ag-chapter-chips button {
  min-height: var(--target);
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}

.ag-chapter-chips button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

@media (max-width: 800px) {
  .ag-video-row { grid-template-columns: 1fr; }
  .ag-film-caption { position: static; }
}

/* Utilities. !important is allowed in this file and in reduced motion. */

.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ag-tabular { font-variant-numeric: tabular-nums; }

[hidden] { display: none !important; }

body.is-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ag-spin { animation: none !important; }
  .ag-sticky-cta,
  .ag-sticky-cta.is-on,
  .ag-nav,
  .ag-btn { transition: none !important; }
}