/**
 * SOP AI content presentation profiles
 * Scope: AI-managed article fragments only. No global element overrides.
 * Version: 2026-08-08
 */

.ai-product-detail,
.ai-case-story,
.ai-blog-guide,
.ai-hotkey-entry {
  --sop-ai-green: #016543;
  --sop-ai-green-dark: #014a33;
  --sop-ai-green-soft: #eaf5f1;
  --sop-ai-green-pale: #f5faf8;
  --sop-ai-blue: #0158ff;
  --sop-ai-blue-soft: #eef4ff;
  --sop-ai-orange: #df6a25;
  --sop-ai-orange-soft: #fff4ec;
  --sop-ai-ink: #1f2d28;
  --sop-ai-copy: #4d5f58;
  --sop-ai-muted: #74827d;
  --sop-ai-line: #dbe6e1;
  --sop-ai-surface: #ffffff;
  --sop-ai-shadow: 0 12px 34px rgba(1, 71, 48, .08);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 24px 0;
  color: var(--sop-ai-copy);
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.ai-product-detail *,
.ai-case-story *,
.ai-blog-guide *,
.ai-hotkey-entry * {
  box-sizing: border-box;
}

.ai-product-detail > :first-child,
.ai-case-story > :first-child,
.ai-blog-guide > :first-child,
.ai-hotkey-entry > :first-child {
  margin-top: 0;
}

.ai-product-detail > :last-child,
.ai-case-story > :last-child,
.ai-blog-guide > :last-child,
.ai-hotkey-entry > :last-child {
  margin-bottom: 0;
}

.ai-product-detail h2,
.ai-case-story h2,
.ai-blog-guide h2,
.ai-hotkey-entry h2 {
  position: relative;
  margin: 38px 0 16px;
  padding: 0 0 11px 18px;
  border-bottom: 1px solid var(--sop-ai-line);
  color: var(--sop-ai-ink);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.015em;
}

.ai-product-detail h2::before,
.ai-case-story h2::before,
.ai-blog-guide h2::before,
.ai-hotkey-entry h2::before {
  position: absolute;
  top: .18em;
  bottom: .3em;
  left: 0;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sop-ai-green), #21a57a);
  content: "";
}

.ai-product-detail h3,
.ai-case-story h3,
.ai-blog-guide h3,
.ai-hotkey-entry h3 {
  margin: 28px 0 11px;
  color: var(--sop-ai-green-dark);
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 700;
  line-height: 1.35;
}

.ai-product-detail h4,
.ai-case-story h4,
.ai-blog-guide h4,
.ai-hotkey-entry h4 {
  margin: 22px 0 9px;
  color: var(--sop-ai-ink);
  font-size: 17px;
  line-height: 1.4;
}

.ai-product-detail p,
.ai-case-story p,
.ai-blog-guide p,
.ai-hotkey-entry p {
  margin: 0 0 15px;
}

.ai-product-detail .ai-intro,
.ai-case-story .ai-intro,
.ai-blog-guide .ai-intro,
.ai-hotkey-entry .ai-intro {
  margin-bottom: 22px;
  color: #385149;
  font-size: 1.08em;
  line-height: 1.8;
}

