@charset "UTF-8";
/*!
 * The design system's button atom — atom/btns, Figma component set 30592:2267.
 *
 * WHY THIS FILE EXISTS
 * The same button box was written out longhand in eight places: four faces on the
 * Reliability Protocol LP, both survey submits, and the two hero faces. Every copy
 * was a place to drift, and it did drift — `.protocol-survey__next` ended up with
 * `min-height: 56px` and a second, higher-specificity `button.protocol-survey__next`
 * rule 400 lines away correcting it back to 48. Reviews kept surfacing button
 * findings page by page for exactly this reason.
 *
 * WHAT BELONGS HERE
 * Only the atom's BOX — the numbers that are identical across every colour.
 * Fill, border colour and label colour deliberately stay with the caller, because
 * that is the only axis the atom actually varies (yellow / teal / black / white),
 * and Bootstrap's own .btn-* variants already carry those for the global buttons.
 *
 * WHAT IS NOT HERE
 * The shadow ladder's hover and click steps, the disabled face and the radius
 * custom property live on the global `.btn` block in main.scss, which every button
 * in the theme already gets. Repeating them here would give two owners to one rule.
 *
 * Imported by main.scss and by the standalone page stylesheets that need it — the
 * pages/ entry points do not include main.scss, so a shared partial is the only way
 * they can share a definition.
 */
/* State shadows. The ladder tightens and strengthens as the button is pressed:
     default   0 20px 40px -10px rgba(38,50,56,.2)
     hover     0 10px 20px  -5px rgba(38,50,56,.3)
     click     0  5px 10px  -5px rgba(38,50,56,.4)
   Figma's ON_HOVER motion is 200ms ease-out, not Bootstrap's 150ms ease-in-out. */
/* ===== Blog Single (pure PHP) — scoped to .rs-bsp ===== */
.rs-bsp {
  --rs-teal-dark:#35717D;
  --rs-teal:#408897;
  --rs-coral:#F35B54;
  --rs-coral-light:#FF6D66;
  --rs-yellow:#FFC94B;
  --rs-yellow-hover:#FFB710;
  --rs-black:#34383C;
  --rs-text:#5D636A;
  --rs-grey-bg:#F9F9F9;
  --rs-grey-vlight:#D8E2E3;
  --rs-ivory:#F9FAF4;
}

/* Layout is Bootstrap's grid (.container / .row / .col-lg-*), the same one
   template-asana-vs.php uses — this template used to roll its own centred 1140px
   container plus percentage column widths (64.47% / 35.53%), which is why the two
   templates' article columns measured 735px and 740px for the same content. Only the
   container's side padding is customised, and via --bs-gutter-x rather than a padding
   override, because that is the variable Bootstrap's own container rule reads.
   Safe to set here: .row re-declares --bs-gutter-x itself, so this never leaks into
   the column gutters. */
/* --- Hero --- */
.rs-bsp-hero {
  background: var(--rs-teal-dark) var(--rs-bsp-hero-img) no-repeat bottom right/contain;
  padding: 60px 0;
}

/* Byline (inlined, replaces the [ath_meta_in_single_pst_top] shortcode). Vertical rhythm:
   date →20→ Written-by →10→ Reviewed-by →30→ H1 →30→ excerpt →30→ share. */
.rs-bsp-byline {
  font-family: "Hind Madurai", sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #FFF;
  margin: 0 0 30px;
}

.rs-bsp-date {
  color: var(--rs-grey-vlight);
  margin-bottom: 20px;
}

.rs-bsp-author {
  margin-bottom: 10px;
}

