* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--ao-type-body-font-family);
  font-size: var(--ao-type-body-font-size);
  line-height: var(--ao-type-body-line-height);
  font-weight: 400;
  color: var(--ao-dark);
  background: var(--ao-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: clip;
}

::selection {
  background: var(--ao-light-red);
  color: var(--ao-heading-black);
}

/* ── Document layout ──────────────────────────────────────────────── */

/* Single reading column by default; the local rail becomes a left column only
  on wide viewports (where it's actually shown), so the hidden rail never
  leaves an empty grid track. */

.document-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 auto;
  padding: 120px 40px 96px;
}

@media (min-width: 1025px) {
  .document-shell {
    grid-template-columns: var(--doc-rail-width, 200px) minmax(0, 1fr);
    column-gap: var(--doc-rail-gap, 56px);
    max-width: 1300px;
    padding: 120px 40px 96px;
  }
}

/* Reading measure — prose columns to a comfortable line length while
diagrams, tables, and interactive components keep the full width. */
.document-shell :is(p, ul, ol, h2, h3, h4, h5, blockquote, dl) {
  /* max-width: var(--measure); */
}

.doc-main {
  min-width: 0;
}

/* ── Headers ────────────────────────────────────────────────────────── */

h1 {
  font-family: var(--ao-type-h1-font-family);
  font-size: var(--ao-type-h1-font-size);
  line-height: var(--ao-type-h1-line-height);
  letter-spacing: var(--ao-type-h1-letter-spacing);
  font-weight: 400;
  color: var(--ao-heading-black);
  margin-bottom: var(--ao-type-h1-paragraph-spacing);
}

h2, .h2 {
  font-family: var(--ao-type-h2-font-family);
  font-size: var(--ao-type-h2-font-size);
  line-height: var(--ao-type-h2-line-height);
  font-weight: 400;
  color: var(--ao-heading-black);
  margin-bottom: var(--ao-type-h2-paragraph-spacing);
  /* padding-bottom: 8px; */
  /* border-bottom: 3px solid var(--ao-red); */
  display: inline-block;
}

h2::after,
.h2::after {
  content: '';
  display: block;
  clear: both;
}

.has-marketing-chrome h2,
.has-marketing-chrome .h2 {
  scroll-margin-top: 88px;
}

h3,
.h3 {
  font-family: var(--ao-type-h3-font-family);
  font-size: var(--ao-type-h3-font-size);
  line-height: var(--ao-type-h3-line-height);
  font-weight: 400;
  color: var(--ao-heading-black);
  margin: 42px 0 var(--ao-type-h3-paragraph-spacing);
}

h4,
.h4 {
  font-family: var(--ao-type-h4-font-family);
  font-size: var(--ao-type-h4-font-size);
  line-height: var(--ao-type-h4-line-height);
  font-weight: 500;
  color: var(--ao-heading-black);
  margin: 28px 0 var(--ao-type-h4-paragraph-spacing);
}

p + .h4 {
  padding-top: 1em;
}

h5,
.h5 {
  font-family: var(--ao-type-h5-font-family);
  font-size: var(--ao-type-h5-font-size);
  line-height: var(--ao-type-h5-line-height);
  font-weight: 500;
  color: var(--ao-heading-black);
  margin: 24px 0 var(--ao-type-h5-paragraph-spacing);
}

h6,
.h6 {
  font-family: var(--ao-type-h6-font-family);
  font-size: var(--ao-type-h6-font-size);
  line-height: var(--ao-type-h6-line-height);
  font-weight: 700;
  color: var(--ao-heading-black);
  margin: 20px 0 var(--ao-type-h6-paragraph-spacing);
}

/* ── Body copy ────────────────────────────────────────────────────────── */
p {
  margin-bottom: var(--ao-type-body-lg-paragraph-spacing);
  color: var(--ao-body-black);
}

p + ul,
p + ol {
  margin-top: -4px;
}

strong, 
b {
  color: var(--ao-heading-black);
  font-weight: 500;
}

em,
i {
  font-style: italic;
}

/* ── Subtitle ────────────────────────────────────────────────────────── */
.subtitle {
  font-family: var(--ao-type-lead-font-family);
  font-size: var(--ao-type-lead-font-size);
  line-height: var(--ao-type-lead-line-height);
  color: var(--ao-body-black);
  margin-bottom: var(--ao-type-lead-paragraph-spacing);
  font-weight: 300;
  font-style: italic;
}

