@charset "UTF-8";
/*!
 * Asana licences page — /asana-licences-subscription/ + /pl/asana-faktura-vat-pln/.
 *
 * Pairs with wp/hello-elementor-child/template-asana-licences.php.
 * Layout from Figma 24567:28530 (desktop) / 3917:5188 (375), both PL.
 *
 * Type follows the frame, not staging: Raman's design input for this page is to
 * keep Figma's heading styles as drawn, because the page predates the design
 * system and a real H1 size breaks the composition. Staging's 32px hero title is
 * therefore 40px here.
 *
 * Not styled here because they are shared: the running line
 * (`.rs-trusted-strip`, logo-marquee.min.css), the FAQ (`.framework-lp-faq`,
 * main.min.css), the yellow atom (`.btn.btn-atom.btn-warning`) and the heading
 * highlight (`.rs-heading-em`), all main.min.css.
 */
.rs-lic {
  color: #5d636a;
}
.rs-lic h1,
.rs-lic h2,
.rs-lic h3 {
  color: #34383c;
  /* PL compounds are where display type overflows first (trap 9). No
     `hyphens: auto` though: the 375 frame wraps whole words, and at this
     size it split "sprawdź" and "wycenę" mid-word. break-word alone stops
     the overflow. */
  overflow-wrap: break-word;
}
.rs-lic p {
  font-size: 1.25rem;
  line-height: 1.6;
}

.rs-lic-accent {
  color: #f35b54;
}

/* ---- Hero --------------------------------------------------------------- */
.rs-lic-hero {
  padding: 90px 0 60px;
  background-color: #f9faf4;
  /* The rule under the title is gone (Raman, 2026-09-28); 42px is the gap it
     used to make (20 + its 2px + 20), kept so the lede does not move up. */
}
.rs-lic-hero__badge {
  display: block;
  width: auto;
  height: 30px;
  margin-bottom: 20px;
}
.rs-lic-hero__title {
  margin: 0 0 42px;
  font-size: 2.5rem;
  line-height: 1.3;
}
.rs-lic-hero__lede {
  max-width: 500px;
  margin-bottom: 50px;
}
.rs-lic-hero__mail {
  margin: 20px 0 0;
}
.rs-lic-hero__mail a {
  color: #ff6d66;
  text-decoration: none;
}

/* ---- Problems + consequences ------------------------------------------- */
.rs-lic-pain {
  padding: 90px 0;
  background-color: #fff;
  /* The frame's 4px bar is a sibling of the heading, not a border — padding
     plus a pseudo keeps the text column where Figma puts it. */
}
.rs-lic-pain__row + .rs-lic-pain__row {
  margin-top: 90px;
}
.rs-lic-pain__title {
  position: relative;
  max-width: 460px;
  margin: 0;
  padding-left: 30px;
  font-size: 2rem;
  line-height: 1.3;
}
.rs-lic-pain__title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 126px;
  transform: translateY(-50%);
}
.rs-lic-pain__panel {
  padding: 30px;
  border-radius: 4px;
}
.rs-lic-pain__intro {
  margin-bottom: 20px;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #34383c;
}
.rs-lic-pain__list {
  display: grid;
  gap: 15px;
}
.rs-lic-pain__list li {
  display: flex;
  gap: 15px;
  font-size: 1.25rem;
  line-height: 1.6;
}
.rs-lic-pain__list i {
  flex: 0 0 20px;
  font-size: 1.25rem;
  line-height: 2rem;
}
.rs-lic-pain__row--teal .rs-lic-pain__title::before {
  background-color: #4b9eb0;
}
.rs-lic-pain__row--teal .rs-lic-pain__panel {
  background-color: #f0f8f9;
}
.rs-lic-pain__row--teal i {
  color: #4b9eb0;
}
.rs-lic-pain__row--coral .rs-lic-pain__title::before {
  background-color: #ff8580;
}
.rs-lic-pain__row--coral .rs-lic-pain__panel {
  background-color: #fff4f3;
}
.rs-lic-pain__row--coral i {
  color: #f35b54;
}

