.oss-blog-layout {
  display: grid;
  grid-template-columns: 25% 1fr;
  gap: 64px;
  align-items: start;
}
.oss-blog-side {
  position: sticky;
  top: 120px;
}
.oss-blog-search {
  position: relative;
}
.oss-blog-search svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: #8b8b95;
  pointer-events: none;
}
.oss-blog-search input {
  width: 100%;
  font-family: var(--oss-body);
  font-size: 16px;
  color: #0a0a0f;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  padding: 14px 20px 14px 46px;
  outline: none;
  transition: border-color 0.2s ease;
}
.oss-blog-search input::placeholder {
  color: #8b8b95;
}
.oss-blog-search input:focus {
  border-color: var(--oss-cyan);
}
.oss-blog-side__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8b8b95;
  margin: 40px 0 16px;
}
.oss-blog-cats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Rendered as an <a> to the category archive; the button reset stays so the two look the
   same wherever an older markup copy still exists. */
.oss-blog-cat {
  appearance: none;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  display: block;
  text-decoration: none;
  text-align: left;
  font-family: var(--oss-body);
  font-size: 16px;
  font-weight: 500;
  color: #8b8b95;
  padding: 10px 0 10px 16px;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.oss-blog-cat:hover {
  color: #0a0a0f;
}
.oss-blog-cat.oss-is-active {
  color: var(--oss-cyan);
  border-left-color: var(--oss-cyan);
  font-weight: 600;
}
.oss-blog-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #e9f8ff;
  color: var(--oss-cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.oss-blog-byline {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.oss-blog-byline__name {
  font-size: 15px;
  font-weight: 700;
  color: #0a0a0f;
}
.oss-blog-byline__meta {
  font-size: 14px;
  color: #8b8b95;
  margin-top: 1px;
}
.oss-blog-media {
  border-radius: 12px;
  background: #f5f5f5;
  border: 1px dashed #d4d4d8;
  display: grid;
  place-items: center;
  text-align: center;
  color: #9a9aa5;
  font-family: var(--oss-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.9;
}
.oss-blog-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  text-decoration: none;
  padding-bottom: 56px;
  border-bottom: 1px solid #e5e5e5;
}
/* Same treatment as the card and hero: a real thumbnail fills this now, and the forced
   4/3 box left ~108px of dashed-bordered emptiness under a 219px-tall image. */
.oss-blog-feature__media {
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f5;
  display: grid;
  place-items: center;
  text-align: center;
  color: #9a9aa5;
  font-family: var(--oss-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.9;
}
.oss-blog-feature__body {
  display: block;
}
.oss-blog-feature__pill {
  display: inline-block;
  background: var(--oss-cyan);
  color: #0a0a0f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}
.oss-blog-feature__title {
  font-family: var(--oss-display);
  font-weight: 900;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #0a0a0f;
  margin: 22px 0 0;
  transition: color 0.2s ease;
}
.oss-blog-feature:hover .oss-blog-feature__title {
  color: var(--oss-cyan);
}
.oss-blog-feature__excerpt {
  font-size: 18px;
  line-height: 1.6;
  color: #4a4a55;
  margin: 18px 0 0;
}
.oss-blog-card__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.oss-blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 32px;
  margin-top: 56px;
}
.oss-blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.oss-blog-card:hover {
  transform: translateY(-4px);
}
/* Real thumbnails now fill this, so the 16/9 box and the placeholder's dashed edge are
   gone; overflow keeps the image inside the rounded corners. */
.oss-blog-card__media {
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f5;
  display: grid;
  place-items: center;
  text-align: center;
  color: #9a9aa5;
  font-family: var(--oss-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.9;
}
.oss-blog-card__pill {
  align-self: flex-start;
  margin-top: 20px;
  background: #e9f8ff;
  color: var(--oss-cyan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.oss-blog-card__title {
  font-family: var(--oss-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #0a0a0f;
  margin: 14px 0 0;
  transition: color 0.2s ease;
}
.oss-blog-card:hover .oss-blog-card__title {
  color: var(--oss-cyan);
}
.oss-blog-card__excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: #8b8b95;
  margin: 10px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.oss-blog-card .oss-blog-card__foot {
  margin-top: auto;
  padding-top: 22px;
}
.oss-blog-card__go {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  color: #0a0a0f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex: 0 0 auto;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.oss-blog-card__go svg {
  width: 14px;
  height: 14px;
}
.oss-blog-card:hover .oss-blog-card__go {
  transform: translateX(4px);
  border-color: var(--oss-cyan);
  color: var(--oss-cyan);
}
.oss-blog-empty {
  font-size: 18px;
  color: #8b8b95;
  margin: 48px 0 0;
}
.oss-blog-page {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 72px;
}
.oss-blog-page__btn {
  appearance: none;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  background: #ffffff;
  font-family: var(--oss-body);
  font-size: 15px;
  font-weight: 600;
  color: #4a4a55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background 0.2s ease;
}
.oss-blog-page__btn svg {
  width: 14px;
  height: 14px;
}
.oss-blog-page__btn:hover {
  border-color: var(--oss-cyan);
  color: var(--oss-cyan);
}
.oss-blog-page__btn.oss-is-active {
  background: var(--oss-cyan);
  border-color: var(--oss-cyan);
  color: #0a0a0f;
}
@media (max-width: 1180px) {
  .oss-blog-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .oss-blog-side {
    position: static;
  }
  .oss-blog-feature {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media (max-width: 760px) {
  .oss-blog-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}
.oss-post-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.oss-post-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--oss-cyan);
  transition: width 0.08s linear;
}
.oss-post-head {
  text-align: center;
}
.oss-post-head__inner {
  max-width: 800px;
  margin: 0 auto;
}
.oss-post-pill {
  display: inline-block;
  background: var(--oss-cyan);
  color: #0a0a0f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}
.oss-post-title {
  margin-top: 26px;
}
.oss-post-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
  text-align: left;
}
/* Real featured images now fill this, so the 16/9 box and the placeholder's dashed edge
   are gone; overflow keeps the image inside the rounded corners. */
.oss-post-hero-media {
  margin-top: 64px;
  overflow: hidden;
  border-radius: 12px;
  background: #f5f5f5;
  display: grid;
  place-items: center;
  text-align: center;
  color: #9a9aa5;
  font-family: var(--oss-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.9;
}
.oss-post-sec {
  padding-top: 80px;
}
.oss-post-layout {
  display: grid;
  grid-template-columns: 22% 58% 1fr;
  gap: 64px;
  align-items: start;
}
.oss-post-side {
  position: sticky;
  top: 120px;
}
.oss-post-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.oss-post-toc a {
  border-left: 2px solid transparent;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: #8b8b95;
  text-decoration: none;
  padding: 9px 0 9px 16px;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.oss-post-toc a:hover {
  color: #0a0a0f;
}
.oss-post-toc a.oss-is-active {
  color: var(--oss-cyan);
  border-left-color: var(--oss-cyan);
  font-weight: 600;
}
.oss-post-side__div {
  height: 1px;
  background: #e5e5e5;
  margin: 36px 0 0;
}
.oss-post-share {
  display: flex;
  align-items: center;
  gap: 10px;
}
.oss-post-share a,
.oss-post-share button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  color: #8b8b95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.oss-post-share a svg,
.oss-post-share button svg {
  width: 16px;
  height: 16px;
}
.oss-post-share a:hover,
.oss-post-share button:hover {
  color: var(--oss-cyan);
  border-color: var(--oss-cyan);
}
.oss-post-body {
  font-size: 19px;
  line-height: 1.75;
  color: #0a0a0f;
}
.oss-post-body > p {
  margin: 24px 0 0;
  text-wrap: pretty;
}
.oss-post-standfirst {
  font-size: 22px;
  line-height: 1.6;
  font-weight: 600;
  color: #0a0a0f;
  margin: 0 !important;
}
.oss-post-body h2 {
  font-family: var(--oss-display);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #0a0a0f;
  margin: 64px 0 0;
}
.oss-post-body h3 {
  font-family: var(--oss-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #0a0a0f;
  margin: 40px 0 0;
}
.oss-post-body ul,
.oss-post-body ol {
  margin: 22px 0 0;
  padding-left: 24px;
}
.oss-post-body li {
  margin-top: 12px;
  padding-left: 6px;
}
.oss-post-body li::marker {
  color: var(--oss-cyan);
}
.oss-post-body p a,
.oss-post-body li a,
.oss-post-body figcaption a,
.oss-post-body blockquote a {
  color: var(--oss-cyan);
  text-decoration: none;
}
.oss-post-body p a:hover,
.oss-post-body li a:hover,
.oss-post-body figcaption a:hover,
.oss-post-body blockquote a:hover {
  text-decoration: underline;
}
.oss-post-body blockquote {
  margin: 48px 0 0;
  padding: 4px 0 4px 28px;
  border-left: 4px solid var(--oss-cyan);
  font-family: var(--oss-display);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #0a0a0f;
}
.oss-post-figure {
  margin: 48px 0 0;
}
.oss-post-figure__media {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #f5f5f5;
  border: 1px dashed #d4d4d8;
  display: grid;
  place-items: center;
  text-align: center;
  color: #9a9aa5;
  font-family: var(--oss-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.9;
}
.oss-post-figure figcaption {
  font-size: 14px;
  line-height: 1.6;
  color: #8b8b95;
  margin-top: 14px;
}
.oss-post-body pre {
  margin: 32px 0 0;
  background: #0a0a0f;
  border-radius: 12px;
  padding: 26px 28px;
  overflow-x: auto;
}
.oss-post-body pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  white-space: pre;
}

/* --- Migrated Webflow posts -------------------------------------------------
   The design's mock post had no h4, no tables and no real photography, so these
   three gaps are filled from what the design already establishes rather than
   invented: h4 continues the h2/h3 scale, tables reuse .oss-cd-table, and real
   images replace .post-figure, which is a dashed 16/9 placeholder box.
   Both markup generations are covered: 20 posts wrap images in <figure>, 2 do not. */
.oss-post-body h4 {
  font-family: var(--oss-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #0a0a0f;
  margin: 32px 0 0;
}
.oss-post-body figure {
  margin: 48px 0 0;
}
.oss-post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--oss-hairline);
}
.oss-post-body > img {
  margin: 48px 0 0;
}
.oss-post-body figure img {
  margin: 0;
}
.oss-post-body table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 48px;
  /* narrow screens: scroll the table rather than the page */
  display: block;
  overflow-x: auto;
}
.oss-post-body th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8b8b95;
  padding: 0 24px 18px 0;
  border-bottom: 1px solid var(--oss-hairline);
  white-space: nowrap;
}
.oss-post-body td {
  font-size: 17px;
  line-height: 1.5;
  color: #4a4a55;
  padding: 20px 24px 20px 0;
  border-bottom: 1px solid var(--oss-hairline);
  vertical-align: top;
}
.oss-post-body td:first-child {
  color: #0a0a0f;
  font-weight: 600;
}
.oss-post-body iframe {
  max-width: 100%;
  margin: 48px 0 0;
  border: 0;
  border-radius: 12px;
}
.oss-post-cta {
  margin: 56px 0 0;
  background: #0a0a0f;
  border-radius: 16px;
  padding: 44px;
}
.oss-post-cta h3 {
  font-family: var(--oss-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}
.oss-post-cta p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  margin: 14px 0 0;
}
.oss-post-cta .oss-btn {
  margin-top: 28px;
}
.oss-post-cta .oss-btn--primary {
  color: #0a0a0f;
  text-decoration: none;
}
.oss-post-author {
  max-width: 58%;
  background: #f5f5f5;
  border-radius: 16px;
  padding: 36px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: start;
  margin-left: calc(22% + 64px);
}
.oss-post-author__photo img {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
.oss-post-author__name {
  font-family: var(--oss-display);
  font-weight: 700;
  font-size: 20px;
  color: #0a0a0f;
  margin: 0;
}
.oss-post-author__role {
  font-size: 16px;
  color: #8b8b95;
  margin: 4px 0 0;
}
.oss-post-author__bio {
  font-size: 17px;
  line-height: 1.65;
  color: #4a4a55;
  margin: 16px 0 0;
}
.oss-post-author .oss-co-sig__li {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.oss-post-author .oss-co-sig__li svg {
  width: 20px;
  height: 20px;
}
.oss-blog-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1180px) {
  .oss-post-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .oss-post-side {
    display: none;
  }
  .oss-post-author {
    max-width: none;
    margin-left: 0;
  }
  .oss-blog-grid--3 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .oss-post-author {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Re-asserted over Elementor's `.elementor img` reset — see build/split.py. */
.oss-post-author__photo.oss-post-author__photo img {
  width: 96px;
  height: 96px;
  object-fit: cover;
}

/* Nested content. Five of the migrated posts keep a wrapper div (schema.org Article
   markup, callout boxes) and a few lists hold figures, so 448 paragraphs and 38 images
   are not direct children of .oss-post-body. The `> p` / `> img` rules above then drop
   their spacing and the copy runs together. Match on the parent instead. */
.oss-post-body div > p,
.oss-post-body ol > p {
  margin: 24px 0 0;
}
.oss-post-body div > img,
.oss-post-body a > img {
  margin: 48px 0 0;
}
/* Re-asserted last: a figure supplies its own margin, so its image keeps none. */
.oss-post-body figure img {
  margin: 0;
}

/* ---- Content components (oss-cx-*) --------------------------------------------------
   Three migrated posts built pills, a TL;DR panel and callout boxes out of inline styles;
   two more used hand-authored classes that never had a stylesheet. Both are mapped onto
   this one set, drawn from the site's tokens rather than the originals' blue/green/amber
   at 13px. The old markup had a separate green "tip" and blue "info" box: both are
   advisory and this palette is cyan plus greyscale, so they share a treatment and the
   emoji already in the copy keeps them apart. */
.oss-post-body [class^="oss-cx-"] {
  box-sizing: border-box;
}
/* A panel's first child must not push it open: `div > p` above sets a top margin. */
.oss-post-body [class^="oss-cx-"] > :first-child {
  margin-top: 0;
}

.oss-post-body .oss-cx-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 0;
}
.oss-post-body .oss-cx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--oss-hairline);
  border-radius: 999px;
  background: var(--oss-surface);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--oss-text-soft);
}

/* The one inverted panel, matching the dark bands used elsewhere on the site. */
.oss-post-body .oss-cx-tldr {
  margin: 48px 0 0;
  padding: 28px 32px;
  border-radius: 12px;
  background: var(--oss-text);
  color: #ffffff;
}
.oss-post-body .oss-cx-tldr p {
  color: rgba(255, 255, 255, 0.78);
  margin: 12px 0 0;
}
.oss-post-body .oss-cx-tldr .oss-cx-head {
  color: #ffffff;
}
.oss-post-body .oss-cx-tldr a {
  color: var(--oss-cyan);
}

.oss-post-body .oss-cx-note,
.oss-post-body .oss-cx-info,
.oss-post-body .oss-cx-warn {
  margin: 48px 0 0;
  padding: 24px 28px;
  border: 1px solid var(--oss-hairline);
  border-left: 4px solid var(--oss-hairline-strong);
  border-radius: 12px;
  background: var(--oss-surface);
}
.oss-post-body .oss-cx-info {
  border-left-color: var(--oss-cyan);
  background: rgba(0, 204, 255, 0.05);
}
.oss-post-body .oss-cx-warn {
  border-left-color: var(--oss-red);
  background: rgba(239, 68, 68, 0.05);
}
.oss-post-body .oss-cx-note ul,
.oss-post-body .oss-cx-note ol,
.oss-post-body .oss-cx-info ul,
.oss-post-body .oss-cx-info ol,
.oss-post-body .oss-cx-warn ul,
.oss-post-body .oss-cx-warn ol {
  margin: 12px 0 0;
}

/* The label row inside a panel. */
.oss-post-body .oss-cx-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--oss-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oss-text);
}

.oss-post-body .oss-cx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 48px 0 0;
}
.oss-post-body .oss-cx-stat {
  padding: 24px 20px;
  border: 1px solid var(--oss-hairline);
  border-radius: 12px;
  background: var(--oss-surface);
  text-align: center;
}
/* The source separates these with <br>, which was the line break when they were inline.
   Now that they are blocks each one adds an empty 24px line on top of the margins. */
.oss-post-body .oss-cx-stat br {
  display: none;
}
/* These three are <span> in the source. Left inline they ignore margin-top and the lines
   space unevenly, so they are made block-level here. */
.oss-post-body .oss-cx-stat-num {
  display: block;
  font-family: var(--oss-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--oss-text);
}
.oss-post-body .oss-cx-stat-label {
  display: block;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--oss-text);
}
.oss-post-body .oss-cx-stat-desc {
  display: block;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--oss-text-soft);
}

.oss-post-body .oss-cx-faq {
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--oss-hairline);
}
.oss-post-body .oss-cx-faq-q {
  font-family: var(--oss-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  color: var(--oss-text);
}
.oss-post-body .oss-cx-faq-a {
  margin: 10px 0 0;
  color: var(--oss-text-soft);
}

/* Quieter than the 26px blockquote so a pulled quote does not outrank a heading. */
.oss-post-body .oss-cx-quote {
  margin: 48px 0 0;
  padding: 4px 0 4px 28px;
  border-left: 4px solid var(--oss-cyan);
  font-family: var(--oss-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--oss-text);
}
.oss-post-body .oss-cx-quote-author {
  display: block;
  margin: 12px 0 0;
  font-family: var(--oss-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--oss-text-dim);
}

.oss-post-body .oss-cx-cta {
  margin: 48px 0 0;
  padding: 32px;
  border: 1px solid var(--oss-hairline);
  border-radius: 12px;
  background: var(--oss-surface-2);
}
.oss-post-body .oss-cx-cta-btn {
  display: inline-block;
  margin: 16px 0 0;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--oss-cyan);
  color: var(--oss-text);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.oss-post-body .oss-cx-impact {
  margin: 32px 0 0;
  font-family: var(--oss-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.4;
  color: var(--oss-text);
}
.oss-post-body .oss-cx-hl,
.oss-post-body .oss-cx-hl-danger {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--oss-cyan-dim);
}
.oss-post-body .oss-cx-hl-danger {
  background: rgba(239, 68, 68, 0.14);
}

/* ---- Overrides against theme and Elementor resets ------------------------------------
   Both of these lose on specificity, so they are stated explicitly rather than tuned.

   1. Elementor's frontend.min.css carries
        .elementor .elementor-widget:not(...):not(...) figure { margin: 0 }
      at (0,4,1). `.oss-post-body figure` is (0,1,1), so the figure spacing above never
      applied and images sat flush against the paragraph before them.
   2. Hello Elementor's reset.css draws a border on every cell and then re-adds a top edge
      with `table thead:first-child tr:first-child th` at (0,2,3), which outranks the
      border zeroing in oss-base.css at (0,1,1). */
.oss-post-body figure {
  margin: 48px 0 !important;
}
.oss-post-body figure img {
  margin: 0 !important;
}
/* .emoji is excluded: WordPress swaps emoji for 19px images, which must not take
   figure-sized margins. */
.oss-post-body > img:not(.emoji),
.oss-post-body div > img:not(.emoji),
.oss-post-body a > img:not(.emoji) {
  margin: 48px 0;
}
.oss-post-body th {
  border-top: 0 !important;
}

/* ---- Mobile: stop a wide table dragging the whole page sideways ----------------------
   .oss-post-body is a grid item, and a grid item's default `min-width: auto` is a
   min-content floor rather than zero. The migrated pricing tables have a min-content
   width of ~645px, so at a 500px viewport the track was forced to 720px and the page
   scrolled sideways by 252px. The tables already scroll inside themselves, so the track
   just needs permission to shrink. Measured before/after on every post: 252 -> 0 on
   how-much-is-a-wix-domain-pricing, 86 -> 0 on how-to-contact-wix, unchanged elsewhere. */
.oss-post-body {
  min-width: 0;
  overflow-wrap: break-word;
}

/* ---- Long unbreakable words in titles ------------------------------------------------
   Two posts are titled with error codes: ERR_NAME_NOT_RESOLVED and ERR_CONNECTION_REFUSED.
   Underscores give a browser no line-break opportunity, so at 40px the h1 rendered 575px
   of text inside a 436px column and the page scrolled sideways by ~110px on mobile. The
   overflowing text does not change the element's own box, so it is invisible to a
   bounding-rect check and only shows up in scrollWidth. */
.oss-post-title,
.oss-blog-card__title,
.oss-blog-feature__title {
  overflow-wrap: break-word;
}

/* The hero pill links to its category archive now, so the theme's link colour and
   underline have to be cleared. Hover reuses the primary button's #1fd2ff lift rather
   than introducing a second cyan. */
a.oss-post-pill {
  text-decoration: none;
  color: #0a0a0f;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}
a.oss-post-pill:hover,
a.oss-post-pill:focus {
  background: #1fd2ff;
  color: #0a0a0f;
  transform: translateY(-1px);
}

/* ---- Copy-link confirmation ----------------------------------------------------------
   The button gave no feedback at all, so a click looked like nothing happened. The flag
   sits above the button and is empty until JS fills it, so it never shows a stale label
   if the script does not load. */
.oss-post-share .oss-post-copy {
  position: relative;
}
.oss-post-copy__flag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--oss-text);
  color: #ffffff;
  font-family: var(--oss-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.oss-post-copy.oss-is-copied {
  color: var(--oss-cyan);
  border-color: var(--oss-cyan);
}
.oss-post-copy.oss-is-copied .oss-post-copy__flag {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .oss-post-copy__flag {
    transition: none;
  }
}

/* Hello Elementor's reset.css paints #cc3366 on BOTH `:hover` and `:focus` for `button`
   and `[type="button"]`, at (0,2,0) — above the `background: none` on the shared
   share-button rule at (0,1,1). Two separate symptoms came from that: the button flashed
   magenta on hover, and a mouse click left it sitting on magenta afterwards, because a
   click sets :focus without :focus-visible. The social controls are <a>, which the reset
   does not match, so only this button was affected.
   Measured on the live button: mouse focus was white on rgb(204,51,102).

   :focus returns to the resting look rather than the cyan one, so a click does not leave
   the button looking permanently active; :focus-visible keeps cyan, which is keyboard
   only, so the focus ring stays legible. Order matters below: :hover is last so hovering
   a focused button still highlights. */
.oss-post-share button:focus {
  background: none;
  color: #8b8b95;
  border-color: #e5e5e5;
}
.oss-post-share button:focus-visible {
  background: none;
  color: var(--oss-cyan);
  border-color: var(--oss-cyan);
}
.oss-post-share button:hover,
.oss-post-share button:hover:focus {
  background: none;
  color: var(--oss-cyan);
  border-color: var(--oss-cyan);
}
/* The copied confirmation outranks all of them, so the state stays readable while shown. */
.oss-post-share .oss-post-copy.oss-is-copied,
.oss-post-share .oss-post-copy.oss-is-copied:hover,
.oss-post-share .oss-post-copy.oss-is-copied:focus {
  background: none;
  color: var(--oss-cyan);
  border-color: var(--oss-cyan);
}