.sbt {
  /* ---- Surfaces --------------------------------------------------------- */
  --void: #ffffff;
  --panel: #f6f9fc;
  --elevated: #eef4fa;
  --surface: #f1f5f9;
  --hairline: #e2e8f0;
  --hairline-soft: #eef2f7;

  /* ---- Text ------------------------------------------------------------- */
  --paper: #0f172a;
  --offwhite: #334155;
  --gray-300: #475569;
  /* Both of these are darker than the dark build's equivalents on purpose.
     #64748b and #94a3b8 read as comfortably muted against a near-black ground
     and as barely-there against white — #94a3b8 on white is 2.56:1, well under
     the 4.5:1 body text needs, and it was carrying the byline meta line. */
  --gray-400: #526175;
  --gray-500: #64748b;

  /* ---- Brand ------------------------------------------------------------ */
  --brand: #0284c7;
  /* The same blue, darkened, for SMALL TEXT only.
     #0284c7 on white is 4.10:1 — comfortably enough for a button fill or a
     rule, and just under the 4.5:1 that normal-size text needs. The 12px
     uppercase labels and the body links are exactly that size, so they use this
     instead (5.48:1) and every filled element keeps the brand colour itself. */
  --brand-ink: #036ba1;
  --brand-deep: #075985;
  --brand-light: #0ea5e9;
  --brand-accent: #38bdf8;
  --brand-tint: #f0f9ff;
  --brand-tint-2: #e0f2fe;
  --brand-tint-line: #bae6fd;

  /* The banner and the CTA band. A deeper blue than --brand on purpose: as a
     large solid fill it carries white text at 6.4:1, where #0284C7 manages
     only 4.1:1 and would put the headline right on the limit. */
  --brand-banner: #095fb5;
  --brand-banner-deep: #074e95;

  /* ---- Semantic --------------------------------------------------------- */
  --ok: #16a34a;
  --ok-bg: #e9f7ee;
  /* Darkened from #15803d: on the compare panel-s tinted surface that was
     4.32:1, just under the 4.5:1 a 12px label needs. */
  --ok-text: #11662f;
  --warn: #d97706;
  --warn-bg: #fdf4e3;
  --warn-text: #b45309;
  --bad: #dc2626;
  --bad-bg: #fdeceb;
  --bad-text: #b91c1c;

  /* ---- Type ------------------------------------------------------------- */
  --font-display: "Sora", var(--sb, "Satoshi-Bold"), system-ui, sans-serif;
  --font-body: "Inter", var(--sr, "Satoshi-Regular"), system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-h1: clamp(2.125rem, 1.2rem + 3.1vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.4vw, 1.875rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-sm: 0.875rem;
  --fs-cap: 0.8125rem;
  --fs-over: 0.75rem;
  --fs-mono: 0.8125rem;

  /* ---- Shape ------------------------------------------------------------ */
  --radius: 16px;
  --radius-sm: 10px;
  --measure: 720px;

  background: var(--void);
  color: var(--paper);
  font-family: var(--font-body);

}

/*
 * No page-level background rule any more.
 *
 * The dark version had to paint the whole page and then repaint the theme
 * header and footer white to keep them light. On white there is nothing to
 * fight: the article sits on the site's own background, and the header and
 * footer are untouched.
 */

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

/* The dark build needed a gradient here to ease the theme's white header into
   a near-black article. On white there is no seam to hide. */

/* ==========================================================================
   Reading progress
   ========================================================================== */

.sbt-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}

.sbt-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-accent) 100%);
  transition: width 80ms linear;
}

/* ==========================================================================
   Shell
   ========================================================================== */

.sbt-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 140px 24px 0;   /* clears the theme's fixed header, per .pg-top-space */
}

@media (max-width: 860px) {
  .sbt-wrap {
    padding-top: 96px;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */



.sbt-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-over);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0 0 16px;
}

.sbt-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 22px;
  text-wrap: balance;
}

.sbt-standfirst {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--gray-300);
  margin: 0 0 28px;
}

/* ---- Byline ------------------------------------------------------------ */

.sbt-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}

.sbt-byline__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--elevated);
  flex: 0 0 auto;
}

.sbt-byline__name {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--paper);
}

.sbt-byline__role {
  color: var(--gray-400);
  font-weight: 400;
}

.sbt-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  color: var(--gray-500);
  letter-spacing: 0.01em;
  margin: 0 0 20px;
}

.sbt-meta__dot {
  opacity: 0.6;
  padding: 0 6px;
}

/* ---- Tags -------------------------------------------------------------- */

.sbt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sbt-tags li a,
.sbt-tag {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  color: var(--gray-300);
  text-decoration: none;
  background: var(--surface);
  transition: border-color 160ms ease, color 160ms ease;
}

.sbt-tags li a:hover {
  border-color: var(--brand);
  color: var(--brand-light);
}

/* ---- Hero image -------------------------------------------------------- */

.sbt-hero {
  max-width: var(--measure);
  margin: 30px auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--panel);
}

.sbt-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Body — single centred column, no sidebar
   ========================================================================== */

.sbt-cols {
  padding: 0 0 0;
}

.sbt-body {
  margin: 0 auto;
  min-width: 0;
}

.sbt-body > * {
  max-width: 100%;
}

.sbt-body p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--gray-300);
  margin: 0 0 22px;
}

.sbt-body strong {
  color: var(--paper);
  font-weight: 600;
}

.sbt-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 56px 0 18px;
  scroll-margin-top: 110px;
}

