@charset "UTF-8";
/* ===== Case Study (pure PHP) — scoped to .rs-cs ===== */
/* ---- C1: hero, rebuilt against the LIVE page (Roman: Figma/live is the visual
   reference, and this had to be 1:1, not "close"). Every number below is a
   getComputedStyle reading off https://remotesensei.org/case-study/instytut-matki-dziecka/
   at a 1440 viewport, not an estimate:
     band #F9FAF4 full-bleed · inner column 1140 · eyebrow 20/700 Montserrat #D8E2E3
     centred · h1 48/1.2 700 Montserrat #34383C centred, measure capped at 918
     card #FFF radius 4 padding 30, two 525px columns with a 30px gutter
     logo 60x60 · client 24/700 Montserrat · blurb 20/400 Hind Madurai #5D636A
     meta label col 142 @14/400 #5D636A + coral dot · value 16/600 #408897
     toolkit heading 16/600 #34383C · tools 2-up, 253px, 20/15 gaps,
     icon 40 · name 14/700 #408897 · desc 14/400 #5D636A · photo 525x525 centred
   ---- */
/* ---- C2 (2026-08-20): re-measured against Figma "Case Studies" node 1:3936
   ("CS single - Instytut Matki i Dziecka - desktop"), extracted with Plumb.
   C1 above was read off live; where the two disagreed Figma won, because the
   brief was to match this frame. Every changed number is listed here with both
   values so the next session can see which source it came from:
     inner column 1146 (was 1140) — Figma pad [60,147] on a 1440 frame. 1146 is
       also this build's own customised Bootstrap $container-max-widths xl, so
       1140 was the outlier, not the target.
     h1 measure 950 (was 918) · client logo->name gap 30 (was 10)
     blurb line-height 1.6 (was 1.4) · meta row gap 10 via flex (was 10px 0
       padding, i.e. 20 between rows) · meta label lh 1.5 (was 1.4) · meta value
       lh 1.6 (was 1.4) · coral dot 4px (was 6px)
     tools gap 10/10 (was 15/20) — grid stays column-major, see the note on
       .rs-cs-toolkit · tool icon gets a #F9F9F9 4px tile (was bare svg)
     tool desc lh 1.5 (was 1.6) · hero photo radius 4 (was 0)
   ---- */
/* Clear the fixed header. main.min.css already owns the site convention
   (body{padding-top:76px} at >=992px) but WordPress core prints
   `body{padding:0}` in its global-styles-inline-css block, which ties that
   rule on specificity (0,0,1) and wins on position because inline <style>
   comes after the enqueued sheets. So the eyebrow sat at y=60 under a 79px
   header - a 19px overlap, measured.
   Fixed by SPECIFICITY, not order: body.single-case-study is (0,1,1) and beats
   bare `body` wherever it lands in the cascade. Same 76px value as the rest of
   the site, not a new number.
   Desktop only: at 375 the header is 55px and the eyebrow already clears it by
   5px, so there is no overlap to correct and no reason to move mobile. */
@media (min-width: 992px) {
  body.single-case-study {
    padding-top: 76px;
  }
}
.rs-cs-hero {
  background: #F9FAF4;
  padding: 60px 20px;
}

.rs-cs-hero-inner {
  max-width: 1146px;
  margin: 0 auto;
}

.rs-cs-eyebrow {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #D8E2E3;
  text-align: center;
  max-width: 950px;
  margin: 0 auto 20px;
}

.rs-cs .rs-cs-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  color: #34383C;
  text-align: center;
  max-width: 950px;
  margin: 0 auto 60px;
}

.rs-cs-card {
  background: #FFFFFF;
  border-radius: 4px;
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

.rs-cs-card-main {
  min-width: 0;
}

.rs-cs-client {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 20px;
}

.rs-cs-client-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex: 0 0 auto;
}

.rs-cs .rs-cs-client-name {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #34383C;
  margin: 0;
}

.rs-cs-blurb {
  font-size: 20px;
  line-height: 1.6;
  color: #5D636A;
  margin: 0 0 10px;
}

/* Rows are a 10px flex gap, not 10px of vertical padding each: the padding also
   inset the first and last row from the blurb and the toolkit heading, which
   Figma spaces with the 20px add-info gap alone. */
.rs-cs-meta {
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rs-cs-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 0;
}

/* Label column stays fixed rather than hugging: Figma's four values all start at
   one x, which a hug + 30px gap cannot produce once "Najwie~ksi klienci" is in
   the set. 142px is the widest label plus its dot, measured. */
.rs-cs-meta-row dt {
  flex: 0 0 142px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: #5D636A;
  margin: 0;
}

.rs-cs-meta-row dt::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #F35B54;
  transform: translateY(-1px);
}

.rs-cs-meta-row dd {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  color: #408897;
  margin: 0;
}

.rs-cs .rs-cs-toolkit-h {
  font-family: "Hind Madurai", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  color: #34383C;
  margin: 0 0 20px;
}

/* Column-major, 2-up — C1's choice, KEPT after a round trip that proved it right
   for Figma as well as live. The trap: post_content orders the tools Asana,
   SharePoint, Teams, but Figma 1:3936 draws Asana | Teams on the first line and
   SharePoint on the second. Those reconcile only because the grid fills downwards
   — Asana(r1c1), SharePoint(r2c1), Teams(r1c2). A row-major flex row is the
   arrangement that looks like Figma's source order and renders wrong
   (Asana | SharePoint / Teams); it was tried here and reverted on the screenshot.
   Do not "simplify" this to flex-wrap. Only the gap moved: 10/10 per Figma,
   was 15/20. */