.ai-product-detail .ai-tag,
.ai-case-story .ai-tag,
.ai-blog-guide .ai-tag,
.ai-hotkey-entry .ai-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 7px 8px 0;
  padding: 4px 11px;
  border: 1px solid #cfe4db;
  border-radius: 999px;
  background: var(--sop-ai-green-pale);
  color: var(--sop-ai-green-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.ai-product-detail a,
.ai-case-story a,
.ai-blog-guide a,
.ai-hotkey-entry a {
  color: var(--sop-ai-green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(1, 101, 67, .32);
  text-underline-offset: 3px;
}

.ai-product-detail img,
.ai-case-story img,
.ai-blog-guide img,
.ai-hotkey-entry img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 22px auto;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(22, 53, 43, .1);
}

.ai-product-detail ul,
.ai-product-detail ol,
.ai-case-story ul,
.ai-case-story ol,
.ai-blog-guide ul,
.ai-blog-guide ol,
.ai-hotkey-entry ul,
.ai-hotkey-entry ol {
  margin: 12px 0 20px;
  padding-left: 1.35em;
}

.ai-product-detail li,
.ai-case-story li,
.ai-blog-guide li,
.ai-hotkey-entry li {
  margin: 7px 0;
  padding-left: 3px;
}

.ai-product-detail li::marker,
.ai-case-story li::marker,
.ai-blog-guide li::marker,
.ai-hotkey-entry li::marker {
  color: var(--sop-ai-green);
  font-weight: 700;
}

.ai-product-detail blockquote,
.ai-case-story blockquote,
.ai-blog-guide blockquote,
.ai-hotkey-entry blockquote {
  margin: 22px 0;
  padding: 18px 22px;
  border: 0;
  border-left: 4px solid var(--sop-ai-green);
  border-radius: 0 12px 12px 0;
  background: var(--sop-ai-green-pale);
  color: #365047;
}

.ai-product-detail .ai-grid,
.ai-product-detail .ai-feature-grid,
.ai-case-story .ai-grid,
.ai-case-story .ai-feature-grid,
.ai-blog-guide .ai-grid,
.ai-blog-guide .ai-feature-grid,
.ai-hotkey-entry .ai-grid,
.ai-hotkey-entry .ai-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0 26px;
}

.ai-product-detail .ai-card,
.ai-product-detail .ai-feature-card,
.ai-case-story .ai-card,
.ai-case-story .ai-feature-card,
.ai-blog-guide .ai-card,
.ai-blog-guide .ai-feature-card,
.ai-hotkey-entry .ai-card,
.ai-hotkey-entry .ai-feature-card {
  position: relative;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--sop-ai-line);
  border-radius: 16px;
  background: var(--sop-ai-surface);
  box-shadow: 0 8px 24px rgba(1, 71, 48, .055);
}

.ai-product-detail .ai-card > :first-child,
.ai-product-detail .ai-feature-card > :first-child,
.ai-case-story .ai-card > :first-child,
.ai-case-story .ai-feature-card > :first-child,
.ai-blog-guide .ai-card > :first-child,
.ai-blog-guide .ai-feature-card > :first-child,
.ai-hotkey-entry .ai-card > :first-child,
.ai-hotkey-entry .ai-feature-card > :first-child {
  margin-top: 0;
}

.ai-product-detail .ai-card > :last-child,
.ai-product-detail .ai-feature-card > :last-child,
.ai-case-story .ai-card > :last-child,
.ai-case-story .ai-feature-card > :last-child,
.ai-blog-guide .ai-card > :last-child,
.ai-blog-guide .ai-feature-card > :last-child,
.ai-hotkey-entry .ai-card > :last-child,
.ai-hotkey-entry .ai-feature-card > :last-child {
  margin-bottom: 0;
}

