/* aonios.ai — additions for the hierarchy Version 10 pages (12 Oct 2026). Loaded after site.css; uses its tokens. */

/* the three layers, drawn with boxes (agents page, how it works, home) */
.layers { display: grid; gap: 14px; max-width: 980px; margin: 0 auto; }
.layer { border: 1px solid var(--hairline-2); border-radius: var(--radius); padding: clamp(16px, 2.4vw, 24px); background: var(--surface); }
.layer--ws { background: rgba(91, 200, 245, .07); border-color: rgba(91, 200, 245, .32); }
.layer-label { font-family: var(--font-head); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; font-weight: 700; }
.layer-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.lnode { display: block; border: 1px solid var(--hairline-2); border-radius: var(--radius-sm); padding: 14px 16px; background: rgba(8, 16, 25, .55); color: var(--text); text-decoration: none; }
a.lnode:hover { border-color: var(--accent); }
.lnode b { display: block; font-family: var(--font-head); color: var(--ink); font-size: 1.05rem; margin-bottom: 4px; }
.lnode span { display: block; font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }
.lnode .status { margin-top: 8px; display: inline-block; align-self: flex-start; width: auto; padding: 3px 10px; border-radius: 999px; }
.layer-arrow { text-align: center; color: var(--accent); font-size: var(--fs-small); font-weight: 600; letter-spacing: .02em; }
.layer-arrow::before { content: "\2191\00a0"; }
.layer-arrow--down::before { content: "\2193\00a0"; }

/* numbered steps (how an agent decides, onboarding) */
.steps { list-style: none; margin: 0 auto; padding: 0; max-width: 52rem; counter-reset: s; }
.steps > li { counter-increment: s; position: relative; padding: 18px 0 18px 58px; border-bottom: 1px solid var(--hairline); }
.steps > li:first-child { border-top: 1px solid var(--hairline); }
.steps > li::before { content: counter(s); position: absolute; left: 0; top: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; color: var(--bg); background: var(--accent); }
.steps > li b { color: var(--ink); }
.steps > li p { margin: 4px 0 0; color: var(--muted); }
.note-band { max-width: 52rem; margin: 24px auto 0; padding: 18px 20px; border-radius: var(--radius-sm); border: 1px solid rgba(224, 122, 106, .35); background: rgba(224, 122, 106, .07); color: var(--text); }
.note-band b { color: var(--ink); }

/* the white paper: long-form reading, its six figures in the site's colours */
.wp { --line-strong: var(--line); --tint: rgba(91, 200, 245, .12); --band: rgba(143, 224, 255, .05); --rule: var(--hairline-2); }
.wp .prose { margin-inline: auto; }
.wp .prose p, .wp .prose li { color: var(--text); }
.wp .prose blockquote { margin: 1.4em 0; padding: 16px 20px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.wp .prose code { font-size: .9em; background: rgba(143, 224, 255, .08); padding: .05em .35em; border-radius: 4px; overflow-wrap: anywhere; }
.wp .prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.wp .prose th { text-align: left; padding: 10px 12px; color: var(--ink); border-bottom: 1px solid var(--hairline-2); font-weight: 600; }
.wp .prose td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.wp .tw { overflow-x: auto; margin: 1.2em 0 1.6em; }
.wp .tw table { min-width: 560px; }
.wp figure { margin: 1.6em 0 2em; }
.wp .fw { overflow-x: auto; border: 1px solid var(--hairline-2); border-radius: var(--radius-sm); background: rgba(8, 16, 25, .5); padding: 14px; }
.wp figcaption { font-size: var(--fs-small); color: var(--faint); margin-top: 8px; }
.wp .fig { display: block; width: 100%; min-width: 620px; height: auto; font-family: var(--font-body); }
.wp .fig .t { fill: var(--ink); font-size: 12.5px; }
.wp .fig .tb { font-weight: 600; }
.wp .fig .ts { font-size: 11.5px; fill: var(--muted); }
.wp .fig .lab { font-size: 10.5px; letter-spacing: .09em; font-weight: 700; fill: var(--faint); }
.wp .fig .b { fill: #0d1a27; stroke: var(--line-strong); stroke-width: 1.2; }
.wp .fig .b.strong { stroke: var(--ink); }
.wp .fig .b.accf { fill: rgba(91, 200, 245, .14); stroke: var(--accent); }
.wp .fig .band { fill: var(--band); stroke: var(--rule); stroke-width: 1; }
.wp .fig .band.acc { fill: rgba(91, 200, 245, .08); stroke: var(--accent); }
.wp .fig .ln { stroke: var(--ink); stroke-width: 1.3; }
.wp .fig .dash { stroke-dasharray: 5 4; }
.wp .fig .ah { fill: var(--ink); }
.wp .fig .dot { fill: var(--accent); }
.wp dl { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: 0 20px; margin: 0; }
.wp dt { font-weight: 600; color: var(--ink); padding: 9px 0; border-top: 1px solid var(--hairline); }
.wp dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--hairline); color: var(--text); }
@media (max-width: 600px) { .wp dl { grid-template-columns: 1fr; } .wp dd { border-top: 0; padding-top: 0; } }
.wp .toc ol { columns: 2; column-gap: 32px; list-style: none; padding-left: 0; margin: 0; }
@media (max-width: 600px) { .wp .toc ol { columns: 1; } }
.wp .src { font-size: var(--fs-small); }
.wp .src a { overflow-wrap: anywhere; }
.wp-meta { color: var(--faint); font-size: var(--fs-small); margin-top: 10px; }
.hero-status { margin: 0 0 22px; }
.links-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; }
.wp .toc { border: 1px solid var(--hairline-2); border-radius: var(--radius-sm); padding: 18px 22px; margin-bottom: 36px; background: rgba(8, 16, 25, .35); }
.wp .toc > p { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; }
.wp .toc li { break-inside: avoid; padding-block: 3px; }
.wp .prose section { margin-top: 52px; }
.wp .prose section:first-child { margin-top: 0; }
.wp .prose h2 { scroll-margin-top: 90px; }
.wp-by { color: var(--faint); font-size: var(--fs-small); margin-top: 14px; }
.page-hero .eyebrow { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }