@charset "UTF-8";
/* Hero title, 3-line stack (Figma 24567-33411). The versus badge is the shipped
   label-versus.svg, used at its natural size like the mockup does rather than
   rebuilt in CSS: the file already carries the -5deg tilt, the coral gradient,
   the white ring, the stripe texture and both drop shadows on a 313x145 canvas
   whose padding is the shadow spread (the visible pill is the 245x60 rect inside
   it). The negative bottom margin absorbs that padding so the three lines sit on
   the 5px gap Figma asks for instead of on the shadow's bounding box. */
.rs-vs-hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* The negative margins crop that padding, which is NOT symmetric. Rotating the
   file's 249x64 stroked pill by its own -5deg about (29.68, 31.54) puts its ink
   at y=7.8..97.3 inside the 145-tall canvas: ~8px of slack above, ~48px below.
   Cropping evenly left the block ~40px too tall and pushed the byline out
   through the bottom of the hero band. Stated in px against a known image width
   rather than %, because percentage margins resolve against the CONTAINING
   block's width (1408px here), not the image's — which collapsed the h1 to zero
   height on the first attempt. */
.rs-vs-hero-badge {
  display: block;
  width: 313px;
  height: auto;
  margin: -8px 0 -48px;
}

@media (max-width: 575.98px) {
  /* 313px overflows a 375px viewport once the container's padding is counted.
     Crop scales with the width: 240/313 of -8 / -48. */
  .rs-vs-hero-badge {
    width: 240px;
    margin: -6px 0 -37px;
  }
}
/* Bottom CTA (Figma 24567-32951): the coral gradient, not the teal one the
   mockup shipped — same gradient the versus badge uses. Radius and the two-layer
   elevation come from the same node. */
