.ao-button, .ao-button:visited { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 44px; padding: .7rem 1.25rem; border: 1px solid transparent; border-radius: var(--ao-radius); background: var(--ao-brand); color: var(--ao-white); font-size: .875rem; font-weight: 600; line-height: 1.4; text-decoration: none; text-align: center; transition: background-color .15s ease; }
.ao-button:hover { background: var(--ao-brand-hover); color: var(--ao-white); }
.ao-button--outline, .ao-button--outline:visited { border-color: var(--ao-brand); background: var(--ao-white); color: var(--ao-brand); }
.ao-button--purchase, .ao-button--purchase:visited { background: var(--ao-purchase); color: var(--ao-heading); }
.ao-button--purchase:hover { background: #f15c26; color: var(--ao-heading); }
.ao-button:disabled { opacity: .5; cursor: not-allowed; }
.ao-field { display: grid; gap: .5rem; }
.ao-field label { font-size: .875rem; font-weight: 500; color: var(--ao-heading); }
:where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]), select, textarea) { width: 100%; min-height: 44px; min-width: 0; padding: .7rem .875rem; border: 1px solid var(--ao-border); border-radius: var(--ao-radius); background: var(--ao-white); color: var(--ao-text); }
textarea { min-height: 130px; resize: vertical; }
:where(input, textarea, select)[aria-invalid=true] { border-color: var(--ao-brand); }
input::placeholder, textarea::placeholder { color: #636569; opacity: 1; }
input[type=checkbox], input[type=radio] { width: 1.1rem; height: 1.1rem; accent-color: var(--ao-brand); }
.ao-checkbox { display: flex; align-items: flex-start; gap: .75rem; }
.ao-checkbox input { flex-shrink: 0; margin-top: .3rem; }
.ao-field__hint { font-size: .8125rem; color: #636569; }
.ao-field__error { font-size: .875rem; color: var(--ao-brand); }
.ao-search-form { display: flex; gap: .5rem; max-width: 600px; }
.ao-search-form input { flex: 1; min-width: 0; }
.ao-card { min-width: 0; padding: 1.5rem; border: 1px solid var(--ao-border); border-radius: var(--ao-radius); background: var(--ao-white); }
.ao-card__image { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--ao-radius); }
.ao-card__title { font-size: 1.25rem; }
.ao-card__title a { color: var(--ao-heading); text-decoration: none; }
.ao-card__title a:hover { text-decoration: underline; }
.ao-eyebrow { color: var(--ao-brand); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ao-lead { max-width: 760px; font-size: 1.125rem; }
.ao-badge { display: inline-block; padding: .25rem .625rem; border-radius: 4px; background: var(--ao-heading); color: var(--ao-white); font-size: .75rem; font-weight: 500; }
.ao-notice { padding: 1rem 1.25rem; border: 1px solid var(--ao-border); border-left: 4px solid var(--ao-heading); border-radius: var(--ao-radius); background: var(--ao-white); }
.ao-notice--success { border-left-color: #3c6827; }
.ao-notice--error { border-left-color: var(--ao-brand); }
.ao-notice p:last-child { margin-bottom: 0; }
.ao-empty-state { padding: 3rem 1.5rem; text-align: center; border: 1px dashed var(--ao-border); border-radius: var(--ao-radius); background: var(--ao-white); }
.ao-empty-state .ao-search-form { margin: 1.5rem auto; }
.ao-accordion { border-bottom: 1px solid var(--ao-border); }
.ao-accordion summary { display: list-item; padding: 1.25rem .25rem; color: var(--ao-heading); font-weight: 600; cursor: pointer; }
.ao-accordion > div { padding-bottom: 1.25rem; }
.ao-dialog { max-width: min(600px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 2rem; overflow-y: auto; border: 0; border-radius: var(--ao-radius); color: var(--ao-text); box-shadow: var(--ao-shadow); }
.ao-dialog::backdrop { background: rgb(30 61 74 / 55%); }
.ao-dialog__close { float: right; margin: -.5rem -.5rem 1rem 1rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 2rem; }
.page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: .5rem; border: 1px solid var(--ao-border); border-radius: var(--ao-radius); text-decoration: none; background: var(--ao-white); }
.page-numbers.current { color: var(--ao-white); background: var(--ao-brand); border-color: var(--ao-brand); }