.system-index-hero,
.system-index-grid,
.template-list { inline-size: min(calc(100% - (var(--aicjm-layout-gutter-mobile) * 2)), var(--aicjm-layout-container-max)); margin-inline: auto; }
.system-index-hero { padding-block: var(--aicjm-layout-section-space-max); }
.system-index-hero > p:first-child, .template-list small { color: var(--aicjm-action-primary); font-size: var(--aicjm-type-size-metadata); text-transform: uppercase; }
.system-index-hero > p:last-child { max-inline-size: 52rem; color: var(--aicjm-text-secondary); font-size: var(--aicjm-type-size-lead); }
.system-index-grid { display: grid; grid-template-columns: repeat(3, minmax(var(--aicjm-space-0), 1fr)); padding-block-end: var(--aicjm-layout-section-space-max); }
.system-index-grid a { display: flex; min-inline-size: var(--aicjm-space-0); min-block-size: 24rem; padding: var(--aicjm-component-card-padding-desktop); flex-direction: column; border: var(--aicjm-control-border-width) solid var(--aicjm-border-default); color: var(--aicjm-text-primary); text-decoration: none; }
.system-index-grid strong { color: var(--aicjm-action-primary); font-size: var(--aicjm-type-size-display-min); }
.system-index-grid h2 { margin-block: var(--aicjm-space-48) var(--aicjm-space-16); font-size: var(--aicjm-type-size-heading-medium); }
.system-index-grid p { color: var(--aicjm-text-secondary); }
.system-index-grid span { margin-block-start: auto; color: var(--aicjm-action-primary); }
.template-list { padding-block-end: var(--aicjm-layout-section-space-max); border-top: var(--aicjm-control-border-width) solid var(--aicjm-border-default); }
.template-list > a { display: grid; min-inline-size: var(--aicjm-space-0); min-block-size: var(--aicjm-space-112); padding-block: var(--aicjm-space-24); grid-template-columns: var(--aicjm-space-52) minmax(var(--aicjm-space-0), 1fr) auto; align-items: center; gap: var(--aicjm-space-24); border-bottom: var(--aicjm-control-border-width) solid var(--aicjm-border-default); color: var(--aicjm-text-primary); text-decoration: none; }
.template-list > a > span { color: var(--aicjm-action-primary); }
.template-list h2, .template-list p { margin: var(--aicjm-space-0); }
.template-list h2 { margin-block: var(--aicjm-space-8); font-size: var(--aicjm-type-size-heading-small); }
.template-list p { max-inline-size: 56rem; color: var(--aicjm-text-secondary); }
.template-list > a > strong { color: var(--aicjm-action-primary); }
@media (max-width: 48rem) { .system-index-grid { grid-template-columns: 1fr; } .template-list > a { grid-template-columns: var(--aicjm-space-32) minmax(var(--aicjm-space-0), 1fr); } .template-list > a > strong { grid-column: 2; } }