.ai-product-detail .ai-table-wrap,
.ai-case-story .ai-table-wrap,
.ai-blog-guide .ai-table-wrap,
.ai-hotkey-entry .ai-table-wrap {
  width: 100%;
  margin: 22px 0 28px;
  overflow-x: auto;
  border: 1px solid var(--sop-ai-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(1, 71, 48, .05);
  -webkit-overflow-scrolling: touch;
}

.ai-product-detail table,
.ai-case-story table,
.ai-blog-guide table,
.ai-hotkey-entry table {
  width: 100%;
  min-width: 580px;
  margin: 22px 0;
  border-spacing: 0;
  border-collapse: collapse;
  background: #fff;
  color: var(--sop-ai-copy);
}

.ai-product-detail .ai-table-wrap table,
.ai-case-story .ai-table-wrap table,
.ai-blog-guide .ai-table-wrap table,
.ai-hotkey-entry .ai-table-wrap table {
  margin: 0;
}

.ai-product-detail th,
.ai-case-story th,
.ai-blog-guide th,
.ai-hotkey-entry th {
  padding: 13px 15px;
  border: 1px solid #d8e5df;
  background: var(--sop-ai-green);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  vertical-align: top;
}

.ai-product-detail td,
.ai-case-story td,
.ai-blog-guide td,
.ai-hotkey-entry td {
  padding: 13px 15px;
  border: 1px solid #e1e9e5;
  background: #fff;
  font-size: 14px;
  text-align: left;
  vertical-align: top;
}

.ai-product-detail tbody tr:nth-child(even) td,
.ai-case-story tbody tr:nth-child(even) td,
.ai-blog-guide tbody tr:nth-child(even) td,
.ai-hotkey-entry tbody tr:nth-child(even) td {
  background: #f7faf8;
}

.ai-product-detail .ai-note,
.ai-product-detail .ai-takeaway,
.ai-case-story .ai-note,
.ai-case-story .ai-takeaway,
.ai-blog-guide .ai-note,
.ai-blog-guide .ai-takeaway,
.ai-hotkey-entry .ai-note,
.ai-hotkey-entry .ai-takeaway {
  position: relative;
  margin: 22px 0;
  padding: 18px 20px 18px 50px;
  border: 1px solid #cfe2da;
  border-radius: 14px;
  background: var(--sop-ai-green-soft);
  color: #315448;
}

.ai-product-detail .ai-note::before,
.ai-product-detail .ai-takeaway::before,
.ai-case-story .ai-note::before,
.ai-case-story .ai-takeaway::before,
.ai-blog-guide .ai-note::before,
.ai-blog-guide .ai-takeaway::before,
.ai-hotkey-entry .ai-note::before,
.ai-hotkey-entry .ai-takeaway::before {
  position: absolute;
  top: 17px;
  left: 17px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sop-ai-green);
  color: #fff;
  content: "i";
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.ai-product-detail .ai-cta,
.ai-case-story .ai-cta,
.ai-blog-guide .ai-cta,
.ai-hotkey-entry .ai-cta {
  position: relative;
  margin: 30px 0;
  padding: 26px 30px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--sop-ai-green-dark), var(--sop-ai-green));
  box-shadow: 0 16px 36px rgba(1, 101, 67, .2);
  color: #fff;
}

.ai-product-detail .ai-cta::after,
.ai-case-story .ai-cta::after,
.ai-blog-guide .ai-cta::after,
.ai-hotkey-entry .ai-cta::after {
  position: absolute;
  right: -35px;
  bottom: -55px;
  width: 150px;
  height: 150px;
  border: 28px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  content: "";
}

.ai-product-detail .ai-cta h2,
.ai-product-detail .ai-cta h3,
.ai-case-story .ai-cta h2,
.ai-case-story .ai-cta h3,
.ai-blog-guide .ai-cta h2,
.ai-blog-guide .ai-cta h3,
.ai-hotkey-entry .ai-cta h2,
.ai-hotkey-entry .ai-cta h3 {
  margin-top: 0;
  padding-left: 0;
  border: 0;
  color: #fff;
}

.ai-product-detail .ai-cta h2::before,
.ai-case-story .ai-cta h2::before,
.ai-blog-guide .ai-cta h2::before,
.ai-hotkey-entry .ai-cta h2::before {
  display: none;
}

.ai-product-detail .ai-cta a,
.ai-case-story .ai-cta a,
.ai-blog-guide .ai-cta a,
.ai-hotkey-entry .ai-cta a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .55);
}

.ai-product-detail .ai-faq,
.ai-case-story .ai-faq,
.ai-blog-guide .ai-faq,
.ai-hotkey-entry .ai-faq {
  margin: 18px 0;
  padding: 20px 22px;
  border: 1px solid var(--sop-ai-line);
  border-radius: 14px;
  background: #fff;
}