/* ---- How the partner helps --------------------------------------------- */
.rs-lic-help {
  padding: 90px 0;
  background-color: #f9f9f9;
  /* Figma 24567:28719: 30px under the cards, 20px from button to the line. */
}
.rs-lic-help__head {
  max-width: 700px;
  margin: 0 auto 60px;
}
.rs-lic-help__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  margin-bottom: 30px;
  border: 1px solid #d8e2e3;
  border-radius: 50%;
}
.rs-lic-help__logo img {
  width: 36px;
  height: auto;
}
.rs-lic-help__cta {
  margin-top: 30px;
}
.rs-lic-help__cta p {
  margin-top: 20px;
  color: #34383c;
}
.rs-lic-help__title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.3;
}
.rs-lic-help__card {
  padding: 40px;
  border-radius: 4px;
  background-color: #fff;
}
.rs-lic-help__card-title {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 1.25rem;
  line-height: 1.4;
}
.rs-lic-help__card-title i {
  flex: 0 0 auto;
  font-size: 2rem;
  color: #4b9eb0;
}

/* ---- What the organisation gains --------------------------------------- */
.rs-lic-gains {
  padding: 90px 0 60px;
  background-color: #fff;
  /* The one bridge to the implementation service, under the cards. */
  /* h3 carries the frame's coral 01/02/03 on PL and the card title on EN. */
}
.rs-lic-gains__title {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.3;
}
.rs-lic-gains__art {
  margin: 30px 0;
  text-align: center;
}
.rs-lic-gains__art img {
  max-width: 100%;
  height: auto;
}
.rs-lic-gains__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.rs-lic-gains__card {
  padding: 30px;
  border-radius: 4px;
  background-color: #f9f9f9;
}
.rs-lic-gains__note {
  max-width: 800px;
  margin: 40px auto 0;
}
.rs-lic-gains__note a {
  color: #408897;
  text-decoration: none;
}
.rs-lic-gains h3.rs-lic-gains__card-title {
  margin-bottom: 15px;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #f35b54;
}

/* ---- Direct vs through RS (PL only) ----------------------------------- */
/* Figma 43967:26157. The case-study results table's vocabulary (1px #ebf2f2
   lines, radius 4, 12/20 cells, Hind 14/1.5) with this table's own header: grey,
   and the RS column's head in solid teal over bold teal answers. */
.rs-lic-compare {
  padding: 90px 0;
  background-color: #fff;
}
.rs-lic-compare__title {
  margin: 0 0 50px;
  font-size: 2rem;
  line-height: 1.3;
}
.rs-lic-compare__scroll {
  max-width: 950px;
  margin: 0 auto;
}
.rs-lic-compare__when {
  max-width: 700px;
  margin: 30px auto 0;
  text-align: center;
}
.rs-lic-compare__when strong {
  color: #34383c;
}

/* Scoped through `.rs-lic` (0,3,x) on purpose: the parent theme's reset puts a
   grey border-block-start on the header with `table thead:first-child
   tr:first-child th` (0,2,4) — the thin line over the old header — and stripes
   and hover-fills rows with (0,1,4)/(0,1,5). All three lose to this. */
.rs-lic .rs-lic-compare .rs-lic-compare__table {
  width: 100%;
  margin: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ebf2f2;
  border-radius: 4px;
  overflow: hidden;
  /* 240 of 950 in the frame; the two answer columns split the rest. */
}
.rs-lic .rs-lic-compare .rs-lic-compare__table th,
.rs-lic .rs-lic-compare .rs-lic-compare__table td {
  padding: 12px 20px;
  border: 0;
  border-bottom: 1px solid #ebf2f2;
  background-color: #fffffe;
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  vertical-align: middle;
  color: #5d636a;
}
.rs-lic .rs-lic-compare .rs-lic-compare__table :is(th, td) + :is(th, td) {
  border-left: 1px solid #ebf2f2;
}
.rs-lic .rs-lic-compare .rs-lic-compare__table thead > tr > * {
  background-color: #f9f9f9;
  font-size: 1rem;
  font-weight: 700;
  color: #34383c;
}
.rs-lic .rs-lic-compare .rs-lic-compare__table thead > tr > :first-child {
  width: 25.25%;
}
.rs-lic .rs-lic-compare .rs-lic-compare__table thead > tr > :last-child {
  background-color: #408897;
  color: #fffffe;
}
.rs-lic .rs-lic-compare .rs-lic-compare__table tbody th {
  height: 90px;
  font-size: 1rem;
  font-weight: 700;
  color: #34383c;
}
.rs-lic .rs-lic-compare .rs-lic-compare__table tbody tr:nth-child(even) > * {
  background-color: #f9f9f9;
}
.rs-lic .rs-lic-compare .rs-lic-compare__table tbody tr:last-child > * {
  border-bottom: 0;
}
.rs-lic .rs-lic-compare .rs-lic-compare__table tbody td:last-child {
  font-weight: 700;
  color: #408897;
}

