/* Local AI (/local-ai/): comparison table, spec list and fit lists.
   Loaded after site.css on that page only; colours follow the theme tokens. */
.where { margin-top: 8px; border-top: 1px solid var(--line); max-width: 980px; }
.where-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.7; }
.where-row b { font-weight: 500; color: var(--ink); }
.where-row span { color: var(--muted); }
.where-row span + span { color: var(--ink); }
.where-row span i { display: none; }
.where-head { padding: 12px 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.where-head span, .where-head span + span { color: #7485a0; }
.where-note { margin-top: 26px !important; font-size: 15px !important; }
.spec { margin: 10px 0 30px; display: grid; grid-template-columns: 220px 1fr; border-top: 1px solid var(--line); max-width: 760px; }
.spec dt, .spec dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.7; }
.spec dt { color: #7485a0; }
.spec dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 8px; }
.fit h3 { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; color: #7485a0; margin: 0 0 6px; }
.fit ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fit li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.75; color: var(--ink); }
.fit li > span { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; margin-top: 2px; background: #e6f3ec; color: #2e7957; }
.fit div + div li > span { background: #f1f2f4; color: #6b7280; }
html[data-theme="dark"] .fit li > span { background: #12301f; color: #7fd1a4; }
html[data-theme="dark"] .fit div + div li > span { background: #2e3238; color: #a9b7cf; }
html[data-theme="dark"] .where-head span, html[data-theme="dark"] .spec dt, html[data-theme="dark"] .fit h3 { color: #93a3bd; }

/* What local AI does (#uses): plain two-column list, same rules as the comparison table. */
.uses { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 8px; max-width: 980px; border-top: 1px solid var(--line); }
.uses article { padding: 22px 0; border-bottom: 1px solid var(--line); }
.uses h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.2px; color: var(--navy); }
.uses p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink); }
.uses small { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: #7485a0; }
html[data-theme="dark"] .uses small { color: #93a3bd; }

@media (max-width: 760px) {
  .uses { grid-template-columns: 1fr; }
  .where-head { display: none; }
  .where-row { grid-template-columns: 1fr; gap: 6px; }
  .where-row span i { display: block; font-style: normal; font-size: 12px; letter-spacing: .5px; color: #7485a0; }
  .where-row b { font-weight: 600; }
  .spec { grid-template-columns: 1fr; }
  .spec dt { border-bottom: 0; padding: 14px 0 0; font-size: 13px; }
  .spec dd { padding: 2px 0 14px; }
  .fit { grid-template-columns: 1fr; gap: 28px; }
}