.rs-cs-toolkit {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  gap: 10px;
}

.rs-cs-toolkit li {
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.rs-cs-toolkit-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background: #F9F9F9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.rs-cs-toolkit-icon svg, .rs-cs-toolkit-icon img {
  width: 32px;
  height: 32px;
  display: block;
}

.rs-cs-toolkit-name {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  color: #408897;
}

.rs-cs-toolkit-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: #5D636A;
}

.rs-cs-card-media {
  min-width: 0;
}

.rs-cs-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 4px;
}

@media (max-width: 991.98px) {
  .rs-cs-card {
    grid-template-columns: 1fr;
  }
  .rs-cs-card-media {
    order: -1;
  }
  .rs-cs .rs-cs-title {
    font-size: 32px;
  }
  .rs-cs-toolkit {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: auto;
  }
}
/* Prose measure 950 (Figma `main`); the full-bleed blocks widen to 1146 (Figma
   section inner, 1440 minus its 147/143 side padding) — see the breakout rule at
   the foot of this file, which has to sit after those blocks' own margin
   shorthands. */
/* Zero padding: every band and section below owns its own, which is how Figma
   composes them (pad [60,147] / [60,143] / [60,245] per section). Side padding
   returns only under lg, where the 950 measure is no longer the binding limit. */
.rs-cs-bodywrap {
  padding: 0;
}

/* Body copy is "text-desktop-M" from the design system, NOT the blog face.
   Figma 1:4419 / 1:3980 both resolve to Hind Madurai 400 20px/1.6 #5D636A.
   Nothing in this file ever set the FAMILY - only the size was pinned below -
   so Lora arrived by inheritance from the global content styles, which is the
   Blog Article face. Set here, scoped to .rs-cs-body, so blog-single and
   css/rs-fonts.css are untouched. Headings keep Montserrat because the global
   heading rules target h1-h6 explicitly, and an explicit declaration always
   beats an inherited one. Roman ruled on this 2026-08-20. */
.rs-cs-body {
  max-width: 950px;
  margin: 0 auto;
  font-family: "Hind Madurai", sans-serif;
  font-weight: 400;
  color: #5D636A;
}

.rs-cs-body h2 {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: #212529;
  margin: 2.5rem 0 1rem;
  font-size: 2rem;
  line-height: 1.25;
}

.rs-cs-body h3 {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: #212529;
  margin: 2rem 0 1rem;
  font-size: 1.5rem;
  line-height: 1.3;
}

.rs-cs-body h4 {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  color: #212529;
  margin: 1.75rem 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.35;
}

.rs-cs-body h5, .rs-cs-body h6 {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  color: #212529;
  margin: 1.5rem 0 0.75rem;
  font-size: 1.1rem;
  line-height: 1.4;
}

.rs-cs-body ul, .rs-cs-body ol, .rs-cs-body table, .rs-cs-body figure, .rs-cs-body blockquote {
  margin: 0 0 1.1rem;
}

/* 20px/1.6, matching the family set on .rs-cs-body above. This rule previously
   pinned 18px to agree with live's Lora 18px/29.7 — that agreement is exactly
   what Roman reversed on 2026-08-20: case studies use text-desktop-M, and the
   Lora sizing was the Blog Article face leaking in. css/rs-fonts.css still pins
   Lora for the other two CPT bodies and is deliberately not touched. */
.rs-cs-body p {
  margin: 0 0 0.9rem;
  font-size: 20px;
  line-height: 1.6;
}

/* The family has to be re-declared on p and li, not just inherited from
   .rs-cs-body above: css/rs-fonts.css carries
     .rs-cs-body p, .rs-cs-body li, .rs-aus-body p, .rs-aus-body li { font-family: Lora }
   at (0,1,1), and an explicit declaration always beats an inherited one, so
   setting the family on the container alone left every paragraph on Lora -
   verified in the browser, the container rule applied and the text did not move.
   Scoped .rs-cs .rs-cs-body (0,2,1) so this wins on SPECIFICITY rather than on
   case-study.min.css happening to load after rs-fonts.css.
   NOTE for whoever reads rs-fonts.css: its .rs-cs-body pin is now superseded and
   only .rs-aus-body still needs it. Left in place deliberately - that file is
   Oskar's and outside this change - so the two files disagree on purpose.
   This also reaches .rs-cs-results-list li, which had no family of its own and
   was picking up Lora from the same pin; Figma has it as Hind Madurai 400 20/1.6. */
.rs-cs .rs-cs-body p, .rs-cs .rs-cs-body li {
  font-family: "Hind Madurai", sans-serif;
}

.rs-cs-body img, .rs-cs-body svg {
  max-width: 100%;
  height: auto;
}

.rs-cs-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.rs-cs-body table td, .rs-cs-body table th {
  border: 1px solid #e5e5e5;
  padding: 0.6rem 0.9rem;
  text-align: left;
  vertical-align: top;
}

.rs-cs-body li {
  margin-bottom: 0.4rem;
}

.rs-cs-body li:last-child {
  margin-bottom: 0;
}

.rs-cs-body a {
  color: #F35B54;
  text-decoration: underline;
}

.rs-cs-body > :first-child {
  margin-top: 0;
}

