@charset "UTF-8";
.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-pt .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-pt .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;
  }
}
/* ---- Bands and type --------------------------------------------------------- */
/* Every band is full-bleed with a 1146px column, the frame's 147px side margins. */
.rs-pt-band {
  padding: 60px 20px;
}

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

.rs-pt h1, .rs-pt h2, .rs-pt p, .rs-pt ul {
  margin: 0;
}

.rs-pt ul {
  padding: 0;
  list-style: none;
}

.rs-pt-h1, .rs-pt-h2 {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: #34383C;
  overflow-wrap: break-word;
}

/* Hyphenate Polish only (trap 9: its compounds break layouts); in English it split
   "li-cence" mid-heading on the Asana page. */
:lang(pl) .rs-pt-h1, :lang(pl) .rs-pt-h2 {
  hyphens: auto;
}

.rs-pt-h1 {
  font-size: 48px;
  line-height: 1.2;
}

.rs-pt-h2 {
  font-size: 40px;
  line-height: 1.3;
}

.rs-pt-h2--sm {
  font-size: 32px;
}

.rs-pt-h1 span, .rs-pt-h2 span {
  color: #F35B54;
}

.rs-pt-center {
  text-align: center;
}

.rs-pt-band p, .rs-pt-list li {
  font-family: "Hind Madurai", sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: #5D636A;
}

/* ---- Hero (1:2732): cream, copy / 558px image ------------------------------------
   The image column is 558 on every partner (Roman, 2026-10-21, from the Asana frame's
   558x321 hero group at x 735), down from the Floasis frame's 656, so the copy column
   takes the rest: 1146 - 558 - 30 = 558. */
/* The copy sits 30px lower than the illustration's top (frame: 120 vs 90). */
.rs-pt-hero {
  background: #F9FAF4;
  padding-top: 90px;
}

.rs-pt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 558px);
  align-items: start;
  gap: 30px;
}

.rs-pt-hero-text {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.rs-pt .rs-pt-eyebrow {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #D8E2E3;
  margin-bottom: 20px;
}

/* Asana partner: the Gold Solutions Partner badge stands where the eyebrow does. */
.rs-pt-badge {
  display: block;
  margin-bottom: 20px;
}

.rs-pt .rs-pt-lead {
  max-width: 366px;
  margin-top: 14px;
}

/* Opt-in full-column lead, balanced so a short one splits into even lines: Floasis
   (two lines, Roman 2026-10-21) and Asana's paragraph. Medisky keeps the frame's 366. */
.rs-pt .rs-pt-lead--wide {
  max-width: none;
  text-wrap: balance;
}

.rs-pt-hero-img {
  width: 100%;
  height: auto;
}

/* ---- Facts + about card (1:2705): white ------------------------------------- */
.rs-pt-facts .rs-pt-h2--sm {
  text-align: center;
}

/* Four hug-width items, space-between across 951: lands each on the frame's x. */
/* .rs-pt prefix: the bare `.rs-pt ul{margin:0}` reset above would otherwise win. */
.rs-pt .rs-pt-facts-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 951px;
  margin: 65px auto 60px;
}

.rs-pt .rs-pt-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 236px;
  text-align: center;
  font-family: "Hind Madurai", sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: #34383C;
}

.rs-pt-fact i {
  font-size: 24px;
  line-height: 1;
  color: #4B9EB0;
}

/* A partner's own icon set (Medisky 49x48, Asana 37-45 wide) instead of a Font Awesome
   glyph. No size rule: the width/height attributes carry each set's own size. */
.rs-pt-fact:nth-child(2) {
  max-width: 204px;
}

.rs-pt-about {
  display: grid;
  grid-template-columns: 375px minmax(0, 596px);
  justify-content: space-between;
  gap: 30px;
  background: #F0F8F9;
  border-radius: 4px;
  padding: 49px 60px;
}

/* Optional decoration (Asana: bg-asana_second.png, the pale circles at the card's right). */
.rs-pt-about--bg {
  background: var(--rs-pt-about-bg) right center no-repeat, #F0F8F9;
}

/* The title sits 11px below the body column's top in the frame (text group 1:2709). */
.rs-pt-about-head {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 11px;
}

.rs-pt-about-head .rs-pt-h2 {
  max-width: 302px;
}

.rs-pt .rs-pt-about-sub {
  color: #408897;
}