.rs-bsp-author, .rs-bsp-reviewer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.rs-bsp-byline-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rs-bsp-byline-person {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rs-bsp-byline-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

.rs-bsp-byline a {
  color: #FFF;
  font-weight: 700;
  text-decoration: none;
}

.rs-bsp-byline-role {
  color: var(--rs-grey-vlight);
  font-weight: 400;
}

/* Fact-check notice — an info affordance, revealed on hover/focus, not a standing
   paragraph. It shipped as an always-visible two-paragraph block, which put ~230
   characters of meta-commentary above the article title on every post and buried the
   headline. The icon stays; the copy is a tooltip.
   Kept in the DOM (not display:none) so assistive tech and parity-check still read it,
   and revealed by :focus-within as well as :hover so it is reachable by keyboard. */
.rs-bsp-factcheck {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.rs-bsp-factcheck-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  background: none;
  border: 0;
  padding: 0;
  color: var(--rs-grey-vlight);
}

.rs-bsp-factcheck-trigger > i {
  font-size: 16px;
  line-height: 1.5;
}

.rs-bsp-factcheck-trigger:hover, .rs-bsp-factcheck-trigger:focus-visible {
  color: #FFF;
}

.rs-bsp-factcheck-trigger:focus-visible {
  outline: 2px solid #FFF;
  outline-offset: 3px;
  border-radius: 50%;
}

.rs-bsp-factcheck-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 5;
  width: 420px;
  max-width: calc(100vw - 40px);
  padding: 14px 16px;
  border-radius: 4px;
  background: rgba(41, 45, 49, 0.97);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s;
}

.rs-bsp-factcheck:hover .rs-bsp-factcheck-panel,
.rs-bsp-factcheck:focus-within .rs-bsp-factcheck-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.rs-bsp-factcheck-panel p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--rs-grey-vlight);
  margin: 0;
}

.rs-bsp-factcheck-panel p + p {
  margin-top: 6px;
}

.rs-bsp-factcheck-panel .rs-bsp-factcheck-cta {
  color: #FFF;
}

@media (prefers-reduced-motion: reduce) {
  .rs-bsp-factcheck-panel {
    transition: none;
  }
}
/* The panel is anchored left:0 to a trigger that sits near the right end of the byline, so its
   420px reaches past the viewport on anything narrower than xl and puts horizontal scroll on the
   whole document — `visibility:hidden` hides it but still occupies layout, so this happened even
   with the panel closed. Measured on 84450: document scrollWidth 1095/1161/1113 at 768/900/1100,
   each exactly the panel's right edge. Right-anchoring below xl makes it open leftward and stay
   inside the container; at ≥1200 there is room to spare, so the design is untouched there. */
@media (max-width: 1199.98px) {
  .rs-bsp-factcheck-panel {
    left: auto;
    right: 0;
  }
}
.rs-bsp-hero .rs-bsp-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  color: #FFF;
  margin: 0 0 30px;
  max-width: 940px;
}

/* 1.65 is the shared article-body rhythm (config/_article.scss rs-article-body);
   the standfirst was on 29px = 1.611 and read a hair tighter than the copy it
   introduces. Colour stays light because this sits on the teal hero. */
.rs-bsp-excerpt {
  font-family: Lora, serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--rs-grey-bg);
  margin: 0 0 30px;
  max-width: 950px;
}

.rs-bsp-share {
  display: flex;
  align-items: center;
}

.rs-bsp-share-label {
  font-family: "Hind Madurai", sans-serif;
  font-size: 14px;
  line-height: 1;
  color: var(--rs-grey-vlight);
  padding-right: 20px;
}

/* Figma node 24567-32128: the icons are the FA7 Brands composite badge glyphs themselves
   (facebook = f-in-circle, linkedin = in-in-rounded-square) in white — no drawn circle behind. */
.rs-bsp-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 24px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.rs-bsp-share-btn + .rs-bsp-share-btn {
  margin-left: 20px;
}

.rs-bsp-share-btn:hover {
  opacity: 0.85;
}

/* --- Content + TOC --- */
.rs-bsp-body {
  padding: 60px 0;
}

/* The share/co-author block lives in its own section but reads as the end of the article, so it
   sits in a .col-lg-8 of its own to track the article column (Figma 24567-32060) — it used to
   get that width from a `.rs-bsp-sharepart .rs-bsp-container > *` percentage rule. */
/* TOC (Figma node 31846-23613): #F9F9F9 card, 4px radius, 20px pad, 15px between items;
   Hind Madurai 14/1.5 in grey #5D636A; the arrow icon is hidden by default and only shows on
   the active item (coral #F35B54) and on hover (#34383C). */
