.demo-hero, .demo-detail-hero, .demo-launcher, .demo-workspace, .demo-learning, .demo-validation { background: #fff; }
.demo-hero { padding: 64px 0 36px; }
.demo-hero h1 { font-size: 36px; line-height: 1.4; max-width: 900px; text-wrap: balance; }
.demo-hero > .ai-container > p:not(.ai-eyebrow) { font-size: 16px; line-height: 1.8; color: #5c626c; }
.demo-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-size: 12px; color: #5c626c; }
.demo-facts span { display: inline-flex; align-items: center; gap: 8px; }
.demo-facts span::before { content: ''; width: 4px; height: 4px; background: #53759c; border-radius: 50%; }
.demo-launcher { padding: 32px 0 56px; }
.demo-launcher-heading, .demo-workspace-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.demo-launcher-heading h2, .demo-workspace-heading h2 { font-size: 20px; font-weight: 600; }
.demo-launcher-heading p { font-size: 12px; color: #69717d; }
.demo-category-filter { display: flex; flex-wrap: wrap; gap: 4px; padding-block: 20px; border-bottom: 1px solid #e5e7eb; }
.demo-category-filter button { background: transparent; color: #5c626c; font: inherit; font-size: 13px; border: 0; min-height: 40px; padding: 8px 14px; border-radius: 6px; cursor: pointer; }
.demo-category-filter button[aria-pressed="true"] { background: #edf3ff; color: #1c51ac; font-weight: 600; }
.demo-app-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px 24px; padding: 24px 0 40px; }
.demo-app-item { min-width: 0; }
.demo-app { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 20px 8px 16px; border-radius: 8px; min-height: 176px; gap: 10px; transition: background-color 150ms ease; }
.demo-app:hover { background: #f7f9fc; text-decoration: none !important; }
.demo-app strong { font-size: 16px; font-weight: 600; line-height: 1.5; color: #171b22; }
.demo-app > span:last-child { font-size: 12px; color: #626c79; line-height: 1.7; word-break: keep-all; }
.demo-app-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 16px; margin-bottom: 4px; color: #2558a6; background: #edf3ff; box-shadow: inset 0 0 0 1px rgba(37,88,166,.04); }
.demo-app-icon svg { width: 30px; height: 30px; }
.demo-tint-1 { background: #eaf5f3; color: #28675f; }
.demo-tint-2 { background: #eef1f7; color: #40506d; }
.demo-disclaimer { max-width: 760px; font-size: 12px; color: #69717d; line-height: 1.8; padding-top: 16px; }
p.demo-estimate-intro { font-size: 12px; line-height: 1.8; color: #626c79; margin-top: 12px; max-width: 780px; }
.demo-app-impact { max-width: 238px; margin-inline: auto; padding: 16px 6px 0; border-top: 1px solid #e5eaf0; text-align: center; font-variant-numeric: tabular-nums; }
.demo-impact-time { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 6px; font-size: 11px; color: #626c79; }
.demo-impact-time strong { font-size: 18px; line-height: 1.5; font-weight: 600; color: #245795; }
p.demo-impact-value { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; color: #626c79; font-size: 11px; line-height: 1.5; }
.demo-impact-value strong { font-size: 13px; color: #353e4a; font-weight: 500; }
.demo-impact-bars { display: grid; gap: 8px; margin-top: 18px; }
.demo-impact-bars > div { display: grid; grid-template-columns: 36px minmax(0,1fr) 39px; align-items: center; gap: 8px; font-size: 11px; line-height: 1.5; color: #596473; text-align: left; }
.demo-impact-bars > div > span:last-child { text-align: right; white-space: nowrap; }
.demo-impact-track { display: block; height: 5px; background: #f1f3f6; border-radius: 2px; overflow: hidden; }
.demo-impact-track > span { display: block; height: 100%; background: #a1acbb; border-radius: inherit; transition: width 180ms ease; }
.demo-impact-track > [data-impact-bar="assisted"] { background: #3b7aab; }
p.demo-impact-basis { font-size: 11px; color: #69717d; margin-top: 12px; line-height: 1.6; }
button.demo-impact-edit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 4px; padding: 7px 8px; min-height: 36px; margin-top: 4px; background: #fff; color: #315b99; font: inherit; font-size: 12px; cursor: pointer; }
.demo-impact-edit svg { width: 14px; height: 14px; }
.demo-impact-edit:hover { background: #f4f7fb; }
.demo-app-item[data-time-increased="true"] .demo-impact-time strong, .demo-impact-result[data-time-increased="true"] .demo-impact-total strong { color: #90432f; }
.demo-impact-calculator { border-block: 1px solid #dce2e9; padding-block: 22px; scroll-margin-top: 112px; }
.demo-impact-calculator > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1.6; min-height: 40px; }
.demo-impact-calculator > summary::-webkit-details-marker { display: none; }
.demo-impact-calculator > summary > span { display: inline-flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 400; color: #53657c; }
.demo-impact-calculator > summary svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 180ms ease; }
.demo-impact-calculator[open] > summary svg { transform: rotate(45deg); }
.demo-impact-editor { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 48px; padding: 24px 0; }
.demo-impact-editor form { min-width: 0; }
p.demo-impact-scope { margin-top: 12px; font-size: 12px; line-height: 1.8; color: #596473; }
.demo-impact-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.demo-impact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.demo-impact-actions .demo-button { font-size: 13px; }
.demo-impact-calculator .demo-caption { margin-top: 12px; }
.demo-impact-result[data-stale="true"] dl, .demo-impact-result[data-stale="true"] .demo-impact-total { opacity: .6; }
.demo-impact-result { border-left: 1px solid #e5eaf0; padding-left: 32px; align-self: center; font-variant-numeric: tabular-nums; }
.demo-impact-total { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.demo-impact-total strong { font-size: 28px; color: #245795; font-weight: 600; line-height: 1.5; }
.demo-impact-total span { font-size: 13px; color: #596473; }
p[data-estimate-rate] { color: #566879; font-size: 13px; margin-top: 8px; }
.demo-impact-result dl { display: grid; gap: 16px; margin-top: 24px; }
.demo-impact-result dl > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.demo-impact-result dt { color: #626c79; }
.demo-impact-result dd { margin: 0; color: #172132; font-weight: 500; }
.demo-impact-method { border-top: 1px solid #edf0f3; padding-top: 20px; font-size: 12px; line-height: 1.9; color: #626c79; }
.demo-impact-method p + p { margin-top: 12px; max-width: 860px; }
.demo-impact-edit:focus-visible, .demo-impact-calculator summary:focus-visible, .demo-impact-calculator input:focus-visible, .demo-impact-calculator select:focus-visible { outline: 2px solid #2563eb; outline-offset: 4px; }
.demo-impact-calculator [aria-invalid="true"] { border-color: #a32942; }
.demo-education { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 48px; align-items: center; }
.demo-education h2 { font-size: 26px; line-height: 1.5; }
.demo-education p { max-width: 620px; font-size: 14px; margin-top: 16px; }
.demo-education .ai-actions { flex-direction: column; align-items: flex-start; margin: 0; gap: 18px; }
.demo-button, .demo-text-link, .demo-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; cursor: pointer; }
.demo-button { background: #fff; border: 1px solid #cbd3df; color: #353e4a; border-radius: 6px; padding: 10px 14px; min-height: 40px; transition: background-color 150ms ease; }
.demo-button:hover { background: #f5f7fa; text-decoration: none !important; }
.demo-button-primary { background: #2563eb; color: #fff !important; border-color: #2563eb; font-weight: 600; }
.demo-button-primary:hover { background: #1d4ed8; }
.demo-button:disabled { opacity: .5; cursor: wait; }
.demo-button svg, .demo-text-link svg, .demo-back svg { flex-shrink: 0; width: 18px; height: 18px; }
.demo-text-link, .demo-back { color: #315b99 !important; background: transparent; border: 0; min-height: 40px; }
.demo-back { margin-bottom: 24px; }
.demo-detail-hero { padding-bottom: 32px; }
.demo-detail-title { display: flex; align-items: center; gap: 20px; }
.demo-detail-title h1 { font-size: 30px; line-height: 1.4; }
.demo-detail-title .ai-eyebrow { margin-bottom: 8px; }
.demo-detail-hero > .ai-container > p { font-size: 15px; }
.demo-workspace { padding-bottom: 56px; }
.demo-workspace .ai-container { min-width: 0; }
.demo-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.demo-caption { font-size: 12px !important; line-height: 1.8; color: #646d7b !important; margin-top: 12px; }
.demo-data-block { margin-top: 28px; }
.demo-data-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.demo-data-heading h3 { font-size: 15px; font-weight: 600; }
.demo-data-heading .demo-button { font-size: 12px; padding: 6px 10px; min-height: 36px; }
.demo-data-heading label { position: relative; }
.demo-file-input { width: 100%; font-size: 12px; color: #5c626c; margin-top: 8px; }
.demo-file-input::file-selector-button { border: 1px solid #cbd3df; background: #fff; color: #353e4a; border-radius: 6px; padding: 8px 10px; margin-right: 10px; cursor: pointer; }
.demo-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid #e0e5eb; border-radius: 6px; }
.demo-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; min-width: 540px; }
.demo-table th { background: #f5f7fa; color: #465264; font-size: 12px; font-weight: 500; padding: 12px; white-space: nowrap; border-bottom: 1px solid #e0e5eb; }
.demo-table td { padding: 10px 12px; border-bottom: 1px solid #edf0f3; vertical-align: middle; line-height: 1.6; }
.demo-table tr:last-child td { border-bottom: 0; }
.demo-table .is-number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-table input { display: block; width: 100%; min-width: 100px; padding: 8px 10px; color: #1b2330; background: #fff; border: 1px solid #cbd3df; border-radius: 4px; font: inherit; font-size: 13px; }
.demo-table td:has(input) { padding: 6px; }
.demo-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: #677385; cursor: pointer; border-radius: 4px; }
.demo-icon-button:hover { background: #f4f6fa; color: #b42334; }
.demo-data-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12px; color: #667084; }
.demo-data-footer .demo-toolbar { gap: 10px; }
.demo-run-row { display: flex; align-items: center; gap: 20px; margin-top: 28px; border-top: 1px solid #e5e7eb; padding-top: 24px; }
.demo-run-row > .demo-button { min-width: 140px; }
.demo-run-row p { color: #667084; font-size: 13px; }
.demo-quote-fields, .demo-result-filters { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.demo-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 12px; color: #526073; }
.demo-field input, .demo-field select { width: 100%; background: #fff; border: 1px solid #bac5d3; border-radius: 5px; padding: 10px 12px; min-height: 40px; font: inherit; font-size: 13px; color: #172132; }
.demo-quote-fields .demo-field { flex: 1 1 180px; }
.demo-field-checkbox { display: flex; gap: 8px; align-items: center; align-self: flex-end; min-height: 40px; font-size: 13px; }
.demo-field-checkbox input { width: 16px; height: 16px; accent-color: #2563eb; }
.demo-result { border-top: 2px solid #182333; margin-top: 44px; padding-top: 28px; scroll-margin-top: 110px; }
.demo-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; margin: 24px 0 28px; }
.demo-metrics div { min-width: 0; padding: 4px 0 4px 16px; border-left: 2px solid #e0e7f1; }
.demo-metrics dt { color: #667084; font-size: 12px; margin-bottom: 8px; }
.demo-metrics dd { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.4; color: #1c2738; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.demo-metrics small { font-size: 12px; font-weight: 400; margin-left: 4px; color: #667084; }
.demo-result-filters { margin-bottom: 24px; }
.demo-issue-list { margin-top: 24px; border-top: 1px solid #e0e5eb; padding-top: 20px; }
.demo-issue-list summary { cursor: pointer; color: #a32942; font-size: 14px; font-weight: 600; padding: 8px 0; }
.demo-issue-list li { font-size: 13px; line-height: 1.8; margin-block: 8px; }
.demo-error { color: #a32942; background: #fff; border-left: 3px solid #a32942; padding: 12px 16px; margin-top: 20px; font-size: 13px; }
.demo-prompt { border-block: 1px solid #e0e5eb; padding-block: 20px; margin-bottom: 48px; }
.demo-prompt summary { font-size: 16px; font-weight: 600; cursor: pointer; }
.demo-prompt p { font-size: 13px; color: #667084; margin-block: 16px; }
.demo-prompt textarea { width: 100%; margin: 0 0 12px; padding: 16px; border: 1px solid #cbd3df; border-radius: 6px; font: inherit; font-size: 13px; line-height: 1.8; color: #343c48; background: #fff; resize: vertical; }
.demo-copy-status { font-size: 12px; margin-left: 12px; }
.demo-validation h2 { font-size: 22px; margin-bottom: 20px; }
.demo-validation ul { padding-left: 20px; margin: 0; font-size: 14px; color: #5c626c; line-height: 1.9; }
.demo-chart { margin-block: 24px; }
.demo-chart h3 { font-size: 15px; margin-bottom: 16px; }
.demo-chart-row { display: grid; grid-template-columns: 75px minmax(0,1fr) 110px; align-items: center; gap: 16px; margin-block: 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
.demo-chart-row .demo-chart-track { height: 16px; background: #f2f5f9; border-radius: 2px; }
.demo-chart-bar { height: 100%; width: var(--bar-width); background: #6889c4; border-radius: 2px; }
.demo-chart-row[data-selected="true"] .demo-chart-bar { background: #2563eb; }
.demo-chart-row > span:last-child { text-align: right; }
.demo-quote-heading { padding: 24px 0; border-bottom: 1px solid #e0e5eb; }
.demo-quote-heading h3 { font-size: 24px; margin-bottom: 12px; }
.demo-quote-heading p { font-size: 13px; line-height: 1.8; }
.demo-quote-heading dl { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 16px 0 0; font-size: 12px; }
.demo-quote-heading dt { color: #667084; }
.demo-quote-heading dd { margin: 6px 0 0; }
.demo-app:focus-visible, .demo-category-filter button:focus-visible, .demo-button:focus-visible, .demo-icon-button:focus-visible, .demo-back:focus-visible, .demo-text-link:focus-visible { outline: 2px solid #2563eb; outline-offset: 4px; }
.demo-workspace input:focus-visible, .demo-workspace select:focus-visible, .demo-prompt textarea:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
[hidden] { display: none !important; }
@media(max-width:1000px) { .demo-app-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { .demo-education { grid-template-columns: 1fr; gap: 28px; } .demo-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) {
  .demo-hero { padding-top: 40px; }
  .demo-hero h1 { font-size: 27px; line-height: 1.5; }
  .demo-hero > .ai-container > p:not(.ai-eyebrow) { font-size: 14px; }
  .demo-launcher { padding-top: 12px; }
  .demo-launcher-heading, .demo-workspace-heading, .demo-data-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .demo-launcher-heading h2, .demo-workspace-heading h2 { font-size: 18px; }
  .demo-app-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 16px; }
  .demo-app { padding: 18px 2px 12px; min-height: 174px; }
  .demo-app strong { font-size: 14px; }
  .demo-app > span:last-child { font-size: 11px; }
  .demo-app-impact { padding-inline: 0; }
  .demo-impact-time { flex-direction: column; align-items: center; gap: 0; }
  .demo-impact-time strong { font-size: 17px; }
  .demo-impact-bars > div { grid-template-columns: 32px minmax(0,1fr) 38px; gap: 5px; font-size: 10px; }
  p.demo-impact-basis { font-size: 10px; }
  button.demo-impact-edit { min-height: 44px; }
  .demo-impact-calculator > summary { align-items: flex-start; flex-direction: column; gap: 6px; font-size: 15px; }
  .demo-impact-editor { grid-template-columns: 1fr; gap: 28px; }
  .demo-impact-inputs { gap: 16px 12px; }
  .demo-impact-result { border-left: 0; border-top: 1px solid #e5eaf0; padding: 24px 0 0; }
  .demo-impact-total strong { font-size: 25px; }
  .demo-category-filter { gap: 2px; }
  .demo-category-filter button { font-size: 12px; padding: 8px 9px; }
  .demo-detail-title { gap: 14px; }
  .demo-detail-title h1 { font-size: 23px; }
  .demo-detail-title .demo-app-icon { width: 52px; height: 52px; flex-basis: 52px; border-radius: 14px; }
  .demo-detail-title .ai-eyebrow { font-size: 11px; }
  .demo-detail-hero > .ai-container > p { font-size: 14px; }
  .demo-run-row { align-items: flex-start; flex-direction: column; gap: 12px; }
  .demo-run-row > .demo-button { width: 100%; min-height: 44px; }
  .demo-metrics { gap: 20px 12px; }
  .demo-metrics dd { font-size: 20px; }
  .demo-education h2 { font-size: 23px; }
  .demo-chart-row { grid-template-columns: 63px minmax(0,1fr) 90px; gap: 10px; font-size: 11px; }
  .demo-data-footer { flex-wrap: wrap; }
  .demo-copy-status { display: block; margin: 10px 0 0; }
  .demo-result-filters .demo-field { flex: 1 1 100px; }
}
@media(prefers-reduced-motion:reduce) { .demo-app, .demo-button, .demo-impact-track > span, .demo-impact-calculator > summary svg { transition: none; } }
@media print {
  @page { size: A4; margin: 15mm; }
  html, body, .ai-training-page { background: #fff !important; color: #111 !important; }
  .ai-header, .ai-footer, .ai-skip, .ai-page-hero, .demo-learning, .demo-validation, .demo-workspace-heading, .demo-run-row, .demo-workspace > .ai-container > :not(.demo-result), .demo-result-filters, .demo-issue-list, .demo-result > .demo-caption, .demo-result .demo-data-footer { display: none !important; }
  .ai-training-page main { padding-top: 0; }
  .demo-workspace, .demo-result, .ai-container { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; border: 0 !important; }
  .demo-table-scroll { overflow: visible; border: 0; }
  .demo-table { min-width: 0; font-size: 11px; }
  .demo-table th, .demo-table td { padding: 6px; }
  .demo-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .demo-metrics dd { font-size: 18px; }
  tr { break-inside: avoid; }
  .demo-chart { break-inside: avoid; }
}