.body-lg {
  font-family: var(--ao-type-body-lg-font-family);
  font-size: var(--ao-type-body-lg-font-size);
  line-height: var(--ao-type-body-lg-line-height);
  font-weight: 400;
  color: var(--ao-body-black);
}

.body-sm {
  font-family: var(--ao-type-body-sm-font-family);
  font-size: var(--ao-type-body-sm-font-size);
  line-height: var(--ao-type-body-sm-line-height);
  font-weight: 400;
  color: var(--ao-body-black);
}

.doc-version {
  /* No matching small/caption token in the type system yet — leaving literals. */
  font-size: 0.85rem;
  color: var(--ao-body-black);
  margin: 0 0 40px;
  max-width: 640px;
}

.styled-number {
  font-size: var(--ao-type-display-lg-font-size) !important;
  font-style: normal;
  font-weight: 700;
  line-height: var(--ao-type-display-lg-font-size); /* 124% */
  letter-spacing: -1px;
  /* margin-top: 1em;
  margin-bottom: var(--ao-type-display-lg-paragraph-spacing); */
}

/* ── Lists ──────────────────────────────────────────────────────────── */

li {
  font-family: var(--ao-type-list-font-family);
  font-size: var(--ao-type-list-font-size);
  line-height: var(--ao-type-list-line-height);  
  margin-bottom: calc(var(--ao-type-list-paragraph-spacing) * 0.6);
}

li::marker {
  color: var(--ao-red);
}

ul,
ol {
  margin: 22px 0 26px;
}

ul {
  padding-left: 26px;
}

ol {
  list-style: none;
  counter-reset: ao-ol;
  padding-left: 0;
}

ol > li {
  counter-increment: ao-ol;
  position: relative;
  padding-left: var(--ao-ol-marker-width);
}

ol > li::before {
  content: counter(ao-ol, decimal-leading-zero) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ao-ol-marker-width);
  font-family: var(--ao-type-list-font-family);
  font-size: var(--ao-type-list-font-size);
  line-height: var(--ao-type-list-line-height);
  font-weight: 700;
  color: var(--ao-red);
}

ol.body-lg-list > li::before {
  font-family: var(--ao-type-list-lg-font-family);
  font-size: var(--ao-type-list-lg-font-size);
  line-height: var(--ao-type-list-lg-line-height);
}

li > ul,
li > ol {
  margin: 8px 0;
}

ol ol {
  counter-reset: ao-ol;
}

.body-list:is(ul) {
  padding-left: 26px;
  margin: 22px 0 26px;
}

.body-list li {
  font-family: var(--ao-type-list-font-family);
  font-size: var(--ao-type-list-font-size);
  line-height: var(--ao-type-list-line-height);
  margin-bottom: calc(var(--ao-type-list-paragraph-spacing) * 0.6);
}

.body-list li::marker {
  color: var(--ao-red);
}

.body-list li > :is(ul, ol) {
  margin: 8px 0;
}

.body-lg-list:is(ul) {
  padding-left: 26px;
  margin: 22px 0 26px;
}

.body-lg-list li {
  font-family: var(--ao-type-list-lg-font-family);
  font-size: var(--ao-type-list-lg-font-size);
  line-height: var(--ao-type-list-lg-line-height);
  margin-bottom: calc(var(--ao-type-list-lg-paragraph-spacing) * 0.6);
}

.body-lg-list li::marker {
  color: var(--ao-red);
}

.body-lg-list li > :is(ul, ol) {
  margin: 8px 0;
}

/* ── Links ────────────────────────────────────────────────────────── */ 
a {
  color: var(--ao-dark-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--ao-darkest-red);
}

a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 0;
}

/* ── Editorial / pull quotes ──────────────────────────────────────── */

blockquote {
  font-family: var(--ao-type-quote-font-family);
  font-size: var(--ao-type-quote-font-size);
  line-height: var(--ao-type-quote-line-height);
  font-style: italic;
  color: var(--ao-heading-black);
  border-left: 3px solid var(--primary);
  padding-left: 24px;
  margin: 28px 0 var(--ao-type-quote-paragraph-spacing);
}

/* ── Code ─────────────────────────────────────────────────────────── */

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:not(pre) > code {
  background: var(--ao-light-grey);
  color: var(--ao-heading-black);
  padding: 0.12em 0.38em;
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  background: var(--ao-heading-black);
  color: var(--ao-light-grey);
  padding: 18px 20px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 20px 0;
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* ── Tables ───────────────────────────────────────────────────────── */

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--ao-type-body-sm-font-family);
  font-size: var(--ao-type-body-sm-font-size);
  line-height: var(--ao-type-body-sm-line-height);
  font-weight: 400;
}