/* Body content typography + vertical rhythm (Figma node 24567-31826), for Gutenberg/pure-HTML
   bodies. Designed and measured here, now shared: it lives in rs_article_body_css() so the
   asana-vs CPT renders the same post_content identically instead of hand-rolling a partial
   copy of it. That function's docblock carries the rhythm rationale; change it there, not here.
   (Elementor-built bodies are still covered by the legacy .single Elementor-document rules in
   style.css. Written without naming that attribute literally: parity-check's Health check greps
   the raw response for it to count Elementor markers, and this comment used to trip its own
   gate — a gate that cries wolf gets ignored.) */
.rs-bsp-main {
  font-family: Lora, serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--rs-text, #5D636A);
  /* Polish runs 10-15% longer than English and its compound nouns do not word-wrap where
     the English does, so display type is where PL breaks first. Measured on post 13290 at
     375px: the h2 "Zasady dobrej komunikacji w zespole zdalnym i hybrydowym" laid out
     376px wide inside a 335px column and put the last 21px of horizontal scroll on the
     document.
     Split in two, because the two halves earn their keep at different widths.
     overflow-wrap stays everywhere: it only ever breaks a word that has no other way to
     fit, so it costs nothing on a wide column. hyphens:auto is mobile-only — it hyphenates
     ordinary words that would have wrapped perfectly well ("be-tween" on a 740px desktop
     column), which is a fair trade at 375px where the alternative is horizontal scroll, and
     not one worth making on desktop. */
}
.rs-bsp-main > p,
.rs-bsp-main > ul,
.rs-bsp-main > ol,
.rs-bsp-main > table,
.rs-bsp-main > .table-responsive,
.rs-bsp-main > figure,
.rs-bsp-main > blockquote {
  margin: 0 0 18px;
}
.rs-bsp-main > h2,
.rs-bsp-main > h3 {
  font-family: Montserrat, sans-serif;
  color: var(--rs-black, #34383C);
  margin: 40px 0 18px;
}
.rs-bsp-main > h2 {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.3;
}
.rs-bsp-main > h3 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
}
.rs-bsp-main > h4 {
  font-family: Montserrat, sans-serif;
  color: var(--rs-black, #34383C);
  margin: 30px 0 15px;
}
.rs-bsp-main > h2,
.rs-bsp-main > h3,
.rs-bsp-main > h4 {
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .rs-bsp-main > h2,
  .rs-bsp-main > h3,
  .rs-bsp-main > h4 {
    hyphens: auto;
  }
}
.rs-bsp-main > :first-child {
  margin-top: 0;
}
.rs-bsp-main > :last-child {
  margin-bottom: 0;
}
.rs-bsp-main li {
  margin-bottom: 10px;
}
.rs-bsp-main li:last-child {
  margin-bottom: 0;
}
.rs-bsp-main a {
  color: var(--rs-coral, #F35B54);
  text-decoration: none;
}

/* Hero title + excerpt share the headings' PL word-wrap safety (see the function's own note
   for the measurement); they sit outside the body wrapper, so they are scoped here. */
.rs-bsp-title, .rs-bsp-excerpt {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* TL;DR callout. Both language versions of a post carry <div class="rs-bsp-tldr"> around
   their summary paragraph so the treatment is identical in EN and PL — the EN body used to
   get this tint from an Elementor container while the PL body, being plain post_content,
   rendered the same paragraph as ordinary prose. #F0F8F9 is --rs-teal-light-50, the token
   the original Elementor container used. A class inside post_content (rather than a
   priority-9 structural filter) because the two languages share no textual marker: EN opens
   the paragraph with a bold "TL;DR:" and PL has no such prefix. */
.rs-bsp-main .rs-bsp-tldr {
  margin: 0 0 18px;
  padding: 24px 28px;
  border-radius: 4px;
  background: var(--rs-teal-light-50, #F0F8F9);
}

.rs-bsp-main .rs-bsp-tldr > p {
  margin: 0;
}

/* Article bodies carry real wide tables — post 13290 has a 6-column UAEL table that measures
   746px, and 84450 one that measures 1007px, either of which puts a horizontal scrollbar on the
   whole document. the_content() gives no wrapper to scroll, so the table becomes its own scroll
   container. Sets overflow/display only, so it never fights style.css's legacy
   `.single table tbody>tr:nth-child(odd)>td` background rule — different properties, no
   specificity contest, no !important.

   NOT breakpoint-scoped, which it was (≤767px) on the assumption that "desktop table layout is
   already correct". It isn't: 1007px does not fit the article column at ANY width — the column
   tops out at 740px — so 84450 was leaking horizontal scroll onto the document at 768px and
   900px all along, and the Bootstrap container's 960px step between 992-1199px pulled 1100px
   into the same state. One unconditional rule covers every width instead of chasing bands.

   `width:fit-content` rather than `100%`, so widening the scope cannot stretch narrow tables:
   a table that fits keeps its natural width, and only one that exceeds the column is capped by
   max-width and scrolls. `display:block` alone is not enough either — the box shrinks to the
   column but the internal table algorithm still lays rows out at their intrinsic width and
   leaks onto the document. Re-establishing an explicit table box on thead/tbody at
   `width:max-content; min-width:100%` puts that intrinsic width back INSIDE the scrolling
   block, where it belongs. */
.rs-bsp-main table {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.rs-bsp-main table > thead,
.rs-bsp-main table > tbody,
.rs-bsp-main table > tfoot {
  display: table;
  width: max-content;
  min-width: 100%;
}

/* --- share_part row --- */
/* The 40px + hairline the legacy shortcode's own `.share_section_coauthor` supplied; kept
   here because it is this template's section chrome, not part of the shared component. */
.rs-bsp-sharepart {
  padding-bottom: 60px;
}

/* On the column, not the row: a Bootstrap row carries negative side margins, so a rule
   drawn there would run 12px past the article column at each end. */
.rs-bsp-sharepart .col-lg-8 {
  border-top: 1px solid #EDEDED;
  padding-top: 40px;
}

/* Author + share block: rs_article_endmatter_css() in functions.php, shared with
   template-asana-vs.php. */
/* Author section below the article (Figma 24567-33374, DS component 30787-18187):
   "Written by" label + name + role stacked, 14px/1.5 throughout, name in the teal accent,
   role in the muted grey. Avatar keeps the DS ring: 2px white inset over the coral disc. */
.rs-article-author-name {
  color: #408897;
}

.rs-article-author-name:hover,
.rs-article-author-name:focus-visible {
  color: #35717D;
}

.rs-article-author-label,
.rs-article-author-role,
.rs-article-share-label {
  font-size: 14px;
  line-height: 1.5;
}

.rs-article-author-label {
  color: #34383C;
}

.rs-article-author-role {
  color: #5D636A;
}

.rs-article-share-label {
  color: #34383C;
}

.rs-article-author-avatar {
  background: #F35B54;
  border: 2px solid #FFFFFE;
  box-sizing: border-box;
}

/* DS gap is 20px; Bootstrap's ms-3 was 16px. Vertical centring is the DS component's own
   `align: center` — Bootstrap's d-flex defaults to `stretch`, which let the text block sit
   at the top of the 75px avatar. */
.rs-article-author-text {
  margin-left: 20px;
}

/* 40px down to the share heading. Bootstrap has no 40px step (mb-3 is 16, mb-4 is 24,
   mb-5 is 48), so this replaces the mb-3 the row used to carry. */
.rs-article-author-row {
  margin-bottom: 40px;
}

/* Signature: 180px cap and the 15px stand-off the legacy shortcode's CSS gave it
   (style.css `.share_section .left .content img`), so the two render at the same size.
   height:auto keeps the aspect ratio the two assets do not share. */
.rs-article-author-signature {
  display: block;
  max-width: 180px;
  height: auto;
  margin-top: 15px;
}

/* Share icons (Figma 24567-33397): bare FA brand glyphs, no chrome — a 24x24 box holding a
   20px glyph at #34383C, going coral on hover over 150ms ease-in. */
.rs-article-share-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-article-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 2px;
  box-sizing: border-box;
  color: #34383C;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  transition: color 0.15s ease-in;
}

.rs-article-share-btn:hover,
.rs-article-share-btn:focus-visible {
  color: #F35B54;
}

/* --- Forum CTA: hidden in the originals on every breakpoint; kept for later reuse --- */
.rs-bsp-forum-cta {
  display: none;
}

/* --- Similar posts --- */
.rs-bsp-similar {
  padding: 90px 0 60px;
}

.rs-bsp-similar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  gap: 20px;
}

.rs-bsp-similar-head h3 {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 52px;
  color: var(--rs-black);
  margin: 0;
}

.rs-bsp-viewmore {
  font-family: "Hind Madurai", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
  color: var(--rs-teal);
  background: #FFF;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.rs-bsp-viewmore i {
  margin-left: 15px;
}

.rs-bsp-viewmore:hover {
  color: var(--rs-coral);
}

.rs-bsp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.rs-bsp-card {
  position: relative;
  background: var(--rs-grey-bg);
  border-radius: 4px;
  padding-bottom: 60px;
  transition: background 0.2s, box-shadow 0.2s;
}

.rs-bsp-card:hover {
  background: #FFF;
  box-shadow: 0 20px 20px -10px rgba(47, 47, 47, 0.05), 0 50px 60px -30px rgba(47, 47, 47, 0.1);
}

.rs-bsp-card-img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 4px;
}

.rs-bsp-card-inner {
  padding: 20px 20px 0;
}

.rs-bsp-card-inner h5 {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  margin: 0 0 10px;
}

.rs-bsp-card-inner h5 a {
  color: var(--rs-black);
  text-decoration: none;
}

.rs-bsp-card-excerpt {
  font-family: Lora, serif;
  font-size: 18px;
  line-height: 29px;
  color: var(--rs-text);
  margin: 0;
}

.rs-bsp-card-more {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-family: "Hind Madurai", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--rs-teal);
  text-decoration: none;
  transition: color 0.2s;
}

.rs-bsp-card-more i {
  margin-left: 10px;
}

.rs-bsp-card:hover .rs-bsp-card-more {
  color: var(--rs-coral);
}

/* --- Final dual CTA (overlaps the ivory spacer below, like the original) --- */
.rs-bsp-cta .rs-bsp-cta-box {
  position: relative;
  z-index: 2;
  border-radius: 4px;
  padding: 60px;
  margin-bottom: -230px;
  background: linear-gradient(90deg, rgb(53, 113, 125) 46%, rgba(53, 113, 125, 0.1) 79%), var(--rs-bsp-cta-img) center right/cover no-repeat;
}

.rs-bsp-cta-heading {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 52px;
  color: #FFFFFE;
  margin: 0 0 20px;
  max-width: 647px;
}

/* Original references a deleted kit global and falls back to the same near-white as the first part */
.rs-bsp-cta-heading span {
  color: #FFFFFE;
}

.rs-bsp-cta-sub {
  font-family: "Hind Madurai", sans-serif;
  font-size: 20px;
  line-height: 32px;
  color: var(--rs-grey-vlight);
  margin: 0 0 50px;
  max-width: 602px;
}

.rs-bsp-btn {
  display: inline-block;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  color: var(--rs-black);
  background: var(--rs-yellow);
  border-radius: 3px;
  padding: 15px 30px;
  text-decoration: none;
  transition: background 0.2s;
}

.rs-bsp-btn:hover {
  background: var(--rs-yellow-hover);
  color: var(--rs-black);
}

.rs-bsp-spacer {
  height: 292px;
  background: var(--rs-ivory);
}

/* --- Tablet --- */
@media (max-width: 1024px) {
  .rs-bsp .container {
    --bs-gutter-x:80px;
  }
  .rs-bsp-hero {
    padding: 50px 0;
  }
  .rs-bsp-similar {
    padding: 80px 0;
  }
  .rs-bsp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* CTA (tablet + mobile): stacked — full-team photo band on top, solid teal below with the text.
     cnt.webp is empty on its left ~45% (that blank is what the desktop gradient covers), so the
     band is cropped to the team: background-position right + ~190% zoom fills the band with just
     the right (team) portion. Teal wash (.35) matches the design. */
  .rs-bsp-cta .rs-bsp-cta-box {
    padding: 340px 40px 40px;
    margin-bottom: -300px;
    overflow: hidden;
    background: var(--rs-teal-dark);
  }
  .rs-bsp-cta .rs-bsp-cta-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(rgba(53, 113, 125, 0.35), rgba(53, 113, 125, 0.35)) center/cover no-repeat, var(--rs-bsp-cta-img) right center/190% auto no-repeat;
  }
  .rs-bsp-spacer {
    height: 340px;
  }
}
/* --- Mobile --- */
/* Below Bootstrap's lg breakpoint the row stacks, so the TOC stops being a sidebar:
   un-stick it and give it space under itself. This used to live at ≤767px, because the
   old custom grid kept a 70%/30% two-column tablet tier that Bootstrap's .col-lg-*
   does not have — with the grid aligned, 768-991px stacks too and needs the same
   treatment. */