.sbt-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--paper);
  margin: 34px 0 12px;
  scroll-margin-top: 110px;
}

.sbt-body h2:first-child,
.sbt-body h3:first-child {
  margin-top: 0;
}

.sbt-body a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.sbt-body a:hover {
  color: var(--brand-light);
}

.sbt-body ul,
.sbt-body ol {
  margin: 0 0 22px;
  padding-left: 22px;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--gray-300);
}

.sbt-body li {
  margin: 0 0 8px;
}

.sbt-body li::marker {
  color: var(--brand);
}

.sbt-body blockquote {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--brand);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--paper);
}

.sbt-body blockquote p:last-child {
  margin-bottom: 0;
}

.sbt-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.sbt-body figure {
  margin: 30px 0;
}

.sbt-body figcaption {
  margin-top: 10px;
  font-size: var(--fs-cap);
  color: var(--gray-500);
}

.sbt-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--brand-light);
}

.sbt-body pre {
  margin: 26px 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.sbt-body pre code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--offwhite);
  font-size: var(--fs-mono);
  line-height: 1.6;
}

/* ==========================================================================
   Component: key takeaways   [sac_takeaways]
   ========================================================================== */

.sbt-takeaways {
  margin: 0 0 38px;
  padding: 24px 26px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
}

.sbt-takeaways .sbt-takeaways__title {
  font-family: var(--font-mono);
  font-size: var(--fs-over);
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0 0 14px;
}

.sbt-takeaways ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sbt-takeaways li {
  position: relative;
  padding-left: 26px;
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--gray-300);
}

.sbt-takeaways li:last-child {
  margin-bottom: 0;
}

.sbt-takeaways li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand);
}

/* ==========================================================================
   Component: callout   [sac_callout]
   ========================================================================== */

.sbt-callout {
  margin: 30px 0;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--panel);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--gray-300);
}

.sbt-callout .sbt-callout__label {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  margin: 0 0 6px;
  color: var(--paper);
}

.sbt-callout p {
  margin: 0 0 12px;
}

.sbt-callout p:last-child {
  margin-bottom: 0;
}

.sbt-callout--note {
  border-left: 3px solid var(--brand);
}

.sbt-callout--warn {
  background: var(--warn-bg);
  border-color: #f5e2c0;
  border-left: 3px solid var(--warn);
}

.sbt-callout--warn .sbt-callout__label {
  color: var(--warn-text);
}

.sbt-callout--ok {
  background: var(--ok-bg);
  border-color: #bfe3cc;
  border-left: 3px solid var(--ok);
}

.sbt-callout--ok .sbt-callout__label {
  color: var(--ok-text);
}

/* ==========================================================================
   Component: expected / actual comparison   [sac_compare]
   ========================================================================== */

.sbt-compare {
  margin: 30px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sbt-compare__side {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  min-width: 0;
}

.sbt-compare__label {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-over);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-400);
  background: rgba(15, 23, 42, 0.03);
  border-bottom: 1px solid var(--hairline);
}

.sbt-compare .sbt-compare__code {
  margin: 0;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.6;
  color: var(--offwhite);
  white-space: pre-wrap;
  word-break: break-word;
}

.sbt-compare__side--was .sbt-compare__label {
  color: var(--bad-text);
}

.sbt-compare__side--now .sbt-compare__label {
  color: var(--ok-text);
}

/* ==========================================================================
   Component: numbered steps grid   [sac_steps]
   ========================================================================== */

.sbt-steps {
  margin: 30px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
}

.sbt-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-300);
  margin: 0;
}

.sbt-steps__n {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  color: var(--brand-ink);
  background: var(--brand-tint-2);
  border-radius: 6px;
  padding: 3px 7px;
  flex: 0 0 auto;
}

/* ==========================================================================
   Component: split outcome panel   [sac_split]
   ========================================================================== */

.sbt-split {
  margin: 34px 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.sbt-split__head {
  margin: 0;
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-over);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-accent) 100%);
}

.sbt-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sbt-split__side {
  padding: 20px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel);
}

.sbt-split .sbt-split__label {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gray-400);
  margin: 0 0 14px;
}

.sbt-split__flow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--gray-300);
  margin: 0 0 16px;
}

.sbt-split__node {
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface);
}

.sbt-split__arrow {
  color: var(--gray-500);
}

.sbt-split__result {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.6;
  font-weight: 600;
}

.sbt-split__result--ok {
  background: var(--ok-bg);
  color: var(--ok-text);
}

.sbt-split__result--bad {
  background: var(--bad-bg);
  color: var(--bad-text);
}

/* ==========================================================================
   Component: data table   [sac_table]
   ========================================================================== */

.sbt-tablewrap {
  margin: 30px 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.sbt-tablescroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sbt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 520px;
}

.sbt-table th {
  text-align: left;
  padding: 10px 12px;
  line-height: 1.6;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.sbt-table td {
  padding: 12px;
  line-height: 1.6;
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--gray-300);
  vertical-align: top;
}

.sbt-table tr:last-child td {
  border-bottom: 0;
}

.sbt-table tbody tr:hover td {
  background: rgba(2, 132, 199, 0.04);
}

.sbt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  white-space: nowrap;
}

.sbt-pill--ok {
  background: var(--ok-bg);
  color: var(--ok-text);
}

.sbt-pill--warn {
  background: var(--warn-bg);
  color: var(--warn-text);
}

.sbt-pill--bad {
  background: var(--bad-bg);
  color: var(--bad-text);
}

