/* Scoped layouts for the AI directory and its product notes. */
.ai-intro { padding-top: 64px; padding-bottom: 38px; }
.ai-intro .display { max-width: 950px; font-size: clamp(42px, 5.6vw, 76px); }
.ai-intro .lede { max-width: 770px; }
.ai-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.ai-section { padding-block: 42px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.ai-section h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.2; letter-spacing: -.03em; margin: 8px 0 22px; }
.ai-section > p { max-width: 800px; color: var(--muted); }
.ai-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.ai-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ai-card { display: flex; flex-direction: column; padding: 27px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.ai-card h2, .ai-card h3 { margin: 16px 0 12px; font-size: 28px; line-height: 1.2; letter-spacing: -.035em; }
.ai-card p { color: var(--muted); margin: 0 0 16px; }
.ai-card ul { padding-left: 20px; color: var(--muted); margin: 0 0 24px; }
.ai-card .ai-links { margin-top: auto; padding-top: 12px; }
.ai-card .ai-kicker { font: 11px/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--steel); margin: 0; }
.ai-status { display: inline-flex; width: fit-content; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--bg-2); border-radius: 30px; padding: 5px 10px; font: 11px/1.5 var(--mono); color: var(--ok); }
.ai-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }
.ai-status.research { color: #efba86; }
.ai-note { padding: 20px 24px; border-left: 2px solid var(--steel); background: var(--surface); color: var(--muted); margin: 24px 0; }
.ai-note strong { color: var(--fg); }
.ai-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding: 0; gap: 1px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 26px 0; counter-reset: stage; }
.ai-flow li { padding: 22px; background: var(--surface); counter-increment: stage; }
.ai-flow li::before { content: '0' counter(stage); display: block; font: 12px var(--mono); color: var(--accent); margin-bottom: 18px; }
.ai-flow strong { display: block; font-size: 18px; }
.ai-flow span, .ai-flow p { display: block; font-size: 14px; color: var(--muted); margin-top: 7px; }
.ai-details { border-top: 1px solid var(--line); padding: 18px 0; scroll-margin-top: 90px; }
.ai-details summary { cursor: pointer; font-weight: 500; font-size: 18px; }
.ai-details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.ai-details p, .ai-details ul { max-width: 860px; color: var(--muted); }
.ai-details a, .ai-note a, .ai-section > p a { text-decoration: underline; text-underline-offset: 4px; }
.ai-meta { color: var(--muted); font: 12px var(--mono); margin: 28px 0; }
.ai-legacy { display: block; scroll-margin-top: 90px; }
@media (max-width: 850px) { .ai-grid { grid-template-columns: 1fr; } .ai-card { padding: 24px; } .ai-flow { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .ai-intro { padding-top: 34px; } .ai-grid.two { grid-template-columns: 1fr; } .ai-section { padding-block: 30px; } .ai-flow li { padding: 18px; } .ai-card h2, .ai-card h3 { font-size: 25px; } }