.rs-cs-body > :last-child {
  margin-bottom: 0;
}

.rs-cs-quote p:last-of-type {
  margin-bottom: 1rem;
}

/*
 * Hero / meta / toolkit treatment for the flat post_content body — see the
 * template docblock (deviations #2, #8). No wrapper markup is added; every
 * rule below is a scoped descendant/sibling selector keyed on tag shape,
 * verified against the two shapes currently wired to this template:
 *   - instytut-matki-dziecka: h4(eyebrow) h1 p(logo img) h4(name) p(desc) table(meta)
 *   - angelus24: p(logo img) h3(name) h1(title) — no eyebrow, no desc, no table
 * Colors sourced from the live Elementor target (grecos/go2market), read via
 * getComputedStyle: hero band #F9FAF4, meta label #5D636A, meta value #408897
 * (same teal used 80x elsewhere in main.min.css).
 */
.rs-cs-body > h4:first-child {
  font-size: 1.25rem;
  font-weight: 700;
  color: #5D636A;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem;
}

.rs-cs-body h1 {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: #212529;
  margin: 0 0 1.25rem;
  font-size: 3rem;
  line-height: 3.625rem;
  text-align: center;
}

/* Client logo + name lockup: the first <p> in the body is always just the
   client logo <img> (verified on both wired posts); style it as a small
   badge sitting beside whichever heading follows (h3 or h4, depending on
   shape) instead of an oversized bare inline image. */
.rs-cs-body > p:first-of-type:has(> img) {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 1.5rem 0.85rem 0 0;
}

.rs-cs-body > p:first-of-type:has(> img) img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background: #fff;
  padding: 4px;
}

.rs-cs-body > p:first-of-type:has(> img) + h3,
.rs-cs-body > p:first-of-type:has(> img) + h4 {
  display: inline-block;
  vertical-align: middle;
  margin: 1.5rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.rs-cs-body > p:first-of-type:has(> img) + h4 + p,
.rs-cs-body > p:first-of-type:has(> img) + h3 + p {
  color: #5D636A;
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0.5rem 0 1.5rem;
}

/* Client meta table -> label/value list (UAEL table plugin residue; its
   <thead> is always two empty <th>, safe to hide outright). Site-wide
   style.css still carries old Elementor-table rules scoped to `.single`
   (odd-row white bg, td:nth-child(2) centered + padding-right:30px) that
   tie this template's selectors on specificity — every property those
   rules set has to be explicitly re-declared below or they win by default. */
.rs-cs-body table {
  display: block;
  width: 100%;
  max-width: 640px;
  background: #F9FAF4;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin: 0.5rem 0 2rem;
  border: none;
}

.rs-cs-body table thead {
  display: none;
}

.rs-cs-body table tbody {
  display: block;
}

.rs-cs-body table tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.rs-cs-body table tr:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rs-cs-body table td {
  display: block;
  border: none;
  padding: 0;
  text-align: left;
  background: transparent;
}

.rs-cs-body table tbody tr td:first-child {
  flex: 0 0 auto;
  min-width: 150px;
  color: #5D636A;
  font-size: 0.9rem;
  position: relative;
  padding-left: 1rem;
  background: transparent;
}

.rs-cs-body table td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F35B54;
}

.rs-cs-body table tbody tr td:last-child {
  flex: 1 1 240px;
  color: #408897;
  font-weight: 600;
  text-align: left;
  padding-right: 0;
  background: transparent;
}

/* angelus24's meta shape has no <table> at all — it's two ul(label)+h6(value)
   pairs right after the logo/name/title lockup. Same label/value colors as
   the table version above, chained off the same logo-p anchor so this can't
   drift onto an unrelated ul/h6 further down the body. */
.rs-cs-body > p:first-of-type:has(> img) + h3 + h1 + ul,
.rs-cs-body > p:first-of-type:has(> img) + h3 + h1 + ul + h6 + ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0.15rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5D636A;
  font-weight: 600;
}

.rs-cs-body > p:first-of-type:has(> img) + h3 + h1 + ul + h6,
.rs-cs-body > p:first-of-type:has(> img) + h3 + h1 + ul + h6 + ul + h6 {
  margin: 0 0 1rem;
  color: #408897;
}

/* Toolkit: "Toolkit" heading is the <h6> immediately followed by an icon
   <p>; each tool is icon-p + name-h6 + desc-p. :has() lets these match by
   shape regardless of how many tools a given post lists. */
.rs-cs-body h6:has(+ p > svg) {
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  margin: 2.5rem 0 1rem;
  padding-top: 0;
  border-top: none;
}

.rs-cs-body p:has(> svg) {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  margin: 0 0.6rem 0 0;
  line-height: 0;
}

.rs-cs-body p:has(> svg) svg {
  width: 28px;
  height: 28px;
  display: block;
}

.rs-cs-body p:has(> svg) + h6 {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  font-size: 1rem;
  color: #408897;
  font-weight: 600;
}

.rs-cs-body p:has(> svg) + h6 + p {
  margin: 0.25rem 0 0.75rem 2.6rem;
  color: #5D636A;
  font-size: 0.9rem;
  padding-bottom: 0;
  border-bottom: none;
}

/* Section rhythm: every top-level <h2> starts a new narrative section
   (Intro/Challenge/Solution/Results, or the numbered sections angelus24
   uses) — a light divider gives the flat body some visual pacing. Where two
   h2s are back-to-back (a bare "Intro"/"01." label immediately followed by
   its real headline, on both wired posts) drop the divider so the pair
   reads as one heading, not two sections. */
