/* Aging Crisis Orchestrators components (CSS only). Loaded after tokens.css. */

.aco { font-family: var(--font-body); font-size: 18px; line-height: 30px; color: var(--ink); background: var(--paper); }

/* Eyebrow: italic, sentence case, sage */
.aco-eyebrow { margin: 0; font-family: var(--font-body); font-style: italic; font-size: 17px; line-height: 24px; color: var(--sage); }

/* Staff rule: five hairlines, the brand's signature divider */
.aco-staff { display: block; height: calc(4 * var(--staff-gap) + 5px); border: 0; margin: 0;
  background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px calc(var(--staff-gap) + 1px)); }
.aco-staff--short { width: 96px; }

/* Buttons */
.aco-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--target-min); min-width: var(--target-min); padding: 12px 22px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 17px; line-height: 20px; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: filter .15s ease; }
.aco-btn--primary { background: var(--clay); color: var(--on-clay); }
.aco-btn--primary:hover { filter: brightness(1.08); }
.aco-btn--secondary { background: transparent; color: var(--clay); border-color: var(--border-control); }
.aco-btn--secondary:hover { border-color: var(--clay); }
.aco-btn:focus-visible, .aco a:focus-visible, .aco summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Links */
.aco a:not([class]) { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.aco a:not([class]):hover { text-decoration-thickness: 2px; }

/* Notice: the 911 line and anything that must be seen */
.aco-notice { background: var(--notice); border: 1px solid var(--honey); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); color: var(--ink); }
.aco-notice strong { font-weight: 600; }

/* Fact: a statistic with its plain-language meaning */
.aco-fact { display: grid; gap: var(--space-2); padding-top: var(--space-4); align-content: start; }
.aco-fact::before { content: ""; display: block; height: calc(4 * var(--staff-gap) + 5px); width: 64px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px calc(var(--staff-gap) + 1px)); }
.aco-fact__figure { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 48px; color: var(--terracotta); font-variation-settings: "opsz" 60; }
.aco-fact__text { margin: 0; font-size: 16px; line-height: 25px; color: var(--ink-muted); }

/* Service: hand-drawn icon beside a title and text */
.aco-service { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.aco-service__icon { width: 72px; height: 72px; object-fit: contain; }
.aco-service__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 29px; }
.aco-service__text { margin: var(--space-1) 0 0; color: var(--ink-muted); }

/* Step: one stage of a real sequence */
.aco-step { background: var(--paper); border-radius: var(--radius-md); padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.aco-step__count { font-style: italic; font-size: 17px; line-height: 24px; color: var(--sage); }
.aco-step__icon { width: 64px; height: 64px; object-fit: contain; }
.aco-step__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 29px; }
.aco-step__text { margin: 0; color: var(--ink-muted); }

/* FAQ: native disclosure, keyboard and screen-reader friendly */
.aco-faq { border-bottom: 1px solid var(--line); }
.aco-faq:first-of-type { border-top: 1px solid var(--line); }
.aco-faq summary { cursor: pointer; min-height: var(--target-min); display: flex; align-items: center; gap: var(--space-3);
  padding-block: var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 27px; list-style: none; }
.aco-faq summary::-webkit-details-marker { display: none; }
.aco-faq summary::before { content: "+"; flex: none; width: 24px; text-align: center; color: var(--clay); font-family: var(--font-body); font-weight: 400; font-size: 24px; }
.aco-faq[open] summary::before { content: "\2212"; }
.aco-faq p { margin: 0 0 var(--space-4) 36px; color: var(--ink-muted); }

/* Form panel: the one raised element */
.aco-panel { background: var(--paper-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: var(--space-5); }

/* Highlight: a honey wash behind a few key words */
.aco-wash { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--honey) 35%, transparent) 55% 92%, transparent 92%); padding-inline: 2px; }

@media (prefers-reduced-motion: reduce) { .aco-btn { transition: none; } }