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

/*!
 * /quiz/ — the pre-quiz marketing landing page. 80841 EN, 81122 PL.
 *
 * Figma
 *   34905:28181  Pre-Quiz LP - desktop - EN   (1440x4476)
 *   34905:28077  Pre-Quiz LP - mobile  - EN   (375x6799)
 *   34905:28272 / 34905:27984  the PL pair
 *
 * WHAT IS NOT IN THIS FILE, DELIBERATELY
 * - The hero's gradient and its rope photograph. Both come from `.head__quiz`,
 *   which already exists in main.scss and which main.min.css delivers to every
 *   migrated template. Only the mobile repositioning of the rope is here.
 * - Bootstrap 5.3 arrives via main.min.css on this template, so `.container`
 *   (1146px at xl, which is exactly the frames' content width) and the utility
 *   classes are already present and are not restated.
 * - The logo marquee and the testimonial wall carry their own stylesheets,
 *   enqueued by the template. Nothing here restyles either component.
 *
 * The button box comes from config/_btn-atom.scss and the dark band's noise from
 * config/_grain.scss, because a page sheet is its own gulp entry point and cannot
 * see main.scss or a sibling page.
 *
 * TYPE SCALE, desktop -> <=767px, straight off the frames:
 *   h1 48/1.2 -> 32/1.3   h2 32/1.3 -> 24/1.3   h3 24/1.4 unchanged
 *   lede 20/1.6 -> 16/1.6
 */
