@charset "UTF-8";
.rs-ai-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  width: fit-content;
  margin-bottom: 40px;
  font-family: "Hind Madurai", sans-serif;
}

.rs-ai-summary--stacked {
  flex-direction: column;
  gap: 16px;
  margin-left: auto;
  margin-right: auto;
}
.rs-ai-summary--stacked .rs-ai-summary-btns {
  justify-content: center;
}

.rs-ai-summary-label {
  font-size: 14px;
  line-height: 1.6;
  color: var(--rs-text, #5D636A);
}

.rs-ai-summary-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rs-ai-summary .rs-ai-summary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px 7px 7px;
  border: 1px solid #EBF2F2;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rs-black, #34383C);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.rs-ai-summary .rs-ai-summary-btn img {
  width: 24px;
  height: 24px;
}
.rs-ai-summary .rs-ai-summary-btn:hover, .rs-ai-summary .rs-ai-summary-btn:focus-visible {
  background: #EBF2F2;
  color: var(--rs-black, #34383C);
}

.rs-ai-summary-tip code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  color: inherit;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
}

/* ===== 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;
}

/* margin-bottom was 60 (live, title straight onto the card). Since 2026-10-01 the
   "Summarize this article" row sits between them: Figma 44074:22103 puts title, row
   and card in one column with gap 40, so 40 here + the row's own 40 below it. */
.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 40px;
}

/* Both columns top-align. Roman, 2026-09-03: "the left content part should be
   aligned to the top edge, not centered ... if some CS articles have no tools
   section at all, the left content part should be aligned to the top edge
   anyway" — which is grecos exactly: no toolkit, so the short left column floated
   in the middle of a 528px row. Was align-items:center. */
.rs-cs-card {
  background: #FFFFFF;
  border-radius: 4px;
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

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

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

/* HEIGHT is the fixed axis, width hugs the artwork. A square frame fits a wide
   wordmark to the 60px WIDTH and letterboxes the other 49px of height: measured,
   Moliera2's 330x60 mark painted at 60x10.9 (18% of the frame) and vufinder's
   223x61 at 60x16.4. Square logos (instytut 120x120, angelus24/grecos 60x60 svg,
   go2market 60x60) resolve to 60x60 and are bit-identical to before.
   max-width is declared locally rather than leaned on: the only thing clamping
   this at 375 today is base.css's img{max-width:100%}, and this project has
   been burned by that file twice. */
.rs-cs-client-logo {
  width: auto;
  height: 60px;
  max-width: 100%;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Per-item inset for a mark that reads too heavy at the full 60. Roman, 2026-09-03:
   "I cannot find the unified approach to fit logos correctly ... they need to be
   verified manually because all logos have different sizes and inner margins.
   However for Moliera2 the best would be to use 16px paddings from above and
   below." 60 - 2x16 = 28. Opt-in per row via the `_rs_logo_inset` post meta, the
   same shape as _rs_quote_photo_flush — there is no rule to derive here, which is
   his point. */
.rs-cs-client-logo--inset {
  height: 28px;
}

.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;
}

/* 20px between the descriptive paragraph and the meta bullets — Oskar, from
   Universe 30580:32461. Was 10px on all 12 rows. */
.rs-cs-blurb {
  font-size: 20px;
  line-height: 1.6;
  color: #5D636A;
  margin: 0 0 20px;
}

/* 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);
}

/* text-desktop-XS(B), Bold 14/150 — was 2S (SemiBold 16/160). Roman, 2026-09-24:
   the value matches its XS label and keeps the hero card shorter; Universe
   30580:32468 draws it this way. Mobile steps are in the hero-type block below. */
.rs-cs-meta-row dd {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  color: #408897;
  margin: 0;
}

/* 15px to the tool list, not 20 — Universe 30580:32484 `toolkit` is a column with
   gap 15. Read off the frame 2026-09-03; the 20 was inherited from the C1 live
   reading. text-desktop-2S = Bold 16/150 as the Figma style resolves (30580:32485);
   the "SemiBold 16/160%" caption in the typography frame is stale. */
.rs-cs .rs-cs-toolkit-h {
  font-family: "Hind Madurai", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #34383C;
  margin: 0 0 15px;
}

/* 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;
}

/* The text column needs min-width:0 too, or a long description refuses to wrap
   and paints straight over the next column's icon — measured on go2market PL,
   where "wewnatrzzespolowa baza wiedzy" ran 65px past its own cell and covered
   the Google Drive icon completely. */
.rs-cs-toolkit li > div {
  min-width: 0;
}

/* TWO COLUMNS MAX; rows grow to ceil(n/2). The grid above hard-codes 2 rows, so a
   5th tool silently opens a THIRD column and starves all of them (go2market
   measured 132/132/244px against everyone else's 259/259). Roman, 2026-09-02:
   "in the hero card we do not use 3 rows logic in the apps section, always 1 or 2"
   — that is a column count, not a row count: at 375 the approved instytut
   reference itself renders 3 rows, so the row reading would fail its own
   reference. Stated as explicit rows rather than auto-fit because the
   column-major fill order above is load-bearing for the approved render.
   A future 7-tool row wants repeat(4,auto); max today is 5. */
@media (min-width: 992px) {
  /* rows = ceil(n/2), so the grid is 2 columns at every count. Two tools want ONE
     row, not a single column with the right half empty — grecos is the first item
     with only two. */
  .rs-cs-toolkit:not(:has(> li:nth-child(3))) {
    grid-template-rows: auto;
  }
  .rs-cs-toolkit:has(> li:nth-child(5)) {
    grid-template-rows: repeat(3, auto);
  }
}
.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;
}