.rs-pt-about-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---- Why (1:2636): scheme 392 / check list card 653 -------------------------- */
.rs-pt-why {
  padding-bottom: 90px;
}

/* First column sizes to the scheme image itself: 392 (Floasis), 474 (Medisky). */
.rs-pt-why-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 653px);
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-top: 60px;
}

.rs-pt-scheme {
  max-width: 100%;
  height: auto;
}

.rs-pt-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.rs-pt-list li {
  display: flex;
  gap: 24px;
}

.rs-pt-list i {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 32px;
  color: #F35B54;
}

.rs-pt .rs-pt-list--check {
  background: #F8F8F8;
  border-radius: 4px;
  padding: 48px 40px 47px;
}

.rs-pt-list--star {
  gap: 15px;
}

.rs-pt-list--star li {
  gap: 20px;
}

.rs-pt-list--star i {
  color: #FF6D66;
}

/* ---- What is in it for you (1:2613): cream, head 362 / body 656 --------------- */
.rs-pt-offer {
  background: #F9FAF4;
}

.rs-pt-offer-grid {
  display: grid;
  grid-template-columns: 362px minmax(0, 656px);
  justify-content: space-between;
  gap: 30px;
}

.rs-pt-offer-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rs-pt-offer-head .rs-pt-h2 {
  max-width: 264px;
}

/* Asana frame 1:3553: a 430px head column, heading at its full width. */
.rs-pt-offer-grid--wide {
  grid-template-columns: 430px minmax(0, 656px);
}

.rs-pt-offer-grid--wide .rs-pt-offer-head .rs-pt-h2 {
  max-width: none;
}

.rs-pt .rs-pt-ask {
  margin-top: 30px;
  border-left: 4px solid #69B9C9;
  padding: 6px 0 14px 26px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #34383C;
}

.rs-pt-offer-btn {
  margin-top: 50px;
}

.rs-pt-offer-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rs-pt-offer-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rs-pt .rs-pt-offer-text p {
  color: #34383C;
}

/* ---- Testimonial: the case-study card, case-study geometry --------------------
   config/_testimonial.scss as the case study runs it: 40px padding all round, the
   portrait in the flow 40px from the copy, card height = portrait + 80. Roman,
   2026-10-21 — this replaces frame 1:2602's portrait overhanging the card top and
   bottom. On top of it, the partner frame's own changes: #F8F8F8, a 24px quote, one
   "Name, Role" line with the partner logo under it, and the partner's own portrait
   size (392x544 Floasis, 460x544 Medisky; --rs-pt-photo-w, set from the image). */
.rs-pt .rs-pt-tm {
  max-width: none;
  background: #F8F8F8;
}

/* Frame quote group 1:2609: 190px for 3+2 lines of 33.6 = a 22px paragraph gap; the
   sign sits 40px below the group, not the case study's 30. */
.rs-pt .rs-pt-tm .rs-cs-tm-main {
  gap: 40px;
}

.rs-pt .rs-cs-tm-quote-body {
  gap: 22px;
}

.rs-pt .rs-cs-tm-quote p {
  max-width: none;
  font-size: 24px;
}

.rs-pt-tm-person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  font-style: normal;
}

/* One 32px line: the role's 20/1.6 sets the line box in the frame, not the name's 1.4. */
.rs-pt-tm-who {
  line-height: 32px;
}

.rs-pt-tm-who .rs-cs-tm-role {
  color: #678689;
}

/* No size rule: the width/height attributes size it — 107x32 wordmark (Floasis), 60x60 mark
   (Medisky). `width:auto` would drop them, and an SVG with no intrinsic size collapses to 0. */
.rs-pt .rs-pt-tm-photo {
  flex: 0 0 var(--rs-pt-photo-w, 392px);
  width: var(--rs-pt-photo-w, 392px);
  height: var(--rs-pt-photo-h, 544px);
}

/* ---- Closing band (1:2590): teal --------------------------------------------- */
.rs-pt-final {
  background: #35717D;
  padding: 90px 20px;
}

.rs-pt-final .rs-pt-h2 {
  color: #FFFFFE;
}

/* Top-aligned: the right copy starts level with the card's copy (both y 242). */
.rs-pt-final-grid {
  display: grid;
  grid-template-columns: 558px 362px;
  column-gap: 128px;
  align-items: start;
  margin-top: 60px;
}

/* A partner with no discount code has only the CTA: centre it under the heading. */
.rs-pt-final-grid:has(> :only-child) {
  grid-template-columns: minmax(0, 558px);
  justify-content: center;
}

