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

/* 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;
  }
}
/* Designer feedback #4: hover state for the sticky side ToC — main.min.css only
   styles .nav-link.active (coral + arrow icon). Hover gets a lighter preview of
   the same treatment. */
/* ===== Visual parity pass vs LIVE (2026-08-11 measurement report) — biggest
   visual impact first. Font-family changes only ever resolve to Montserrat or
   HindMadurai, the two families this theme self-hosts; no new font request. ===== */
/* Article body: the blog's rule set verbatim, via rs_article_body_css() — same
   post_content, same typography, one source (see that function's docblock for why it
   is shared rather than copied). This replaces the partial set this template used to
   hand-roll, which patched only font-size/colour/family on a few selectors and left
   the rest — paragraph and list rhythm, h3 weight and top margin, in-body link
   colour — falling through to Bootstrap's reboot, so the same article read
   differently here than on the blog.
   Supersedes, in order: the h2-h6 font-family/colour rule (the shared set carries
   both, on h2-h4 — no published item has an h5 or h6 in its body, checked all 5),
   `h4{font-weight:700}`, the h2 size/margin rule below, `> h2:first-child`
   (the shared `> :first-child` covers every block, not just headings) and the
   p/li font-size claw-back against col-lg-8's fs-5 (the shared set puts 18px on
   .rs-vs-body itself, so everything inside inherits it rather than only the three
   element types that rule happened to list). */
