:where(.ai-product-detail, .ai-product-spec, .ai-blog-guide, .ai-case-story) {
  --ai-blue: #025cc0;
  --ai-blue-dark: #064487;
  --ai-green: #18864b;
  --ai-amber: #d89a00;
  --ai-red: #b84036;
  --ai-ink: #1f2933;
  --ai-muted: #5e6b78;
  --ai-line: #d9e1e8;
  --ai-soft: #f4f7f9;
  --ai-white: #fff;
  width: 100%;
  max-width: 100%;
  color: var(--ai-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.72;
  overflow-wrap: anywhere;
}

:where(.ai-product-detail, .ai-product-spec, .ai-blog-guide, .ai-case-story),
:where(.ai-product-detail, .ai-product-spec, .ai-blog-guide, .ai-case-story) * {
  box-sizing: border-box;
}

:where(.ai-product-detail, .ai-product-spec, .ai-blog-guide, .ai-case-story) > * {
  margin-top: 0;
  margin-bottom: 24px;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) h2 {
  margin: 34px 0 15px;
  padding: 0 0 9px 13px;
  border-left: 4px solid var(--ai-blue);
  border-bottom: 1px solid var(--ai-line);
  color: var(--ai-blue-dark);
  font-size: 25px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) h3 {
  margin: 24px 0 10px;
  color: var(--ai-ink);
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) p {
  margin: 0 0 14px;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) ul,
:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) li + li {
  margin-top: 7px;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) a {
  color: var(--ai-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-intro,
:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-summary,
:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-key-point,
:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-note {
  padding: 18px 20px;
  border: 1px solid var(--ai-line);
  border-left: 4px solid var(--ai-blue);
  border-radius: 6px;
  background: var(--ai-soft);
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-key-point {
  border-left-color: var(--ai-green);
  background: #f0f8f3;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-note {
  border-left-color: var(--ai-amber);
  background: #fff9e8;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-grid,
.ai-case-story .ai-case-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0 26px;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-card,
.ai-case-story .ai-case-facts > * {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--ai-line);
  border-radius: 6px;
  background: var(--ai-white);
  box-shadow: 0 3px 12px rgba(31, 41, 51, .07);
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-card > :last-child,
.ai-case-story .ai-case-facts > * > :last-child {
  margin-bottom: 0;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-table-wrap {
  width: 100%;
  margin: 22px 0 28px;
  overflow-x: auto;
  border: 1px solid var(--ai-line);
  border-radius: 6px;
  background: var(--ai-white);
  -webkit-overflow-scrolling: touch;
}

:where(.ai-product-detail, .ai-product-spec, .ai-blog-guide, .ai-case-story) table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--ai-white);
}

:where(.ai-product-detail, .ai-product-spec, .ai-blog-guide, .ai-case-story) th,
:where(.ai-product-detail, .ai-product-spec, .ai-blog-guide, .ai-case-story) td {
  padding: 12px 14px;
  border-right: 1px solid var(--ai-line);
  border-bottom: 1px solid var(--ai-line);
  text-align: left;
  vertical-align: top;
}

:where(.ai-product-detail, .ai-product-spec, .ai-blog-guide, .ai-case-story) th {
  color: var(--ai-white);
  background: var(--ai-blue-dark);
  font-weight: 700;
}

:where(.ai-product-detail, .ai-product-spec, .ai-blog-guide, .ai-case-story) tr:nth-child(even) td {
  background: #f7f9fb;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-process,
:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-checklist,
.ai-case-story .ai-timeline {
  margin: 22px 0 28px;
  padding: 18px 20px 18px 44px;
  border: 1px solid var(--ai-line);
  border-radius: 6px;
  background: var(--ai-white);
  counter-reset: ai-step;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-process > *,
:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-checklist > *,
.ai-case-story .ai-timeline > * {
  position: relative;
  margin: 0;
  padding: 0 0 18px 16px;
  border-left: 2px solid #bdd0e2;
  counter-increment: ai-step;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-process > *::before,
:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-checklist > *::before,
.ai-case-story .ai-timeline > *::before {
  content: counter(ai-step);
  position: absolute;
  top: 0;
  left: -31px;
  width: 28px;
  height: 28px;
  border: 3px solid var(--ai-white);
  border-radius: 50%;
  color: var(--ai-white);
  background: var(--ai-blue);
  font-size: 13px;
  line-height: 22px;
  text-align: center;
  font-weight: 700;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-process > :last-child,
:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-checklist > :last-child,
.ai-case-story .ai-timeline > :last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-faq details {
  margin: 0 0 10px;
  padding: 14px 16px;
  border: 1px solid var(--ai-line);
  border-radius: 6px;
  background: var(--ai-white);
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-faq summary {
  color: var(--ai-blue-dark);
  cursor: pointer;
  font-weight: 700;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-faq details > :last-child {
  margin-bottom: 0;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-cta {
  margin: 32px 0 8px;
  padding: 24px;
  border: 1px solid var(--ai-blue-dark);
  border-radius: 6px;
  color: var(--ai-white);
  background: var(--ai-blue-dark);
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-cta h2,
:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-cta h3,
:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-cta p,
:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-cta li {
  color: var(--ai-white);
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-cta h2,
:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-cta h3 {
  margin-top: 0;
  padding-left: 0;
  border: 0;
}

:where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-cta a {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 16px;
  border-radius: 4px;
  color: var(--ai-blue-dark);
  background: var(--ai-white);
  text-decoration: none;
  font-weight: 700;
}

.ai-product-spec {
  margin: 22px 0 28px;
  overflow-x: auto;
  border: 1px solid var(--ai-line);
  border-radius: 6px;
  background: var(--ai-white);
}

.ai-product-spec > h2,
.ai-product-spec > h3 {
  margin: 0;
  padding: 15px 18px;
  color: var(--ai-white);
  background: var(--ai-blue-dark);
  font-size: 20px;
  line-height: 1.35;
}

.ai-product-detail.ai-style-technical .ai-card {
  border-top: 3px solid var(--ai-blue);
}

.ai-product-detail.ai-style-technical .ai-key-point {
  background: #eef5fc;
}

.ai-product-detail.ai-style-process .ai-process {
  border-top: 3px solid var(--ai-green);
}

.ai-product-detail.ai-style-process .ai-process > *::before {
  background: var(--ai-green);
}

.ai-product-detail.ai-style-feature-grid .ai-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.ai-product-detail.ai-style-feature-grid .ai-card:nth-child(3n + 1) {
  border-top: 3px solid var(--ai-blue);
}

.ai-product-detail.ai-style-feature-grid .ai-card:nth-child(3n + 2) {
  border-top: 3px solid var(--ai-green);
}

.ai-product-detail.ai-style-feature-grid .ai-card:nth-child(3n) {
  border-top: 3px solid var(--ai-amber);
}

.ai-product-detail.ai-style-comparison .ai-table-wrap {
  border-top: 4px solid var(--ai-blue);
}

.ai-product-detail.ai-style-application .ai-card {
  box-shadow: none;
  border-left: 4px solid var(--ai-green);
}

.ai-product-detail.ai-style-project .ai-checklist,
.ai-product-detail.ai-style-project .ai-process {
  background: #f5f9fd;
}

.ai-product-detail.ai-style-maintenance .ai-note,
.ai-product-detail.ai-style-maintenance .ai-key-point {
  border-left-color: var(--ai-amber);
}

.ai-product-detail.ai-style-compact {
  font-size: 15px;
}

.ai-product-detail.ai-style-compact .ai-grid {
  gap: 12px;
}

.ai-product-detail.ai-style-compact .ai-card {
  padding: 14px;
  box-shadow: none;
}

.ai-blog-guide > .ai-intro:first-child {
  border-left-color: var(--ai-green);
  background: #f0f8f3;
}

.ai-blog-guide.ai-blog-style-guide h2::before {
  content: 'Guide';
  display: inline-block;
  margin-right: 9px;
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--ai-white);
  background: var(--ai-green);
  font-size: 12px;
  line-height: 1.5;
  vertical-align: 3px;
}

.ai-blog-guide.ai-blog-style-comparison .ai-table-wrap {
  border-top: 4px solid var(--ai-blue);
}

.ai-blog-guide.ai-blog-style-checklist .ai-checklist {
  border-top: 3px solid var(--ai-green);
}

.ai-blog-guide.ai-blog-style-checklist .ai-checklist > *::before {
  background: var(--ai-green);
}

.ai-blog-guide.ai-blog-style-troubleshooting .ai-note {
  border-left-color: var(--ai-red);
  background: #fff3f1;
}

.ai-blog-guide.ai-blog-style-troubleshooting .ai-card {
  border-top: 3px solid var(--ai-red);
}

.ai-blog-guide.ai-blog-style-reference .ai-key-point,
.ai-blog-guide.ai-blog-style-reference .ai-summary {
  background: #eef5fc;
}

.ai-blog-guide.ai-blog-style-compact {
  font-size: 15px;
}

.ai-blog-guide.ai-blog-style-compact .ai-card {
  padding: 14px;
  box-shadow: none;
}

.ai-case-story .ai-case-facts > * {
  border-top: 3px solid var(--ai-blue);
}

.ai-case-story .ai-case-result {
  padding: 19px 20px;
  border: 1px solid #b9dac7;
  border-left: 4px solid var(--ai-green);
  border-radius: 6px;
  background: #f0f8f3;
}

.ai-case-story.ai-case-style-dossier .ai-case-facts {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ai-case-story.ai-case-style-dossier .ai-case-facts > *:nth-child(even) {
  border-top-color: var(--ai-green);
}

.ai-case-story.ai-case-style-challenge .ai-grid .ai-card:first-child {
  border-left: 4px solid var(--ai-amber);
}

.ai-case-story.ai-case-style-challenge .ai-grid .ai-card:last-child {
  border-left: 4px solid var(--ai-green);
}

.ai-case-story.ai-case-style-timeline .ai-timeline {
  border-top: 3px solid var(--ai-blue);
}

.ai-case-story.ai-case-style-engineering .ai-table-wrap {
  border-top: 4px solid var(--ai-green);
}

.ai-case-story.ai-case-style-engineering .ai-note {
  border-left-color: var(--ai-green);
  background: #f0f8f3;
}

.ai-case-story.ai-case-style-compact {
  font-size: 15px;
}

.ai-case-story.ai-case-style-compact .ai-card,
.ai-case-story.ai-case-style-compact .ai-case-facts > * {
  padding: 14px;
  box-shadow: none;
}

@media (max-width: 768px) {
  :where(.ai-product-detail, .ai-product-spec, .ai-blog-guide, .ai-case-story) {
    font-size: 15px;
    line-height: 1.66;
  }

  :where(.ai-product-detail, .ai-blog-guide, .ai-case-story) h2 {
    margin-top: 27px;
    padding-left: 10px;
    font-size: 21px;
  }

  :where(.ai-product-detail, .ai-blog-guide, .ai-case-story) h3 {
    font-size: 18px;
  }

  :where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-intro,
  :where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-summary,
  :where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-key-point,
  :where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-note,
  :where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-card,
  .ai-case-story .ai-case-facts > * {
    padding: 15px;
  }

  :where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-grid,
  .ai-case-story .ai-case-facts {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  :where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-process,
  :where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-checklist,
  .ai-case-story .ai-timeline {
    padding: 15px 14px 15px 38px;
  }

  :where(.ai-product-detail, .ai-blog-guide, .ai-case-story) .ai-cta {
    padding: 19px 17px;
  }

  :where(.ai-product-detail, .ai-product-spec, .ai-blog-guide, .ai-case-story) table {
    min-width: 560px;
    font-size: 14px;
  }

  :where(.ai-product-detail, .ai-product-spec, .ai-blog-guide, .ai-case-story) th,
  :where(.ai-product-detail, .ai-product-spec, .ai-blog-guide, .ai-case-story) td {
    padding: 10px 11px;
  }
}