/* Top-aligned, not centred (Roman, 2026-09-02: "globally image from the right
   side should be aligned to the top"). align-items:center on the card floats
   whichever column is shorter — measured as 37px of dead space above the photo on
   instytut, 98px on go2market, 51px on moliera2. Set on the media item alone so
   the left column keeps its current vertical position on the six rows where the
   photo is already the taller of the two. */
.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;
}

/* The photo rides down beside a long text column instead of leaving a blank block
   under it (Roman, 2026-09-24). top = the fixed 76px header + the card's own 30px
   padding, so it keeps its resting gap. Two-column layout only, and only when the
   viewport can show the whole 528px photo plus that offset — otherwise its bottom
   would stay hidden until the card ends. main.rs-cs clips with overflow-x:clip,
   which creates no scroll container, so sticky works through it. */
@media (min-width: 992px) and (min-height: 680px) {
  .rs-cs-card-media {
    position: sticky;
    top: 106px;
  }
}
@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;
  }
}
/* Coach byline (post meta `_rs_cs_coaches`, JSON [{name,photo,period}]) — one row per coach below the
   toolkit, quieter than the testimonial card: no card chrome, no photo lift,
   just a 40px round avatar + name + engagement period at the hero's small
   caption scale (Figma 43817:23292/43817:23332 name/period tokens). Kept a
   single row at every width rather than Figma's mobile centred-column stack —
   the hero's own client lockup already stays a row at 375, one pattern
   instead of two for the same card. */
.rs-cs-coaches {
  margin-top: 20px;
}

/* Same 2S heading as the toolkit's (Universe 43817:23540) — was a quieter
   SemiBold 14/160 #5D636A. */
.rs-cs-coaches-h {
  font-family: "Hind Madurai", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #34383C;
  margin: 0 0 10px;
}

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

.rs-cs-coach {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The whole card is the link to the coach's author page: same row, no link colour; the name turns coral on hover/focus. */
.rs-cs-coach-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

/* Hover was an underline; the no-underline ruling (2026-10-27) swaps it for the Figma
   Link text black ramp (33721:24628): #34383C rest, #F35B54 hover, #D9514B click. */
.rs-cs-coach-link:hover .rs-cs-coach-name, .rs-cs-coach-link:focus-visible .rs-cs-coach-name {
  color: #F35B54;
}

.rs-cs-coach-link:active .rs-cs-coach-name {
  color: #D9514B;
}

.rs-cs-coach-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 40px;
}

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

.rs-cs-coach-name {
  font-family: "Hind Madurai", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.6;
  color: #34383C;
}

.rs-cs-coach-period {
  font-family: "Hind Madurai", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #5D636A;
}

/* Hero-card type on the mobile ladder (Universe typography 30665:16853, mobile
   column): 2S -> Bold 14/150, XS -> 12/140 Regular for labels and Bold for values.
   After the rules it overrides, same specificity, so source order decides. */
@media (max-width: 767.98px) {
  .rs-cs .rs-cs-toolkit-h, .rs-cs-coaches-h {
    font-size: 14px;
  }
  .rs-cs-meta-row dt, .rs-cs-meta-row dd {
    font-size: 12px;
    line-height: 1.4;
  }
}
/* 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;
}

/* Body visuals centre on the measure. Roman, 2026-09-04: "images should be
   centered - globally". Block + auto inline margins, NOT text-align on the
   paragraph: 6 of the 12 rows author the image INSIDE a copy paragraph separated
   only by <br> (instytut EN+PL, angelus24 EN+PL, moliera2 PL), so centring the
   paragraph would centre that copy with it. What moves is every image inside
   .rs-cs-stagebox, whose column flex stretches the paragraph to full width and
   leaves the inline image hard left. In .rs-cs-final the horizontal position does
   not change — that section is already a centring flex column — but moliera2's
   <a><img></a> there does get boxed by its paragraph instead of overflowing a
   28px line box, so it is not literally a no-op.
   svg keeps the inline default on purpose: no body carries one today (measured on
   all 12 rows) and an inline icon is what one would be. */
.rs-cs-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
}

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