.rs-vs-cta {
  background-color: #F37465;
  background-image: linear-gradient(135deg, #F18E70 0%, #F37465 100%);
  border-radius: 4px;
  padding: 40px;
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
}

.rs-vs-cta-title {
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.3;
}

.rs-vs-cta-sub {
  font-size: 20px;
  line-height: 1.6;
}

/* Single dark button (Figma's `atom/btns` color=black, type="with arrow"). */
.rs-vs-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px 15px 30px;
  border-radius: 4px;
  background: #34383C;
  color: #FFFFFE;
  font-family: var(--rs-font-display, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.2);
  transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.rs-vs-cta-btn:hover,
.rs-vs-cta-btn:focus-visible {
  background: #21252A;
  color: #FFFFFE;
  box-shadow: 0 10px 20px -5px rgba(38, 50, 56, 0.3);
}

.rs-vs-cta-btn i {
  font-size: 18px;
}

/* ===== Hero band =====
   Figma paints #F9F9F9 behind the whole band with a 90px WHITE strip over its
   bottom edge, so the two info cards overhang into the white. A two-stop
   background reproduces that exactly, with no z-index and no negative margin that
   could leak into the list section below (trap 4/5's failure mode). Below lg the
   cards stack and the overhang stops making sense, so the band goes flat. */
.rs-vsx-hero {
  padding: 60px 0 0;
  background-image: linear-gradient(to bottom, #F9F9F9 calc(100% - 90px), #FFFFFF calc(100% - 90px));
}

@media (max-width: 991.98px) {
  .rs-vsx-hero {
    padding-bottom: 40px;
    background-image: none;
    background-color: #F9F9F9;
  }
}
/* Title stack: the geometry comes from config/_vs-hero-title.scss (shared with the
   comparison singles). Only the two text lines are sized here — 48px/1.2 per the
   frame's $t1, against the singles' own smaller hero. */
.rs-vsx-title {
  /* The frame's text column is 558px, centred — not the full container. Left
     unconstrained the h1 spanned 1122px, which centres identically but reports
     the wrong box against the frame and lets a longer subject run wider than the
     pill below it. max-width, so a long PL subject still wraps rather than
     overflowing. */
  max-width: 558px;
  margin: 0 auto 30px;
  text-align: center;
}

.rs-vsx-title-brand,
.rs-vsx-title-subject {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.2;
  /* PL runs 10-15% longer and its compound nouns do not break where English
     does; "inne aplikacje" is short but the next subject added here may not be.
     Trap 9 — display type gets these on every migrated page, not on report. */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* The frame's `series` is a text node that FILLS the 558 column and centres its
   text inside it, not one that hugs its glyphs. As an inline span it measured 458
   and any future longer subject would have centred against a different box. */
.rs-vsx-title-subject {
  align-self: stretch;
}

/* The badge, re-derived for THIS frame. config/_vs-hero-title.scss sizes it for
   the comparison singles (313px wide, crops -8/-48 against that file's own
   dimensions) and its comment says in terms that a swap means re-deriving them.
   The index frame draws a smaller label — 232x76 against the singles' larger
   mark — and at 313px the stack measured 214px against the frame's 184px, all of
   it in this one element.
   The asset is 313x145 whose ink occupies ~89px of that canvas; the rest is
   shadow padding the crops remove. Scaling to 239px (k = 0.764) leaves
   k x 89 = 68px of ink, which is exactly the height the frame gives the label
   between two 58px lines. The crops scale by the same k so the asymmetry the
   partial documents is preserved: -8k = -6, -48k = -37. Gap goes to 0 because
   the frame's own gap is -4 and CSS has no negative flex gap; the 68px is the
   drawn height, not the box plus gaps. */
.rs-vsx-title {
  row-gap: 0;
}

/* The badge is now a BACKGROUND on a real text node (see the template), so the
   geometry the <img> used to carry moves here unchanged: 239px wide, and the same
   -6/-37 crop of the asset's asymmetric shadow padding. Height is the asset's own
   145 scaled by the same k = 239/313, so `contain` lands the ink at exactly the
   size it did before — this is an accessibility/SEO change, not a visual one.
   text-indent + overflow displaces the glyphs instead of removing them: the word
   stays in the DOM, in the a11y tree, and in the heading's text content.
   Not display:none, not visibility:hidden, not font-size:0 — all three drop it
   from the accessible name. */
.rs-vsx-title-versus {
  display: block;
  width: 239px;
  height: 111px;
  margin: -6px 0 -37px;
  background: url("../img/label-versus.svg") center/contain no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

@media (max-width: 575.98px) {
  /* Matches the shared partial's own mobile step for the badge it replaces. */
  .rs-vsx-title-versus {
    width: 200px;
    height: 93px;
    margin: -5px 0 -31px;
  }
}
/* align-self, not display:block: config/_vs-hero-title.scss makes the h1 a
   column flex with align-items:center, so a block child still shrink-wraps. */
.rs-vsx-title-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Sized to the heading, per Oskar 2026-09-22. 1em tracks the clamp above, so the
   mark scales with the type instead of being pinned at one px value.
   NOTE this is a deliberate step past the frame, which draws the mark at 36px ink
   against 48px type (i.e. matched to cap height, not to the em box). */
.rs-vsx-title-brand img {
  height: 1em;
  width: auto;
}

/* ===== "Already compared with" pill =====
   The case-studies index hero pill, centred. Figma 30931-20427: white, fully
   rounded, the soft double shadow, 8px padding with a 20px lead-in on the label
   side, 16px gaps. Bootstrap's .shadow is a different ramp, so $shadow-soft wins. */
.rs-vsx-pill {
  /* 558px is the frame's own width for this pill — it fills the hero's text
     column rather than hugging its contents. `fit-content` was the first attempt
     and it wrapped to two rows (97px against the frame's 56px): with the rule
     free to grow, max-content and the available width disagree, and the flex
     container resolves that by wrapping. A stated width makes the rule the only
     thing that flexes, which is what the design intends. */
  width: min(558px, 100%);
  margin: 0 auto;
  padding: 8px 8px 8px 20px;
  /* 16, per Raman's review reference (Figma 30370-34130, `molecula/fast-travel`).
     The first pass read 20 off 30931-20427, the case-studies pill. */
  gap: 16px;
  border-radius: 999px;
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
  flex-wrap: nowrap;
}

.rs-vsx-pill-label {
  color: #5D636A;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}

/* An ARROW that grows to fill, not a bare rule (Raman's review, Figma 30370-34130
   `arrow`: a 1px #5D636A line ending in an open chevron). Two background layers so
   the line stretches while the head keeps its size: the head is the frame's own
   exported path, cropped to its last 5px (viewBox 140 0 5 8), and the line stops
   1px short so the two do not double up under the chevron's tip. */
.rs-vsx-pill-rule {
  flex: 1 1 60px;
  min-width: 40px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='140 0 5 8'%3E%3Cpath d='M144.854 4.036a.5.5 0 0 0 0-.708L141.672.146a.5.5 0 1 0-.708.708l2.829 2.828-2.829 2.828a.5.5 0 1 0 .708.707z' fill='%235D636A'/%3E%3C/svg%3E") right center/5px 8px no-repeat, linear-gradient(#5D636A, #5D636A) left center/calc(100% - 1px) 1px no-repeat;
}

@media (max-width: 575.98px) {
  /* At 375 the label, rule and six 40px chips cannot share a line. Drop the rule
     and let the pill stack rather than shrink the chips, which are links. */
  .rs-vsx-pill {
    width: 100%;
    padding: 12px 16px;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .rs-vsx-pill-rule {
    display: none;
  }
  .rs-vsx-pill-label {
    white-space: normal;
    text-align: center;
  }
}
/* ===== The two info cards =====
   The 30px gutter Figma asks for goes on the CONTAINER, not the row. Bootstrap
   derives a .row's negative side margins from --bs-gutter-x and a .container's
   side padding from its OWN copy of the same variable; setting it on the row
   alone gives -15px margins against 12px padding and the row hangs 3px past the
   viewport on each side. Measured at 375: scrollWidth 378 vs clientWidth 375,
   i.e. a real horizontal scrollbar on the Polish page. Declared on the container
   so both halves move together and cancel exactly. */
.rs-vsx-cards-wrap {
  --bs-gutter-x: 30px;
  /* Figma's `main` is a column with a 40px gap between the text block (title +
     pill) and the cards row. Without it the cards butt straight against the
     pill's bottom edge and their shadow reads as an overlap. */
  margin-top: 40px;
}

/* The waves. These are the SAME TWO SVGs the Elementor page shipped
   (uploads/2024/10/waves.svg and waves-1.svg, now versioned into the theme as
   img/vs-index-waves-1/-2.svg) — not a re-draw, and not the Figma export, which is
   unreachable while the Figma token is expired. The two files are NOT identical,
   so each card keeps its own, which is why the second card carries --alt.
   Positioning is the Elementor rule verbatim: top right / no-repeat / contain.
   ::before rather than an <img>, because it is decoration with no meaning to
   announce; the card clips it to the 4px radius.
   url() is relative to the BUILT file (wp/hello-elementor-child/css/), not to this
   source file — gulp does not rewrite these. */
.rs-vsx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/vs-index-waves-1.svg");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.rs-vsx-card--alt::before {
  background-image: url("../img/vs-index-waves-2.svg");
}

/* The card's own content has to sit above the decoration. */
.rs-vsx-card > * {
  position: relative;
  z-index: 1;
}

.rs-vsx-card {
  position: relative;
  overflow: hidden;
  /* The frame fixes these cards at 558x380 and fills the slack with a decorative
     "waves" graphic along the bottom (Figma 30370-33851 / -33873). That asset was
     never exported with the design inputs, so the box is held to the frame's
     height and the decoration is outstanding — see the task's NEEDS-INPUT line.
     min-height, not height: PL runs longer and must be allowed to grow. */
  min-height: 380px;
  padding: 30px;
  border-radius: 4px;
  background: #FFFFFE;
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
}

.rs-vsx-card-icon {
  display: block;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 20px;
}

.rs-vsx-card-icon--teal {
  color: #4B9EB0;
}

.rs-vsx-card-icon--coral {
  color: #F35B54;
}

.rs-vsx-card-title {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 700;
  color: #34383C;
  margin: 0 0 20px;
}

/* Raman's review, Figma 30370-34142 (teal card) / 30370-34169 (coral card): each
   item is a 6px dot in a 6px column, then 20px, then 18px/1.6 #34383C text. The
   dot takes the card's own accent — teal left, coral right, the same pair as the
   card icons above. Drawn as ::before rather than ::marker, which can size and
   colour a glyph but not set the gap to the text.
   The dot's top follows the frame: centre 13px down a 28.8px line, i.e. just
   above the line's middle, where the x-height sits. 0.72em keeps that ratio if
   the type size ever moves. */
.rs-vsx-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rs-vsx-card-list li {
  position: relative;
  padding-left: 26px;
  color: #34383C;
  font-size: 18px;
  line-height: 1.6;
}

.rs-vsx-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.72em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4B9EB0;
}

.rs-vsx-card--alt .rs-vsx-card-list li::before {
  background: #F35B54;
}

.rs-vsx-card-list strong {
  color: #34383C;
  font-weight: 700;
}

/* ===== The comparison list =====
   .post_item and everything inside it is styled by style.css:1314-1432 (the blog
   archive is the source of truth for that card). The 90px top padding clears the
   hero cards' overhang; the separator is Figma's 1px #D8E2E3 rule between cards. */
/* 60px, from the frame: `articles-list` starts at y=886 and the hero band `1st`
   ends at 826. The first pass used 150px on the theory that the cards' 90px
   overhang had to be cleared — but the overhang lives INSIDE this page's hero
   section (the two-stop background above), so the cards' bottom and the hero's
   bottom are the same line and there is nothing to clear. The extra 90px pushed
   the first comparison below the fold on a 900px-tall viewport.
   The 20px tail plus .post_item's own 40px margin-bottom makes the frame's 60px
   of slack before the CTA band. */
.rs-vsx-list {
  padding: 60px 0 20px;
}

@media (max-width: 991.98px) {
  .rs-vsx-list {
    padding-top: 60px;
  }
}
/* No .rs-vsx-sep rule: .post_item's own border-bottom (style.css:1314) is the
   1px #D8E2E3 line the frame draws between cards, with the 40px either side that
   the frame's spacing asks for. A second rule here drew a second line. */
/* ===== CTA band ===== */
/* Frame: the CTA band is 532 tall = 60 above the card, the 402 card, 70 below. */
.rs-vsx-cta-band {
  padding: 60px 0 70px;
}

/* The "+N down-arrow" chip is a link, and Bootstrap's reboot underlines every <a>.
   style.css styles this chip but never had to cancel an underline, because on the
   Elementor page Bootstrap was not enqueued at all — the underline is a side effect
   of migrating, not a pre-existing bug. Scoped to this pill so the fix cannot reach
   the other consumer of .brand_icon_item. */
.rs-vsx-pill .brand_icon_item a {
  text-decoration: none;
}

/* The "+N" chip's ring (Raman's review, Figma 30370-34130 `anchor-btn`): a UNIFORM
   2px gradient stroke, #6797A5 top-right -> #CE7B7B bottom-left, 16px side padding,
   6px between the count and the arrow.
   style.css:2057 draws the ring as 2px of gradient PADDING around a white
   .child_div, but that child is 32px tall inside a 36px content box and centred,
   so the ring read 4px at top and bottom and 2px at the sides. Here the ring is a
   real border painted by a border-box gradient behind a padding-box white fill,
   so it cannot come out uneven whatever the child's height.
   40px OVERALL, ring included, like the five logo circles beside it (their 2px
   border sits inside their 40px too) — Figma strokes both OUTSIDE a 40px box, so
   the pair stays consistent either way.
   Scoped to .rs-vsx-pill: the singles' Elementor copy of this chip still reads
   style.css's rules. */
.rs-vsx-pill .brand_icon_item.more_item {
  box-sizing: border-box;
  height: 40px;
  padding: 0;
  border: 2px solid transparent;
  background: linear-gradient(#FFFFFE, #FFFFFE) padding-box, linear-gradient(to bottom left, #6797A5, #CE7B7B) border-box;
}

.rs-vsx-pill .brand_icon_item.more_item .child_div {
  padding: 0;
  background: none;
}

.rs-vsx-pill .brand_icon_item.more_item a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  font-size: 16px;
  line-height: 1;
}

/* FA7 gives every icon a fixed 1.25em box; the frame's arrow hugs its glyph. */
.rs-vsx-pill .brand_icon_item.more_item a i {
  font-size: 14px;
  width: auto;
}