.sbt-pill--neutral {
  background: var(--elevated);
  color: var(--gray-300);
}

.sbt-tablewrap__foot {
  margin: 0;
  padding: 11px 16px;
  font-size: var(--fs-cap);
  color: var(--gray-500);
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}

/* ==========================================================================
   Component: inline CTA band   [sac_cta]
   ========================================================================== */

.sbt-cta {
  margin: 38px 0;
  padding: 26px 28px;
  border-radius: var(--radius);
  /* Solid #095FB5, matching the banner, instead of the pale tint it used to be.
     Everything inside had to invert with it — see the two rules below. */
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 60%),
    var(--brand-banner);
  border: 1px solid var(--brand-banner-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}

/*
 * Scoped under .sbt-cta for the same reason the button is.
 *
 * The CTA is a paragraph inside the post body, so .sbt-body p matches it at
 * (0,1,1) — which beats a bare .sbt-cta__text at (0,1,0). The white below was
 * being thrown away and the text stayed --gray-300, which on #095FB5 measures
 * 1.2:1: effectively invisible. .sbt-cta .sbt-cta__text is (0,2,0) and wins.
 */
.sbt-cta .sbt-cta__text {
  font-size: 1.0625rem;
  line-height: 1.5;
  /* Was --paper (#0F172A). Near-black on #095FB5 is about 1.8:1 — illegible.
     White is 6.3:1. */
  color: #ffffff;
  margin: 0;
  max-width: 34em;
}

/*
 * Scoped under .sbt-cta on purpose.
 *
 * The CTA lives inside the post content, so .sbt-body a also matches it — and
 * that selector is (0,1,1) against a bare .sbt-cta__btn at (0,1,0), so the body
 * link colour won and the button rendered brand-red text on a brand-red
 * gradient. Adding the parent class takes this to (0,2,0), which beats it.
 */
.sbt-cta .sbt-cta__btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  /* The button sits on #095FB5 now, so a blue gradient would sink into its own
     background. Inverted: a white pill with blue text — 6.4:1 against the band
     so the button is clearly a button, and 8.3:1 for the label inside it. */
  background: #ffffff;
  color: var(--brand-banner-deep);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.sbt-cta .sbt-cta__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 24px rgba(0, 0, 0, 0.18);
  /* Repeated because .sbt-body a:hover would otherwise recolour it. */
  color: var(--brand-banner-deep);
}

/* ==========================================================================
   Component: FAQ accordion   [sac_faq]
   ========================================================================== */

.sbt-faqs {
  margin: 38px 0 0;
}

.sbt-faq {
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}

.sbt-faq:first-of-type {
  border-top: 1px solid var(--hairline);
}

.sbt-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--paper);
}

.sbt-faq > summary::-webkit-details-marker {
  display: none;
}

.sbt-faq > summary:hover {
  color: var(--brand-light);
}

.sbt-faq__chev {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--brand);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sbt-faq[open] .sbt-faq__chev {
  transform: rotate(180deg);
}

.sbt-faq__body {
  padding: 0 2px 20px;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--gray-300);
}

.sbt-faq .sbt-faq__body p {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.sbt-faq__body p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Share, author, related
   ========================================================================== */

.sbt-share {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 48px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}

.sbt-share__label {
  font-family: var(--font-mono);
  font-size: var(--fs-over);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.sbt-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--gray-300);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.sbt-share a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.sbt-author {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 30px 0 0;
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel);
}

.sbt-author__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--elevated);
}

.sbt-author__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--paper);
  margin: 0 0 4px;
}

.sbt-author__bio {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--gray-400);
  margin: 0;
}

/* ---- Related ----------------------------------------------------------- */

.sbt-related {
  margin: 50px auto 0;
  padding: 48px 0 96px;
  border-top: 1px solid var(--hairline);
}

.sbt-related__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--paper);
  margin: 0 0 24px;
}

.sbt-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.sbt-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  transition: transform 180ms ease, border-color 180ms ease;
}

.sbt-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-tint-line);
}

.sbt-card__media {
  aspect-ratio: 16 / 9;
  background: var(--surface);
  overflow: hidden;
}

.sbt-card__media img {
  width: 100%;
  height: 70%;
  object-fit: cover;
  display: block;
}

.sbt-card__body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

.sbt-card__date {
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  color: var(--gray-500);
}

.sbt-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
}

.sbt-card__title a {
  color: var(--paper);
  text-decoration: none;
}

