.aa-cidx { border-bottom: 1px solid var(--color-border); }

.aa-cidx__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 45px; }
.aa-cidx__head .section-label { margin-bottom: 20px; }
.aa-cidx__intro { color: var(--color-accent); font-size: 14px; line-height: 1.75; max-width: 370px; }
@media (max-width: 640px) {
  .aa-cidx__head { display: block; margin-bottom: 30px; }
  .aa-cidx__intro { margin-top: 20px; }
}
.aa-cidx__cols { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-border); }
.aa-cidx__col { padding: 26px 22px 0 0; }
.aa-cidx__col + .aa-cidx__col { padding-left: 22px; border-left: 1px solid var(--color-border); }
.aa-cidx__col h3 { display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 450; line-height: 1.3; color: var(--color-fg); min-height: 70px; margin-bottom: 14px; }
.aa-cidx__col ol { list-style: none; }
.aa-cidx__col li { display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 9px 0; border-top: 1px solid var(--color-border-soft); font-size: 13px; line-height: 1.45; color: var(--color-fg-muted); }
.aa-cidx__code { font: 11px/1.9 var(--font-mono); color: var(--color-dim); }
body.cms-edit .aa-cidx__cols > .cms-list-item-add { grid-column: 1 / -1; margin-top: 16px; }
.aa-cidx__btn { margin-top: 32px; }
.aa-cidx__btn::after { content: "\2197"; }
@media (max-width: 900px) {
  .aa-cidx__cols { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .aa-cidx__col:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .aa-cidx__cols { grid-template-columns: 1fr; }
  .aa-cidx__col, .aa-cidx__col + .aa-cidx__col { padding: 22px 0 0; border-left: 0; }
  .aa-cidx__col h3 { min-height: 0; }
}

/* Optional giant numeral beside the title ("20"): an outline in the
   accent blue, so it is big without being heavy. */
.aa-cidx__headline { display: flex; align-items: flex-end; gap: 28px; }
.aa-cidx__numeral {
  font-size: clamp(110px, 15vw, 210px); font-weight: 200; line-height: .78; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px var(--color-accent);
  text-shadow: 0 0 40px rgba(85, 200, 255, .18);
}
@media (max-width: 640px) { .aa-cidx__headline { gap: 18px; } .aa-cidx__numeral { -webkit-text-stroke-width: 1px; } }