/* ---- C2 blocks: the four components rs_cs_structure() wraps out of the flat
   body. Numbers from Figma "Case Studies" 1:3936 via Plumb; the shared stage
   gradient and its shadow are one pair of values used by both the stage cards
   (section 4) and the results band (sections 5/11/12/13/14), so they are written
   once here and referenced, not retyped per block.
   ---- */
/* Before/After card: NOT defined here. inc/rs-blocks.php already ships the
   rs_ba block and css/rs-blocks.css already styles it — including the
   waves-case-left/right.svg art this file previously declared it was skipping,
   and the same coral-frown / teal-check icon colours. rs-blocks is a registered
   dependency of this template's stylesheet, so rs_cs_structure() emits rs-ba's
   own classes and inherits all of it. A duplicate .rs-cs-ba lived here for one
   round; it was deleted once the existing component was found on staging.
   Its own CSS also handles the 1140 breakout, so it is NOT in the xl rule below. */
/* Stage nav cards (Figma section 4). Scoped under .rs-cs-body on purpose: the
   grid is an <ol> and each card an <li>, so `.rs-cs-body ol` / `.rs-cs-body li`
   (0,1,1) outrank a bare `.rs-cs-stages` (0,1,0) whatever the source order — which
   silently kept the row at 950 and wrapped the cards 2+2+1. 362px is the design width; flex-basis keeps
   3-up at 1146 and wraps the remainder centred, which is how the 5-card set is
   drawn (3 then 2). Figma tints card 1's "Go to" gold and the other four white —
   treated as a slip and normalised to white rather than encoded. */
