.main-article-container {
  background-color: rgb(var(--color-background));
}
.main-article__title {
  padding-block-end: 20px;
}
.main-article__cover-image {
  aspect-ratio: var(--aspect-ratio);
  margin-block-end: 20px;
  overflow: hidden;
  border-radius: var(--border-radius);
}
.main-article__cover-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-article__info {
  display: flex;
  gap: 10px;
  padding-block-end: 20px;
  margin-block-end: 20px;
  color: rgb(var(--color-light-text));
  border-block-end: 1px solid rgb(221 221 221 / 100%);
}
.main-article__button-back {
  padding-block-end: 40px;
}
.main-article__button-back svg {
  transform: rotate(90deg);
}
.main-article__content {
  padding-block: 40px;
}
.main-article__comment-title {
  padding-block: 40px;
}
.main-article__comment-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-block-end: 40px;
}
.main-article__comment-item {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.main-article__comment-info {
  display: flex;
  gap: 52px;
  justify-content: end;
}
.main-article__comment-fields {
  display: flex;
  gap: 20px;
}
.main-article .text-area + .field__label {
  inset-block-start: 20px;
}
.main-article__share {
  padding-block: 40px 80px;
}
.main-article__comment-submit {
  display: flex;
  justify-content: center;
}
.main-article__comment-form {
  padding-block-start: 40px;
}
.main-article__comment-form-title {
  margin-block-end: 40px;
}
.main-article__comment-tip {
  padding-block: 40px;
}
.main-article .field__info {
  padding-block-end: 40px;
}
@media (max-width: 959px) {
  .main-article__content {
    margin-block-end: 20px;
  }

  .main-article__share {
    margin-block-end: 40px;
  }

  .main-article__comment-title {
    margin-block-end: 20px;
  }

  .main-article__comment-content {
    padding: 0;
  }

  .main-article__comment-form-title {
    margin-block-end: 20px;
  }

  .main-article__comment-fields {
    display: block;
  }

  .main-article__comment-tip {
    padding-block-start: 20px;
  }
}

/* XOD article reading system: scoped to article pages only. */
.main-article-container .main-article > div {
  max-width: 920px;
  margin-inline: auto;
  padding: 48px 40px 64px;
}
.main-article .main-article__title {
  margin: 0;
  padding: 0 0 20px;
  font-size: 40px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.025em;
  text-transform: none;
  overflow-wrap: anywhere;
}
.main-article .main-article__info {
  font-size: 14px;
  line-height: 1.5;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding-bottom: 20px;
  margin-bottom: 24px;
}
.main-article .main-article__cover-image {
  aspect-ratio: auto;
  border-radius: 8px;
  margin: 0 0 32px;
}
.main-article .main-article__cover-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.main-article .main-article__content {
  padding-block: 0;
  margin-bottom: 0;
  font-size: 17px;
  line-height: 1.75;
  overflow-wrap: break-word;
}
.main-article__content :is(.xkg-wrap, .xod-blog) {
  font-family: inherit;
  font-size: 17px !important;
  line-height: 1.75 !important;
}
.main-article__content :is(h2, h3, h4) {
  text-transform: none;
  letter-spacing: -.015em;
  scroll-margin-top: 112px;
}
.main-article__content h2 { font-size: 28px; line-height: 1.3; margin: 40px 0 16px; }
.main-article__content h3 { font-size: 22px; line-height: 1.35; margin: 28px 0 12px; }
.main-article__content p { margin-block: 0 18px; }
.main-article__content img { max-width: 100%; }
.main-article__content :is(figure, iframe, video) { max-width: 100%; }
.main-article__content figure { margin-inline: 0; }
.main-article__content :is(figcaption, .xkg-figure figcaption) { font-size: 14px; line-height: 1.5; }
.main-article__content .xkg-shell { max-width: 1168px; padding-inline: 24px; }
.main-article__content .xkg-layout { grid-template-columns: 200px minmax(0, 820px); gap: 32px; }
.main-article__content .xkg-side { border-radius: 8px; top: 100px; padding: 12px; }
.main-article__content .xkg-side a { min-height: 40px; display: flex; align-items: center; }
.main-article__content :is(.xkg-box, .xkg-note, .xkg-warning, .xkg-success, .xkg-mobile-nav, .xkg-card, .xkg-figure, .xkg-table-wrap, .xkg-related, .xkg-pcard) { border-radius: 8px; }
.main-article__content .xkg-cta { border-radius: 8px !important; }
.main-article__content :is(.xkg-button, .xod-blog .cta-btn-primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 6px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  background: #f5af22;
  color: #171717 !important;
  text-decoration: none !important;
  box-shadow: none;
}
.main-article__content .xkg-cta .xkg-button--ghost { color: #ffc34c !important; }
.main-article__content .xkg-related { background: #fff; border-top: 3px solid #f5af22; padding: 20px; }
.main-article__content .xkg-related strong { font-size: 18px; margin-bottom: 12px; }
.main-article__content .xkg-related ul { list-style: none; padding: 0; margin: 0; }
.main-article__content .xkg-related li { margin: 0; }
.main-article__content .xkg-related li + li { border-top: 1px solid #e3e7eb; }
.main-article__content .xkg-related a { display: block; padding: 12px 0; line-height: 1.5; text-decoration: none; }
.main-article__content .xkg-related a:hover { text-decoration: underline; }
.main-article__content .xkg-faq summary { min-height: 44px; padding-block: 8px; }
.main-article__content table:not(.xkg-table) { display: block; max-width: 100%; overflow-x: auto; }
.main-article__content a:focus-visible, .main-article__content summary:focus-visible { outline: 2px solid #9b5d00; outline-offset: 4px; }
.main-article .main-article__share { padding-block: 32px 24px; margin: 0; }
.main-article .main-article__button-back { padding-bottom: 32px; border-bottom: 1px solid #ddd; }
.main-article .main-article__link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-size: 16px; }
.main-article .main-article__comment-title { padding-block: 32px 16px; margin: 0; }
.main-article .main-article__comment-form { padding-top: 24px; }
.main-article .main-article__comment-form-title { margin-bottom: 24px; }
@media (max-width: 1023px) {
  .main-article__content .xkg-shell { padding: 0; }
}
@media (max-width: 959px) {
  .main-article-container .main-article { padding-inline: 0; }
  .main-article-container .main-article > div { padding: 28px 20px 40px; }
  .main-article .main-article__title { font-size: 30px; line-height: 1.2; padding-bottom: 16px; }
  .main-article .main-article__info { margin-bottom: 20px; padding-bottom: 16px; }
  .main-article .main-article__cover-image { margin-bottom: 24px; }
  .main-article .main-article__content,
  .main-article__content :is(.xkg-wrap, .xod-blog) { font-size: 16px !important; line-height: 1.7 !important; }
  .main-article__content h2 { font-size: 24px; margin: 32px 0 14px; }
  .main-article__content h3 { font-size: 20px; margin: 24px 0 10px; }
  .main-article__content .xkg-lead { font-size: 17px; }
  .main-article__content .xkg-mobile-nav { margin: 0 0 24px; padding: 14px 16px; }
  .main-article__content .xkg-mobile-nav summary { min-height: 24px; }
  .main-article__content .xkg-mobile-nav a { min-height: 44px; padding-block: 10px; }
  .main-article__content .xkg-related { padding: 16px; }
  .main-article__content .xkg-pcard-actions { gap: 8px; }
  .main-article__content .xkg-pcard-actions .xkg-button { width: 100%; margin: 0; }
  .main-article__content .xkg-cta > .xkg-button { display: flex; width: 100%; margin: 12px 0 0; }
  .main-article__content .xod-blog .flex-image-row figure { min-width: 0; flex-basis: 100%; }
}

/* Keep the mobile reading area clear; support links remain in the footer. */
@media (max-width: 959px) {
  body[data-page-type="article"] #seel-ai-support { display: none !important; }
}

/* Visible counterpart to this article's existing three FAQ schema entries. */
.main-article .xod-article-fitment-faq {
  margin-top: 40px;
  padding: 28px;
  border: 1px solid #e3e7eb;
  border-top: 3px solid #f5af22;
  border-radius: 8px;
  background: #fff;
}
.main-article .xod-article-fitment-faq > h2 { margin: 0 0 12px; }
.main-article .xod-article-fitment-faq__intro { color: #555; margin: 0 0 24px; }
.main-article .xod-article-fitment-faq__item { padding: 20px 0; border-top: 1px solid #e3e7eb; }
.main-article .xod-article-fitment-faq__item h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.4; }
.main-article .xod-article-fitment-faq__item p { margin: 0; }
.main-article .xod-article-fitment-faq__item:last-child { padding-bottom: 0; }
@media (max-width: 959px) {
  .main-article .xod-article-fitment-faq { margin-top: 32px; padding: 20px 16px; }
  .main-article .xod-article-fitment-faq__item h3 { font-size: 18px; }
}

/* Technical articles: quiet editorial hierarchy, no decorative callout stripes. */
.main-article .main-article__content :is(
  .xkg-answer, .xkg-box, .xkg-note, .xkg-warning, .xkg-success,
  .xg2-answer, .xg2-box, .xg2-note, .xg2-warning, .xg2-success,
  .xod-answer, .xod-box, .xod-note, .xod-warning, .xod-success,
  .xod-flow, .xod-path, .xod-real, .xod-quick,
  .xod-rubbing-quick, .xod-rubbing-warning,
  .warning-box, .success-box, .info-box, .tldr-box
) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-block: 28px !important;
  color: inherit;
}
.main-article .main-article__content :is(.xkg-related, .xod-article-fitment-faq) {
  background: transparent;
  border: 0;
  border-top: 1px solid #ddd;
  border-radius: 0;
  box-shadow: none;
  padding: 28px 0 0;
  margin-top: 40px;
}
.main-article .main-article__content .xkg-pcard {
  background: #fff;
  border-color: #ddd;
  box-shadow: none;
}
.main-article .main-article__content :is(.xkg-note, .xkg-warning, .xkg-success, .xod-note, .xod-warning, .xod-success) > :first-child {
  margin-top: 0;
}
@media (max-width: 959px) {
  .main-article .main-article__content :is(.xkg-related, .xod-article-fitment-faq) {
    margin-top: 32px;
    padding-top: 24px;
  }
}
.main-article .main-article__content :is(h2, h3, h4) {
  border-left: 0 !important;
  padding-left: 0 !important;
}
/* Legacy inline callouts use the same plain reading treatment. */
.main-article .main-article__content :is(p, div, section)[style*="border-left"] {
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}