/*
 * SEO for SaaS article styles. Everything is scoped under .sfs-article and
 * driven by the variables below: set them on .sfs-article (or any parent) to
 * match your site. The defaults derive from currentColor, so the article
 * reads well on light and dark pages without changes. Explicit list, margin
 * and table rules make it survive a CSS reset (Tailwind preflight included).
 */
.sfs-article {
  --sfs-font: inherit;
  --sfs-heading-font: inherit;
  --sfs-mono-font: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sfs-text: currentColor;
  --sfs-muted: color-mix(in srgb, currentColor 65%, transparent);
  --sfs-border: color-mix(in srgb, currentColor 14%, transparent);
  --sfs-surface: color-mix(in srgb, currentColor 5%, transparent);
  --sfs-accent: #0f766e;
  --sfs-accent-contrast: #ffffff;
  --sfs-radius: 12px;
  --sfs-space: 1.25em;

  font-family: var(--sfs-font);
  color: var(--sfs-text);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.sfs-article > * + * {
  margin-top: var(--sfs-space);
}

.sfs-article :is(h2, h3, h4) {
  font-family: var(--sfs-heading-font);
  line-height: 1.25;
  font-weight: 700;
  scroll-margin-top: 5rem;
}
.sfs-article h2 {
  font-size: 1.6em;
  margin-top: 2em;
}
.sfs-article h3 {
  font-size: 1.3em;
  margin-top: 1.6em;
}
.sfs-article h4 {
  font-size: 1.1em;
  margin-top: 1.4em;
}

.sfs-article a {
  color: var(--sfs-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sfs-article code {
  font-family: var(--sfs-mono-font);
  font-size: 0.9em;
  background: var(--sfs-surface);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

.sfs-article :is(ul, ol) {
  padding-left: 1.5em;
}
.sfs-article ul {
  list-style: disc;
}
.sfs-article ol {
  list-style: decimal;
}
.sfs-article li + li {
  margin-top: 0.4em;
}

.sfs-quote {
  margin-inline: 0;
  border-left: 3px solid var(--sfs-accent);
  padding-left: 1.2em;
}
.sfs-quote blockquote {
  margin: 0;
  font-size: 1.1em;
  font-style: italic;
}
.sfs-quote figcaption {
  margin-top: 0.5em;
  color: var(--sfs-muted);
  font-size: 0.9em;
}

.sfs-code {
  background: var(--sfs-surface);
  border: 1px solid var(--sfs-border);
  border-radius: var(--sfs-radius);
  padding: 1em 1.2em;
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.6;
}
.sfs-code code {
  background: none;
  padding: 0;
}

.sfs-image,
.sfs-video {
  margin-inline: 0;
}
.sfs-image img,
.sfs-video img,
.sfs-video iframe {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sfs-radius);
}
.sfs-image figcaption,
.sfs-video figcaption {
  margin-top: 0.5em;
  color: var(--sfs-muted);
  font-size: 0.9em;
}

.sfs-video a {
  position: relative;
  display: block;
}
.sfs-video img,
.sfs-video iframe {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
}
.sfs-video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: rgb(0 0 0 / 0.75);
}
.sfs-video-play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}

.sfs-callout {
  border: 1px solid var(--sfs-border);
  border-left: 4px solid var(--sfs-callout-color, var(--sfs-accent));
  border-radius: var(--sfs-radius);
  background: var(--sfs-surface);
  padding: 0.9em 1.1em;
}
.sfs-callout[data-variant="tip"] {
  --sfs-callout-color: #16a34a;
}
.sfs-callout[data-variant="warning"] {
  --sfs-callout-color: #d97706;
}
.sfs-callout-label {
  display: block;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sfs-callout-color, var(--sfs-accent));
}
.sfs-callout p {
  margin: 0.25em 0 0;
}

.sfs-cta {
  border-radius: var(--sfs-radius);
  background: var(--sfs-accent);
  color: var(--sfs-accent-contrast);
  padding: 1.5em;
}
.sfs-cta p {
  margin: 0.4em 0 0;
}
.sfs-cta-heading {
  font-family: var(--sfs-heading-font);
  font-size: 1.3em;
  font-weight: 700;
}
.sfs-article .sfs-cta-button {
  display: inline-block;
  margin-top: 1em;
  border-radius: 999px;
  background: var(--sfs-accent-contrast);
  color: var(--sfs-accent);
  padding: 0.55em 1.2em;
  font-weight: 600;
  text-decoration: none;
}

.sfs-faq details {
  border-bottom: 1px solid var(--sfs-border);
  padding: 0.8em 0;
}
.sfs-faq summary {
  cursor: pointer;
  font-weight: 600;
}
.sfs-faq details p {
  margin: 0.5em 0 0;
}

.sfs-table {
  overflow-x: auto;
  border: 1px solid var(--sfs-border);
  border-radius: var(--sfs-radius);
}
.sfs-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}
.sfs-table :is(th, td) {
  padding: 0.6em 0.9em;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--sfs-border);
}
.sfs-table thead th {
  border-top: 0;
  background: var(--sfs-surface);
  font-weight: 600;
}