@charset "UTF-8";
/*!
 * The dark band's grain — the shared version.
 *
 * Figma tiles a noise texture at 15% over a dark fill on every band of this kind.
 * The tile is pure black with the grain entirely in its ALPHA channel, so it needs
 * its own layer: `background-blend-mode` cannot give 10–15% to the image alone.
 * 64x64 crop of the 250px original; the source is white noise, so any crop tiles
 * seamlessly. The asset lives in `img/` (versioned), not `images/` (gitignored).
 *
 * WHY A PARTIAL
 * Each `pages/*.scss` is its own gulp entry point and cannot see main.scss or a
 * sibling page sheet, so a second page needing this mechanism has no way to reach
 * the first one's copy. That is the whole reason `config/` exists.
 *
 * ⚠️ `pages/asana-consulting.scss` still carries an identical block under the
 * page-local name `.rs-ac-grain`. It was written first and was not changed when
 * this partial was extracted for /quiz/, because that is an edit to a shared page
 * sheet rather than to this page. Fold it in here — same rules, same two knobs —
 * and there will be one owner again. See the follow-up task.
 *
 * `isolation` rather than a z-index on every child: the pseudo-element is
 * positioned and would otherwise paint over static content.
 */
.rs-grain {
  position: relative;
  isolation: isolate;
  /* Both knobs exist because a band may reuse this over a yellow gradient at 0.05
     instead of over the dark fill at 0.15. Everything else about the mechanism —
     one tile, its own layer, children lifted above it — is identical. */
  background-color: var(--rs-grain-bg, var(--rs-black-prime, #34383c));
}

.rs-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--rs-grain-opacity, 0.15);
  background: url("../img/noise-64.webp") repeat;
}

.rs-grain > * {
  position: relative;
  z-index: 1;
}

/*!
 * VSL landing — template-vsl-landing.php. 70527, /pl/przyspiesz-realizacje-projektow-asana/.
 *
 * Figma
 *   30580:39625 / 30580:39736  step 1 / step 2, desktop
 *   30580:39499 / 30580:39367  step 1 / step 2, mobile
 * Layout from the frames; pixel values from the Elementor page on staging, which
 * wins where the two disagree (skill rule). Where staging's number was only
 * Elementor's kit default leaking through (20px/28px body copy on every text
 * widget), the frame's value is used instead.
 *
 * WHAT IS NOT IN THIS FILE, DELIBERATELY
 * - Buttons. Every yellow and black button is the global design-system atom,
 *   `.btn.btn-atom` + `.btn-warning` / `.btn-dark` from main.min.css; only the
 *   two booking buttons' width and padding are adjusted here, because they carry
 *   a row of faces the atom does not.
 * - The modal. It is the self-audit modal's popup class for class, styled by
 *   css/cta-two-path.min.css, which the template enqueues.
 * - The testimonial wall, which carries its own sheet (`compact` variant).
 *
 * STEPS
 * `.vsl-lp--step1` / `.vsl-lp--step2` mark what each step shows; js/vsl-landing.js
 * puts `vsl-has-access` on <html> to move to step 2. Both rules are (0,3,1) so they
 * beat the display any component sets for itself — the booking button is
 * `.btn.btn-atom.vsl-lp__book` at (0,3,0), and the first cut of these rules, at
 * (0,2,1), lost to it and showed step 2's button in step 1.
 */
html:not(.vsl-has-access) .vsl-lp .vsl-lp--step2,
html.vsl-has-access .vsl-lp .vsl-lp--step1 {
  display: none;
}

/* The Elementor page hid the chat bubble on this page only; kept. */
#chat-widget-container {
  display: none;
}

/* Display copy wraps in Polish before it does in English (trap 9). */
.vsl-lp__title,
.vsl-lp__heading,
.vsl-lp__cta-title {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ---- 1. Hero --------------------------------------------------------------
 * The dark card ends 100px above the bottom of the video, which hangs out of it
 * (Elementor did this with a -100px margin, and it is load-bearing: it is the
 * whole look of the section). Whatever follows the card has to clear that
 * overhang, so the section's own bottom padding carries it in step 1, and the
 * booking button's top margin carries it in step 2.
 *
 * SPACING IS THE FRAME'S (Roman, 2026-10-23: "check margins and gaps precisely").
 * Every vertical gap in this file was re-measured against 30580:39625 / 39736 /
 * 39499 / 39367 and set to the frame's number; the first cut had taken several
 * from the Elementor page, which spaced the hero tighter and left 30px instead of
 * 109 between step 2's booking button and the logos heading.
 */
.vsl-lp__hero {
  padding: 0 20px 190px; /* 81 overhang + 109 to the logos heading */
}

html.vsl-has-access .vsl-lp__hero {
  padding-bottom: 109px;
}

.vsl-lp__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 1268px;
  margin: 0 auto;
  padding: 50px 40px 0;
  border-radius: 24px;
  background: #2a2d31 url("/wp-content/uploads/2024/09/bg_img.webp") center top/cover no-repeat;
  text-align: center;
}