.ai-product-detail .ai-timeline,
.ai-case-story .ai-timeline,
.ai-blog-guide .ai-timeline,
.ai-hotkey-entry .ai-timeline {
  position: relative;
  margin: 24px 0;
  padding-left: 34px;
}

.ai-product-detail .ai-timeline::before,
.ai-case-story .ai-timeline::before,
.ai-blog-guide .ai-timeline::before,
.ai-hotkey-entry .ai-timeline::before {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 10px;
  width: 2px;
  background: linear-gradient(var(--sop-ai-green), #8fcbb7);
  content: "";
}

.ai-product-detail .ai-timeline > *,
.ai-case-story .ai-timeline > *,
.ai-blog-guide .ai-timeline > *,
.ai-hotkey-entry .ai-timeline > * {
  position: relative;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--sop-ai-line);
  border-radius: 12px;
  background: #fff;
}

.ai-product-detail .ai-timeline > *::before,
.ai-case-story .ai-timeline > *::before,
.ai-blog-guide .ai-timeline > *::before,
.ai-hotkey-entry .ai-timeline > *::before {
  position: absolute;
  top: 21px;
  left: -31px;
  width: 11px;
  height: 11px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--sop-ai-green);
  box-shadow: 0 0 0 2px var(--sop-ai-green);
  content: "";
}