.rs-pt-final-grid > :only-child {
  align-items: center;
  text-align: center;
  padding-top: 0;
}

.rs-pt .rs-pt-final-text {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #D8E2E3;
}

.rs-pt-final-text strong {
  color: #FFFFFE;
}

.rs-pt-code {
  background: #408897;
  border-radius: 4px;
  padding: 40px 40px 55px;
  display: flex;
  flex-direction: column;
  gap: 45px;
}

/* Inset stroke, as in the frame: a border would make the 52px row 54. */
.rs-pt-code-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 0 0 1px #B2C9CB;
  border-radius: 4px;
  padding-left: 20px;
}

/* .rs-pt prefix: the theme's input reset (8px 12px) otherwise outranks it. */
.rs-pt .rs-pt-code-value {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #FFFFFE;
}

.rs-pt-code-value:focus {
  outline: none;
}

.rs-pt-code-field:focus-within {
  outline: 2px solid #FFFFFE;
  outline-offset: 2px;
}

.rs-pt .rs-pt-code-copy {
  flex: 0 0 auto;
  min-height: 52px;
}

.rs-pt-final-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 45px;
  padding-top: 40px;
}

/* ---- Closing CTA band (Asana frame 1:3529) -----------------------------------
   470 tall: 135deg teal gradient, a 656px column 100px down — 700 32/1.3 white heading
   with #FFC94B accent runs, 50px to the button. A partner can lay its own band image
   over the gradient (--rs-pt-band-bg, set inline by the template). */