/* ---- Calculator band --------------------------------------------------- */
.rs-lic-calc {
  padding: 30px 0 90px;
  background-color: #fff;
}
.rs-lic-calc__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 60px;
  border-radius: 4px;
  background: linear-gradient(135deg, #4b9eb0 0%, #408897 100%);
  box-shadow: var(--rs-shadow-big, 0 20px 20px -10px rgba(47, 47, 47, 0.05), 0 50px 60px -30px rgba(47, 47, 47, 0.1));
  color: #fff;
  /* Figma 24567:28607: the Asana mark at 10% white, 641x579, bleeding off the
     right and bottom edges (its left edge sits 492px in from the right). */
}
.rs-lic-calc__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 202px;
  right: -149px;
  width: 641px;
  height: 579px;
  background: url("../img/bg-asana-mark.svg") no-repeat center/contain;
  pointer-events: none;
}
.rs-lic-calc h2.rs-lic-calc__title {
  max-width: 1026px;
  margin: 0 0 50px;
  font-size: 2.5rem;
  line-height: 1.3;
  color: #fff;
}
.rs-lic-calc__lead {
  margin-bottom: 20px;
  line-height: 1.4;
}
.rs-lic-calc__list {
  display: grid;
  gap: 15px;
  margin-bottom: 40px;
}
.rs-lic-calc__list li {
  position: relative;
  padding-left: 24px;
  font-size: 1.25rem;
  line-height: 1.6;
}
.rs-lic-calc__list li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff8580;
}
.rs-lic-calc__cta {
  width: 100%;
}
.rs-lic-calc__note {
  margin-top: 20px;
  color: #ffd87d;
}
.rs-lic-calc__img {
  border: 5px solid #34383c;
  border-radius: 4px;
  box-shadow: 20px 20px 40px -10px rgba(47, 47, 47, 0.3);
}

/* ---- FAQ: this page's answers are lists -------------------------------- */
/* The shared body draws one dark dot before a single <p>. A list answer has
   its own items, so each item takes the dot and the body's own is dropped. */
