.system-page .system-hero { background-image: url(../images/bg_business-system_top.jpg); }
.system-page .web-ai-section-heading::before { color: var(--accent); }
.system-page .system-overview .web-ai-section-heading::before { content: "01"; }
.system-page .system-flow .web-ai-section-heading::before { content: "02"; }
.system-page .system-foundation .web-ai-section-heading::before { content: "03"; color: #90c3aa; }
.system-page .system-cost .web-ai-section-heading::before { content: "04"; }
.system-page .system-services .web-ai-section-heading::before { content: "05"; }
.system-page .system-menu .web-ai-section-heading::before { content: "06"; }
.system-page .system-examples .web-ai-section-heading::before { content: "07"; }
.system-page .system-consultation .web-ai-section-heading::before { content: "08"; }
.system-lead-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 8vw, 100px); margin-bottom: 56px; }
.system-large-copy { margin: 0; font-size: clamp(1.45rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.65; }
.system-four-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.system-flow-visual { margin: 0; padding: clamp(24px, 4vw, 48px); background: #fff; border: 1px solid var(--line); }
.system-flow-visual img { width: 100%; }
.system-flow-visual figcaption { margin-top: 20px; color: var(--muted); }
.system-dark-lead { max-width: 820px; margin: -20px 0 44px; color: #c8d4ce; }
.system-foundation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #415049; }
.system-foundation-grid article { padding: clamp(28px, 4vw, 48px); background: #20342b; }
.system-foundation-grid h3 { color: #fff; }
.system-foundation-grid p { margin: 0; color: #c8d4ce; }
.system-table-wrap { overflow-x: auto; }
.system-table { width: 100%; min-width: 720px; border-collapse: collapse; background: #fff; }
.system-table th, .system-table td { padding: 20px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.system-table thead th { color: #fff; background: var(--dark); }
.system-table tbody th { color: var(--accent); background: var(--tint); }
.system-notes { margin-top: 24px; color: var(--muted); font-size: .84rem; }
.system-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.system-menu-grid article { padding: clamp(28px, 4vw, 42px); border: 1px solid var(--line); background: #fff; }
.system-menu-grid ul { margin: 20px 0 0; padding-left: 1.2em; }
.system-menu-grid a { display: inline-block; margin-top: 22px; color: var(--accent); font-weight: 700; }
.system-footnote { margin-top: 22px; color: var(--muted); font-size: .8rem; }
@media (max-width: 900px) {
  .system-four-grid { grid-template-columns: repeat(2, 1fr); }
  .system-table-wrap { width: 100%; overflow-x: visible; }
  .system-table { width: 100%; min-width: 0; table-layout: fixed; }
  .system-table th, .system-table td { padding: 14px 12px; overflow-wrap: anywhere; word-break: normal; }
  .system-table th:first-child { width: 18%; }
  .system-table th:nth-child(2), .system-table th:nth-child(3) { width: 41%; }
}
@media (max-width: 680px) {
  .system-lead-grid, .system-foundation-grid, .system-menu-grid, .system-four-grid { grid-template-columns: 1fr; }
  .system-page .system-hero { background-position: 58% 50%; }
  .system-table { font-size: .72rem; line-height: 1.65; }
  .system-table th, .system-table td { padding: 10px 7px; }
  .system-table th:first-child { width: 20%; }
  .system-table th:nth-child(2), .system-table th:nth-child(3) { width: 40%; }
}