/* THE <br> AFTER A BLOCK IMAGE IS A DEAD 32px LINE. It used to end the image's own
   line; the block now does that, so the <br> renders an empty line box on top. That
   cost 32px per occurrence and it landed on rows nobody asked to change: instytut PL
   +224px over 10 paragraphs (the approved reference row) and angelus24 EN+PL +160px
   over 5. Measured against the same DOM with only this declaration toggled — with
   this rule every one of the 12 rows is back to its exact pre-change document height
   and no paragraph changes height at all.
   ONLY the trailing one. Suppressing the <br> BEFORE an image as well over-corrects:
   that one is still ending a real line of copy, and killing it shrank instytut PL by
   448px and angelus24 EN by 64px against the same baseline. */
.rs-cs-body img + br {
  display: none;
}

/* 20px minimum between body copy and any visual (Roman, 2026-09-03: "globally
   that gap between text body and visuals is always 20px minimum"). Only the closing
   section's tables were under it — measured 14px on go2market EN and PL; images sit
   at exactly 20 already because inside a stage box the flex gap owns the spacing.
   Declared here, ABOVE .rs-cs-stagebox > * { margin:0 }, so boxes keep their gap. */
.rs-cs-body figure.wp-block-table, .rs-cs-body > table {
  margin-top: 20px;
}

.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;
}

/* No underline on in-prose links (Roman, 2026-10-27: the Link text no-underline
   ruling covers case-study prose too, accepting the WCAG 1.4.1 trade-off). Hover
   and active take the Figma Link text coral ramp (33721:24628) so the state still
   reads by colour. Scoped to unclassed anchors: those are the editor's links;
   classed ones (stage cards, CTA button) carry their own hover. */
.rs-cs-body a {
  color: #F35B54;
  text-decoration: none;
}

.rs-cs-body a:not([class]):hover, .rs-cs-body a:not([class]):focus-visible {
  color: #D9514B;
}

.rs-cs-body a:not([class]):active {
  color: #C64843;
}

.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 read via getComputedStyle (grecos/go2market): 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;
}

/* RETIRED — the hero meta table is lifted into the <dl> above, so nothing in the
   body is that table any more. The label/value pill styling that used to live here
   (display:block, max-width:640px, hidden <thead>, coral bullet on the first cell)
   went on matching every OTHER table instead: go2market's four-column metrics table
   rendered as a bulleted list at 640px inside a 950px column with its header row
   hidden, which is the "table elements I never designed" Roman photographed. The
   generic rule ~35 lines above (width:100%, border-collapse, 1px cell borders) is
   what a data table should get, and it is now what it gets. */
/* 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.
   ---- */
/* TWO stops. Roman simplified the card gradient on 2026-09-03: "only two teals
   colors now, angle -56 degrees from top-left to the bottom-right corner", which is
   CSS 135deg. 1:4385 and 1:4377 both read #4B9EB0 -> #408897.
   The Results frame 1:4070 still carries a third stop, #69B9C9 at 0 — but the next
   stop sits at 0.0001, so it paints a sub-pixel sliver and renders identically.
   Dropped rather than mirrored: it is a leftover, not a difference. */
/* 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. */
/* No resting shadow. 1:4377 — which I first read as the default — is the HOVER
   frame; 1:4385 is the default and carries no effects at all (Roman, 2026-09-03:
   "we have shadows only on hover"). */
.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, #4B9EB0 0%, #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) 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;
  transition: color 0.18s ease;
}

/* 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;
}

/* White at rest (1:4385), #FFC94B on hover (1:4377). I had these the wrong way
   round for an afternoon after reading the hover frame as the default. */
.rs-cs-body .rs-cs-stagecard-go {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.18s ease;
}

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

/* The card TITLE turns with the link on hover — Roman's suggestion, and 1:4377
   paints "Audyt" #FFC94B where 1:4385 has it white. The ghost numeral stays white
   in both frames, so it is deliberately excluded. */
.rs-cs-body .rs-cs-stagecard:hover .rs-cs-stagecard-go,
.rs-cs-body .rs-cs-stagecard:focus-within .rs-cs-stagecard-go,
.rs-cs-body .rs-cs-stagecard:hover .rs-cs-stagecard-h,
.rs-cs-body .rs-cs-stagecard:focus-within .rs-cs-stagecard-h {
  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;
}

/* max-width 950 is the .rs-cs-body measure (line ~112), so a stage title wraps
   where the prose under it wraps — Roman: "wrong size for a title container, it
   should be the same as body article text container". Measured before: titles ran
   to 1310px against a 950px body on 8 of the 12 rows; instytut passed only because
   none of its five happens to exceed 950. Capped on the flex ITEM, not the header,
   so the header box, the eyebrow and the 90x2 ::after do not move. */
.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;
  max-width: 950px;
}

.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. */
/* 60px above, separating it from the white card it closes (Roman, 2026-09-03).
   Was 30px top and bottom. */