.ai-blog-guide .ai-toc,
.ai-hotkey-entry .ai-toc {
  margin: 20px 0 28px;
  padding: 22px 24px;
  border: 1px solid #cfe2da;
  border-radius: 16px;
  background: linear-gradient(145deg, #f7fbf9, #edf7f3);
}

.ai-blog-guide .ai-toc::before,
.ai-hotkey-entry .ai-toc::before {
  display: block;
  margin-bottom: 10px;
  color: var(--sop-ai-green-dark);
  content: "IN THIS GUIDE";
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ai-blog-guide .ai-checklist,
.ai-hotkey-entry .ai-checklist {
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
}

.ai-blog-guide .ai-checklist li,
.ai-hotkey-entry .ai-checklist li {
  position: relative;
  margin: 9px 0;
  padding: 12px 15px 12px 44px;
  border: 1px solid var(--sop-ai-line);
  border-radius: 11px;
  background: #fff;
}

.ai-blog-guide .ai-checklist li::before,
.ai-hotkey-entry .ai-checklist li::before {
  position: absolute;
  top: 12px;
  left: 14px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--sop-ai-green);
  color: #fff;
  content: "✓";
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

/* Product: technical blueprint */
.ai-product-detail.ai-style-technical {
  padding: clamp(20px, 3.2vw, 38px);
  border: 1px solid #cbded6;
  border-top: 5px solid var(--sop-ai-green);
  border-radius: 18px;
  background:
    linear-gradient(rgba(1, 101, 67, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 101, 67, .032) 1px, transparent 1px),
    #fff;
  background-size: 24px 24px;
  box-shadow: var(--sop-ai-shadow);
}

.ai-product-detail.ai-style-technical h2 {
  border-bottom: 2px solid var(--sop-ai-green);
}

.ai-product-detail.ai-style-technical .ai-card {
  border-left: 4px solid var(--sop-ai-green);
  border-radius: 8px 14px 14px 8px;
  background: rgba(255, 255, 255, .94);
}

/* Product: process */
.ai-product-detail.ai-style-process {
  counter-reset: sop-process;
}

.ai-product-detail.ai-style-process .ai-grid,
.ai-product-detail.ai-style-process .ai-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-product-detail.ai-style-process .ai-card,
.ai-product-detail.ai-style-process .ai-feature-card {
  counter-increment: sop-process;
  padding-top: 62px;
  border: 0;
  background: linear-gradient(160deg, #f7fbf9, #e8f4ef);
}

.ai-product-detail.ai-style-process .ai-card::before,
.ai-product-detail.ai-style-process .ai-feature-card::before {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 10px;
  background: var(--sop-ai-green);
  color: #fff;
  content: counter(sop-process, decimal-leading-zero);
  font-size: 12px;
  font-weight: 800;
  line-height: 32px;
  text-align: center;
}

/* Product: feature cards */
.ai-product-detail.ai-style-feature-grid .ai-grid,
.ai-product-detail.ai-style-feature-grid .ai-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-product-detail.ai-style-feature-grid .ai-card,
.ai-product-detail.ai-style-feature-grid .ai-feature-card {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(28, 58, 47, .1);
}

.ai-product-detail.ai-style-feature-grid .ai-card::before,
.ai-product-detail.ai-style-feature-grid .ai-feature-card::before {
  display: block;
  width: 44px;
  height: 5px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sop-ai-green), #27b487);
  content: "";
}

.ai-product-detail.ai-style-feature-grid .ai-card:nth-child(3n+2)::before,
.ai-product-detail.ai-style-feature-grid .ai-feature-card:nth-child(3n+2)::before {
  background: linear-gradient(90deg, var(--sop-ai-blue), #54a2ff);
}

.ai-product-detail.ai-style-feature-grid .ai-card:nth-child(3n)::before,
.ai-product-detail.ai-style-feature-grid .ai-feature-card:nth-child(3n)::before {
  background: linear-gradient(90deg, var(--sop-ai-orange), #f2a15e);
}

/* Product: comparison */
.ai-product-detail.ai-style-comparison {
  padding: clamp(18px, 3vw, 34px);
  border-radius: 18px;
  background: #f4f7f6;
}

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

.ai-product-detail.ai-style-comparison th {
  background: #123f34;
}

.ai-product-detail.ai-style-comparison tbody tr:hover td {
  background: #edf7f3;
}

/* Product: applications */
.ai-product-detail.ai-style-application .ai-card,
.ai-product-detail.ai-style-application .ai-feature-card {
  border: 0;
  background: linear-gradient(145deg, #f1f8f5, #fff);
  box-shadow: inset 0 0 0 1px #dceae4;
}

.ai-product-detail.ai-style-application .ai-card h3::after,
.ai-product-detail.ai-style-application .ai-card h4::after,
.ai-product-detail.ai-style-application .ai-feature-card h3::after,
.ai-product-detail.ai-style-application .ai-feature-card h4::after {
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  background: var(--sop-ai-orange);
  content: "";
}

/* Product: project planning */
.ai-product-detail.ai-style-project {
  padding: clamp(20px, 3.4vw, 40px);
  border-radius: 20px;
  background: linear-gradient(145deg, #0b3d2e, #016543);
  color: rgba(255, 255, 255, .84);
}

.ai-product-detail.ai-style-project h2,
.ai-product-detail.ai-style-project h3,
.ai-product-detail.ai-style-project h4 {
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}

.ai-product-detail.ai-style-project h2::before {
  background: var(--sop-ai-orange);
}

.ai-product-detail.ai-style-project .ai-card,
.ai-product-detail.ai-style-project .ai-feature-card {
  border-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .09);
  box-shadow: none;
  color: rgba(255, 255, 255, .86);
}

.ai-product-detail.ai-style-project .ai-card h3,
.ai-product-detail.ai-style-project .ai-card h4,
.ai-product-detail.ai-style-project .ai-feature-card h3,
.ai-product-detail.ai-style-project .ai-feature-card h4 {
  color: #fff;
}

.ai-product-detail.ai-style-project li::marker,
.ai-product-detail.ai-style-project a {
  color: #a7f3d0;
}

/* Product: maintenance */
.ai-product-detail.ai-style-maintenance .ai-note,
.ai-product-detail.ai-style-maintenance .ai-takeaway {
  border-color: #f1c7a9;
  background: var(--sop-ai-orange-soft);
  color: #70472c;
}

.ai-product-detail.ai-style-maintenance .ai-note::before,
.ai-product-detail.ai-style-maintenance .ai-takeaway::before {
  background: var(--sop-ai-orange);
  content: "!";
}

.ai-product-detail.ai-style-maintenance .ai-card,
.ai-product-detail.ai-style-maintenance .ai-feature-card {
  border-left: 4px solid var(--sop-ai-orange);
}

/* Product: compact */
.ai-product-detail.ai-style-compact {
  max-width: 920px;
  margin-right: auto;
  margin-left: auto;
}

.ai-product-detail.ai-style-compact .ai-grid,
.ai-product-detail.ai-style-compact .ai-feature-grid {
  display: block;
}

.ai-product-detail.ai-style-compact .ai-card,
.ai-product-detail.ai-style-compact .ai-feature-card {
  margin: 0 0 14px;
  padding: 16px 0;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}

.ai-product-detail.ai-style-compact h2 {
  padding-left: 0;
}

.ai-product-detail.ai-style-compact h2::before {
  display: none;
}

/* Case: dossier */
.ai-case-story.ai-case-style-dossier {
  padding: clamp(20px, 3.3vw, 38px);
  border: 1px solid var(--sop-ai-line);
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, #f6faf8);
  box-shadow: var(--sop-ai-shadow);
}

.ai-case-story.ai-case-style-dossier .ai-grid:first-of-type .ai-card {
  border: 0;
  background: var(--sop-ai-green-dark);
  color: #dcebe6;
}

.ai-case-story.ai-case-style-dossier .ai-grid:first-of-type .ai-card h3,
.ai-case-story.ai-case-style-dossier .ai-grid:first-of-type .ai-card h4 {
  color: #fff;
}

/* Case: challenge and solution */
.ai-case-story.ai-case-style-challenge {
  counter-reset: sop-case-step;
}

.ai-case-story.ai-case-style-challenge .ai-card {
  counter-increment: sop-case-step;
  padding-left: 72px;
  border-left: 0;
}

.ai-case-story.ai-case-style-challenge .ai-card::before {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sop-ai-green);
  color: #fff;
  content: counter(sop-case-step);
  font-weight: 800;
  line-height: 36px;
  text-align: center;
}

/* Case: timeline */
.ai-case-story.ai-case-style-timeline {
  padding: clamp(18px, 3vw, 34px);
  border-radius: 18px;
  background: #f4f8f6;
}

.ai-case-story.ai-case-style-timeline .ai-timeline > * {
  box-shadow: 0 8px 20px rgba(1, 71, 48, .06);
}

/* Case: engineering */
.ai-case-story.ai-case-style-engineering {
  border-top: 6px solid var(--sop-ai-green);
}

.ai-case-story.ai-case-style-engineering .ai-card,
.ai-case-story.ai-case-style-engineering .ai-takeaway {
  border-radius: 8px;
  background: #f4f7f6;
  box-shadow: none;
}

.ai-case-story.ai-case-style-engineering th {
  background: #203f36;
}

/* Case: compact */
.ai-case-story.ai-case-style-compact {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

.ai-case-story.ai-case-style-compact .ai-card {
  padding: 0 0 16px;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}

/* Blog: buyer guide */
.ai-blog-guide.ai-blog-style-guide {
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
}

.ai-blog-guide.ai-blog-style-guide > p:first-of-type {
  padding: 20px 23px;
  border-left: 4px solid var(--sop-ai-green);
  border-radius: 0 14px 14px 0;
  background: var(--sop-ai-green-pale);
  color: #365047;
  font-size: 17px;
}

/* Blog: comparison */
.ai-blog-guide.ai-blog-style-comparison {
  padding: clamp(18px, 3vw, 34px);
  border-radius: 18px;
  background: #f5f7f7;
}

.ai-blog-guide.ai-blog-style-comparison .ai-grid .ai-card:nth-child(odd) {
  border-top: 4px solid var(--sop-ai-green);
}

.ai-blog-guide.ai-blog-style-comparison .ai-grid .ai-card:nth-child(even) {
  border-top: 4px solid var(--sop-ai-blue);
}

/* Blog: checklist */
.ai-blog-guide.ai-blog-style-checklist .ai-card {
  border-left: 4px solid var(--sop-ai-green);
}

.ai-blog-guide.ai-blog-style-checklist h2 {
  counter-increment: sop-blog-section;
}

.ai-blog-guide.ai-blog-style-checklist {
  counter-reset: sop-blog-section;
}

.ai-blog-guide.ai-blog-style-checklist h2::after {
  float: right;
  color: #aac1b8;
  content: counter(sop-blog-section, decimal-leading-zero);
  font-size: .52em;
  letter-spacing: .06em;
}

/* Blog: troubleshooting */
.ai-blog-guide.ai-blog-style-troubleshooting .ai-note,
.ai-blog-guide.ai-blog-style-troubleshooting .ai-takeaway {
  border-color: #f0c7ac;
  background: var(--sop-ai-orange-soft);
  color: #72492f;
}

.ai-blog-guide.ai-blog-style-troubleshooting .ai-note::before,
.ai-blog-guide.ai-blog-style-troubleshooting .ai-takeaway::before {
  background: var(--sop-ai-orange);
  content: "!";
}

.ai-blog-guide.ai-blog-style-troubleshooting .ai-card {
  border-left: 5px solid var(--sop-ai-orange);
}

/* Blog: technical reference */
.ai-blog-guide.ai-blog-style-reference {
  padding: clamp(20px, 3.2vw, 38px);
  border: 1px solid #d4e0ea;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #f4f8fb);
}

.ai-blog-guide.ai-blog-style-reference h2::before {
  background: linear-gradient(180deg, var(--sop-ai-blue), #48a0ff);
}

.ai-blog-guide.ai-blog-style-reference .ai-note,
.ai-blog-guide.ai-blog-style-reference .ai-takeaway {
  border-color: #cfdef6;
  background: var(--sop-ai-blue-soft);
  color: #34516f;
}

.ai-blog-guide.ai-blog-style-reference .ai-note::before,
.ai-blog-guide.ai-blog-style-reference .ai-takeaway::before {
  background: var(--sop-ai-blue);
}

/* Blog: compact reading */
.ai-blog-guide.ai-blog-style-compact {
  max-width: 840px;
  margin-right: auto;
  margin-left: auto;
  font-size: 17px;
  line-height: 1.82;
}

.ai-blog-guide.ai-blog-style-compact h2 {
  margin-top: 34px;
  padding-left: 0;
  border-bottom-style: dashed;
}

.ai-blog-guide.ai-blog-style-compact h2::before {
  display: none;
}

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

/* Shared specification field */
.ai-product-spec {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 18px 0;
  overflow-x: auto;
  border: 1px solid #dbe6e1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(1, 71, 48, .05);
  -webkit-overflow-scrolling: touch;
}

.ai-product-spec table {
  width: 100%;
  min-width: 560px;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.ai-product-spec th,
.ai-product-spec td {
  padding: 12px 14px;
  border: 1px solid #e0e8e4;
  font-size: 14px;
  text-align: left;
  vertical-align: top;
}

.ai-product-spec th {
  background: #016543;
  color: #fff;
}

.ai-product-spec tbody tr:nth-child(even) td {
  background: #f7faf8;
}

[dir="rtl"] .ai-product-detail h2,
[dir="rtl"] .ai-case-story h2,
[dir="rtl"] .ai-blog-guide h2,
[dir="rtl"] .ai-hotkey-entry h2 {
  padding-right: 18px;
  padding-left: 0;
}

[dir="rtl"] .ai-product-detail h2::before,
[dir="rtl"] .ai-case-story h2::before,
[dir="rtl"] .ai-blog-guide h2::before,
[dir="rtl"] .ai-hotkey-entry h2::before {
  right: 0;
  left: auto;
}

[dir="rtl"] .ai-product-detail .ai-note,
[dir="rtl"] .ai-product-detail .ai-takeaway,
[dir="rtl"] .ai-case-story .ai-note,
[dir="rtl"] .ai-case-story .ai-takeaway,
[dir="rtl"] .ai-blog-guide .ai-note,
[dir="rtl"] .ai-blog-guide .ai-takeaway,
[dir="rtl"] .ai-hotkey-entry .ai-note,
[dir="rtl"] .ai-hotkey-entry .ai-takeaway {
  padding-right: 50px;
  padding-left: 20px;
}

[dir="rtl"] .ai-product-detail .ai-note::before,
[dir="rtl"] .ai-product-detail .ai-takeaway::before,
[dir="rtl"] .ai-case-story .ai-note::before,
[dir="rtl"] .ai-case-story .ai-takeaway::before,
[dir="rtl"] .ai-blog-guide .ai-note::before,
[dir="rtl"] .ai-blog-guide .ai-takeaway::before,
[dir="rtl"] .ai-hotkey-entry .ai-note::before,
[dir="rtl"] .ai-hotkey-entry .ai-takeaway::before {
  right: 17px;
  left: auto;
}

@media (max-width: 760px) {
  .ai-product-detail,
  .ai-case-story,
  .ai-blog-guide,
  .ai-hotkey-entry {
    margin: 18px 0;
    font-size: 15px;
    line-height: 1.7;
  }

  .ai-product-detail h2,
  .ai-case-story h2,
  .ai-blog-guide h2,
  .ai-hotkey-entry h2 {
    margin-top: 30px;
    font-size: 23px;
  }

  .ai-product-detail h3,
  .ai-case-story h3,
  .ai-blog-guide h3,
  .ai-hotkey-entry h3 {
    font-size: 19px;
  }

  .ai-product-detail .ai-grid,
  .ai-product-detail .ai-feature-grid,
  .ai-product-detail.ai-style-process .ai-grid,
  .ai-product-detail.ai-style-process .ai-feature-grid,
  .ai-product-detail.ai-style-feature-grid .ai-grid,
  .ai-product-detail.ai-style-feature-grid .ai-feature-grid,
  .ai-case-story .ai-grid,
  .ai-blog-guide .ai-grid,
  .ai-hotkey-entry .ai-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ai-product-detail .ai-card,
  .ai-product-detail .ai-feature-card,
  .ai-case-story .ai-card,
  .ai-blog-guide .ai-card,
  .ai-hotkey-entry .ai-card {
    padding: 18px;
    border-radius: 13px;
  }

  .ai-product-detail.ai-style-process .ai-card,
  .ai-product-detail.ai-style-process .ai-feature-card {
    padding-top: 58px;
  }

  .ai-case-story.ai-case-style-challenge .ai-card {
    padding-left: 64px;
  }

  .ai-product-detail .ai-cta,
  .ai-case-story .ai-cta,
  .ai-blog-guide .ai-cta,
  .ai-hotkey-entry .ai-cta {
    padding: 22px 20px;
    border-radius: 15px;
  }

  .ai-product-detail table,
  .ai-case-story table,
  .ai-blog-guide table,
  .ai-hotkey-entry table,
  .ai-product-spec table {
    min-width: 520px;
  }

  .ai-product-detail.ai-style-technical,
  .ai-product-detail.ai-style-comparison,
  .ai-product-detail.ai-style-project,
  .ai-case-story.ai-case-style-dossier,
  .ai-case-story.ai-case-style-timeline,
  .ai-blog-guide.ai-blog-style-comparison,
  .ai-blog-guide.ai-blog-style-reference {
    padding: 18px;
    border-radius: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-product-detail *,
  .ai-case-story *,
  .ai-blog-guide *,
  .ai-hotkey-entry * {
    scroll-behavior: auto;
    transition: none;
  }
}