.sbt-card__title a:hover {
  color: var(--brand-light);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 760px) {
  .sbt-compare,
  .sbt-split__grid,
  .sbt-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The sides used to be one panel divided by a rule, so stacking them meant
     swapping that rule from the left edge to the top. Each side is now its own
     bordered card, which stacks correctly on its own. */

  .sbt-related__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sbt-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Print
   ==========================================================================
   A dark ground prints as a full page of toner with grey text on grey. The
   article is inverted back to paper for printing. */

@media print {
  .sbt-progress,
  .sbt-share,
  .sbt-cta,
  .sbt-related {
    display: none !important;
  }

  /* Open every answer — a printed FAQ with collapsed answers is a list of
     questions. */
  .sbt-faq .sbt-faq__body {
    display: block !important;
  }
}

/* ==========================================================================
   Banner
   ==========================================================================

   A dark full-bleed band carrying the category and the headline, with the
   featured image — or a drawn stand-in — on the right.

   DARK, ON A LIGHT PAGE, ON PURPOSE. The rest of the article is white; this one
   band is not. That is the point of a banner: it separates the headline from
   the reading column instead of letting the two run together. It is the same
   move the reference design makes, in Sacumen's navy rather than its maroon.

   FULL BLEED WITHOUT THE USUAL TRAP. Not 100vw with a negative margin: vw
   counts the scrollbar, so that technique makes the page a scrollbar's width
   too wide and adds a horizontal scroll. The band is a normal block and the
   INNER element is what has a max-width, which needs no viewport units at all.
   ========================================================================== */

.sbt-banner {
  position: relative;
  overflow: hidden;
  /* #095FB5 is the band. The white glow and the slightly deeper foot keep it
     from reading as a flat rectangle without moving it off the brand colour —
     both ends are the same hue, only lighter and darker. */
  background:
    radial-gradient(90% 120% at 72% 40%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, var(--brand-banner) 0%, var(--brand-banner) 58%, #074e95 100%);
  padding: 92px 24px 84px;
}

/* The dot grid. A repeating-radial-gradient rather than an image: no request,
   and it scales without going soft. */
.sbt-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.sbt-banner__inner {
  position: relative;      /* above the dot grid */
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  /* The text gets the larger share. The diagram is a 420px drawing that scales
     down happily; a headline that has run out of room cannot. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: 48px;
}

/* ---- Text ---------------------------------------------------------------- */

.sbt-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 7px 15px 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  /* Darkens the band rather than lightening it. Lightening put white at 4.6:1
     and the old pale-blue text at 3.4:1 — under the 4.5:1 floor for text this
     small. Going darker takes white to 7.6:1. */
  background: rgba(0, 0, 0, 0.14);
  font-family: var(--font-mono);
  font-size: var(--fs-over);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
}

.sbt-banner__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22);
  flex: 0 0 auto;
}

.sbt-banner .sbt-title {
  color: #ffffff;
  margin: 0;
  /* Not --fs-h1. That is sized for the 720px reading measure; the banner's text
     column is narrower, so the same 56px ran a long headline to five lines where
     the reference sets three. Sized to the column it actually occupies. */
  font-size: clamp(1.875rem, 1.1rem + 2vw, 2.5rem);
  /* No max-width either: the grid column already sets the measure. */
  text-wrap: balance;
}

/* ---- Media --------------------------------------------------------------- */

.sbt-banner__media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.sbt-banner__img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(186, 230, 253, 0.16);
  display: block;
}

.sbt-banner__diagram {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
}

.sbt-banner__needed {
 display:none;
}

/* ---- The drawn stand-in -------------------------------------------------- */

/* The drawing was built for a near-black band, where a dark node read as a
   hole punched in the background. On blue it has to go the other way: nodes
   are a deeper blue than the band and the strokes are white. */

.sbt-dg__link path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 1.5;
}

.sbt-dg__node {
  fill: var(--brand-banner-deep);
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.5;
}