.rs-lic .framework-lp-faq .framework-lp-faq__body:has(> ul, > ol)::before {
  display: none;
}
.rs-lic .framework-lp-faq .framework-lp-faq__body ul,
.rs-lic .framework-lp-faq .framework-lp-faq__body ol {
  display: grid;
  gap: 10px;
  margin: 0;
}
.rs-lic .framework-lp-faq .framework-lp-faq__body ul {
  padding: 0;
  list-style: none;
}
.rs-lic .framework-lp-faq .framework-lp-faq__body ul li {
  position: relative;
  padding-left: 28px;
}
.rs-lic .framework-lp-faq .framework-lp-faq__body ul li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #34383c;
}
.rs-lic .framework-lp-faq .framework-lp-faq__body ol {
  padding-left: 1.25rem;
}
.rs-lic .framework-lp-faq .framework-lp-faq__body p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* ---- Below lg: the 375 frame ------------------------------------------- */
@media (max-width: 991.98px) {
  .rs-lic p,
  .rs-lic-pain__list li,
  .rs-lic-calc__list li {
    font-size: 1rem;
  }
  .rs-lic-hero {
    padding: 30px 0 40px;
  }
  .rs-lic-hero__title {
    font-size: 1.5rem;
    line-height: 1.4;
  }
  .rs-lic-hero__lede {
    margin-bottom: 30px;
  }
  .rs-lic-hero .btn-atom {
    width: 100%;
  }
  .rs-lic-pain {
    padding: 40px 0;
    /* The 375 frame (3921:4168 / 4187) draws the bar at the heading's own
       height from its top, text 24px in. The desktop 126px bar, centred,
       stuck out past a two-line heading and over the panel below. */
  }
  .rs-lic-pain__row + .rs-lic-pain__row {
    margin-top: 40px;
  }
  .rs-lic-pain__title {
    margin-bottom: 20px;
    padding-left: 24px;
    font-size: 1.5rem;
  }
  .rs-lic-pain__title::before {
    top: 0;
    bottom: 0;
    height: auto;
    transform: none;
  }
  .rs-lic-pain__panel {
    padding: 20px;
  }
  .rs-lic-help {
    padding: 40px 0;
  }
  .rs-lic-help__head {
    margin-bottom: 30px;
  }
  .rs-lic-help__logo {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
  }
  .rs-lic-help__logo img {
    width: 24px;
  }
  .rs-lic-help__title {
    font-size: 1.5rem;
  }
  .rs-lic-help__card {
    padding: 20px;
  }
  .rs-lic-help__cta .btn-atom {
    width: 100%;
  }
  .rs-lic-help__card-title {
    gap: 15px;
  }
  .rs-lic-help__card-title i {
    font-size: 1.5rem;
  }
  .rs-lic-gains {
    padding: 40px 0 20px;
  }
  .rs-lic-gains__title {
    font-size: 1.5rem;
  }
  .rs-lic-gains__art {
    margin: 20px 0 0;
  }
  .rs-lic-gains__cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .rs-lic-gains__card {
    width: 100%;
    padding: 20px;
  }
  .rs-lic-gains__stem {
    display: block;
    margin: 0 auto;
  }
  .rs-lic-compare {
    padding: 40px 0;
  }
  .rs-lic-compare__title {
    margin-bottom: 30px;
    font-size: 1.5rem;
  }
  /* Three columns don't fit a phone and scrolling hides the RS column, the one
     the table exists for (Raman, 2026-09-28: stack). Each row becomes its own
     card in the desktop table's style: the label on the grey header bar, then
     both answers, each prefixed with its column name from data-label. */
  .rs-lic .rs-lic-compare .rs-lic-compare__table {
    table-layout: auto;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .rs-lic .rs-lic-compare .rs-lic-compare__table thead {
    display: none;
  }
  .rs-lic .rs-lic-compare .rs-lic-compare__table tbody,
  .rs-lic .rs-lic-compare .rs-lic-compare__table tr,
  .rs-lic .rs-lic-compare .rs-lic-compare__table th,
  .rs-lic .rs-lic-compare .rs-lic-compare__table td {
    display: block;
    width: 100%;
  }
  .rs-lic .rs-lic-compare .rs-lic-compare__table tr {
    overflow: hidden;
    border: 1px solid #ebf2f2;
    border-radius: 4px;
  }
  .rs-lic .rs-lic-compare .rs-lic-compare__table tr + tr {
    margin-top: 20px;
  }
  .rs-lic .rs-lic-compare .rs-lic-compare__table th,
  .rs-lic .rs-lic-compare .rs-lic-compare__table td,
  .rs-lic .rs-lic-compare .rs-lic-compare__table tbody th,
  .rs-lic .rs-lic-compare .rs-lic-compare__table :is(th, td) + :is(th, td),
  .rs-lic .rs-lic-compare .rs-lic-compare__table tbody tr:nth-child(even) > *,
  .rs-lic .rs-lic-compare .rs-lic-compare__table tbody tr:last-child > * {
    height: auto;
    border-bottom: 0;
    border-left: 0;
    background-color: #fffffe;
  }
  .rs-lic .rs-lic-compare .rs-lic-compare__table tbody th,
  .rs-lic .rs-lic-compare .rs-lic-compare__table tbody tr:nth-child(even) > th {
    background-color: #f9f9f9;
  }
  .rs-lic .rs-lic-compare .rs-lic-compare__table tbody tr > td {
    border-top: 1px solid #ebf2f2;
  }
  .rs-lic .rs-lic-compare .rs-lic-compare__table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: #34383c;
  }
  .rs-lic-gains__note {
    margin-top: 30px;
  }
  .rs-lic-calc {
    padding: 20px 0 40px;
  }
  .rs-lic-calc__panel {
    padding: 30px 20px;
    /* Half the desktop mark, tucked into the bottom-right corner. */
  }
  .rs-lic-calc__panel::before {
    top: auto;
    right: -75px;
    bottom: -75px;
    width: 320px;
    height: 289px;
  }
  .rs-lic-calc h2.rs-lic-calc__title {
    margin-bottom: 30px;
    font-size: 1.5rem;
  }
  .rs-lic-calc__list {
    margin-bottom: 30px;
  }
}