/* gap 60, not 82 — Figma 1:4070 is a row with gap 60 and padding 60 all round. */
.rs-cs-results {
  background: linear-gradient(135deg, #4B9EB0 0%, #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: 60px 0 0;
  display: flex;
  align-items: center;
  gap: 60px;
}

/* The title column is a FIXED 404, not a hug. Figma 1:4070: 1154 band, 60 padding
   each side, title 404, gap 60, list 570 — the list is the only part that flexes.
   Hugging made the split follow the label instead of the design: measured on grecos,
   "The result of this test" gave 478/496 and "Goals reached in this stage" 598/376,
   so the longer the heading the narrower the content beside it. Roman, 2026-09-03:
   "wrong width for left and right parts". 404 - 4 bar - 30 gap leaves 370 for the
   text to wrap in. */
.rs-cs-body .rs-cs-results-h {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 0 0 404px;
  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;
}

/* A Results section may be prose instead of a list — same measure and colour as
   the list items beside it. */
.rs-cs-body .rs-cs-results-list p {
  margin: 0 0 15px;
  font-family: "Hind Madurai", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: #F9F9F9;
}

.rs-cs-body .rs-cs-results-list p:last-child {
  margin-bottom: 0;
}

.rs-cs-body .rs-cs-results-list p strong {
  color: #FFFFFF;
}

.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;
  }
  /* flex-basis is the CROSS axis once the band stacks, so 404 would become a
     height. Back to auto, full width. */
  .rs-cs-body .rs-cs-results-h {
    flex: 0 0 auto;
    width: 100%;
    font-size: 28px;
    gap: 20px;
  }
  .rs-cs-results-h::before {
    height: 44px;
  }
}
/* Stage cards on mobile (Figma 1:1959, 335 wide): 20 padding, 20/1.4 title, a
   fixed 20 gap to "Go to" instead of space-between, 20 between cards. That gives
   Figma's 114 (one-line title) and 142 (two-line) card heights exactly.
   Ghost numeral: Figma draws a 90-tall VECTOR with its ink 10px in from the
   right and bottom edges on every card. As text: 90 / 0.724em ink = 124px. At
   line-height 1 the "0" ink bottom sits 15.5px above the box bottom (baseline
   17.5px above it, minus the 2px overshoot), so bottom:-5.5px lands the ink at
   10. top:auto clears the desktop top:56px, which otherwise wins over bottom.
   right:7px because each digit's right side-bearing differs (0.4-9.6px at
   124px): 02-05 land within 1-3px of Figma's 10, while "01" sits ~7px further in. */
@media (max-width: 767.98px) {
  .rs-cs-body .rs-cs-stages {
    gap: 20px;
  }
  .rs-cs-body .rs-cs-stagecard-link {
    padding: 20px;
    justify-content: flex-start;
    gap: 20px;
  }
  .rs-cs-body .rs-cs-stagecard-h {
    font-size: 20px;
  }
  .rs-cs-stagecard-n {
    font-size: 124px;
    top: auto;
    right: 7px;
    bottom: -5.5px;
  }
}
/* 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. */
/* Title -> 90x2 line = 20px (Figma 30580:32278, the same gap the stage header already has): 22px = 20 gap + the 2px line drawn at bottom:0. Was 16px (14px visible) on pairs, 20px (18px) on singles. */
.rs-cs-body > h2:not(:has(+ h2)) {
  border-top: none;
  padding-top: 0;
  padding-bottom: 22px;
  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. */
/* Kicker labels ("Introduction", "Solution"…) are emitted as <p class="rs-cs-kicker">
   by template-case-study.php, not <h2>: they are section labels, not headings, and
   read as empty H2s in the outline. Each kicker rule below carries a parallel
   .rs-cs-kicker selector; this one restores the face the h2 got from `.rs-cs-body h2` and has to
   out-rank `.rs-cs .rs-cs-body p` (Hind Madurai). */
.rs-cs .rs-cs-body p.rs-cs-kicker {
  font-family: Montserrat, sans-serif;
}

.rs-cs-body > h2:has(+ h2), .rs-cs-body > .rs-cs-kicker {
  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, .rs-cs-body > .rs-cs-kicker + 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: 22px;
}

/* 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, .rs-cs-body > .rs-cs-kicker + 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. */
/* The line between the stage-cards title and the cards is a subtitle, so it is
   centred with the title rather than left-aligned under it (Roman, 2026-09-03).
   Only moliera2 and go2market author one; :has() means no markup change. */
.rs-cs-body > p:has(+ ol.rs-cs-stages) {
  text-align: center;
}

.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;
  gap: 40px;
  min-height: 448px;
  overflow: hidden;
}

.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;
}

.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;
}

.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-company {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: #5D636A;
}

.rs-cs-tm + .rs-cs-tm {
  margin-top: 30px;
}

.rs-cs-tm-photo {
  flex: 0 0 263px;
  width: 263px;
  height: 380px;
  align-self: center;
  border-radius: 4px;
  object-fit: cover;
  object-position: top center;
}