.sbt-dg__node--ok { stroke: #6ee7a8; stroke-width: 2; }
.sbt-dg__node--bad { stroke: #ffd7a8; stroke-width: 2; }
.sbt-dg__node--dim { fill: #063f79; stroke: rgba(255, 255, 255, 0.24); }

.sbt-dg__mark {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sbt-dg__mark--ok { stroke: #6ee7a8; }
.sbt-dg__mark--bad { stroke: #ffd7a8; }

.sbt-dg__label {
  fill: #ffffff;
  font-family: var(--font-mono);
  font-size: 13px;
  text-anchor: middle;
}

.sbt-dg__caption {
  fill: rgba(255, 255, 255, 0.82);
  font-family: var(--font-mono);
  font-size: 12px;
  text-anchor: middle;
}

/* The page's own top padding was clearing a fixed header; the banner does that
   job now, so the reading column starts straight after it. */
.sbt-banner + .sbt-wrap {
  padding-top: 44px;
}

/* ---- Small screens ------------------------------------------------------- */

@media (max-width: 860px) {
  .sbt-banner {
    padding: 64px 20px 56px;
  }

  .sbt-banner__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  /* The diagram is decoration, and on a phone it costs a screenful before the
     reader reaches a word of the article. */
  .sbt-banner__diagram {
    display: none;
  }

  .sbt-banner__needed {
    align-self: flex-start;
  }
}

/* ==========================================================================
   Component: figures   [sac_stat] [sac_stats]  + table caption
   ==========================================================================

   Measured off the reference rather than eyeballed. Its computed values:

       tile      background --panel, 0.8px solid --hairline, radius 16px,
                 padding 20px
       number    Sora 800 36px / 1.6
       label     Inter 13px / 1.6, --gray-400
       panel     grid 266px + 422px, gap 24px   (tile, then the prose)
       row       grid 3 x 1fr, gap 16px
       caption   JetBrains Mono 12px, 0.06em, brand colour, centred

   The only deliberate departure is the footnote colour: the reference uses its
   --gray-500, which on this white ground is 2.8:1. --gray-400 is 4.6:1 and
   clears AA at that size. */

.sbt-stat {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px;
}

/*
 * Every one of these is scoped under its parent, and it is not decoration.
 *
 * The figures are <p> elements sitting inside .sbt-body, so `.sbt-body p` at
 * (0,1,1) beats a bare `.sbt-stat__n` at (0,1,0). Written unscoped, the 36px
 * display number rendered at 17px in body grey — the layout looked right and
 * the type was silently overruled. That is the third component in this file to
 * hit it, after .sbt-cta__btn and .sbt-cta__text.
 */
.sbt-stat .sbt-stat__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.25rem;       /* 36px */
  line-height: 1.2;
  color: var(--paper);
  margin: 0 0 2px;
}

.sbt-stat .sbt-stat__l {
  font-size: 0.8125rem;     /* 13px */
  line-height: 1.6;
  color: var(--gray-400);
  margin: 0;
}

/* One figure with its explanation beside it. */
.sbt-statpanel {
  display: grid;
  grid-template-columns: minmax(0, 0.63fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin: 0 0 32px;
}

.sbt-statpanel .sbt-statpanel__body p {
  font-size: 0.875rem;      /* 14px */
  line-height: 1.6;
  color: var(--gray-300);
  margin: 0 0 10px;
}

.sbt-statpanel .sbt-statpanel__body p:last-child { margin-bottom: 0; }

/* A row of figures. */
.sbt-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 56px;
}

/* The caption under a table or figure. */
.sbt-body .sbt-figcap,
.sbt-figcap.sbt-figcap {
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  letter-spacing: 0.06em;
  /* --brand-ink, not --brand: this is 12px text on white, where #0284C7 is
     4.10:1 and misses the 4.5:1 floor. */
  color: var(--brand-ink);
}

/* The grey disclaimer under a caption. Measured at 12px in the reference,
   set here at --fs-cap on --gray-400: the reference grey is 2.8:1 on white. */
.sbt-body .sbt-fignote,
.sbt-fignote.sbt-fignote {
  margin: 6px 0 36px;
  text-align: center;
  font-size: var(--fs-cap);
  line-height: 1.6;
  color: var(--gray-400);
}

/* The caption sits directly under the table, the note under the caption. */
.sbt-body .sbt-figcap + .sbt-fignote {
  margin-top: 6px;
}

@media (max-width: 720px) {
  .sbt-statpanel,
  .sbt-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* =========================================================================
   Connector blog — stylesheet
   =========================================================================

   Was 167 inline style attributes and the page builder's runtime CSS.
   Now: design tokens, a few base rules, and one class per component part.

   Naming is cxb-<block>__<part>. A --2 suffix means that part appears in two
   variants (an ok badge and a bad badge, say) rather than being a duplicate.

   Dropped: the builder's own .sc-* placeholder/streaming rules, x-dc,
   #dc-root sizing and its print baseline — none of it applies to a static
   page. body{} is scoped to .cxb-page so this markup can be dropped into a
   host page without restyling it.
   ========================================================================= */

:root{--font-display:'Sora',sans-serif;--font-body:'Inter',sans-serif;--font-mono:'JetBrains Mono',monospace;}
:root{
--void:#FFFFFF;--ink:#F6F9FC;--panel:#F6F9FC;--elevated:#EEF4FA;--hairline:#E2E8F0;--surface:#F1F5F9;
--gray-300:#475569;--gray-400:#526175;--gray-500:#64748B;
--paper:#0F172A;--offwhite:#334155;--white:#FFFFFF;
--teal-400:#3FB6A8;--teal-500:#2C9C8F;--teal-600:#1F7A70;
--success-base:#22C55E;--success-dark-bg:#E9F7EE;--success-light-bg:#DCFCE7;--success-text:#11662F;--success-on:#05270F;
--warning-base:#EAB308;--warning-dark-bg:#FDF4E3;--warning-light-bg:#FEF9C3;--warning-text:#B45309;--warning-on:#231400;
--info-base:#3B82F6;--info-dark-bg:#E0F2FE;--info-light-bg:#DBEAFE;--info-text:#1D4ED8;--info-on:#FFFFFF;
--error-base:#DC2626;--error-dark-bg:#FDECEB;--error-light-bg:#FFE1E7;--error-text:#B91C1C;--error-on:#FFFFFF;
--brand:#0284C7;--brand-ink:#036BA1;--brand-dark:#036BA1;--brand-deep:#075985;--brand-light:#0EA5E9;--brand-accent:#38BDF8;--brand-accent-hover:#7DD3FC;--cta-fill-hover:#064E7A;
--brand-tint:#F0F9FF;--brand-tint-soft:#F8FCFF;--brand-tint-line:#BAE6FD;
--brand-dark-tint:#E0F2FE;--brand-dark-tint-2:#DBEAFE;--brand-dark-tint-3:#F0F9FF;--brand-dark-tint-line:#BAE6FD;--brand-dark-tint-edge:#7DD3FC;
--surface-void:var(--void);--surface-ink:var(--ink);--surface-panel:var(--panel);--surface-elevated:var(--elevated);--surface-hairline:var(--hairline);--surface-card:var(--surface);
--surface-paper:#FFFFFF;--surface-offwhite:#F8FAFC;
--text-primary-dark:var(--paper);--text-secondary-dark:var(--gray-300);--text-muted-dark:var(--gray-500);--text-disabled-dark:#94A3B8;
--text-primary-light:#0F172A;--text-secondary-light:#475569;--text-muted-light:var(--gray-500);--text-disabled-light:#94A3B8;
--border-dark:var(--hairline);--border-light:#E2E8F0;
--link-dark:#036BA1;--link-dark-hover:#075985;
--link-light:var(--brand-dark);--link-light-hover:var(--brand-deep);
--gradient-brand:linear-gradient(90deg,#0B6CCB 0%,#095FB5 100%);
--gradient-hero-glow:radial-gradient(circle at 30% 20%,rgba(2,132,199,.10) 0%,rgba(2,132,199,0) 60%),#FFFFFF;
--gradient-panel-sheen:linear-gradient(180deg,rgba(15,23,42,.03) 0%,rgba(15,23,42,0) 40%);
--gradient-cta:linear-gradient(135deg,#095FB5 0%,#0284C7 100%);
--gradient-flame-hot:linear-gradient(160deg,#0EA5E9 0%,#38BDF8 100%);
--gradient-flame-deep:linear-gradient(100deg,#095FB5 0%,#0284C7 55%,#38BDF8 100%);
--gradient-flame-deep-soft:linear-gradient(100deg,#075985 0%,#0284C7 60%,#38BDF8 100%);
--dataviz-1:var(--brand);--dataviz-2:var(--brand-accent);--dataviz-3:var(--brand-light);--dataviz-4:var(--warning-base);--dataviz-5:var(--success-base);--dataviz-6:var(--info-base);--dataviz-7:var(--brand-deep);--dataviz-8:var(--gray-300);
}
:root{
--fs-display:64px;--lh-display:1.05;--ls-display:-0.02em;--fw-display:800;
--fs-h1:48px;--lh-h1:1.1;--ls-h1:-0.02em;--fw-h1:700;
--fs-h2:36px;--lh-h2:1.15;--ls-h2:-0.01em;--fw-h2:700;
--fs-h3:28px;--lh-h3:1.2;--ls-h3:-0.01em;--fw-h3:600;
--fs-h4:22px;--lh-h4:1.25;--ls-h4:0;--fw-h4:600;
--fs-h5:18px;--lh-h5:1.3;--ls-h5:0;--fw-h5:600;
--fs-h6:16px;--lh-h6:1.35;--ls-h6:0.01em;--fw-h6:600;
--fs-body-lg:19px;--lh-body-lg:1.6;--fw-body-lg:400;
--fs-body:16px;--lh-body:1.6;--fw-body:400;
--fs-body-sm:14px;--lh-body-sm:1.55;--fw-body-sm:400;
--fs-caption:13px;--lh-caption:1.4;--fw-caption:500;
--fs-overline:12px;--lh-overline:1.3;--ls-overline:0.12em;--fw-overline:600;
--fs-mono:13px;--lh-mono:1.5;--fw-mono:500;--ls-mono:0.01em;
}
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
--container-max:1280px;--gutter-desktop:32px;--gutter-tablet:24px;--gutter-mobile:16px;--margin-desktop:80px;--margin-tablet:40px;--margin-mobile:20px;
--bp-mobile:375px;--bp-tablet:768px;--bp-desktop:1280px;--bp-wide:1440px;
}
:root{
--radius-sm:10px;--radius-base:16px;--radius-pill:9999px;--radius-none:0px;
--elevation-1:0 1px 2px rgba(0,0,0,.24),0 0 0 1px var(--hairline);
--elevation-2:0 4px 12px rgba(0,0,0,.32),0 0 0 1px var(--hairline);
--elevation-3:0 12px 32px rgba(0,0,0,.40),0 0 0 1px var(--hairline);
--glow-brand:0 0 0 1px rgba(2,132,199,.35),0 0 24px rgba(2,132,199,.25);
--z-nav:100;--z-sticky:200;--z-overlay:900;--z-modal:1000;--z-toast:1100;
}
:root{
--motion-fast:120ms;--motion-standard:200ms;--motion-slow:400ms;
--ease-flame:cubic-bezier(0.22,1,0.36,1);
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;}}
*{box-sizing:border-box}
.cxb-page{margin:0;background:var(--surface-void);color:var(--text-primary-dark);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);margin:0}
a{color:var(--link-dark)}
a:hover{color:var(--link-dark-hover)}
code,kbd,.mono{font-family:var(--font-mono)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
a{color:var(--brand-ink)}
a:hover{color:var(--brand-deep)}
.cxb-prose p{margin:0 0 22px;font-family:var(--font-body);font-size:17px;line-height:1.7;color:var(--gray-300)}
.cxb-prose h2{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1.2;color:var(--paper);margin:52px 0 18px}
.cxb-subhead{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--paper);margin:0 0 12px}
details.cxb-faq summary{cursor:pointer;list-style:none}
details.cxb-faq summary::-webkit-details-marker{display:none}
details.cxb-faq[open] .cxb-chev{transform:rotate(180deg)}
.cxb-chev{transition:transform 200ms cubic-bezier(0.22,1,0.36,1)}

/* ---- components ------------------------------------------------------- */



.cxb-page__text--2 {
  margin: 0px auto;
  padding: 10px 5px 30px;
}

.cxb-breadcrumb__row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-500);
  font-family: var(--font-mono);
}

.cxb-breadcrumb__text {
  margin-right: 8px;
}

.cxb-eyebrow__text {
  margin: 28px 0px 16px;
}

.cxb-eyebrow__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background:#095FB5;
  color: rgb(255, 255, 255);
}

.cxb-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0px 0px 24px;
}

.cxb-byline__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}

.cxb-byline__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: rgb(255, 255, 255);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}

.cxb-byline__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gray-300);
}