.rs-pt-cta {
  background: var(--rs-pt-band-bg, none) right center/cover no-repeat, linear-gradient(135deg, #4B9EB0 0%, #408897 100%);
  padding: 100px 20px;
  min-height: 470px;
}

.rs-pt-cta-text {
  max-width: 656px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
}

.rs-pt-cta .rs-pt-h2 {
  font-size: 32px;
  color: #FFFFFE;
}

.rs-pt-cta .rs-pt-h2 span {
  color: #FFC94B;
}

/* ---- Closing coral card (staging's Asana partner close) --------------------------
   Measured on staging 2026-10-21: 1146x413 card, 135deg #F18E70 -> #F37465, radius 4;
   copy column 60/40 padding, 600 28/1.2 white Montserrat, 50px to a dark arrow button;
   the 413x334 composite sits flush in the bottom-right corner. */
.rs-pt-coral {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 413px;
  background: linear-gradient(135deg, #F18E70 0%, #F37465 100%);
  border-radius: 4px;
  overflow: hidden;
}

.rs-pt-coral-text {
  flex: 0 1 733px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 60px 40px;
  align-self: center;
}

.rs-pt .rs-pt-coral-title {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  color: #FFFFFE;
}

.rs-pt-coral-btn {
  margin-top: 34px;
}

.rs-pt-coral-img {
  flex: 0 0 auto;
  display: block;
}

/* ---- <=991: stack ------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .rs-pt-hero-grid, .rs-pt-about, .rs-pt-why-grid, .rs-pt-offer-grid, .rs-pt-final-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .rs-pt-hero-text {
    margin-top: 0;
  }
  .rs-pt-why-grid .rs-pt-scheme {
    justify-self: center;
  }
  .rs-pt-final-grid {
    row-gap: 40px;
  }
  .rs-pt-final-cta {
    padding-top: 0;
  }
  /* Portrait back into the flow under the quote. */
  /* height:auto keeps each portrait's own ratio (from its width/height attributes). */
  .rs-pt .rs-pt-tm-photo {
    flex: none;
    width: 100%;
    max-width: var(--rs-pt-photo-w, 392px);
    height: auto;
  }
}
/* ---- <=767: phone (1:3050) ---------------------------------------------------- */
@media (max-width: 767.98px) {
  .rs-pt-band {
    padding: 40px 20px;
  }
  .rs-pt-h1 {
    font-size: 32px;
  }
  .rs-pt-h2, .rs-pt-h2--sm {
    font-size: 32px;
  }
  .rs-pt-band p, .rs-pt-list li, .rs-pt .rs-pt-fact {
    font-size: 18px;
  }
  .rs-pt .rs-pt-eyebrow {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 10px;
  }
  .rs-pt .rs-pt-lead {
    margin-top: 33px;
  }
  .rs-pt-hero {
    padding-top: 40px;
  }
  .rs-pt .rs-pt-facts-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
    margin: 30px 0 40px;
  }
  .rs-pt .rs-pt-fact, .rs-pt-fact:nth-child(2) {
    max-width: none;
  }
  .rs-pt-about {
    padding: 20px;
  }
  .rs-pt-about-head {
    gap: 20px;
  }
  .rs-pt .rs-pt-about-sub {
    font-size: 20px;
  }
  .rs-pt-why {
    padding-bottom: 40px;
  }
  .rs-pt-why-grid {
    margin-top: 30px;
  }
  .rs-pt-list {
    gap: 10px;
  }
  .rs-pt-list li, .rs-pt-list--star li {
    gap: 15px;
  }
  .rs-pt-list i {
    font-size: 18px;
    line-height: 29px;
  }
  .rs-pt .rs-pt-list--check {
    padding: 30px 20px;
  }
  .rs-pt .rs-pt-ask {
    font-size: 20px;
    padding: 0 0 0 20px;
  }
  .rs-pt-offer-btn {
    margin-top: 30px;
  }
  .rs-pt-offer-head .rs-pt-h2 {
    max-width: none;
  }
  /* Frame 1:3065 layout — quote across the card, then "Name, Role" + logo on the left and
     a 158x220 portrait on the right — but the portrait stays inside the card's padding
     like the case study's, not overhanging its bottom edge as the frame drew it (Roman,
     2026-10-21). The main column dissolves into the card's grid so person and photo can
     share a row. */
  .rs-pt-tm-band {
    padding: 20px 20px 40px;
  }
  .rs-pt .rs-pt-tm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 158px;
    gap: 20px;
    align-items: start;
    padding: 30px 20px;
  }
  .rs-pt .rs-pt-tm .rs-cs-tm-main {
    display: contents;
  }
  .rs-pt .rs-pt-tm .rs-cs-tm-quote {
    grid-column: 1/-1;
    gap: 15px;
  }
  .rs-pt .rs-cs-tm-quote p {
    font-size: 20px;
  }
  .rs-pt .rs-cs-tm-quote-body {
    gap: 16px;
  }
  .rs-pt .rs-pt-tm-photo {
    width: 158px;
    height: 220px;
    max-width: none;
    margin: 0;
  }
  /* The mobile frame draws the wordmark at 80x24; height:auto keeps the attributes' ratio. */
  .rs-pt-tm-logo {
    max-width: 80px;
    height: auto;
  }
  .rs-pt-final {
    padding: 40px 20px;
  }
  .rs-pt-cta {
    background: linear-gradient(135deg, #4B9EB0 0%, #408897 100%);
    padding: 40px 20px;
    min-height: 0;
  }
  .rs-pt-coral {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .rs-pt-coral-text {
    flex: none;
    padding: 30px 20px 0;
  }
  .rs-pt .rs-pt-coral-title {
    font-size: 22px;
  }
  .rs-pt-coral-btn {
    margin-top: 14px;
    align-self: stretch;
  }
  .rs-pt-coral-img {
    width: 100%;
    max-width: 413px;
    height: auto;
    align-self: flex-end;
  }
  /* A mobile band image (Medisky cnt-mob.png, 375x470) is a photo that fades into flat
     #35717D: pin it to the top, fill below with that colour, and start the copy on the
     flat part. */
  .rs-pt-cta--img-m {
    background: var(--rs-pt-band-bg-m) center top/100% auto no-repeat, #35717D;
    padding-top: min(230px, 61vw);
  }
  .rs-pt-cta-text {
    gap: 30px;
  }
  .rs-pt-cta .btn {
    align-self: stretch;
  }
  .rs-pt-final-grid {
    margin-top: 30px;
  }
  .rs-pt-code {
    padding: 20px 20px 32px;
    gap: 15px;
  }
  .rs-pt-code-field {
    flex-direction: column;
    align-items: stretch;
    box-shadow: none;
    padding: 0;
    gap: 30px;
  }
  .rs-pt .rs-pt-code-value {
    border: 1px solid #B2C9CB;
    border-radius: 4px;
    padding: 19px 27px;
    line-height: 1.4;
  }
  .rs-pt .rs-pt-code-copy {
    min-height: 44px;
  }
  .rs-pt-final-cta {
    gap: 20px;
  }
  .rs-pt-final-cta .btn {
    align-self: stretch;
  }
  .rs-pt-offer-btn {
    align-self: stretch;
  }
}