:root { --sg-article-wide-max: 1240px; --sg-article-prose-max: 820px; --sg-article-text-max: 900px; }

.sg-article,
.sg-article *,
.sg-article *::before,
.sg-article *::after { box-sizing: border-box; }

.sg-article { width: 100%; color: #4f4c46; font-size: 17px; line-height: 1.7; }
.sg-article img { display: block; max-width: 100%; height: auto; }
.sg-article a { color: #4d3ca4; text-underline-offset: .15em; }
.sg-article :focus-visible { outline: 3px solid #6654c7; outline-offset: 3px; }
.sg-article .sg-article-wide { width: min(100%, var(--sg-article-wide-max)); margin-inline: auto; }
.sg-article .sg-article-prose { width: 100%; max-width: var(--sg-article-wide-max); margin-inline: auto; }
.sg-article .sg-article-prose > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote) { max-width: var(--sg-article-text-max); margin-left: auto; margin-right: auto; }
.sg-article p.sg-article-prose, .sg-article blockquote.sg-article-prose { max-width: var(--sg-article-text-max); }
.sg-article .sg-article-section { margin-block: clamp(44px, 6vw, 64px); }
.sg-article .sg-article-section--compact { margin-block: 28px; }
.sg-article h2, .sg-article h3 { color: #292824; line-height: 1.2; letter-spacing: -.02em; }
.sg-article h2 { font-size: clamp(1.65rem, 3vw, 2.45rem); }
.sg-article h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); }

.sg-article-quick { padding: 28px; border: 1px solid #ddd7ca; border-radius: 16px; background: #f0ecfb; }
.sg-article-quick h2, .sg-article-quick h3 { margin-top: 0; margin-bottom: 12px; }
.sg-article-quick p { margin-top: 0; margin-bottom: 16px; }
.sg-article-checklist { list-style: none; margin: 16px 0 0; padding: 0; }
.sg-article-checklist li { position: relative; margin: 8px 0; padding-left: 30px; }
.sg-article-checklist li::before { content: "✓"; position: absolute; left: 0; top: .15em; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #6654c7; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }

.sg-article-grid { display: grid; width: 100%; gap: 24px; }
.sg-article-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-article-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-article-card { min-width: 0; padding: 26px; border: 1px solid #ddd7ca; border-radius: 16px; background: #fff; }
.sg-article-card > :first-child { margin-top: 0; }
.sg-article-card > :last-child { margin-bottom: 0; }

.sg-article-icon-card { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; width: 100%; min-width: 0; padding: 24px; border: 1px solid #ddd7ca; border-radius: 16px; background: #fff; }
.sg-article-icon-card h3, .sg-article-icon-card p { width: 100%; min-width: 0; }
.sg-article-icon-card h3 { margin: 0 0 10px; }
.sg-article-icon-card p { margin: 0; }
.sg-article-icon { display: grid; place-items: center; width: auto; min-width: 46px; min-height: 46px; padding-inline: 11px; background: #f0ecfb; color: #4d3ca4; font-weight: 700; line-height: 1; white-space: nowrap; }
.sg-article .sg-article-icon--round { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; min-width: 46px; max-width: 46px; flex: 0 0 46px; padding: 0; border-radius: 50%; line-height: 1; text-align: center; }
.sg-article .sg-article-icon--square { width: fit-content; min-width: 46px; min-height: 46px; max-width: 100%; padding-inline: 11px; border-radius: 11px; }
.sg-article-icon-svg { flex: 0 0 46px; width: 46px; height: 46px; object-fit: contain; }

.sg-article-split { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: center; }
.sg-article-split__content, .sg-article-split__media { min-width: 0; }
.sg-article-split--image-left .sg-article-split__media { order: -1; }
.sg-article-split__media img { width: 100%; border-radius: 16px; }

.sg-article-panel { padding: clamp(28px, 4vw, 40px); border: 1px solid #ddd7ca; border-radius: 16px; }
.sg-article-panel--soft { background: #f7f4ed; }
.sg-article-panel--dark { background: #29242f; color: #f8f6fa; }
.sg-article-panel--dark h2, .sg-article-panel--dark h3, .sg-article-panel--dark p, .sg-article-panel--dark li { color: inherit; }
.sg-article-panel--dark a { color: #ded7ff; }
.sg-article-panel--dark .sg-article-card { color: #4f4c46; background: #fff; }

.sg-article-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 30px; border-radius: 16px; background: #edf4f7; border: 1px solid #d5e2e7; }
.sg-article-callout { padding: 22px 26px; border: 1px solid #ddd7ca; border-left: 4px solid #6654c7; border-radius: 0 16px 16px 0; background: #fff; }
.sg-article-callout--warning { border-left-color: #b5811b; background: #f5ede2; }

.sg-article-compare { display: grid; width: 100%; gap: 24px; }
.sg-article-compare--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-article-compare--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-article-compare-card { display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 24px 26px; border: 1px solid #ddd7ca; border-radius: 16px; background: #fff; }
.sg-article-compare-card h3 { margin: 0 0 11px; }
.sg-article-compare-card p { margin: 0 0 12px; }
.sg-article-compare-card > :last-child { margin-bottom: 0; }
.sg-article-compare-card--featured { border-color: #6654c7; box-shadow: 0 0 0 3px #f0ecfb; }
.sg-article-compare-card > :first-child { margin-top: 0; }

.sg-article-cta { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 30px; border-radius: 16px; }
.sg-article-cta--light { border: 1px solid #ddd7ca; background: #f0ecfb; }
.sg-article-cta--light h3 { margin-top: 0; margin-bottom: 8px; }
.sg-article-cta--light p { margin-bottom: 0; }
.sg-article-cta--dark { color: #f8f6fa; background: #29242f; }
.sg-article-cta--dark h2, .sg-article-cta--dark h3, .sg-article-cta--dark p { color: inherit; }
.sg-article-cta__content { min-width: 0; }
.sg-article-cta__action { min-width: 0; width: 100%; justify-self: stretch; }
.sg-article-cta__action a { color: inherit; }

.sg-article .sg-aff-disclosure { width: 100%; max-width: none; margin: 0; padding: 18px 20px; border: 1px solid #ddd7ca; border-left: 3px solid #6654c7; border-radius: 12px; background: #f7f4ed; color: #777269; }
.sg-article .sg-aff-disclosure p { margin: 0; }
.sg-article .sg-aff-disclosure a { color: #4d3ca4; }

.sg-article-media { width: 100%; border-radius: 16px; }
.sg-article-caption { margin-top: 8px; color: #777269; font-size: .9rem; }

@media (max-width: 900px) {
  .sg-article .sg-article-grid--3, .sg-article .sg-article-compare--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sg-article { font-size: 16px; }
  .sg-article-section { margin-block: 34px; }
  .sg-article-quick, .sg-article-card, .sg-article-panel, .sg-article-banner, .sg-article-callout, .sg-article-compare-card, .sg-article-cta { border-radius: 12px; }
  .sg-article .sg-article-grid--2, .sg-article .sg-article-grid--3, .sg-article .sg-article-split, .sg-article .sg-article-compare--2, .sg-article .sg-article-compare--3, .sg-article .sg-article-banner, .sg-article .sg-article-cta { grid-template-columns: 1fr; }
  .sg-article .sg-article-split--image-left .sg-article-split__media { order: 0; }
.sg-article .sg-article-cta__action { width: 100%; }
  .sg-article .sg-article-cta__action { min-width: 0; justify-self: stretch; }
}