.cxb-byline__text--2 {
  color: var(--paper);
  font-weight: 600;
}

.cxb-byline__text--3 {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

.cxb-prose__media {
  width: 100%;
  aspect-ratio: 1200 / 630;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}

.cxb-tags__row {
  display: flex;
  gap: 8px;
}

.cxb-tags__row--2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  background: var(--elevated);
  border: 1px solid var(--hairline);
  color: var(--gray-300);
}

.cxb-takeaways__card {
  background: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-base);
  overflow: hidden;
}

.cxb-takeaways__label {
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
}

.cxb-takeaways__text {
  padding: 20px;
}

.cxb-takeaways__list {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cxb-takeaways__item {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-300);
}

.cxb-takeaways__text--2 {
  color:var(--brand-ink);
  flex-shrink: 0;
  margin-top: 2px;
}

.cxb-callout__text {
  margin: 28px 0px 40px;
}

.cxb-callout__text--2 {
  background: var(--info-dark-bg);
  border-radius: var(--radius-sm);
  padding: 16px;
  border-left: 3px solid var(--info-text);
}

.cxb-callout__text--3 {
  font-weight: 600;
  color: var(--info-text);
  margin-bottom: 4px;
}

.cxb-callout__text--4 {
  font-size: 14px;
  color: var(--gray-300);
}