.rs-cs-body .rs-cs-stages {
  list-style: none;
  margin: 2.5rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

/* No default shadow, and the link is white. Figma draws card 1 WITH the two-layer
   lift AND a gold #FFC94B link while cards 2-5 are flat with white links — two
   anomalies on the same one of five identical cards, which is a designer showing
   the HOVER state, not a per-card style. Confirmed on the rendered frame. So the
   lift + gold move to :hover/:focus-visible and the resting state is flat. */
.rs-cs-body .rs-cs-stagecard {
  position: relative;
  flex: 0 0 362px;
  max-width: 100%;
  min-height: 240px;
  padding: 0;
  border-radius: 4px;
  background: linear-gradient(135deg, #69B9C9 0%, #4B9EB0 50%, #408897 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* The anchor wraps the whole card (see the sprintf in template-case-study.php),
   so the 30px padding lives HERE and not on the card - on the card it would be a
   dead border that swallows clicks. Beats `.rs-cs-body a` (coral + underline) on
   class count, 2 vs 1, so it does not depend on source order. */
.rs-cs-body .rs-cs-stagecard-link {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 30px;
  color: inherit;
  text-decoration: none;
}

.rs-cs-body .rs-cs-stagecard-link:hover, .rs-cs-body .rs-cs-stagecard-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

.rs-cs-body .rs-cs-stagecard:hover, .rs-cs-body .rs-cs-stagecard:focus-within {
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
}

.rs-cs-body .rs-cs-stagecard-h {
  position: relative;
  z-index: 1;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0;
  border-top: none;
  padding-top: 0;
  text-align: left;
}

/* Ghost numeral. Figma has it as a VECTOR: box 177-248 x 136, right edge pinned at
   362-20 and the vertical band fixed at 84 -> 220 on all five cards. Reproduced as
   text, so the two numbers below are derived, not eyeballed:
     ink height  = 0.724em for Montserrat 700 (canvas actualBoundingBox at 188px
                   gives 136.11) -> font-size 188px for Figma's 136
     ink top     = 27.6px below the box top at line-height 1 (measured with a
                   zero-height inline-block pinned to the baseline), so a box top of
                   56px puts the ink at 84px, which is what Figma specifies.
   Was bottom:-34px / 180px, i.e. positioned by guess against the wrong edge. Ink
   width lands ~5% wide of Figma's outlines (200 vs 177 on "01"); that is a font
   side-bearing difference on a 10%-opacity watermark and is not chased. */
.rs-cs-stagecard-n {
  position: absolute;
  right: 20px;
  top: 56px;
  z-index: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 188px;
  line-height: 1;
  color: #FFFFFF;
  opacity: 0.1;
  pointer-events: none;
}

/* Scoped under .rs-cs-body for BOTH colour and text-decoration: `.rs-cs-body a`
   sets coral + underline at 0,1,1 and beat a bare .rs-cs-stagecard-go (0,1,0), so
   the resting link shipped underlined and the hover rule then added the same
   underline again — default and hover were indistinguishable. */
.rs-cs-stagecard-go {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-family: "Hind Madurai", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
}

.rs-cs-body .rs-cs-stagecard-go {
  color: #FFFFFF;
  text-decoration: none;
}

.rs-cs-body .rs-cs-stagecard-go:hover, .rs-cs-body .rs-cs-stagecard-go:focus-visible {
  color: #FFC94B;
  text-decoration: none;
}

.rs-cs-body .rs-cs-stagecard:hover .rs-cs-stagecard-go {
  color: #FFC94B;
}

.rs-cs-stagecard-go i {
  transition: transform 0.18s ease;
}

.rs-cs-body .rs-cs-stagecard:hover .rs-cs-stagecard-go i {
  transform: translateY(3px);
}

/* Per-stage header (Figma sections 5/11/12/13/14). scroll-margin-top keeps the
   eyebrow clear of the sticky site header when a stage card jumps here. */
.rs-cs-stage-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 3.75rem 0 1.875rem;
  scroll-margin-top: 100px;
}

/* Eyebrow is grey-light-30 like every other eyebrow on the page, not coral.
   Roman updated Figma to match on 2026-08-20; the coral here was the older
   value in 1:4312. The ONE coral mark that stays is the face-smile glyph in
   the closing section (.rs-cs-final-ico) - that is an icon, not an eyebrow. */
.rs-cs-body .rs-cs-stage-n {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #D8E2E3;
  text-align: center;
  margin: 0;
}

.rs-cs-body .rs-cs-stage-t {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.3;
  color: #34383C;
  text-align: center;
  margin: 0;
  border-top: none;
  padding-top: 0;
}

.rs-cs-stage-head::after {
  content: "";
  width: 90px;
  height: 2px;
  background: #D8E2E3;
}

/* Results band (Figma sections 5/11/12/13/14, the teal panel that closes a
   stage). The 4x124 gold bar is the heading's own ::before so it cannot drift
   away from the word it marks. */
.rs-cs-results {
  background: linear-gradient(135deg, #69B9C9 0%, #4B9EB0 50%, #408897 100%);
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
  border-radius: 4px;
  padding: 60px;
  margin: 1.875rem 0;
  display: flex;
  align-items: center;
  gap: 82px;
}

.rs-cs-body .rs-cs-results-h {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 0 0 auto;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.3;
  color: #FFFFFF;
  margin: 0;
  border-top: none;
  padding-top: 0;
  text-align: left;
}

.rs-cs-results-h::before {
  content: "";
  flex: 0 0 4px;
  width: 4px;
  height: 124px;
  border-radius: 999px;
  background: #FFD87D;
}

.rs-cs-results-list {
  flex: 1 1 auto;
  min-width: 0;
}

.rs-cs-results-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.rs-cs-results-list li {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin: 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: #F9F9F9;
}

.rs-cs-results-ico {
  flex: 0 0 20px;
  font-size: 20px;
  line-height: 1.6;
  color: #FFD87D;
}

@media (max-width: 991.98px) {
  .rs-cs-body .rs-cs-stagecard {
    flex: 0 0 100%;
    min-height: 0;
  }
  .rs-cs-stagecard-n {
    font-size: 120px;
    bottom: -22px;
  }
  .rs-cs-body .rs-cs-stage-t {
    font-size: 28px;
  }
  .rs-cs-results {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    padding: 30px;
  }
  .rs-cs-body .rs-cs-results-h {
    font-size: 28px;
    gap: 20px;
  }
  .rs-cs-results-h::before {
    height: 44px;
  }
}
/* A lone <h2> — the closing "Konicowe Rezultaty" / "Final Results" section — gets
   the same centred treatment as a stage header. Declared BEFORE the kicker/headline
   pair rules below: `h2:not(:has(+ h2))` and `h2 + h2` both compute to 0,2,0, so
   source order is what stops this from also claiming the headline of a pair. */
.rs-cs-body > h2:not(:has(+ h2)) {
  border-top: none;
  padding-top: 0;
  padding-bottom: 20px;
  margin: 3.75rem 0 60px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.3;
  color: #34383C;
  text-align: center;
  position: relative;
}

.rs-cs-body > h2:not(:has(+ h2))::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 90px;
  height: 2px;
  background: #D8E2E3;
}

/* No rule between sections. The 1px #eee border + 2rem pad here was a divider
   Figma does not draw anywhere on this page - the only horizontal line in the
   frame is the 90x2 #D8E2E3 under a section TITLE, which the ::after rules
   above and below supply. */
.rs-cs-body > h2 {
  border-top: none;
  padding-top: 0;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

/* Kicker + headline pair: LIVE's own kicker color (rgb(216,226,227)) is
   near-invisible off the cream hero band it normally sits on (see docblock
   #2/#8 — no wrapper here) — substituted with the same grey used for the
   "Case study" eyebrow above, same precedent, not an invented style. */
/* 120px above a section eyebrow: the section top padding, and also the whole
   gap BETWEEN two sections. Roman specified it as 60 bottom + 60 top, which
   cannot be expressed as two margins here - these sections are flat siblings in
   .rs-cs-body, not wrapped boxes, and adjacent-sibling margins COLLAPSE to the
   larger of the two rather than adding. 60 + 60 would render 60. So the whole
   120 goes on the eyebrow, which gives the specified total in both places:
   above "Wstep" (from the Before/After band) and above "Rozwiazanie" (from the
   preceding paragraph, whose 14.4px bottom margin collapses into it).
   80px under lg, the same 2:3 step Roman used for the 60 -> 40 gaps. */
.rs-cs-body > h2:has(+ h2) {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
  color: #D8E2E3;
  text-align: center;
  margin-top: 120px;
  margin-bottom: 20px;
}

/* 60px from the title separator to the section content, the same figure the
   stage headers and the closing section already use. Measured 28px here before
   (the old 1.75rem) and 40px under the stage-cards headline, where the list own
   2.5rem top margin was collapsing over it and winning. 60 beats that collapse,
   so both land on 60. 40px under lg - see the mobile block below. */
.rs-cs-body > h2 + h2 {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 60px;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 3.25rem;
  color: #34383C;
  text-align: center;
  position: relative;
  padding-bottom: 1rem;
}

/* Figma line-6 is 90x2 #D8E2E3 on EVERY section title (1:4415, 1:4472, 1:3975),
   not a 48x3 coral bar - and it is the same rule the lone-h2 branch above already
   uses, so the two now agree. */
.rs-cs-body > h2 + h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 90px;
  height: 2px;
  background: #D8E2E3;
}

/* Styled run inside the stage-cards headline (Figma 1:4374). ONE text node there
   carries two runs: the lead at 700 and the trailing count at 400 ITALIC. Emitted
   as a span by step 2b of rs_cs_structure(), so no post_content edit is needed.
   Set on the span itself rather than relying on inheritance: the headline rule
   .rs-cs-body > h2 + h2 sets font-weight on the h2, which the span would otherwise
   inherit. NOTE the surrounding headline ships at 600 where Figma says 700 - that
   is a pre-existing gap in the kicker/headline pair above, deliberately not touched
   here; the italic run is 400 against either. */
.rs-cs-body .rs-cs-stages-run {
  font-weight: 400;
  font-style: italic;
}

@media (max-width: 767.98px) {
  .rs-cs-body h1 {
    font-size: 1.5rem;
    line-height: 2.125rem;
  }
}
/* Closing testimonial (Figma 1:3959). NOTE the selectors are scoped to .rs-cs,
   not .rs-cs-body — this block is a sibling of .rs-cs-bodywrap inside <main>, so
   a .rs-cs-body descendant selector never reaches it and the quote silently fell
   back to 16px system font. Card 1146x448 #F9F9F9 r4 pad 40; the
   portrait is a real 263x380 image pinned flush to the card's bottom edge and
   30px in from the right, sitting OUTSIDE the flex flow (Figma has it as an
   absolutely-positioned sibling of the text column, painted over it). The card
   keeps a min-height so the portrait always has its 380px, and a right padding
   reserve so long quotes never run under the person. */
/* Figma group 1:3959 is a 1440x534 white plate: 60 above the card, 448 card,
   26 below. */
/* 60px top AND bottom. Figma 1:3959 is now 1440x568 - 60 + the 448 card + 60 -
   where it used to be 534 with 26 below. Roman re-measured it 2026-08-20. */
.rs-cs-tm-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #FFFFFF;
  padding: 60px 20px;
}

.rs-cs-tm {
  max-width: 1146px;
  position: relative;
  background: #F9F9F9;
  border-radius: 4px;
  padding: 40px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  min-height: 448px;
  overflow: hidden;
}

/* main fills the card's 1066; it is the quote TEXT that stops at 812, which is
   exactly where the photo starts (card-x 853 - 40 pad = 813). Padding the whole
   column away from the photo instead made the measure 743 — 69px too narrow. */
.rs-cs-tm-main {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

.rs-cs .rs-cs-tm-quote p {
  max-width: 812px;
}

.rs-cs-tm-quote {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0;
}

/* 16px between quote paragraphs - the design system H5 paragraph spacing. The
   30px above stays as the mark-to-text gap (Figma quote frame 1:3963), so the
   two cannot be one flex gap; the paragraphs need their own column. */
.rs-cs-tm-quote-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rs-cs-tm-mark {
  width: 23px;
  height: 20px;
  opacity: 0.8;
}

.rs-cs .rs-cs-tm-quote p {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #34383C;
}

/* font-style:normal is load-bearing: reset.css carries a bare
   `figcaption{font-style:italic}`, and font-style INHERITS — so the name and role
   rendered italic even though both rules set family, weight and size. Same shape
   as the parent-theme button reset trap. */
.rs-cs-tm-person {
  display: flex;
  align-items: center;
  gap: 20px;
  font-style: normal;
  align-self: flex-start;
}

.rs-cs-tm-logo {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 60px;
}

.rs-cs-tm-who {
  display: flex;
  flex-direction: column;
}

.rs-cs-tm-name {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #5D636A;
}

.rs-cs-tm-role {
  font-family: "Hind Madurai", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: #5D636A;
}

.rs-cs-tm-photo {
  position: absolute;
  right: 30px;
  bottom: 0;
  width: 263px;
  height: 380px;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 991.98px) {
  .rs-cs-tm {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: 24px;
  }
  .rs-cs-tm-main {
    padding-right: 0;
  }
  .rs-cs-tm-photo {
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 263px;
    height: auto;
    margin-top: 20px;
  }
}
/* Cream/white split behind the Before/After card (Figma 1:4420). The section's
   bottom half is a white 1440x246 rect and its top half inherits the hero's
   #F9FAF4, so the 492-tall card sits exactly 246 above / 246 below the seam.
   With .rs-cs-bodywrap at zero padding the band's height IS the card's height,
   so a plain 50% stop lands on the card's midpoint — no offset arithmetic. */
.rs-cs-ba-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: linear-gradient(#F9FAF4 0 50%, #FFFFFF 50% 100%);
}

/* ---- Stage bands + prose cards (Figma 1:4310 / 1:4083) -------------------
   A stage is a full-bleed band holding a 950 column of cards, not loose prose.
   Measured: section fill #F9F9F9, card fill #FFFFFE, card pad 40, card gap 20,
   column gap 30, radius 4, NO card shadow (only the Results band has one).
   Sections alternate grey/white down the page, and the card inverts against its
   band so it always reads as a raised surface.
   The Results band is a sibling of the card column at the section's full 1154,
   not 1146 — hence its own breakout below, overriding the body-level -98. */
.rs-cs-stage {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 60px 20px;
}

.rs-cs-stage--a {
  background: #F9F9F9;
}

.rs-cs-stage--b {
  background: #FFFFFF;
}

/* Closing "Koncowe Rezultaty" section (Figma 1:3973). Its own full-bleed WHITE
   section after the last stage band, lifted out of the stage split by step 5a of
   rs_cs_structure() - before that it rendered as a white card inside the grey
   Etap 5 band, which is the one thing it must not look like.
   Title block is a 20px flex column: coral face-smile, the H2, then the 90x2
   rule - one gap instead of three margins. 60px from the title block to the
   prose, matching the section gap in the frame.
   Full-bleed unconditionally, same as .rs-cs-stage above, not gated at 1200 like
   the 1146 breakout - this section is 100vw at every width. */
/* Centred with FLEX, not auto margins. The auto-margin version silently failed:
   `.rs-cs-body p` sets `margin:0 0 .9rem` and the h2 rule below sets
   `margin:0 0 60px` - both SHORTHANDS, so both zero the inline sides, and both
   outrank `.rs-cs-final > *` (0,1,1 and 0,2,1 vs 0,1,0). The 950 box therefore
   sat hard left while its own text-align kept the title looking centred inside
   it, which is the misalignment in the screenshot. align-items:center does not
   care what the children do with their margins. */
.rs-cs-final {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #FFFFFF;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rs-cs-final > * {
  width: 100%;
  max-width: 950px;
}

.rs-cs-body .rs-cs-final h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0 0 60px;
  border-top: none;
  padding: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.3;
  color: #34383C;
  text-align: center;
}

.rs-cs-body .rs-cs-final h2::after {
  content: "";
  width: 90px;
  height: 2px;
  background: #D8E2E3;
}

.rs-cs-final-ico {
  font-size: 20px;
  line-height: 1.6;
  color: #FF6D66;
}

.rs-cs-stage .rs-cs-stage-head {
  margin: 0 0 60px;
}

.rs-cs-stage-main {
  max-width: 950px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.rs-cs-stage > .rs-cs-results {
  max-width: 1154px;
  margin: 60px auto 0;
}

.rs-cs-stagebox {
  background: #FFFFFF;
  border-radius: 4px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rs-cs-stage--b .rs-cs-stagebox {
  background: #F9F9F9;
}

/* The card's 20px gap owns the vertical rhythm, so the inherited per-tag margins
   would double it. Same for the bare <h3> that sits on the band between cards. */
.rs-cs-body .rs-cs-stagebox > * {
  margin-top: 0;
  margin-bottom: 0;
}

.rs-cs-body .rs-cs-stage-main > h3 {
  margin: 0;
  border-top: none;
  padding-top: 0;
  text-align: center;
  font-size: 32px;
  line-height: 1.3;
  color: #34383C;
}

/* Substage title = the design system H4: Montserrat 700 24px/1.4 #34383C
   (Figma 1:4340, 1:4192). It shipped at 600 20px/27px #212529, which is the
   Bootstrap h4 default showing through rather than a chosen style. These are
   the "01." / "02." titles - headings for a subsection of the H3, not quotes. */
.rs-cs-body .rs-cs-stagebox h4 {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #34383C;
  border-top: none;
  padding-top: 0;
  text-align: left;
}

/* Pull-quote callout inside a stage card (Figma 1:4179 / 1:4320 / 1:4353).
   Figma has THREE variants — grey #F9F9F9 with #34383C text, teal #F0F8F9 with
   #408897 text, and teal with a 4px full-radius #4B9EB0 bar and no padding. The
   flat body carries no signal for which one a given quote should be, so the
   bar variant is used throughout: it is the most distinctive of the three and
   the one that appears more than once. Picking per-quote needs editorial markup. */
.rs-cs-callout {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #F0F8F9;
  border-radius: 4px;
  padding: 20px;
  margin: 0;
}

.rs-cs-callout::before {
  content: "";
  flex: 0 0 4px;
  align-self: stretch;
  min-height: 32px;
  border-radius: 999px;
  background: #4B9EB0;
}

.rs-cs-body .rs-cs-callout p {
  margin: 0;
  font-family: "Hind Madurai", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.6;
  color: #408897;
}

/* The other two callout variants. Chosen in PHP (step 5b area) from punctuation
   and length, never keywords, so the rule holds in EN and PL alike.
   ORDER MATTERS: both ::before suppressions and the grey p colour tie on
   specificity with the base rules above (1 and 2 classes respectively), so they
   win on source order alone. Keep them AFTER the base callout block. */
/* 1:4353 - teal, no bar. The short aside. */
.rs-cs-callout--plain::before {
  content: none;
}

/* 1:4320 - grey, no bar, ink text. The question the section goes on to answer. */
.rs-cs-callout--grey {
  background: #F9F9F9;
}

.rs-cs-callout--grey::before {
  content: none;
}

.rs-cs-body .rs-cs-callout--grey p {
  color: #34383C;
}

/* Body lists inside a card: Figma indents every ITEM 40px (not the wrapper),
   20px icon-to-text, 10px between items, coral marker.
   ⚠️ The marker is a coral disc, NOT the Figma glyph. Figma uses a different FA
   glyph per list — circle-exclamation in Etap 1, check in Etap 3, star and
   circle-small in Etap 2 — and flat post_content carries nothing to tell them
   apart. A single guessed glyph would be wrong on most lists, so the geometry and
   the accent colour are reproduced and the glyph is left for editorial markup. */
.rs-cs-body .rs-cs-stagebox ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rs-cs-body .rs-cs-stagebox ul li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 0;
  padding-left: 40px;
  font-size: 20px;
  line-height: 1.6;
  color: #5D636A;
}

.rs-cs-body .rs-cs-stagebox ul li::before {
  content: "";
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin-top: 11px;
  border-radius: 50%;
  background: #FF6D66;
}

/* Per-stage FA glyph, emitted as a span by step 5b of rs_cs_structure(): Etap 1
   circle-exclamation, Etap 3 and 5 check. Figma's icon box is 20x32 and the li
   already owns the 20px gap and the 40px indent, so only the mark needs sizing;
   line-height 1.6 at 20px gives the same 32px line box as the text, which is what
   keeps the glyph on the first line without a margin nudge.
   Etap 2 has NO entry in that map and keeps the disc above - Figma asks for
   circle-small, which is absent from this theme's FA7 Pro subset in both weights
   (probed against a bogus control class: both return content:none), and a coral
   disc is what circle-small draws anyway.
   The disc stands down only for items that actually got a span - 3 classes here
   beats the 2-class base rule, so this does not depend on source order. */
.rs-cs-body .rs-cs-stagebox ul li > .rs-cs-li-ico {
  flex: 0 0 20px;
  width: 20px;
  font-size: 20px;
  line-height: 1.6;
  color: #FF6D66;
  text-align: center;
}

.rs-cs-body .rs-cs-stagebox ul li:has(> .rs-cs-li-ico)::before {
  content: none;
}

@media (max-width: 991.98px) {
  .rs-cs-body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .rs-cs-stage {
    padding: 40px 20px;
  }
  .rs-cs-stagebox {
    padding: 24px;
  }
  .rs-cs-body .rs-cs-stagebox ul li {
    padding-left: 0;
  }
  /* 40px separator-to-content under lg, the mobile counterpart of the 60px
     above. Applies to all four section shapes: stage header, kicker+headline
     pair, lone h2, and the closing section. */
  .rs-cs-stage .rs-cs-stage-head {
    margin: 0 0 40px;
  }
  .rs-cs-body > h2 + h2 {
    margin-bottom: 40px;
  }
  .rs-cs-body > h2:has(+ h2) {
    margin-top: 80px;
  }
  .rs-cs-body > h2:not(:has(+ h2)) {
    margin-bottom: 40px;
  }
  .rs-cs-body .rs-cs-final h2 {
    margin-bottom: 40px;
  }
}
/* Full-bleed breakout for the three designed blocks: prose stays at 950, these
   widen to 1146, so (1146 - 950) / 2 = 98px of negative inline margin each side.
   Gated at xl because below 1200 the viewport itself is narrower than 1146 and
   the blocks would hang off-canvas.
   ⚠️ This MUST stay at the end of the file. .rs-cs-ba / .rs-cs-stages /
   .rs-cs-results each set `margin` as a shorthand, which zeroes the inline sides;
   a media query adds no specificity, so declared any earlier this loses to those
   shorthands on source order alone and the cards silently wrap 2+2+1 instead of
   the designed 3+2. That is exactly how it failed the first time. */
@media (min-width: 1200px) {
  .rs-cs-body .rs-cs-stages, .rs-cs-results {
    margin-left: -98px;
    margin-right: -98px;
  }
  /* Inside a stage the band is a sibling of the 950 column, directly on the
     section, so it needs NO negative margin — it takes the section's own 1154. */
  .rs-cs-stage > .rs-cs-results {
    margin-left: auto;
    margin-right: auto;
  }
  /* Grey strip under the stage-card row (Figma 1:4368). That section is NOT one
     colour: rect 1:4369 is 1440x630 #FFFFFE and rect 1:4370 is 1440x180 #F9F9F9
     at y=630, so the boundary BISECTS cards 4-5 at their exact vertical midpoint
     and then runs on into the Etap 1 band, which is the same #F9F9F9.

     Anchored to the <ol>, not the section, so the title spacing above cannot move
     it: the list box is 510 tall (240 + 30 gap + 240), so row 2 spans 270->510 and
     its midpoint is 390 = calc(100% - 120px). Figma agrees — its boundary at y=630
     minus the cards block at y=240 is also 390. The extra 2.5rem of height is the
     list own margin-bottom, which is what closes the gap to the band below.

     Gated at 1200 with the breakout above on purpose: the 3+2 wrap only exists at
     1146 wide. From 992-1199 the cards wrap 2+2+1 and below 992 they stack full
     width, so there is no "cards 4-5 midpoint" to bisect and the strip would cut
     a random card in half.

     z-index rather than a negative one: .rs-cs-stages takes position:relative but
     no z-index, so it opens no stacking context, and a -1 here would drop the
     strip behind an ancestor background instead of behind the cards. */
  .rs-cs-body .rs-cs-stages {
    position: relative;
  }
  .rs-cs-body .rs-cs-stages::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    top: calc(100% - 120px);
    height: calc(120px + 2.5rem);
    background: #F9F9F9;
  }
  .rs-cs-body .rs-cs-stagecard {
    z-index: 1;
  }
}