/* SEO Factory article blocks. Served at /blocks.css and loaded by the in-app preview.
   Everything is scoped under .sf-article so the host theme is never reset.
   Sites set the --sf-* tokens (futures-finance.com: blog.css); the defaults below are theme neutral
   (derived from currentColor) so a light WordPress theme and a dark site both read well.
   Logical properties only. Numbers and formulas are isolated LTR inside RTL text. */
.sf-article {
  --_text: var(--sf-text, inherit);
  --_strong: var(--sf-text-strong, currentColor);
  --_muted: var(--sf-text-muted, color-mix(in srgb, currentColor 72%, transparent));
  --_surface: var(--sf-surface, color-mix(in srgb, currentColor 5%, transparent));
  --_surface-2: var(--sf-surface-2, color-mix(in srgb, currentColor 8%, transparent));
  --_line: var(--sf-line, color-mix(in srgb, currentColor 18%, transparent));
  --_line-soft: var(--sf-line-soft, color-mix(in srgb, currentColor 10%, transparent));
  --_accent: var(--sf-accent, #1d4ed8); /* with --sf-on-accent #fff: 6.7:1 */
  --_accent-soft: var(--sf-accent-soft, var(--_accent));
  --_on-accent: var(--sf-on-accent, #fff);
  --_link: var(--sf-link, var(--_accent-soft));
  --_pos: var(--sf-pos, #1b7f3b);
  --_neg: var(--sf-neg, #b42318);
  --_info: var(--sf-info, #2447c8);
  --_radius: var(--sf-radius, 16px);
  --_radius-sm: var(--sf-radius-sm, 10px);
  --_flow: var(--sf-flow, 1.15em);
  --_gap: var(--sf-gap-block, 1.7em);
  --_display: var(--sf-font-display, inherit);
  --_num-xl: var(--sf-num-xl, clamp(2rem, 1.6rem + 1.6vw, 2.75rem));
  color: var(--_text);
  font-family: var(--sf-font, inherit);
  font-size: var(--sf-body-size, inherit);
  font-weight: var(--sf-body-weight, 400);
  line-height: var(--sf-body-lh, 1.75);
  max-inline-size: var(--sf-measure, 72ch);
  margin-inline: auto;
  overflow-wrap: break-word;
  counter-reset: h2;
}
.sf-article :where(p, li) { text-wrap: pretty; }
.sf-article :where(p) { margin-block: 0 var(--_flow); }
.sf-article :where(strong) { color: var(--_strong); font-weight: 700; }
.sf-article header h1 { line-height: 1.25; margin-block: 0 .75em; }
.sf-article :where(h2, h3, h4) {
  font-family: var(--_display);
  color: var(--_strong);
  line-height: 1.3;
  text-wrap: balance;
  letter-spacing: normal;
  scroll-margin-block-start: var(--sf-scroll-offset, 1rem);
}
.sf-article :where(h2) { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); font-weight: 800; margin-block: 2.1em .6em; }
.sf-article :where(h3) { font-size: 1.25em; font-weight: 700; margin-block: 1.7em .5em; }
/* Section number above each H2, the same "01" the table of contents shows. Sources heading excluded. */
.sf-article > h2, .sf-article > article > h2 { counter-increment: h2; }
.sf-article > h2::before, .sf-article > article > h2::before {
  content: counter(h2, decimal-leading-zero);
  display: block;
  font-family: var(--sf-font, inherit);
  font-size: .5em;
  font-weight: 300;
  color: var(--_accent);
  margin-block-end: .35em;
  font-variant-numeric: tabular-nums;
}
.sf-article :where(ul, ol) { margin-block: 0 1.2em; padding-inline-start: 1.4em; }
.sf-article :where(li) { margin-block: .35em; }
.sf-article :where(ul) > li::marker, .sf-article :where(ol) > li::marker { color: var(--_accent); }
.sf-article a {
  color: var(--_link);
  /* R15 (T4-P2, WCAG 1.4.1): links in text must not rely on color alone. Tailwind preflight sets
     text-decoration: inherit on a, so an explicit line is enough (no !important). */
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}
.sf-article a:is(:hover, :focus-visible) { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.sf-article :is(a.cta-button, sup.ref a, a.ref-back) { text-decoration-line: none; }
.sf-article :where(a, summary, button):focus-visible {
  outline: 3px solid var(--_accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Isolated math and numbers (renderer wraps "40 × 5 = 200" in <bdi dir="ltr" class="sf-math">) */
.sf-article .sf-math { unicode-bidi: isolate; direction: ltr; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }

/* components get a block gap; the renderer never puts two of them next to each other without text */
.sf-article :is(figure, .sf-tbl-wrap, .sf-table, aside, .callout, .takeaways, .sf-practitioner, .cta, .author-card, .sf-stats, .sf-example, .sf-fixes, .sf-steps, .sf-checklist, section.faq, blockquote) {
  margin-block: var(--_gap);
}

.sf-article figure img { display: block; max-inline-size: 100%; block-size: auto; border-radius: var(--_radius); }
.sf-article figcaption { font-size: .875em; color: var(--_muted); margin-block-start: .5em; }
.sf-article figcaption .credit { display: block; font-size: .85em; }

/* ---------------------------------------------------------------- citations */
.sf-article sup.ref { vertical-align: baseline; font-size: .72em; line-height: 1; margin-inline-start: 2px; }
.sf-article sup.ref a {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.6em;
  block-size: 1.6em;
  padding: 4px;
  margin-block: -4px;
  box-sizing: content-box;
  border-radius: 6px;
  background: color-mix(in srgb, var(--_accent) 12%, transparent);
  color: var(--_accent-soft);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  background-clip: content-box;
}
.sf-article sup.ref a:hover { background-color: color-mix(in srgb, var(--_accent) 24%, transparent); }
.sf-article footer.sources {
  margin-block-start: 3em;
  padding-block-start: 1.4em;
  border-block-start: 1px solid var(--_line);
  font-size: .85em;
  line-height: 1.6;
  color: var(--_muted);
}
.sf-article footer.sources h2 { font-size: 1.25em; margin-block: 0 .8em; }
.sf-article footer.sources h2::before { content: none; }
.sf-article footer.sources ol { padding-inline-start: 1.8em; }
.sf-article footer.sources li { margin-block: .4em; }
.sf-article footer.sources li:target { color: var(--_strong); }
.sf-article footer.sources li::marker { color: var(--_muted); }
.sf-article footer.sources a { color: var(--_text); overflow-wrap: anywhere; }
.sf-article a.ref-back {
  display: inline-grid; place-items: center; min-inline-size: 24px; min-block-size: 24px;
  text-decoration: none; color: var(--_muted);
}

/* ---------------------------------------------------------------- tables */
.sf-article .sf-tbl-wrap > .sf-table { margin-block: 0; }
.sf-article .sf-tbl-cap { font-weight: 700; color: var(--_strong); margin-block: 0 .5em; }
.sf-article .sf-table:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; }
.sf-article .sf-table { overflow-x: auto; border: 1px solid var(--_line); border-radius: var(--_radius); background: var(--_surface); }
.sf-article table { inline-size: 100%; border-collapse: collapse; font-size: .92em; line-height: 1.55; margin-block: var(--_gap); }
.sf-article .sf-table table { margin: 0; }
.sf-article caption {
  caption-side: top; text-align: start; padding: 14px 16px 10px; font-weight: 700; color: var(--_strong);
}
.sf-article :where(th, td) { border: 0; border-block-start: 1px solid var(--_line); padding: 12px 16px; text-align: start; vertical-align: top; }
.sf-article thead th { color: var(--_strong); font-weight: 700; background: var(--_surface-2); }
.sf-article tbody th[scope="row"] { color: var(--_strong); font-weight: 700; }
/* numbers are LTR in every language, so their column aligns on the physical right edge */
.sf-article :where(td, th).num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; unicode-bidi: isolate; }
.sf-article :where(td, th).col-hl { background: color-mix(in srgb, var(--_accent) 9%, transparent); color: var(--_strong); }
.sf-article tfoot .verdict { color: var(--_strong); font-weight: 700; background: var(--_surface-2); }
.sf-article .sr {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* 3 and 4 columns: cards on phones (data-label carries the column name, roles keep table semantics) */
@media (max-width: 560px) {
  .sf-article table:is(.cols-3, .cols-4) thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .sf-article table:is(.cols-3, .cols-4) :is(tbody, tfoot, tr) { display: block; }
  .sf-article table:is(.cols-3, .cols-4) tr { padding: 10px 14px; border-block-start: 1px solid var(--_line); }
  .sf-article table:is(.cols-3, .cols-4) :is(th, td) {
    display: grid; grid-template-columns: 38% 1fr; gap: 10px; padding: 4px 0; border: 0; text-align: start;
  }
  .sf-article table:is(.cols-3, .cols-4) :is(th, td)[data-label]::before { content: attr(data-label); color: var(--_muted); font-weight: 400; }
  .sf-article table:is(.cols-3, .cols-4) tbody th[scope="row"] { display: block; font-size: 1.05em; padding-block-end: 6px; }
  .sf-article table:is(.cols-3, .cols-4) tbody th[scope="row"]::before { content: none; }
  .sf-article table:is(.cols-3, .cols-4) td.num { white-space: normal; direction: inherit; text-align: start; }
  .sf-article table:is(.cols-3, .cols-4) td.num::after { content: none; }
  .sf-article table:is(.cols-3, .cols-4) tfoot td { display: block; padding: 10px 0; }
}
/* R15 (T4-P10): 5+ column text tables (renderer class "cards") also become row cards; numeric matrices scroll */
@media (max-width: 560px) {
  .sf-article table.cols-wide.cards thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .sf-article table.cols-wide.cards :is(tbody, tfoot, tr) { display: block; }
  .sf-article table.cols-wide.cards tr { padding: 10px 14px; border-block-start: 1px solid var(--_line); }
  .sf-article table.cols-wide.cards :is(th, td) {
    display: grid; grid-template-columns: 38% 1fr; gap: 10px; padding: 4px 0; border: 0; text-align: start;
    position: static; background: none;
  }
  .sf-article table.cols-wide.cards :is(th, td)[data-label]::before { content: attr(data-label); color: var(--_muted); font-weight: 400; }
  .sf-article table.cols-wide.cards tbody th[scope="row"] { display: block; font-size: 1.05em; padding-block-end: 6px; }
  .sf-article table.cols-wide.cards tbody th[scope="row"]::before { content: none; }
  .sf-article table.cols-wide.cards td.num { white-space: normal; text-align: start; }
  .sf-article table.cols-wide.cards tfoot td { display: block; padding: 10px 0; }
}
/* 5+ columns keep horizontal scroll with the row label pinned */
.sf-article table.cols-wide tbody th[scope="row"],
.sf-article table.cols-wide thead th:first-child { position: sticky; inset-inline-start: 0; background: var(--sf-bg, Canvas); z-index: 1; }

/* ---------------------------------------------------------------- callouts */
.sf-article .callout {
  padding: 14px 18px;
  border-radius: var(--_radius);
  border: 1px solid color-mix(in srgb, var(--_tone, var(--_accent)) 38%, var(--_line));
  background: color-mix(in srgb, var(--_tone, var(--_accent)) 6%, var(--_surface));
  color: var(--_strong);
}
.sf-article .callout > :last-child { margin-block-end: 0; }
.sf-article .callout-label { font-weight: 700; font-size: .85em; color: var(--_tone-text, var(--_accent-soft)); margin-block-end: .3em; }
.sf-article .callout-tip { --_tone: var(--_pos); --_tone-text: var(--_pos); }
.sf-article .callout-warning { --_tone: var(--_neg); --_tone-text: var(--_neg); }
.sf-article .callout-definition { --_tone: var(--_info); --_tone-text: var(--_info); }
.sf-article .callout-disclaimer {
  font-size: .85em; color: var(--_muted); background: none; border: 0; border-block-start: 1px solid var(--_line);
  border-radius: 0; padding-inline: 0; margin-block-start: 2.5em;
}

/* ---------------------------------------------------------------- takeaways */
.sf-article .takeaways {
  padding: 18px 22px;
  border: 1px solid var(--_line);
  border-block-start: 2px solid var(--_accent);
  border-radius: var(--_radius);
  background: var(--_surface);
  color: var(--_strong);
}
.sf-article .takeaways-title { font-family: var(--_display); font-weight: 800; font-size: 1.08em; margin-block: 0 .6em; }
.sf-article .takeaways :is(ul, ol) { margin: 0; padding: 0; list-style: none; display: grid; gap: .55em; counter-reset: tk; }
.sf-article .takeaways li { position: relative; padding-inline-start: 32px; margin: 0; counter-increment: tk; }
.sf-article .takeaways li::before {
  content: counter(tk, decimal-leading-zero); position: absolute; inset-inline-start: 0;
  color: var(--_accent); font-weight: 300; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- lists: steps and checklist */
.sf-article ol.sf-steps { list-style: none; padding: 0; counter-reset: st; display: grid; gap: 1em; }
.sf-article .sf-steps > li { counter-increment: st; display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; margin: 0; }
.sf-article .sf-steps > li::before {
  content: counter(st, decimal-leading-zero);
  grid-row: span 2;
  font-weight: 300;
  font-size: 1.5em;
  line-height: 1.2;
  color: var(--_accent);
  font-variant-numeric: tabular-nums;
}
.sf-article .sf-steps .st-title { margin: 0; font-weight: 700; color: var(--_strong); }
.sf-article .sf-steps .st-body { margin: 0; }
.sf-article ul.sf-checklist { list-style: none; padding: 0; display: grid; gap: .5em; }
.sf-article .sf-checklist > li { position: relative; padding-inline-start: 28px; margin: 0; }
.sf-article .sf-checklist > li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .4em; inline-size: 16px; block-size: 16px; box-sizing: border-box;
  border: 2px solid var(--_accent); border-radius: 4px;
}

/* ---------------------------------------------------------------- quotes */
.sf-article blockquote { padding: .4em 1.2em; border-inline-start: 3px solid var(--_line); color: var(--_strong); }
.sf-article blockquote footer { font-size: .85em; color: var(--_muted); }
.sf-article figure.pullquote { margin-block: 2.2em; }
.sf-article figure.pullquote blockquote { border: 0; padding: 0; margin: 0; font: 700 1.4em/1.4 var(--_display); color: var(--_strong); }
.sf-article figure.pullquote blockquote p { margin: 0; }

/* ---------------------------------------------------------------- stats */
.sf-article .sf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding: 0; }
.sf-article .sf-stats .stat {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 16px; border: 1px solid var(--_line); border-radius: var(--_radius); background: var(--_surface);
}
.sf-article .sf-stats dt { order: 2; color: var(--_muted); font-size: .9em; line-height: 1.45; }
.sf-article .sf-stats dd { margin: 0; }
.sf-article .sf-stats .stat-v {
  order: 1; font: 300 var(--_num-xl)/1 var(--_display); color: var(--_strong);
  font-variant-numeric: tabular-nums lining-nums; unicode-bidi: isolate; text-align: start;
}
.sf-article .sf-stats .stat-n { order: 3; font-size: .82em; color: var(--_muted); }

/* ---------------------------------------------------------------- formula */
.sf-article figure.sf-formula {
  padding: 18px 20px; border-radius: var(--_radius-sm); background: var(--_surface-2);
  border-block-start: 1px solid var(--_accent); text-align: center;
}
.sf-article .sf-formula figcaption { margin: 0 0 .5em; font-size: .85em; color: var(--_muted); font-weight: 700; }
.sf-article .sf-formula-expr { font-size: 1.2em; font-weight: 700; color: var(--_strong); margin: 0 0 .6em; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.sf-article .sf-formula dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; text-align: start; margin: 0 auto; max-inline-size: 46ch; font-size: .92em; }
.sf-article .sf-formula dt { font-weight: 700; color: var(--_accent-soft); unicode-bidi: isolate; }
.sf-article .sf-formula dd { margin: 0; }
.sf-article .sf-formula .note { font-size: .85em; color: var(--_muted); margin: .6em 0 0; }

/* ---------------------------------------------------------------- example */
.sf-article .sf-example { border: 1px solid var(--_line); border-radius: 18px; background: var(--_surface); overflow: hidden; }
.sf-article .sf-example .ex-title { margin: 0; padding: 14px 18px 0; font-weight: 800; color: var(--_strong); font-family: var(--_display); }
.sf-article .sf-example .ex-given { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px; margin: 0; padding: 12px 18px; }
.sf-article .sf-example .ex-given div { display: flex; flex-direction: column; }
.sf-article .sf-example .ex-given dt { font-size: .82em; color: var(--_muted); }
.sf-article .sf-example .ex-given dd { margin: 0; font-weight: 700; color: var(--_strong); font-variant-numeric: tabular-nums; }
.sf-article .sf-example .ex-lines { margin: 0; padding: 4px 18px 14px; padding-inline-start: 2.6em; font-variant-numeric: tabular-nums; }
.sf-article .sf-example .ex-lines li { margin-block: .3em; }
.sf-article .sf-example .ex-result {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0; padding: 12px 18px;
  background: color-mix(in srgb, var(--_accent) 10%, var(--_surface)); color: var(--_strong); font-weight: 700;
}
.sf-article .sf-example .ex-result strong { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.sf-article .sf-example .ex-note { margin: 0; padding: 10px 18px; font-size: .85em; color: var(--_muted); }

/* ---------------------------------------------------------------- fixes */
.sf-article ol.sf-fixes { list-style: none; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .sf-article ol.sf-fixes:has(> li:nth-child(2)) { grid-template-columns: 1fr 1fr; } }
.sf-article .sf-fixes > li {
  margin: 0; padding: 16px 18px; border: 1px solid var(--_line); border-radius: var(--_radius); background: var(--_surface);
}
.sf-article .sf-fixes p { margin: 0 0 .4em; }
.sf-article .sf-fixes .fx-title { font-weight: 800; color: var(--_strong); }
.sf-article .sf-fixes .fx-fix span { font-weight: 700; color: var(--_accent-soft); }
.sf-article .sf-fixes .fx-why { font-size: .9em; color: var(--_muted); margin: 0; }

/* ---------------------------------------------------------------- chart */
.sf-article figure.sf-chart { padding: 16px; border: 1px solid var(--_line); border-radius: var(--_radius); background: var(--_surface); }
.sf-article .sf-chart .chart-title { margin: 0 0 .5em; font-weight: 800; color: var(--_strong); }
.sf-article .sf-chart svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.sf-article .sf-chart svg { max-inline-size: 640px; margin-inline: auto; }
.sf-article .sf-chart svg text { fill: var(--_muted); font-size: 14px; font-family: inherit; }
/* the SVG scales down to about half on phones: larger text in user units keeps labels near 11px */
@media (max-width: 560px) { .sf-article .sf-chart svg text { font-size: 21px; } }
.sf-article .sf-chart svg .v { fill: var(--_strong); font-weight: 700; }
.sf-article .sf-chart .grid line { stroke: var(--_line-soft); stroke-width: 1; }
.sf-article .sf-chart .axis line { stroke: var(--_line); }
.sf-article .sf-chart .s1 :is(rect, circle) { fill: var(--_accent); }
.sf-article .sf-chart .s1 polyline { fill: none; stroke: var(--_accent); stroke-width: 3; }
.sf-article .sf-chart .s2 :is(rect, circle) { fill: var(--_info); }
.sf-article .sf-chart .s2 polyline { fill: none; stroke: var(--_info); stroke-width: 3; stroke-dasharray: 6 4; }
.sf-article .sf-chart .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: .4em 0 0; padding: 0; list-style: none; font-size: .85em; color: var(--_muted); }
.sf-article .sf-chart .legend li::before { content: ""; display: inline-block; inline-size: 12px; block-size: 4px; margin-inline-end: 6px; vertical-align: middle; background: var(--_accent); }
.sf-article .sf-chart .legend li + li::before { background: var(--_info); }
.sf-article .sf-chart details { margin-block-start: .6em; font-size: .88em; }
.sf-article .sf-chart summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; color: var(--_muted); }
.sf-article .sf-chart details table { margin-block: .4em 0; }

/* ---------------------------------------------------------------- practitioner */
.sf-article .sf-practitioner {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center;
  padding: 16px 18px; border-radius: var(--_radius); background: var(--_surface-2);
}
.sf-article .sf-practitioner img { grid-row: span 2; inline-size: 40px; block-size: 40px; border-radius: 50%; object-fit: cover; }
.sf-article .sf-practitioner .pr-name { margin: 0; font-weight: 700; color: var(--_strong); font-size: .9em; }
.sf-article .sf-practitioner .pr-name span { font-weight: 400; color: var(--_muted); }
.sf-article .sf-practitioner .pr-body { grid-column: 1 / -1; margin: .3em 0 0; color: var(--_strong); }

/* ---------------------------------------------------------------- FAQ */
.sf-article section.faq { display: grid; gap: 10px; }
.sf-article section.faq details { border: 1px solid var(--_line); border-radius: 14px; background: var(--_surface); }
.sf-article section.faq details[open] { border-color: color-mix(in srgb, var(--_accent) 45%, var(--_line)); }
.sf-article section.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-block-size: 52px; padding: 12px 18px; font-weight: 700; color: var(--_strong); line-height: 1.5;
}
.sf-article section.faq summary::-webkit-details-marker { display: none; }
.sf-article section.faq summary::after {
  content: "+"; flex: none; inline-size: 28px; block-size: 28px; display: grid; place-items: center; border-radius: 50%;
  color: var(--_accent); border: 1px solid color-mix(in srgb, var(--_accent) 40%, var(--_line));
  transition: transform .2s ease;
}
.sf-article section.faq details[open] summary::after { transform: rotate(45deg); }
.sf-article section.faq details > :not(summary) { padding-inline: 18px; }
.sf-article section.faq details > :last-child { padding-block-end: 14px; margin-block-end: 0; }

/* ---------------------------------------------------------------- code */
.sf-article pre { overflow-x: auto; padding: 1em; border-radius: var(--_radius-sm); background: var(--_surface); direction: ltr; text-align: left; }
.sf-article code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }

/* ---------------------------------------------------------------- CTA */
.sf-article .cta {
  padding: 20px 22px;
  border-radius: var(--_radius);
  border: 1px solid color-mix(in srgb, var(--_accent) 40%, var(--_line));
  background: var(--_surface);
  color: var(--_strong);
}
.sf-article .cta p { margin-block: 0 .6em; }
.sf-article .cta > :last-child { margin-block-end: 0; }
.sf-article .cta-title { font-family: var(--_display); font-size: 1.15em; }
.sf-article .cta-disclosure { font-size: .8em; color: var(--_muted); }
.sf-article .cta-coupon code { padding: .15em .5em; border: 1px dashed var(--_accent); border-radius: 6px; direction: ltr; unicode-bidi: isolate; }
.sf-article a.cta-button {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: 46px; padding: 10px 24px;
  border-radius: var(--sf-button-radius, 100px); background: var(--_accent); color: var(--_on-accent);
  font-weight: 800; text-decoration: none;
}
.sf-article a.cta-button:hover { filter: brightness(1.06); }
.sf-article .cta-inline { padding: 14px 18px; background: transparent; }
@media (min-width: 760px) {
  .sf-article .cta-inline { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
  .sf-article .cta-inline p { margin: 0; }
}
@media (max-width: 760px) { .sf-article a.cta-button { inline-size: 100%; min-block-size: 48px; } }
.sf-article .sf-form { margin-block-start: .75em; }

/* ---------------------------------------------------------------- author card */
.sf-article .author-card {
  display: flex; gap: 1em; align-items: flex-start; padding: 16px 18px; border-radius: var(--_radius);
  border: 1px solid var(--_line); background: var(--_surface);
}
.sf-article .author-card img { inline-size: 64px; block-size: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.sf-article .author-name { margin-block-end: .25em; }
.sf-article .author-role { display: block; font-size: .85em; color: var(--_muted); font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  .sf-article * { scroll-behavior: auto; transition: none !important; }
}

/* ---------------------------------------------------------------- print (R15 T4-P13, decision 9)
   White paper, black ink, no chrome. Examples, formulas, tables and checklists never split across pages.
   body.sf-print-only + [data-print-target] prints just one checklist (the site's print button sets them). */
@media print {
  .sf-article { --_text: #000; --_strong: #000; --_muted: #333; --_surface: #fff; --_surface-2: #f3f3f3; --_line: #bbb;
    --_line-soft: #ddd; --_accent: #000; --_accent-soft: #000; --_link: #000; color: #000; background: #fff; max-inline-size: none; font-size: 11pt; }
  .sf-article :is(.cta, .sf-form, .sf-print-btn, footer.sources a.ref-back) { display: none !important; }
  .sf-article :is(.sf-example, .sf-formula, .sf-table, .sf-tbl-wrap, table, .sf-checklist, .sf-steps, .takeaways, .callout, figure, .sf-stats) {
    break-inside: avoid; page-break-inside: avoid;
  }
  .sf-article :where(h2, h3) { break-after: avoid; page-break-after: avoid; }
  .sf-article .sf-table { overflow: visible; border-color: #bbb; }
  .sf-article table.cols-wide :is(th, td) { position: static; }
  .sf-article details > :not(summary) { display: block; }
  .sf-article a[href^="http"]::after { content: none; }
  .sf-article .sf-checklist li::before { color: #000; }
}