.cxb-compare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}

.cxb-compare__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.cxb-compare__code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--elevated);
  color:var(--brand-deep);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  display: block;
  border: 1px solid var(--hairline);
  white-space: pre;
}

.cxb-reqs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.cxb-reqs__card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-base);
  padding: 18px;
  box-shadow: var(--elevation-1);
}

.cxb-reqs__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.cxb-reqs__text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color:var(--brand-ink);
}

.cxb-reqs__text--2 {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-300);
}

.cxb-splitlead__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  text-align: center;
  margin-bottom: 16px;
}

.cxb-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}

.cxb-split__card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-base);
  padding: 20px;
  box-shadow: var(--elevation-1);
}

.cxb-split__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 10px;
}

.cxb-split__text {
  font-size: 16px;
}

.cxb-split__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--success-dark-bg);
  color: var(--success-text);
}

.cxb-split__badge--2 {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--error-dark-bg);
  color: var(--error-text);
}

.cxb-prose__heading {
  margin-top: 0px;
}

.cxb-matrix__text {
  margin-bottom: 40px;
}

.cxb-matrix__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.cxb-matrix__th {
  text-align: left;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  border-bottom: 1px solid var(--hairline);
}

.cxb-matrix__row {
  cursor: default;
  transition: background var(--motion-fast) var(--ease-flame);
}

.cxb-matrix__td {
  padding: 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--gray-300);
}

.cxb-inlinecta__card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-base);
  padding: 28px;
  box-shadow: var(--glow-brand);
}

.cxb-inlinecta__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.cxb-inlinecta__text {
  font-size: 16px;
  color: var(--paper);
  font-weight: 600;
}

.cxb-inlinecta__btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--motion-standard) var(--ease-flame);
  min-height: 44px;
  padding: 0px 20px;
  background:#095FB5;
  color: rgb(255, 255, 255);
  opacity: 1;
}

.cxb-prose__text {
  margin-top: 44px;
}

.cxb-statpanel__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 32px;
}

.cxb-statpanel__card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-base);
  padding: 20px;
}

.cxb-statpanel__value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  background-image: var(--gradient-brand);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cxb-statpanel__text {
  font-size: 13px;
  color: var(--gray-400);
  margin-top: 4px;
}

.cxb-statpanel__text--2 {
  font-size: 14px;
  color: var(--gray-300);
  line-height: 1.6;
}

.cxb-envtable__card {
  background: var(--surface-paper,#FFFFFF);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--elevation-2);
  margin-bottom: 12px;
}

.cxb-envtable__row {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  background: rgb(241, 245, 249);
}

.cxb-envtable__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgb(255, 95, 87);
}

.cxb-envtable__dot--2 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgb(254, 188, 46);
}

.cxb-envtable__dot--3 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgb(40, 200, 64);
}

.cxb-envtable__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 16px 20px;
  background: rgb(241, 245, 249);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(82, 97, 117);
  font-weight: 600;
}

.cxb-envtable__grid--2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 18px 20px;
  border-top: 1px solid rgb(226, 232, 240);
}

.cxb-envtable__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: rgb(15, 23, 42);
}

.cxb-envtable__badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgb(15, 23, 42);
  font-size: 13px;
  color: rgb(51, 65, 85);
}

.cxb-envtable__row--2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(17, 102, 47);
}

.cxb-envtable__row--3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(180, 83, 9);
}

.cxb-envtable__badge--2 {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgb(201, 194, 178);
  font-size: 13px;
  color: rgb(51, 65, 85);
}

.cxb-envtable__text--2 {
  padding: 16px 20px;
  border-top: 1px solid rgb(226, 232, 240);
  font-size: 13px;
  color: rgb(82, 97, 117);
  font-style: italic;
}

.cxb-figcap__text {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color:var(--brand-ink);
  margin-bottom: 6px;
}

.cxb-fignote__text {
  text-align: center;
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
  margin-bottom: 36px;
}

.cxb-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 56px;
}

.cxb-stats__card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-base);
  padding: 20px;
}

.cxb-stats__value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  background-image: var(--gradient-brand);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cxb-stats__text {
  font-size: 13px;
  color: var(--gray-400);
  margin-top: 4px;
}

.cxb-faq__text {
  border-top: 1px solid var(--hairline);
  padding: 20px 0px;
}

.cxb-faq__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.cxb-faq__text--2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--paper);
}

.cxb-faq__text--3 {
  color: var(--gray-500);
  flex-shrink: 0;
}

.cxb-faq__text--4 {
  margin: 14px 0px 0px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-300);
}

.cxb-prose__text--2 {
  border-bottom: 1px solid var(--hairline);
}

.cxb-band__card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-base);
  padding: 0px;
  box-shadow: var(--glow-brand);
}