.rs-vs-body {
  font-family: Lora, serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--rs-text, #5D636A);
  /* Polish runs 10-15% longer than English and its compound nouns do not word-wrap where
     the English does, so display type is where PL breaks first. Measured on post 13290 at
     375px: the h2 "Zasady dobrej komunikacji w zespole zdalnym i hybrydowym" laid out
     376px wide inside a 335px column and put the last 21px of horizontal scroll on the
     document.
     Split in two, because the two halves earn their keep at different widths.
     overflow-wrap stays everywhere: it only ever breaks a word that has no other way to
     fit, so it costs nothing on a wide column. hyphens:auto is mobile-only — it hyphenates
     ordinary words that would have wrapped perfectly well ("be-tween" on a 740px desktop
     column), which is a fair trade at 375px where the alternative is horizontal scroll, and
     not one worth making on desktop. */
}
.rs-vs-body > p,
.rs-vs-body > ul,
.rs-vs-body > ol,
.rs-vs-body > table,
.rs-vs-body > .table-responsive,
.rs-vs-body > figure,
.rs-vs-body > blockquote {
  margin: 0 0 18px;
}
.rs-vs-body > h2,
.rs-vs-body > h3 {
  font-family: Montserrat, sans-serif;
  color: var(--rs-black, #34383C);
  margin: 40px 0 18px;
}
.rs-vs-body > h2 {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.3;
}
.rs-vs-body > h3 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
}
.rs-vs-body > h4 {
  font-family: Montserrat, sans-serif;
  color: var(--rs-black, #34383C);
  margin: 30px 0 15px;
}
.rs-vs-body > h2,
.rs-vs-body > h3,
.rs-vs-body > h4 {
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .rs-vs-body > h2,
  .rs-vs-body > h3,
  .rs-vs-body > h4 {
    hyphens: auto;
  }
}
.rs-vs-body > :first-child {
  margin-top: 0;
}
.rs-vs-body > :last-child {
  margin-bottom: 0;
}
.rs-vs-body li {
  margin-bottom: 10px;
}
.rs-vs-body li:last-child {
  margin-bottom: 0;
}
.rs-vs-body a {
  color: var(--rs-coral, #F35B54);
  text-decoration: none;
}

/* The design system's H2 — 700 40px/1.3 Montserrat #34383C, confirmed by two
   independent Figma nodes (in-article heading 24567-33042 and the
   "Read other comparisons" section heading 24567-32985 carry the identical
   token). Bootstrap leaves a classless h2 at 2rem/1.2/500, which is what both
   designer complaints were actually about:
     - "All chapters headings are broken" — the first pass pinned in-body h2s to
       `line-height: 32px; margin-bottom: 0` off a live measurement. At 32px font
       size that is a 1.0 line-height with no space below, so every heading that
       wrapped collided with itself and then with the paragraph under it.
     - "wrong H2 for the section heading - it uses H1" — that heading reached 40px
       only by borrowing the `.h1` utility, i.e. the right pixels via the wrong
       token. It is a real h2 now and inherits from here.
   The in-body h2 now takes this token from the shared article-body set above, which
   is where the blog already had it, so only the section heading — which sits outside
   the body wrapper — is styled here. The two carry the same Figma token and can still
   be compared line for line; they just no longer share a selector.
   clamp() stays on the section heading because it has no other wrap protection; the
   in-body headings get the blog's approach instead (fixed 40px plus hyphens/
   overflow-wrap), which is what keeps PL headings inside a 375px column. */
.rs-vs-section-title {
  font-family: var(--rs-font-display, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.3;
  color: #34383C;
  margin-bottom: 0.5rem;
}

/* The excerpt is 18px on live but sits outside .rs-vs-body, so it still needs its own
   claw-back against col-lg-8's fs-5 (20px, needed elsewhere on that column). Table
   cells keep an explicit size because the table is this template's own component
   (borders + teal row headers below), not one of the blog's shared blocks. */
.rs-vs-excerpt,
.rs-vs-body table td {
  font-size: 18px;
}

/* Comparison table: live is NOT borderless despite the class name this
   migration inherited, and its "row header" treatment is simply td:first-child
   on every row — that includes the blank header-row corner cell and the
   full-width category rows, since colspan makes them first-child too. No markup
   change needed, the table's own structure already matches.
   Selectors are deliberately overqualified (.table-responsive + tbody + tr):
   style.css's sitewide, un-scoped "Table Style" block (`.single table
   tbody>tr:nth-child(odd)>td` / `.single table tbody tr td[colspan="3"]`,
   written for a different template) has specificity (0,2,4) and otherwise
   wins on every odd row and every category row — that file isn't ours to
   touch, so this out-specifies it instead of fighting it row-by-row.

   Colours are the DS table's (Figma 24567-31942): #F9F9F9 chrome, #34383C
   labels, #5D636A body copy, and no fill on the value cells. The teal-with-
   white-text this replaced was never in that design, and it disagreed with
   style.css's own `tr td[colspan="3"] { background:#F9F9F9 }` — so the category
   rows and the label column rendered as two different colours in one table.
   They agree now, which is also why the `b` colour override that used to sit
   here is gone: style.css's `.single tr td b { color:#34383C }` is correct
   against grey and no longer needs countering. Bootstrap's `.table` forces
   `--bs-table-color:#000` onto every cell, so the body colour has to be
   restated rather than inherited from .rs-vs-body. */
.rs-vs-body table td {
  border: 1px solid #E0E0E0;
  padding: 18px;
  color: #5D636A;
}

.rs-vs-body .table-responsive table tbody tr td:first-child {
  background-color: #F9F9F9;
  color: #34383C;
  font-weight: 700;
  font-family: var(--rs-font-display, "Montserrat", sans-serif);
}

/* The two E-E-A-T disclaimer lines under the hero byline stay in the DOM
   (parity-check needs the text) but are hidden on live, same as its own
   toolbar-wrapper. */
.rs-vs-hero-note {
  display: none;
}

/* Hero band uses the darker of the two teal tokens. Overriding the Bootstrap
   custom property rather than background-color directly, since .bg-primary's
   own rule is !important. */
.rs-vs .card.text-bg-dark.bg-primary {
  --bs-primary-rgb: 53, 113, 125;
}

/* Hero h1: live's own margin-bottom is 0, but that only works because its
   3-line title (see header comment's documented deviation) already fills the
   space — this template's 1-line title needs *some* breathing room before the
   date row, just far less than the mockup's mb-5 (48px). */
.rs-vs-hero-title {
  margin-bottom: 1rem;
}

/* Hero date-row -> byline-row gap. */
.rs-vs-hero-date-row {
  margin-bottom: 20px;
}

/* Sticky ToC panel: padding + corner radius. */
/* Figures used to sit flush here (margin-bottom:0). They now take the shared 18px
   block margin like every other top-level block, which is the blog's rhythm — 64579
   (14 figures) and 64581 (10) are where that reads as a real change. */
/* Hero byline row (Figma 24567-33411): 14px/1.6 at #F9F9F9, and the pen /
   check-circle glyphs at 14px to match — designer feedback "wrong styles for
   icons" (24567-33423 / 24567-33431). The glyph names were already right
   (`fa-pen`, and FA7 renders `fa-circle-check` for Figma's `check-circle`); it
   was the 16px/pure-white treatment that was off. The label->avatar gap is
   Figma's 15px, replacing the `ms-3` (16px) the mockup used. */
.rs-vs-byline i {
  font-size: 14px;
  color: #F9F9F9;
}

.rs-vs-byline small {
  font-size: 14px;
  line-height: 1.6;
}

.rs-vs-byline img {
  margin-left: 15px !important;
}

/* Mid-article CTA banner — markup from rs_restore_leaked_inline_cta(), CSS from
   rs_inline_cta_css(), both in functions.php and shared with
   template-blog-single.php. See there for why the banner has to be rebuilt
   rather than styled in place. */
.rs-inline-cta {
  margin: 2rem 0;
  padding: 32px 30px;
  background: #F9F9F9;
  border-radius: 4px;
}

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

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

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

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

/* Author + share block below the article: rs_article_endmatter_css() in functions.php,
   shared with template-blog-single.php. These rules used to live here under an
   .rs-vs-* prefix, which is exactly why the blog could not reuse them. */
/* Author section below the article (Figma 24567-33374, DS component 30787-18187):
   "Written by" label + name + role stacked, 14px/1.5 throughout, name in the teal accent,
   role in the muted grey. Avatar keeps the DS ring: 2px white inset over the coral disc. */
.rs-article-author-name {
  color: #408897;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* DS divider colour for the two rules that bracket this section. */
.rs-vs hr {
  border-top-color: #EDEDED;
  opacity: 1;
}

/* Related-comparison cards (Figma 24567-32978 default / 24567-32979 hover).
   Deltas from the mockup: radius 4 not 6, title 700 (was 600) at 1.4, body 18px
   (was fs-5's 20px), link 600 (was 400). The cover image stays as implemented,
   per the designer's note. Hover is the only interactive delta Figma defines:
   the card lightens and lifts, nothing recolours. Body copy is Lora in Figma;
   this theme self-hosts only Montserrat and HindMadurai, so it stays
   HindMadurai — same call the rest of this migration made. */
.rs-vs-card {
  border-radius: 4px;
  background: #F9F9F9;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.rs-vs-card .card-img-top {
  border-radius: 4px 4px 0 0;
}

.rs-vs-card .card-body {
  padding: 20px;
}

.rs-vs-card .card-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #34383C;
  margin-bottom: 15px;
}

.rs-vs-card .card-text {
  font-size: 18px;
  line-height: 1.6;
  color: #5D636A;
  margin-bottom: 15px;
}

.rs-vs-card .btn-link {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  color: #408897;
}

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

/* "Read other comparisons" needs real air above it — designer feedback
   "wrong gap between sections here above - too small" (the rule was on mt-4,
   24px, hard against the share icons). */
.rs-vs-related-divider {
  margin-top: 80px;
  margin-bottom: 48px;
}

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