@media (min-width: 992px) {
  .rs-cs-tm--flush .rs-cs-tm-photo {
    position: absolute;
    right: 30px;
    bottom: 0;
    align-self: auto;
  }
}
@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 {
    flex: none;
    width: 100%;
    max-width: 263px;
    height: auto;
    align-self: flex-start;
    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. */
/* The full-bleed bands (this one, .rs-cs-stage, .rs-cs-final, .rs-cs-tm-wrap) are
   100vw, and 100vw includes a classic vertical scrollbar, so each overhung the
   viewport by ~7px a side and the page scrolled sideways (all 12 rows, any
   browser with a non-overlay scrollbar). clip, not hidden: it creates no scroll
   container, so position:sticky inside keeps working. */
main.rs-cs {
  overflow-x: clip;
}

.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;
}

/* Closing-chapter lists. Roman, 2026-09-04: "in the final 'Result' chapter [use]
   the bulleted list with 'check' icons and brand teal color - as a sign of success.
   Current style is totally wrong - even text size is smaller." It was 18px/29.7px
   plain grey discs, sitting a section away from a teal Results band whose own list
   is 20px with a check — so the size complaint is literal, 18 against 20.
   Every value here is read off Figma 1:4152, which is the frame he cited, and every
   one of them is already what .rs-cs-stagebox ul implements: wrapper gap 10 ($l2),
   item row gap 20 with 40px left padding ($l3), text 20px/1.6 #5D636A ($t1/$c1),
   20px icon column. The 20px between the lead-in and the list is that frame's own
   outer gap ($l1).
   THE TEAL IS AN OVERRIDE OF THE FRAME, not a reading of it: 1:4152 draws the checks
   coral and Roman asked for teal in the same sentence that cited it. #408897 is the
   teal this stylesheet already uses for text and small marks (meta value, toolkit
   name); #4B9EB0 is its light end and reads washed out at 20px on white. */
.rs-cs-body .rs-cs-final ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rs-cs-body .rs-cs-final ul li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 0;
  padding-left: 40px;
  font-family: "Hind Madurai", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: #5D636A;
  text-align: left;
}

.rs-cs-body .rs-cs-final ul li > .rs-cs-final-li-ico {
  flex: 0 0 20px;
  width: 20px;
  font-size: 20px;
  line-height: 1.6;
  color: #408897;
  text-align: center;
}

/* 20px on BOTH sides of a closing-chapter list, and the two declarations below are
   what make it 20 rather than 34 or 0. .rs-cs-final is a flex column, so adjacent
   margins do NOT collapse: a plain lead-in paragraph's own 14.4px bottom margin
   ADDED to the list's 20px top margin and measured 34px on vufinder, while
   moliera2's lead-in carries .rs-cs-leadin (margin:0) and measured a correct 20.
   Zeroing the bottom margin of whatever introduces the list makes both shapes 20,
   from one rule, instead of depending on which class the paragraph happens to have.
   Below the list it measured 0px on both rows — the following copy sat against the
   last item — so the same 20 goes on the far side. `+ *` rather than `+ p` because
   moliera2 runs list / lead-in / list and that lead-in needs it too. */
.rs-cs-body .rs-cs-final p:has(+ ul) {
  margin-bottom: 0;
}

.rs-cs-body .rs-cs-final p + ul {
  margin-top: 20px;
}

.rs-cs-body .rs-cs-final ul + * {
  margin-top: 20px;
}

@media (max-width: 767px) {
  .rs-cs-body .rs-cs-final ul li {
    padding-left: 0;
  }
}
.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;
}

/* Grey stagebox outside a grey band - Angelus24 closing chart (Figma 30580:32309: 950 box, 40 padding, 870x467 image). */
.rs-cs-stagebox--grey {
  background: #F9F9F9;
}

.rs-cs-body .rs-cs-stagebox--grey {
  margin-top: 20px;
}

/* 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. */
/* A colon heading that introduces a list, demoted by step 0b of rs_cs_structure().
   Bold body copy, not a heading: it is the list's first line, not a section. */
/* Figma 1:4152 renders the lead-in as ORDINARY body copy — 400 20/1.6 #5D636A,
   full width — not bold and not a heading. I shipped 600/#34383C on Roman's "or
   just bolded"; the frame settles it the other way. Its list geometry (40px indent,
   20px icon gap, 10px between items) already matches ours. */
.rs-cs-body .rs-cs-leadin {
  margin: 0;
  font-family: "Hind Madurai", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: #5D636A;
}

/* Figma 1:4180 "bolded text widget", read 2026-09-03. The bar is an INSIDE STROKE
   on the frame's left edge — 4px, #408897, full height — not an inset pseudo-item.
   Ours floated it 20px in from the edge, sized it to the text rather than the box,
   and painted it #4B9EB0. Padding is [16,16,16,24] measured from the frame edge,
   and the stroke overlaps that, so border-left:4 + padding-left:20 puts the text at
   the same 24. Fill #F0F8F9 and the 600 20/1.6 Hind Madurai #408897 text already
   matched. */
.rs-cs-callout {
  display: flex;
  align-items: center;
  background: #F0F8F9;
  border-left: 4px solid #408897;
  border-radius: 4px;
  padding: 16px 16px 16px 20px;
  margin: 0;
}

.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. */
/* 1:4353 — 870x72, no bar, padding 20 all round. Our 16 made it 64. */
.rs-cs-callout--plain {
  border-left: none;
  padding: 20px;
}

