/* /trust/ai-safety: contents rail, the five-step sequence and the worked
   example. The hero, section tags and closing band come from trust.css
   (loaded first). Tokens come from site.css. */

.as-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.as-contents a[aria-current="true"] { color: var(--ink); font-weight: 600; }
@media (min-width: 1100px) {
  .as-layout { grid-template-columns: 250px minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  .as-contents { position: sticky; top: calc(var(--header) + 32px); padding-top: clamp(90px, 12vh, 150px); padding-bottom: 0; }
  .as-contents ol { columns: auto; list-style: none; padding: 0; margin-top: 16px; border-left: 1px solid var(--rule); }
  .as-contents li { padding: 0; }
  .as-contents a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--muted); transition: color .2s, border-color .2s; }
  .as-contents a:hover { color: var(--ink); text-decoration: none; }
  .as-contents a[aria-current="true"] { border-left-color: var(--green); color: var(--ink); }
}

/* Five steps as a sequence */
.as-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; max-width: 820px; }
.as-steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; padding-bottom: 26px; }
.as-steps li:last-child { padding-bottom: 0; }
.as-steps li::before { content: ""; position: absolute; left: 17px; top: 30px; bottom: -2px; width: 2px; background: var(--rule); }
.as-steps li:last-child::before { display: none; }
.as-step-node { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--green); background: var(--paper); position: relative; z-index: 1; }
.as-steps li:last-child .as-step-node { background: var(--green); }
.as-step-node::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--green); opacity: .25; }
.as-steps li:last-child .as-step-node::after { background: var(--white); opacity: 1; inset: 12px; }
.as-steps h3 { grid-column: 2; display: flex; align-items: baseline; gap: 12px; font-size: 1.22rem; letter-spacing: -.02em; line-height: 1.25; padding-top: 6px; }
.as-step-no { font: 500 12px var(--mono); letter-spacing: .08em; color: var(--green); }
.as-step-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.as-steps p { grid-column: 2; color: var(--muted); max-width: 58ch; }
@media (min-width: 900px) {
  .as-steps li { grid-template-columns: 36px minmax(0, 230px) minmax(0, 1fr); column-gap: 22px; }
  .as-step-node { grid-row: 1; }
  .as-steps p { grid-column: 3; padding-top: 6px; }
}

/* Worked example */
.as-example { margin-top: 22px !important; padding: 22px 26px; border-radius: 0 16px 16px 0; border-left: 3px solid var(--green); background: var(--sage); color: var(--ink-2) !important; }