table th,
table td {
  padding-block: calc(var(--ao-type-body-sm-paragraph-spacing) * 0.5);
  padding-inline: calc(var(--ao-type-body-sm-paragraph-spacing) * 0.75);
  vertical-align: top;
}

table th {
  color: var(--ao-body-black);
  text-transform: none;
  text-align: left;
}

table tbody th,
table tbody td:first-child,
table td.activity-cell {
  color: var(--ao-body-black);
}

table th,
table td {
  border-bottom: 1px solid var(--border);
}

/* Comparison table (Introduction) */
.cmp-table thead th {
  padding-block: calc(var(--ao-type-body-sm-paragraph-spacing) * 0.35);
  padding-inline: calc(var(--ao-type-body-sm-paragraph-spacing) * 0.6);
  vertical-align: bottom;
  border-bottom: 4px solid var(--ao-white);
}

.cmp-table thead th:nth-child(1),
.cmp-table thead th:nth-child(2) {
  border-bottom: 1px solid var(--border);
}

.cmp-table thead th:nth-child(3) {
  border-bottom: 4px solid var(--ao-red);
}

.cmp-table tbody th {
  width: 9rem;
  padding-block: calc(var(--ao-type-body-sm-paragraph-spacing) * 0.5);
  padding-inline: calc(var(--ao-type-body-sm-paragraph-spacing) * 0.6) calc(var(--ao-type-body-sm-paragraph-spacing) * 0.75);
}

.cmp-table tbody td {
  padding-block: calc(var(--ao-type-body-sm-paragraph-spacing) * 0.5);
  padding-inline: calc(var(--ao-type-body-sm-paragraph-spacing) * 0.6);
}

@media (max-width: 640px) {
  .cmp-table tbody th {
    width: auto;
    padding-inline-end: calc(var(--ao-type-body-sm-paragraph-spacing) * 0.45);
  }

  .cmp-table thead th,
  .cmp-table tbody td {
    padding-inline: calc(var(--ao-type-body-sm-paragraph-spacing) * 0.35);
  }
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

/* ── Card Containers ─────────────────────────────────────────────────────────── */

.card-container {
  background: var(--ao-offwhite);
  padding: 24px;
  margin: 2em 0;
}

.card-container ul {
  margin-bottom: 0;
}

.card-container :is(table, .table-wrap) {
  margin: 0;
}

.letter-container {
  background: var(--ao-white);
  box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.05);
  padding: 34px;
  margin: 2em 0;
  border: 1px solid var(--border);
}

/* ── Horizontal Rule ─────────────────────────────────────────────────────────── */

.horizontal-rule {
  border: 0;
  border-top: 1px solid var(--ao-light-grey);
  margin: 2em 0 1.75em 0;
}

.brand-rule {
  border: 0;
  width: 240px;
  border-top: 4px solid var(--ao-red);
  margin: 1.5em 0 1.75em;
}

/* ── Print styles ────────────────────────────────────────────────────── */

@media print {
  
  body {
    background: var(--ao-white);
  }

  .document-shell {
    max-width: 100%;
    padding: 24px;
  }

  h2,
  h3,
  h4 {
    break-after: avoid;
    text-wrap: balance;
  }

  pre {
    background: var(--ao-light-grey);
    color: var(--ao-heading-black);
    border: 1px solid var(--border);
  }

  .diagram-container {
    break-inside: avoid;
  }

}


/* ── Utility Classes ─────────────────────────────────────────────────────────── */

.color-red {
  color: var(--ao-brand-red);
}

.color-teal {
  color: var(--ao-brand-teal);
}

.color-blue {
  color: var(--ao-brand-blue);
}

.color-purple {
  color: var(--ao-brand-purple);
}

.color-gold {
  color: var(--ao-brand-gold);
}

/* Tag pill — Figma Tag/Pill Light */
.pill {
  display: inline-block;
  border-radius: 34px;
  font-family: var(--ao-type-font-family-default);
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  color: var(--ao-heading-black);
  background-color: var(--ao-light-grey);
  padding: 8px 12px;
  white-space: nowrap;
  vertical-align: baseline;
}

.pill--sm {
  font-size: 16px;
  line-height: 16px;
  padding: 8px 12px 8px;
}