/* 1:4320 - grey, no bar, ink text. The question the section goes on to answer. */
/* On a GREY card the light-teal block barely reads against #F9F9F9. Roman,
   2026-09-03: "white card bg -> light-teal block bg; grey card -> white block bg."
   .rs-cs-stage--b .rs-cs-stagebox is the grey one (line ~498). */
.rs-cs-stage--b .rs-cs-stagebox .rs-cs-callout {
  background: #FFFFFF;
}

/* 1:4320 — 870x104, no bar, #F9F9F9, padding 20 all round. Our 16 made it 96. */
.rs-cs-callout--grey {
  background: #F9F9F9;
  border-left: none;
  padding: 20px;
}

.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, .rs-cs-body > .rs-cs-kicker + h2 {
    margin-bottom: 40px;
  }
  .rs-cs-body > h2:has(+ h2), .rs-cs-body > .rs-cs-kicker {
    margin-top: 80px;
  }
  .rs-cs-body > h2:not(:has(+ h2)) {
    margin-bottom: 40px;
  }
  .rs-cs-body .rs-cs-final h2 {
    margin-bottom: 40px;
  }
}
/* Polish overflows where English does not — trap 9. Measured at 375px on
   /pl/case-study/grecos/: the stage heading "Wprowadzenie interdyscyplinarnego
   procesu" does not fit .rs-cs-stagebox, and the document scrolled sideways
   (scrollWidth 402 vs clientWidth 375). The English page is 375/375 — the word
   is the whole difference, and it will recur on any PL case study whose stage
   title carries a compound noun.

   overflow-wrap stays on for BOTH languages: it is the guarantee for a word
   hyphenation refuses to split, and it does not touch a line that already fits.
   hyphens is gated to :lang(pl) — the same gate home.scss arrived at after an
   unconditional rule put a mid-word "re-/mote" into the English h1. */
.rs-cs h1, .rs-cs h2, .rs-cs h3, .rs-cs h4 {
  overflow-wrap: break-word;
}

.rs-cs:lang(pl) h1, .rs-cs:lang(pl) h2, .rs-cs:lang(pl) h3, .rs-cs:lang(pl) h4 {
  hyphens: auto;
}

/* ---- Top CTA card (post meta `_rs_cs_top_cta`, JSON {title,text}; Figma 43817:23737) --------
   Spliced into the flat body in PHP right before the stage-cards heading
   pair, not authored in post_content — see rs_cs_top_cta_html(). Fits the
   ambient 950 body measure (Figma's own card is 950 wide before the
   section's own 245px side padding), so no breakout is needed.

   Vertical rhythm: the frame's "cta" section pads its content 60px top and
   bottom (43817:23737, pad [60,245,60,245]) — the same "60 bottom + 60 top
   can't collapse to 120, so put the whole figure on one side" problem the
   plain-paragraph kicker/eyebrow rule above already documents (line ~455),
   except now a real bordered box sits between the two margins, so each side
   collapses independently and both must actually say 60. */
/* Figma strokes this card OUTSIDE its 950px box; a border would eat 4px of the content width. */
.rs-cs-body .rs-cs-top-cta {
  background: #FFFFFE;
  box-shadow: 0 0 0 2px #EBF2F2;
  border-radius: 4px;
  padding: 40px;
  margin: 60px 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Card-to-eyebrow gap: `.rs-cs-body > h2:has(+ h2)` (line ~464) puts 120px
   (80px under lg) on the eyebrow for the no-intervening-element case. Same
   specificity (0,2,1), so this wins on source order alone when a top-cta
   card sits directly before that pair — bringing the collapsed gap down to
   the card's own 60px on every width, matching the frame at all sizes since
   Figma gives no separate mobile figure for this transition. */
.rs-cs-top-cta + h2:has(+ h2), .rs-cs-top-cta + .rs-cs-kicker {
  margin-top: 60px;
}

.rs-cs-top-cta-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Title+text are their own nested group in the frame (43817:23757 "text",
   gap:24) inside the 40px-gapped main block — a flat 40px gap on every child
   here read 235px tall against the frame's 220 (measured via plumb_fit). */
.rs-cs-top-cta-main-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

/* `.rs-cs-body p` (0,1,1) sets font-size:20px/line-height:1.6 at a higher
   specificity than a bare single class (0,1,0) — same trap as the button
   above. Every `<p>` in this card needs the `.rs-cs-body` prefix for the
   same reason. */
.rs-cs-body .rs-cs-top-cta-text {
  font-family: "Hind Madurai", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #5D636A;
  margin: 0;
}

.rs-cs-top-cta-text strong {
  font-weight: 700;
  color: #34383C;
}

/* `.rs-cs-body .rs-cs-top-cta-btn` — `.rs-cs-body a` (0,1,1) already paints every
   in-body link coral; a bare `.rs-cs-top-cta-btn` (0,1,0) loses that
   tie-break on type count alone and the button rendered as a plain coral link.
   Same fix as the stagecard-go link earlier in this file. */
.rs-cs-body .rs-cs-top-cta-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px 15px 30px;
  border: 1px solid #34383C;
  border-radius: 4px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #34383C;
  text-decoration: none;
  box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.2);
  transition: background 0.18s ease, color 0.18s ease;
}