@media (max-width: 767px) {
  .rs-bsp .container {
    --bs-gutter-x:40px;
  }
  .rs-bsp-hero {
    padding: 40px 0;
  }
  .rs-bsp-hero .rs-bsp-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 15px;
  }
  .rs-bsp-share-label {
    padding-right: 15px;
  }
  .rs-bsp-body {
    padding: 40px 0;
  }
  .rs-bsp-similar {
    padding: 40px 0;
  }
  .rs-bsp-main .rs-bsp-tldr {
    padding: 20px;
  }
  .rs-bsp-similar-head {
    flex-wrap: wrap;
  }
  .rs-bsp-similar-head h3 {
    font-size: 24px;
    line-height: 33px;
    font-weight: 700;
  }
  .rs-bsp-grid {
    grid-template-columns: 1fr;
  }
  /* Mobile (≤767px): same stacked band as tablet (inherited), just smaller band + padding. */
  .rs-bsp-cta .rs-bsp-cta-box {
    padding: 230px 10px 25px;
    margin-bottom: -360px;
  }
  .rs-bsp-cta .rs-bsp-cta-box::before {
    height: 200px;
  }
  .rs-bsp-cta-heading {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    padding: 0 10px;
  }
  .rs-bsp-cta-sub {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 30px;
    padding: 0 10px;
  }
  .rs-bsp-cta .rs-bsp-btn {
    display: block;
    text-align: center;
    padding: 15px 0;
    margin: 0 10px;
  }
  .rs-bsp-spacer {
    height: 400px;
  }
}
/* Mid-article CTA banner — shared with template-asana-vs.php; markup is rebuilt by
   rs_restore_leaked_inline_cta() on the raw body below. No-op on the two posts
   currently wired to this template; needed by the 11 that carry the leak. */
.rs-inline-cta {
  margin: 2rem 0;
  padding: 32px 30px;
  background: #F9F9F9;
  border-radius: 4px;
}

.rs-inline-cta__title {
  margin: 0 0 20px;
  font-family: var(--rs-font-display, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #34383C;
}

.rs-inline-cta__action {
  margin: 0;
}

/* The shadow pair is the button atom's own default/hover rungs — see
   config/_btn-atom.scss. It was written out longhand here when this lived in a
   PHP string that had no way to reach a Sass variable. */
.rs-inline-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 15px 30px;
  border-radius: 4px;
  background: #FFC94B;
  color: #34383C;
  font-family: var(--rs-font-display, "Montserrat", sans-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.2);
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.rs-inline-cta__btn:hover,
.rs-inline-cta__btn:focus-visible {
  background: #FFB710;
  color: #34383C;
  box-shadow: 0 10px 20px -5px rgba(38, 50, 56, 0.3);
}