.cxb-band__text {
  max-width: 1280px;
  margin: 0px auto;
  padding: 64px 24px;
  text-align: center;
}

.cxb-band__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--paper);
  margin-bottom: 16px;
}

.cxb-band__text--2 {
  font-size: 16px;
  color: var(--gray-300);
  margin-bottom: 28px;
}

.cxb-band__btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--motion-standard) var(--ease-flame);
  min-height: 52px;
  padding: 0px 28px;
  background: var(--gradient-brand);
  color: rgb(255, 255, 255);
  opacity: 1;
}



/* ==========================================================================
   Responsive
   --------------------------------------------------------------------------
   This stylesheet had exactly one media query — prefers-reduced-motion — and
   no responsive layout at all. Every grid kept its desktop column count at
   every width. MEASURED on the live page at 375px, inside a 317px column:

     .cxb-stats__grid      tracks 176.4 + 148.4 + 126.2 + 32 gap  = 483px
     .cxb-compare__grid    tracks 306.8 + 322.4 + 16  gap         = 645px
     .cxb-envtable__grid   three 92.4px tracks — fits, but the "Live OEM"
                           badge lands on top of the environment name
     .cxb-matrix__table    344px in a 327px column
     .cxb-reqs__grid       cards 27px past the right edge

   WHY THEY OVERFLOWED RATHER THAN SQUEEZED. The tracks are declared 1fr 1fr
   1fr yet resolved to 176/148/126 — unequal. A 1fr track has an automatic
   minimum of min-content, so "200+" set at 40px puts a floor under its track
   and the row grows instead of shrinking. Every template below therefore uses
   minmax(0, 1fr), which is what actually lets a track become narrower than its
   content.

   The column count is a custom property so a breakpoint sets one number
   instead of restating the whole template.
   ========================================================================== */

.cxb-stats__grid,
.cxb-compare__grid,
.cxb-reqs__grid,
.cxb-split__grid,
.cxb-envtable__grid,
.cxb-envtable__grid--2 {
  grid-template-columns: repeat(var(--cxb-cols, 3), minmax(0, 1fr));
}

.cxb-compare__grid,
.cxb-reqs__grid,
.cxb-split__grid { --cxb-cols: 2; }

/* The statpanel is a figure beside its explanation, not equal columns. */
.cxb-statpanel__grid { grid-template-columns: auto minmax(0, 1fr); }

@media (max-width: 860px) {
  /* Two across before one: three stats at ~430px each still read well. */
  .cxb-stats__grid { --cxb-cols: 2; }
}

@media (max-width: 720px) {
  /* Two code panels at ~160px each are unreadable. Stacked, each gets the
     full column and keeps its own label. */
  .cxb-compare__grid,
  .cxb-split__grid { --cxb-cols: 1; }
}

@media (max-width: 600px) {
  .cxb-reqs__grid { --cxb-cols: 1; }
  /* The figure sits above its text rather than beside it. */
  .cxb-statpanel__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .cxb-stats__grid { --cxb-cols: 1; }
}

/* ---- The environment table ------------------------------------------------
   Three 92px tracks is what put the "Live OEM" badge on top of "Splunk
   Enterprise 9.2". The markup is three plain cells per row with no data-label
   to drive a stacked list, so rather than invent one the row keeps its grid
   and gives the name a row of its own: name across the top, track and status
   beneath. The header row gets the same treatment so the two still line up and
   the column names are not lost. */
@media (max-width: 600px) {
  .cxb-envtable__grid,
  .cxb-envtable__grid--2 {
    --cxb-cols: 2;
    row-gap: 10px;
    column-gap: 12px;
    align-items: center;
  }
  .cxb-envtable__grid > :first-child,
  .cxb-envtable__grid--2 > :first-child {
    grid-column: 1 / -1;
  }
  .cxb-envtable__grid > :last-child,
  .cxb-envtable__grid--2 > :last-child {
    justify-self: end;
    text-align: right;
  }
  /* Sized for a 92px track, so it was clipping. */
  .cxb-envtable__badge,
  .cxb-envtable__badge--2 {
    max-width: 100%;
    white-space: nowrap;
  }
}

/* ---- The comparison table -------------------------------------------------
   Three columns of prose cannot fit a phone without becoming one word per
   line, so the table scrolls inside its own box instead of pushing the whole
   article sideways. The min-width is what stops the columns collapsing into
   that one-word state; -webkit-overflow-scrolling keeps the momentum flick on
   iOS. */
@media (max-width: 720px) {
  .cxb-matrix__text {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;   /* room for the scrollbar, off the last row */
  }
  .cxb-matrix__table {
    min-width: 460px;
  }
}

/* A long unbreakable token — a URL, a field name — must not widen a track or
   push a code panel past its card. */
.cxb-compare__code {
  min-width: 0;
  max-width: 100%;
}

.cxb-faq__summary br { display: none; }

/* Rows 2-5 still resolved list-style-type: disclosure-closed, so a native
   marker was in play on some rows and not others. */
.cxb-faq__summary { list-style: none; padding:10px;}
.cxb-faq__summary::-webkit-details-marker { display: none; }
.cxb-faq__summary::marker { content: ""; }

/* The open row carried 42px under its answer: the paragraph's own 22px
   bottom margin plus the row's 20px padding. The padding is the spacing that
   belongs to the row, so the last paragraph gives up its margin. */
.cxb-faq > :last-child,
.cxb-faq__text--4:last-child { margin-bottom: 0; }
.cxb-band__btn, .cxb-inlinecta__btn{ color:#fff !important;}