.vsl-lp__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 18px;
  line-height: 25px;
}

.vsl-lp__tag {
  padding: 0 8px;
  border-radius: 240px;
  background: rgba(255, 255, 255, 0.1);
}

.vsl-lp__title {
  /* The frame's 949, not staging's 980: it is what puts "Czas" at the end of
     line 1 and "O 200%" at the start of line 3, as Figma breaks it. */
  max-width: 949px;
  margin: 0; /* the card's 20 under the tags */
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-display, Montserrat), sans-serif;
  font-size: 36px;
  font-weight: 900;
  line-height: 50px;
}

.vsl-lp__title-main {
  display: block;
}

.vsl-lp__title-accent {
  display: inline-block;
  margin-top: 8px;
  padding: 0 15px;
  border-radius: 8px;
  background: var(--rs-white-ivory, #f9faf4);
  color: var(--rs-black-prime, #34383c);
}

.vsl-lp__lede {
  max-width: 755px;
  margin: 10px 0 0; /* 30 under the highlight: the card's 20 + 10 */
  color: var(--rs-grey-light-30, #d8e2e3);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 18px;
  line-height: 29px;
}
.vsl-lp__lede strong {
  font-weight: 700;
}

.vsl-lp__video {
  position: relative;
  width: 100%;
  max-width: 755px;
  /* 30 under the lede (the card's 20 + 10); hangs 81 below the card. */
  margin: 10px 0 -81px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 20px 20px -10px rgba(47, 47, 47, 0.05), 0 50px 60px -30px rgba(47, 47, 47, 0.1);
  /* The 16:9 box the legacy embed's own inline `padding: 56.25% 0 0` used to
     reserve. The media is 960x540 (oEmbed). */
  aspect-ratio: 16/9;
}

.vsl-lp__poster,
.vsl-lp__preview,
.vsl-lp__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vsl-lp__poster,
.vsl-lp__preview {
  object-fit: cover;
}

.vsl-lp__player .wistia_embed {
  width: 100%;
  height: 100%;
}

/* Step 1: the muted preview (or the still), never the player. Not `display: none`, so the player still initialises
   at its real size and step 2 opens on a ready video. And not `visibility:
   hidden` either — the embed sets `visibility: visible` on its own controls,
   which beats an inherited hidden, so the play and mute buttons showed through.
   A child cannot undo its parent's opacity. */
html:not(.vsl-has-access) .vsl-lp__player {
  opacity: 0;
}

/*
 * Step 1's lock over the player. `button.` qualified and every face repeating
 * the background: hello-elementor's reset.css paints [type=button] #c36 on
 * hover and focus (see config/_rs-modal.scss for the specificity argument).
 */
button.vsl-lp__gate,
button.vsl-lp__gate:hover,
button.vsl-lp__gate:focus {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  width: 100%;
  padding: 0 20px 30px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.65) 68.79%);
  color: var(--rs-white-pure, #fffffe);
  cursor: pointer;
}

button.vsl-lp__gate:focus-visible {
  outline: 2px solid var(--rs-teal-00, #408897) !important; /* style.css kills button rings with !important */
  outline-offset: 2px !important;
}

/* The atom's hover face, driven from the whole gate rather than the label: the
   label is a <span> inside the real control. #FFB710 is `.btn-warning:hover`'s
   own fill ($color-accent-hover in main.scss, which this sheet cannot import);
   !important because that rule's is. */
button.vsl-lp__gate:hover .vsl-lp__gate-btn,
button.vsl-lp__gate:focus-visible .vsl-lp__gate-btn {
  background-color: #ffb710 !important;
  box-shadow: 0 10px 20px -5px rgba(38, 50, 56, 0.3);
}

.vsl-lp__gate-btn {
  width: 100%;
  max-width: 560px;
  pointer-events: none;
}

.vsl-lp__proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin: 0;
  color: var(--rs-white-pure, #fffffe);
  font-family: var(--rs-font-display, Montserrat), sans-serif;
  font-size: 16px;
  line-height: 19px;
}
.vsl-lp__proof strong {
  font-weight: 700;
}

.vsl-lp__proof-faces {
  width: 319px;
  max-width: 100%;
  height: auto;
}

/* Mobile only — see the media query. */
.vsl-lp__proof--below {
  display: none;
}

/* The two booking buttons: the atom, full width, with Jacek and Oskar on the
   right. 10px block padding because the 34px faces set the height (54). */
.btn.btn-atom.vsl-lp__book {
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 10px 30px;
}

/* As wide as the video above it: 755, or the card's width less its 40px
   padding once the card is narrower than that (tablet). It sits outside the
   card, so the padding does not reach it on its own. */
.vsl-lp__book--hero {
  max-width: min(755px, 100% - 80px);
  margin: 111px auto 0; /* 81 overhang + 30 */
}

.vsl-lp__faces {
  display: flex;
  flex: 0 0 auto;
}
.vsl-lp__faces img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  outline: 1px solid var(--rs-white-pure, #fffffe);
  object-fit: cover;
}
.vsl-lp__faces img + img {
  margin-left: -6px;
}

/* ---- 2. Logos ------------------------------------------------------------ */
.vsl-lp__logos {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.vsl-lp__heading {
  margin: 0 0 60px;
  color: var(--rs-black-prime, #34383c);
  font-family: var(--rs-font-display, Montserrat), sans-serif;
  font-size: 24px;
  font-weight: 900;
  line-height: 34px;
  text-align: center;
}

.vsl-lp__logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Grey at rest, full colour on hover — the frame's 50% + luminosity, done the
   way pages/contact.scss and the logo marquee already do it for this same set
   of logos (saturate(0) is the luminosity blend's result on white), so a
   client's mark behaves the same on every page. */
.vsl-lp__logo img {
  display: block;
  width: 100%;
  height: 60px;
  object-fit: contain;
  opacity: 0.5;
  filter: saturate(0);
  transition: all 0.3s ease-in-out;
}

.vsl-lp__logo img:hover {
  opacity: 1;
  filter: saturate(1);
}

/* ---- 3. Step 2's call to action ------------------------------------------ */
.vsl-lp__cta {
  padding: 60px 20px 0;
}

/*
 * The frame's fill (30580:39840 / 39380): #FFD87D with the noise tile at 30%
 * over it (Roman, 2026-10-23 — "a noisy background as in the figma"). The flat
 * #FFC94B the first cut took from the Elementor page is gone. `.rs-grain`
 * (config/_grain.scss) owns the fill and the tile; this sets its two knobs.
 */
.vsl-lp__cta-box {
  --rs-grain-bg: var(--rs-yellow-light-20, #ffd87d);
  --rs-grain-opacity: 0.3;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 755px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 8px;
  color: var(--rs-black-prime, #34383c);
  text-align: center;
  /* The tile layer is a square box; keep it inside the rounded corners.
   *
   * OVERLAY, not the partial's normal blend — and it is what makes this the
   * frame's colour. The texture is the same black-alpha noise as the tile
   * (Figma's raw fill e0db2b24, 500px, mean alpha 0.82). Laid over #FFD87D at
   * 30% with a normal blend it averages (192, 163, 94), a muddy gold; the
   * frame's render averages (255, 206, 94). Overlay reproduces that exactly:
   * red stays 255, green 216 -> 206, blue 125 -> 94. Measured 2026-10-23. */
}
.vsl-lp__cta-box::before {
  border-radius: inherit;
  mix-blend-mode: overlay;
}
.vsl-lp__cta-box .vsl-lp__book,
.vsl-lp__cta-box .vsl-lp__stats {
  margin-top: 20px; /* the frame's 40 on the box's 20 gap */
}

.vsl-lp__cta-title {
  margin: 0;
  color: var(--rs-black-prime, #34383c);
  font-family: var(--rs-font-display, Montserrat), sans-serif;
  font-size: 36px;
  font-weight: 900;
  line-height: 50px;
}

.vsl-lp__cta-text {
  margin: 0;
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.vsl-lp__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 12px;
  line-height: 17px;
}
.vsl-lp__stats strong {
  display: block;
  margin: 0 0 6px;
  font-family: var(--rs-font-display, Montserrat), sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
}

/* ---- 4. Testimonials ----------------------------------------------------- */
.vsl-lp__testimonials {
  /* The wall ends here; the closing button below supplies the frame's 40 + 60. */
  --rs-testimonials-end: 0;
}

/* Step 1 has no yellow block above the wall, and the frame keeps 120 between
   the logos and the wall's heading (60 of which the wall pads itself). */
html:not(.vsl-has-access) .vsl-lp__testimonials {
  margin-top: 60px;
}

/* The wall's `compact` heading is 400; this page sets every heading at 900, as
   the frame and the Elementor page both do. Weight only — size, colour and
   spacing stay the component's. */
.vsl-lp__testimonials .rs-testimonials__title {
  font-weight: 900;
}

.vsl-lp__end {
  display: flex;
  justify-content: center;
  padding: 40px 20px 60px;
}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .vsl-lp__hero {
    padding-bottom: 61px;
  }
  html.vsl-has-access .vsl-lp__hero {
    padding-bottom: 42px;
  }
  /* A 295 text column (20 each side) in both steps; the video is 10px wider
     on each side than the text, as both mobile frames draw it. */
  .vsl-lp__card {
    padding: 20px 20px 0;
    border-radius: 20px;
    background-image: url("/wp-content/uploads/2024/10/light-effect.svg");
  }
  .vsl-lp__tags {
    gap: 4px 10px;
    font-size: 14px;
    line-height: 23px;
  }
  .vsl-lp__title {
    margin-top: 0;
    font-size: 18px;
    line-height: 25px;
  }
  .vsl-lp__title-accent {
    margin-top: 8px;
    padding: 5px 15px;
    line-height: 25px; /* 2 x 25 + 10 = the frame's 60 */
  }
  .vsl-lp__lede {
    margin-top: 0; /* 20 under the highlight on mobile: the card's gap alone */
    font-size: 14px;
    line-height: 22px;
  }
  /* 20 under the lede; hangs 18 below the card in step 1, 38 in step 2. */
  .vsl-lp__video {
    width: calc(100% + 20px);
    max-width: none;
    margin: 0 0 -18px;
  }
  html.vsl-has-access .vsl-lp__video {
    margin-bottom: -38px;
  }
  /* On a phone the gradient goes, and the button sits 10px in from the
     video's sides and bottom; the proof moves out under the card. */
  button.vsl-lp__gate,
  button.vsl-lp__gate:hover,
  button.vsl-lp__gate:focus {
    padding: 0 10px 10px;
    background: transparent;
  }
  .vsl-lp__gate-btn {
    max-width: none;
  }
  .vsl-lp__proof--in-video {
    display: none;
  }
  .vsl-lp__proof--below {
    display: flex;
    gap: 10px;
    margin-top: 28px; /* 18 overhang + 10 */
    color: var(--rs-black-prime, #34383c);
    font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
    font-size: 12px;
    line-height: 17px;
  }
  .vsl-lp__proof--below .vsl-lp__proof-faces {
    width: 292px;
  }
  /* 60 tall, as the frame draws both: the label wraps to two lines at 1.4,
     where the atom's own 1 would make it 48. */
  .btn.btn-atom.vsl-lp__book {
    gap: 10px;
    padding: 10px 15px;
    line-height: 1.4;
    text-align: left;
  }
  /* The card's full width (335), 20 under the video. At (0,3,0) to beat the
     `width: 100%` on .btn.btn-atom.vsl-lp__book. */
  .btn.btn-atom.vsl-lp__book--hero {
    width: auto;
    max-width: none;
    margin: 58px 0 0; /* 38 overhang + 20 */
  }
  .vsl-lp__faces img {
    width: 28px;
    height: 28px;
  }
  .vsl-lp__heading {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 28px;
  }
  .vsl-lp__logo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
  }
  .vsl-lp__logo {
    padding-right: 10px;
  }
  .vsl-lp__cta {
    padding-top: 40px;
  }
  .vsl-lp__cta-box {
    padding: 20px;
  }
  .vsl-lp__cta-box .vsl-lp__book,
  .vsl-lp__cta-box .vsl-lp__stats {
    margin-top: 0;
  }
  .vsl-lp__cta-title {
    font-size: 18px;
    line-height: 25px;
  }
  .vsl-lp__cta-text {
    margin-top: -10px; /* 10 under the heading: the box's 20 less 10 */
    font-size: 14px;
    line-height: 23px;
  }
  /* Step 1 runs 80 from the logos to the wall's heading (the wall pads 40). */
  html:not(.vsl-has-access) .vsl-lp__testimonials {
    margin-top: 40px;
  }
  /* 20 between the wall's heading and its first card on a phone, where the
     component spaces 40. Gap only, as with the weight above. */
  .vsl-lp__testimonials .rs-testimonials__inner {
    gap: 20px;
  }
  /* 20 above the closing button, 40 to the footer. The 12px gutter: the
     mobile atom needs 351px to keep "Umów Sesję Strategiczną z Ekspertem →"
     on one line, as the frame draws it, and a 20px one leaves 335. The gutter
     gives, not the atom's ruled 15/20 padding. */
  .vsl-lp__end {
    padding: 20px 12px 40px;
  }
  .vsl-lp__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    font-size: 10px;
    line-height: 14px;
  }
  .vsl-lp__stats strong {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 16px;
  }
}