.quiz-lp {
  /* Display copy is Montserrat; body copy Hind Madurai; pull quotes Lora. */
  --quiz-ink: var(--rs-black-prime, #34383c);
  --quiz-ink-soft: var(--rs-black-second, #5d636a);
}

/* An italic, regular-weight run inside an otherwise bold display line — the
   "#1 Blocker" highlight, which both hero and dark band use. Figma records the
   run as a separate 400 style token; the italic is in the render and in what the
   Elementor page already ships (<i>#1 Blocker</i>). */
.quiz-lp__h1 em,
.quiz-lp__h2 em {
  font-style: italic;
  font-weight: 400;
}

/* ---- Shared display type ------------------------------------------------- */
.quiz-lp__h1 {
  margin: 0;
  font-family: var(--rs-font-display, Montserrat, sans-serif);
  font-size: 3rem; /* 48px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--quiz-ink);
}

.quiz-lp__h2 {
  margin: 0;
  font-family: var(--rs-font-display, Montserrat, sans-serif);
  font-size: 2rem; /* 32px */
  font-weight: 700;
  line-height: 1.3;
  color: var(--quiz-ink);
  text-align: center;
}

/* The marquee heading and the testimonial heading are the frames' 24px/400 —
   a regular weight, not a bold one. */
.quiz-lp__h3 {
  margin: 0;
  font-family: var(--rs-font-display, Montserrat, sans-serif);
  font-size: 1.5rem; /* 24px */
  font-weight: 400;
  line-height: 1.4;
  color: var(--quiz-ink);
  text-align: center;
}

.quiz-lp__lede {
  margin: 0;
  font-family: var(--rs-font-body, "Hind Madurai", sans-serif);
  font-size: 1.25rem; /* 20px */
  line-height: 1.6;
  color: var(--quiz-ink-soft);
  /* The frames draw this on two lines with a hard break. A max-width does the
     same job without pinning the break to English word lengths — Polish runs
     10-15% longer and would break mid-phrase. */
  max-width: 404px;
}

.quiz-lp__lede strong {
  font-weight: 700;
}

/* ---- The button ---------------------------------------------------------- */
.quiz-lp__btn {
  min-height: 48px;
  padding: 15px 30px;
  border-radius: 4px;
  box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.2);
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--rs-font-display, Montserrat, sans-serif);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background-color: var(--rs-yellow-00, #ffc94b);
  color: var(--quiz-ink);
  transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.quiz-lp__btn:hover,
.quiz-lp__btn:focus-visible {
  background-color: var(--rs-yellow-btn-hover, #ffb710);
  color: var(--quiz-ink);
  box-shadow: 0 10px 20px -5px rgba(38, 50, 56, 0.3);
}

.quiz-lp__btn:active {
  box-shadow: 0 5px 10px -5px rgba(38, 50, 56, 0.4);
}

/* The `type=with arrow` face runs 10px tighter on the icon side. */
.quiz-lp__btn--arrow {
  min-height: 48px;
  padding: 15px 20px 15px 30px;
  border-radius: 4px;
  box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.2);
  font-size: 1rem;
  line-height: 1;
}

.quiz-lp__btn i {
  font-size: 1.125rem; /* 18px */
  line-height: 1;
}

.quiz-lp__hero-cta {
  margin: 0;
}

/* ---- 1. Hero ------------------------------------------------------------- */
.quiz-lp__hero {
  padding: 60px 0 90px;
}

/* .head__quiz::after is the rope, pinned right and sized to contain. The copy
   column is capped so it never runs under it.
   ⚠️ Scoped to the block children that need it, NOT `.container > *`. That
   blanket form is specificity 0,2,1 and silently beat .quiz-lp__lede's own
   0,1,0 max-width, widening the subtitle from the frames' 404px to 656px. */
.quiz-lp__hero .quiz-lp__h1,
.quiz-lp__hero .quiz-lp__hero-cta {
  max-width: 656px;
}

.quiz-lp__hero .quiz-lp__lede {
  max-width: 404px;
}

.quiz-lp__logo {
  display: inline-block;
  margin-bottom: 72px;
}

.quiz-lp__h1 + .quiz-lp__lede {
  margin-top: 24px;
}

.quiz-lp__lede + .quiz-lp__rope,
.quiz-lp__lede + .quiz-lp__hero-cta,
.quiz-lp__rope + .quiz-lp__hero-cta {
  margin-top: 48px;
}

/* The rope is a background on desktop (via .head__quiz) and a real element below
   768px, because the mobile frame moves it INTO the flow between the subtitle and
   the button rather than hiding it — re-cropped from a tall portrait to a wide
   banner, which is what object-fit does here. */
.quiz-lp__rope {
  display: none;
}

/* ---- 2. The problem statement -------------------------------------------- */
/* This band and the marquee band below it share one continuous #f9f9f9 field —
   the frames give text-3 a zero bottom padding for exactly that reason. */
.quiz-lp__problem,
.quiz-lp__logos {
  background-color: var(--rs-grey-light-50, #f9f9f9);
}

.quiz-lp__problem {
  padding: 90px 0 0;
}

.quiz-lp__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.quiz-lp__pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 12px 20px;
  border-radius: 999px;
  background-color: var(--rs-grey-light-40, #ebf2f2);
  font-family: var(--rs-font-display, Montserrat, sans-serif);
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  line-height: 1.4;
  color: var(--quiz-ink);
}

.quiz-lp__pill i {
  font-size: 1.5rem; /* 24px */
  line-height: 1;
  color: var(--rs-coral-00, #f35b54);
}

.quiz-lp__jump {
  display: block;
  margin-top: 40px;
  padding-bottom: 40px;
  font-size: 1.125rem; /* 18px */
  line-height: 1;
  color: var(--quiz-ink);
  text-align: center;
  text-decoration: none;
}

/* ---- 3. The logo marquee ------------------------------------------------- */
.quiz-lp__logos {
  padding: 0 0 60px;
}

.quiz-lp__logos .quiz-lp__h3 {
  margin-bottom: 40px;
  padding: 0 20px;
}

/* ---- 4. Who walks you through the results -------------------------------- */
.quiz-lp__author {
  padding: 90px 0;
  background-color: var(--rs-white-pure, #fffffe);
}

.quiz-lp__author-grid {
  display: grid;
  /* 558 + 588 = the frames' 1146 content width, with no gap between the two —
     the bio card's left corners are square so it reads as one object. */
  grid-template-columns: 558fr 588fr;
  margin-top: 60px;
}

.quiz-lp__author-photo {
  margin: 0;
}

/* The teal blob, its rounded 240px top-left arch and the portrait are ONE
   flattened asset — quiz-lp-cnt.webp — not a CSS shape with a photo on top. */
.quiz-lp__author-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.quiz-lp__author-copy {
  padding: 30px;
  background-color: var(--rs-white-pure, #fffffe);
  border-radius: 0 4px 4px 0;
  font-family: var(--rs-font-body, "Hind Madurai", sans-serif);
  font-size: 1.25rem; /* 20px */
  line-height: 1.6;
  color: var(--quiz-ink-soft);
}

.quiz-lp__author-copy > * {
  margin: 0 0 24px;
}

.quiz-lp__author-copy > :last-child {
  margin-bottom: 0;
}

.quiz-lp__author-copy strong {
  font-weight: 700;
}

.quiz-lp__author-name {
  font-family: var(--rs-font-display, Montserrat, sans-serif);
  font-size: 1.5rem; /* 24px */
  line-height: 1.4;
  color: var(--quiz-ink);
}

.quiz-lp__author-role {
  color: var(--quiz-ink);
}

.quiz-lp__author-quote {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: 4px;
  background-color: var(--rs-teal-light-50, #f0f8f9);
}

.quiz-lp__author-quote i {
  font-size: 1.1875rem; /* 19px */
  line-height: 1;
  color: var(--rs-teal-00, #408897);
}

.quiz-lp__author-quote p {
  margin: 0;
  font-family: var(--rs-font-serif, Lora, Georgia, serif);
  font-size: 1rem; /* 16px */
  font-style: italic;
  line-height: 1.65;
  color: var(--quiz-ink);
}

/* ---- 5. The dark quiz CTA band ------------------------------------------- */
/* Three stacked fills in the frame: the flat dark, a warm radial glow at 30%,
   and the noise tile at 15%. `.rs-grain` owns the flat fill and the tile; the
   glow is the one layer this page adds, because its position is page-specific. */
.quiz-lp__cta {
  --rs-grain-bg: #2a2d31;
  padding: 90px 0;
  background-image: radial-gradient(circle at 68% 50%, rgba(182, 169, 141, 0.3) 0%, rgba(41, 47, 52, 0) 60%);
}

.quiz-lp__cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

.quiz-lp__cta-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.quiz-lp__cta-icons {
  display: block;
  width: 176px;
  height: auto;
}

.quiz-lp__h1--invert {
  font-weight: 400;
  color: var(--rs-white-pure, #fffffe);
}

.quiz-lp__h1--invert strong {
  font-weight: 700;
}

/* The dark band's copy HUGS at 467px inside its 558px column (text-2,
   34905:28249) — it does not fill it. Left to stretch, both lines run 546px
   wide and the centred block reads noticeably looser than the frame. */
.quiz-lp__h1--invert,
.quiz-lp__lede--invert {
  max-width: 467px;
}

.quiz-lp__lede--invert {
  color: var(--rs-grey-light-50, #f9f9f9);
}

/* 20, not the hero's 24. The two headline/subtitle pairs sit in different
   frames with different gaps — hero `text` is gap 24 (34905:28186), the dark
   band's `text-2` is gap 20 (34905:28249). Reusing .quiz-lp__lede for both
   inherited the hero's number here. */
.quiz-lp__h1--invert + .quiz-lp__lede--invert {
  margin-top: 20px;
}

/* The report fan and the teal "Your Unique Results" card are one flattened
   export, so this is a single image rather than the frame's three cards. */
.quiz-lp__cta-report {
  margin: 0;
}

.quiz-lp__cta-report img {
  display: block;
  width: 100%;
  max-width: 558px;
  height: auto;
  margin-inline: auto;
}

/* ---- 6. Testimonials and the closing CTA --------------------------------- */
.quiz-lp__proof {
  /* The component pads its own top; this band supplies only what comes after
     the wall, so the two do not stack to 120px. */
  --rs-testimonials-end: 0;
  padding: 0 0 60px;
  background-color: var(--rs-white-pure, #fffffe);
}

.quiz-lp__proof-cta {
  /* The frame's gap between the wall and the closing CTA. The component's own
     end padding is zeroed above, so this is the whole distance. */
  margin-top: 40px;
  text-align: center;
}

/* The testimonial wall is the shared component's `compact` variant — the band,
   card and heading treatment this page's frame asks for now live in
   pages/testimonials.scss beside its defaults, chosen by the template rather
   than overridden from here. This page therefore styles nothing inside it. */
/* ---- <=767px ------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .quiz-lp__h1 {
    font-size: 2rem; /* 32px */
    line-height: 1.3;
  }
  .quiz-lp__h2 {
    font-size: 1.5rem; /* 24px */
  }
  .quiz-lp__lede {
    font-size: 1rem; /* 16px */
    max-width: none;
  }
  .quiz-lp__hero,
  .quiz-lp__problem,
  .quiz-lp__author,
  .quiz-lp__cta {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  /* Top padding stays with the component here too, so only the tail is ours. */
  .quiz-lp__proof {
    padding-bottom: 40px;
  }
  .quiz-lp__problem {
    padding-bottom: 0;
  }
  .quiz-lp__hero .container > * {
    max-width: none;
  }
  .quiz-lp__logo {
    margin-bottom: 40px;
  }
  /* The rope stops being a background and becomes a banner in the flow. */
  .head__quiz.quiz-lp__hero::after {
    content: none;
  }
  /* The rope band, to the mobile frame (34905:28085): a 355x175 window with
     `clip: true`, bleeding 10px past the text column on each side so it sits
     10px from either screen edge, with 10px of air above and below it.

     The crop is deliberate — the frame really does clip a 1526x1254 source to
     175px. What matters is WHERE the window lands. `object-position: 50% 50%`
     centres it on the source's empty left-hand canvas and slices the knot in
     half, which is the "rope is cut" this replaced. The rope occupies roughly
     x 30-100% and y 12-76% of the source; at `cover` the image renders 292px
     tall in a 175px band, so 37% down the 117px of overflow puts the knot's
     centre on the band's centre and keeps all of it.

     The bleed is measured from the VIEWPORT, not the column: .container's
     gutter is 12px here where the frame's page padding is 20px, so insetting
     from the column would land the edges in the wrong place. */
  .quiz-lp__rope {
    display: block;
    width: calc(100vw - 20px);
    max-width: none; /* beats the theme's global img { max-width: 100% } */
    margin-inline: calc(50% - 50vw + 10px);
    height: 175px;
    object-fit: cover;
    object-position: 50% 37%;
  }
  /* 10px, not the desktop 48 — the mobile frame's `main` is a column with
     gap 10 between the copy, the rope band and the button. */
  .quiz-lp__lede + .quiz-lp__rope,
  .quiz-lp__rope + .quiz-lp__hero-cta {
    margin-top: 10px;
  }
  /* A full-width CTA is what both mobile frames draw. */
  .quiz-lp__hero-cta .quiz-lp__btn {
    display: flex;
    width: 100%;
  }
  .quiz-lp__pills {
    flex-direction: column;
    align-items: center;
  }
  .quiz-lp__pill {
    font-size: 1rem; /* 16px */
  }
  .quiz-lp__pill i {
    font-size: 1.25rem; /* 20px */
  }
  .quiz-lp__author-grid,
  .quiz-lp__cta-grid {
    grid-template-columns: 1fr;
  }
  .quiz-lp__author-copy {
    padding: 24px 0 0;
    border-radius: 0;
  }
  .quiz-lp__cta-copy {
    gap: 24px;
  }
  .quiz-lp__proof-cta .quiz-lp__btn {
    display: flex;
    width: 100%;
  }
}
/* Polish display type breaks before English does — its compound nouns do not
   wrap where English words do. Applied to every display line on the page rather
   than to the ones that happen to overflow today. */
.quiz-lp__h1,
.quiz-lp__h2,
.quiz-lp__h3,
.quiz-lp__pill {
  hyphens: auto;
  overflow-wrap: break-word;
}