.rs-cs-body .rs-cs-top-cta-btn:hover, .rs-cs-body .rs-cs-top-cta-btn:focus-visible {
  background: #34383C;
  color: #FFFFFE;
  text-decoration: none;
}

.rs-cs-top-cta-behind {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Same nested-group shape as the text block above, mirrored from the frame's
   "title" wrapper (43817:37101, gap:24) around the heading+paragraph pair —
   caught by plumb_fit as a 16px oversized "2" (285 vs the frame's 269). */
.rs-cs-top-cta-behind-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Figma's node-level text token here is "400 20px/1.4" with NO family — the
   untrustworthy base-style case (trap 32): `chars` is a single plain-string
   run, so there is no bolder sub-run to read. This heading level renders
   Montserrat 700 everywhere else on this page at the same 20px/1.4 — the
   eyebrow (.rs-cs-eyebrow), the stage number (.rs-cs-stage-n), the
   testimonial quote/name (.rs-cs-tm-quote p / .rs-cs-tm-name) — and site-wide
   in the matching CTA-title role (.rs-inline-cta__title, config/_article.scss).
   Matched to that convention rather than the frame's raw token. */
.rs-cs-body .rs-cs-top-cta-behind-h {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #34383C;
  margin: 0;
  border-top: none;
  padding-top: 0;
  text-align: left;
}

.rs-cs-body .rs-cs-top-cta-behind-p {
  font-family: "Hind Madurai", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #5D636A;
  margin: 0;
}

/* Four 340px cards in an 870px row: the frame clips the fourth, so the row scrolls
   sideways rather than wrapping (Figma 43817:37029). No scrollbar — the cut card
   is the hint (Roman, 2026-09-24). The row bleeds through the card's 40px padding
   to its edge, where the frame clips it; the matching padding + scroll-padding
   keep the resting position and the snap points on the content column. */
.rs-cs-top-cta-phases {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: -40px;
  padding-inline: 40px;
  scroll-padding-inline: 40px;
}

.rs-cs-top-cta-phases::-webkit-scrollbar {
  display: none;
}

.rs-cs-top-cta-phase {
  flex: 0 0 340px;
  scroll-snap-align: start;
  background: #F9F9F9;
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rs-cs-top-cta-phase-n {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  background: #FFFFFE;
  border-radius: 4px;
  padding: 8px 16px;
  font-family: "Hind Madurai", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: #408897;
}

.rs-cs-body .rs-cs-top-cta-phase-t {
  font-family: "Hind Madurai", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #34383C;
  margin: 0;
}

@media (max-width: 767.98px) {
  .rs-cs-body .rs-cs-top-cta {
    padding: 24px;
    gap: 40px;
  }
  .rs-cs-body .rs-cs-top-cta-title {
    font-size: 24px;
  }
  .rs-cs-top-cta-phase {
    flex-basis: 260px;
  }
  /* To the screen edge: 24px card padding + the page's 20px gutter (measured at
     375 and 700). A card-edge bleed left only an 11px sliver of the next card. */
  .rs-cs-top-cta-phases {
    margin-inline: -44px;
    padding-inline: 44px;
    scroll-padding-inline: 44px;
  }
}
/* ---- Kicker/title h2 pairs also occur INSIDE .rs-cs-final ----------------
   The top-level pair rules above (`.rs-cs-body > h2:has(+ h2)` / `> h2 + h2`)
   are scoped to DIRECT children of .rs-cs-body, so they silently stop
   matching once step 5a wraps the tail in <section class="rs-cs-final"> —
   and the KLR content puts a second pair there ("What's in it for
   you?" / "Four things…"). Re-declared here rather than widening the `>`
   combinator above, because .rs-cs-final's own `h2` rule (icon + centred +
   rule, further up this file) must keep applying to the section's own first
   heading and to a genuinely lone one ("What KLR says") — only a pair needs
   the top-level look. `display:block` cancels the generic rule's flex column,
   which would otherwise survive on whichever property this block does not
   restate. */
.rs-cs-body .rs-cs-final > h2:has(+ h2), .rs-cs-body .rs-cs-final > .rs-cs-kicker {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
  color: #D8E2E3;
  text-align: center;
  margin-top: 120px;
  margin-bottom: 20px;
}

.rs-cs-body .rs-cs-final > h2 + h2, .rs-cs-body .rs-cs-final > .rs-cs-kicker + h2 {
  display: block;
  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: 22px;
}

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

@media (max-width: 991.98px) {
  .rs-cs-body .rs-cs-final > h2:has(+ h2), .rs-cs-body .rs-cs-final > .rs-cs-kicker {
    margin-top: 80px;
  }
  .rs-cs-body .rs-cs-final > h2 + h2, .rs-cs-body .rs-cs-final > .rs-cs-kicker + h2 {
    margin-bottom: 40px;
  }
}
/* ---- Takeaways panel (post_content `<div class="rs-cs-takeaways">`, Figma section above the testimonial)
   `.rs-cs-takeaways` wraps ONE <ul> with a coral arrow-right glyph, styled
   distinctly from the plain closing-chapter list above it in this file (dark
   #34383C text, not muted grey; coral fa-arrow-right, not teal fa-check) —
   PHP stashes this list out of the generic check-glyph pass so it does not
   get repainted. Kept at the ambient 950 body measure rather than Figma's
   1146 for this one card: nothing else in .rs-cs-final breaks out except the
   results table and stage cards. */
.rs-cs-body .rs-cs-takeaways {
  position: relative;
  overflow: hidden;
  background: #F0F8F9;
  border-radius: 4px;
  padding: 40px;
  margin: 0 0 60px;
}

/* Corner watermark (Figma 30580:32045): the RS mark at 386px, #678689 @ 5%, seen
   through a 300x193 mask pinned bottom-right and offset 104px into the mark. A
   CSS mask over a flat fill, so the colour is the frame's, whatever rs-mark.svg
   is painted in. */
.rs-cs-takeaways::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 193px;
  background: #678689;
  opacity: 0.05;
  pointer-events: none;
  -webkit-mask: url("../img/rs-mark.svg") 104px 0/386px 386px no-repeat;
  mask: url("../img/rs-mark.svg") 104px 0/386px 386px no-repeat;
}

.rs-cs-takeaways ul {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.rs-cs-takeaways ul li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 0;
  font-family: "Hind Madurai", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: #34383C;
}

.rs-cs-takeaways ul li > .rs-cs-takeaway-ico {
  flex: 0 0 20px;
  width: 20px;
  font-size: 20px;
  line-height: 1.6;
  color: #FF6D66;
  text-align: center;
}

@media (max-width: 767px) {
  .rs-cs-body .rs-cs-takeaways {
    padding: 24px;
  }
}
/* ---- Results table inside the closing section (Figma 30580:32068) --------
   Dark #34383C header, alternating #FFFFFE/#F9F9F9 body rows, #EBF2F2 grid
   lines, radius 4 (via overflow:hidden on the table itself — the same trick
   figure.wp-block-table already uses), 12/20 cell padding, last column
   teal+bold, the column before it bold+dark. Two shapes render this: a bare
   <table> (bare <table> in the closing section, no block wrapper) and go2market's EXISTING
   figure.wp-block-table.rs-rt (the site-wide Results-table block, its own
   teal header from Figma 24567-31990) — Raman asked for THAT table restyled
   to the new spec, so the override lives here, scoped to .rs-cs-final, rather
   than in rs-blocks.css, which still serves that block's teal look on every
   OTHER page that uses it.
   Specificity: rs-blocks.css's `.rs-rt` zebra rules run to 4 classes
   (.rs-cs-body + .wp-block-table + .rs-rt + :nth-child). `.rs-cs` and
   `.rs-cs-bodywrap` are real ancestor classes (the <main> wrapper and the
   body's own outer div), added here purely to clear that bar rather than
   reach for !important — the house rule elsewhere in this file. */
.rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #EBF2F2;
  border-radius: 4px;
  overflow: hidden;
  font-family: "Hind Madurai", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* Mobile: the table scrolls horizontally inside itself rather than stacking —
   matches go2market's existing figure.wp-block-table.rs-rt behaviour (that one
   scrolls its own <figure>), and a plain scroll needs no markup change for a
   bare <table> that never fits a 2-column KLR row in the first place. Only
   ever matches a table with NO figure wrapper — go2market's own table is a
   grandchild of .rs-cs-final, not a direct child, so its existing scroll is
   untouched. */
.rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final > table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final table thead th, .rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final table thead td {
  background: #34383C;
  color: #FFFFFE;
  font-weight: 700;
  box-shadow: none;
}

.rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final table :is(th, td) {
  padding: 12px 20px;
  text-align: left;
  vertical-align: middle;
  border: 0;
  border-bottom: 1px solid #EBF2F2;
}

.rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final table :is(th, td) + :is(th, td) {
  border-left: 1px solid #EBF2F2;
}

.rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

.rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final table tbody :is(th, td) {
  font-weight: 400;
  color: #5D636A;
}

.rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final table tbody tr:nth-child(odd) :is(th, td) {
  background: #FFFFFE;
}

.rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final table tbody tr:nth-child(even) :is(th, td) {
  background: #F9F9F9;
}

.rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final table tbody tr:hover :is(th, td) {
  background: #EBF2F2;
}

.rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final table tbody tr > :last-child {
  color: #408897;
  font-weight: 700;
}

.rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final table tbody tr > :nth-last-child(2) {
  color: #5D636A;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .rs-cs .rs-cs-bodywrap .rs-cs-body .rs-cs-final table :is(th, td) {
    padding: 12px;
    font-size: 13px;
  }
}
/* 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;
  }
}