@charset "UTF-8";
/*!
 * Quiz Thank You page (template-quiz-thank-you.php / confirmation-shell.php) —
 * the rules main.min.css never got, because this page's design lived entirely
 * in Elementor's per-widget CSS (staging's elementor/css/post-80991.css), not
 * main.scss. See the template's own docblock, "CSS REALITY" section.
 *
 * Values below are taken from staging's actual post-80991.css plus
 * getComputedStyle() readings at 1440/375, not eyeballed — that file is one kit
 * shared by both languages (80991 EN / 81135 PL), so one stylesheet here,
 * loaded on both, is correct for both.
 *
 * Written against the design tokens (css/rs-design-tokens.css) wherever an
 * exact match exists, same convention as about.scss. Two values below have no
 * token match — #2A2D31 and the #B6A98D4D gradient stop are Elementor Global
 * Colors made for this one page's dark panel, never added to the Figma ramp —
 * so they stay literal.
 *
 * Scoped to .quiz-thank-you (this template's own <main> class) so nothing here
 * leaks onto any other page.
 */
.quiz-thank-you {
  /* ---- Intro section (icon / kicker / h1 / subhead / lede / video / panels) */
  /* Elementor's real content column is a fixed 558px, not Bootstrap's col-lg-8
     (760px+ inside this theme's container) — the "content column is too wide"
     deviation. Narrowing this one column is also what makes the <h1> wrap to
     two lines like staging: wrapping depends on the container's width, not
     the text element's own box. */
  /* confirmation-shell.php ships these BEM hooks with zero rules on purpose
     (see its own docblock) — this is that "future stylesheet". */
  /* The icon is the whole line above the <h1> now — the "[date/time]" kicker
     that used to sit under it is gone (Raman 2026-08-14; Figma 34905:29114).
     That kicker's own margin-bottom was what held the icon off the headline, so
     the gap moves here, at the 16px the design's auto-layout column uses. No
     `.confirmation-shell__kicker` rule is left: nothing on this page renders
     one, and template-confirmation.php — the shell's only other caller — styles
     its own from pages/confirmation.scss. */
  /* ---- Panels -------------------------------------------------------------- */
  /* "Your next action" — the dark panel. #2A2D31 + the radial gradient are
     Elementor Global Colors with no ramp match (see file header). */
  /* ---- Case-studies band --------------------------------------------------
     Home's `section.rs-cases.rs-band` is the reference Raman pointed at, and
     Figma 34905:29135 `CS-slider` is the frame behind it. Every rule Home uses
     for it is `#rs-home`-scoped inside home.min.css, which this page never
     enqueues — so this is a port under this page's own scope, not a class
     rename. Values below are Home's shipped ones wherever the two sections are
     the same shape, because Home is the version Raman has already signed off.

     Not ported: Home's `#rs-home .btn:not(.caseStudySwiper *)` box. That block
     predates the global `.btn.btn-atom` opt-in class (main.scss) and its own
     comment says new markup should use the class instead of a fourth copy —
     which is what the CTA here does. Only the ink override below is page-local,
     and only because Bootstrap derives it from the fill and lands on black. */
  /* The heading column: h2 over subhead, 20px apart, capped at the design's
     754px so the CTA beside it keeps its own line rather than being pushed to
     the next row on a wide viewport (Figma title-2, layout gap 20). */
}
.quiz-thank-you__intro {
  padding: 60px 0;
}
@media (max-width: 767px) {
  .quiz-thank-you__intro {
    /* 8px here + the row/col grid's own net 12px = staging's 20px side inset. */
    padding: 40px 8px 0;
  }
}
.quiz-thank-you__col {
  max-width: 558px;
}
.quiz-thank-you .confirmation-shell__icon {
  margin-bottom: 16px;
}
.quiz-thank-you .confirmation-shell__title {
  margin-bottom: var(--rs-space-sm); /* 10px */
  font-size: 32px;
  line-height: 1.3; /* 41.6px */
  color: var(--rs-text-primary);
}
@media (max-width: 767px) {
  .quiz-thank-you .confirmation-shell__title {
    margin-bottom: 15px;
    font-size: 24px;
    line-height: 32px;
  }
}
.quiz-thank-you .confirmation-shell__subhead {
  margin-bottom: 35px;
  font-family: var(--rs-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--rs-black-second);
}
@media (max-width: 767px) {
  .quiz-thank-you .confirmation-shell__subhead {
    margin-bottom: 25px;
    line-height: 21px;
  }
}
.quiz-thank-you__lede {
  font-family: var(--rs-font-display);
  font-size: 20px;
  font-weight: var(--rs-weight-bold);
  color: var(--rs-text-primary);
}
@media (max-width: 767px) {
  .quiz-thank-you__lede {
    font-size: 18px;
    line-height: 24px;
  }
}
.quiz-thank-you__video {
  margin-top: var(--rs-space-md); /* 15px */
  margin-bottom: var(--rs-space-4xl); /* 40px */
  border-radius: 16px;
  overflow: hidden; /* clip the wistia player to the panel's own radius */
}
@media (max-width: 767px) {
  .quiz-thank-you__video {
    margin-bottom: 20px;
  }
}
.quiz-thank-you__panel {
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-lg); /* 20px */
  padding: var(--rs-space-4xl); /* 40px, all sides, unconditional — staging
keeps this even at 375, confirmed by direct measurement, not just read
off the (gated) desktop rule. */
  margin-bottom: 44px;
  border-radius: 16px;
  background-color: var(--rs-teal-light-50);
  text-align: center;
  /* Dashed connector + arrowhead between the two panels — staging draws
     this with a background-image absolutely positioned off the light
     panel's own bottom edge. Inlined as a data URI (same technique
     book-call-survey.scss uses for its own small icons) rather than a new
     image asset; fill #B2C9CB is --rs-grey-light-20 exactly. */
}
.quiz-thank-you__panel:last-child {
  margin-bottom: 0;
}
.quiz-thank-you__panel:not(:last-child) {
  position: relative;
}
.quiz-thank-you__panel:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 12px;
  height: 41px;
  margin-left: -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='41' viewBox='0 0 12 41' fill='none'%3E%3Cpath d='M7 1C7 0.447715 6.55228 0 6 0C5.44772 0 5 0.447715 5 1H6H7ZM6 41L11.7735 31H0.226497L6 41ZM6 1H5V3H6H7V1H6ZM6 7H5V11H6H7V7H6ZM6 15H5V19H6H7V15H6ZM6 23H5V27H6H7V23H6ZM6 31H5V35H6H7V31H6Z' fill='%23B2C9CB'/%3E%3C/svg%3E") no-repeat 0 0;
}
.quiz-thank-you__panel h2 {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  color: var(--rs-teal-00);
}
.quiz-thank-you__panel p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--rs-text-primary);
}
.quiz-thank-you__panel--dark {
  gap: var(--rs-space-md); /* 15px */
  background-color: #2A2D31;
  background-image: radial-gradient(at bottom center, rgba(182, 169, 141, 0.3019607843) 0%, transparent 50%);
  /* Two classes so this beats the `--dark p` rule just above (same
     specificity family, declared later would still lose to a shorter
     selector otherwise — nesting here settles it structurally instead of
     relying on source order). */
}
.quiz-thank-you__panel--dark h2 {
  color: var(--rs-yellow-00);
}
.quiz-thank-you__panel--dark p {
  color: var(--rs-white-pure);
}
.quiz-thank-you__panel--dark .quiz-thank-you__email {
  font-family: var(--rs-font-display);
  font-size: 14px;
  font-weight: var(--rs-weight-bold);
  line-height: 20px;
  color: var(--rs-yellow-00);
}
.quiz-thank-you__cta {
  padding: 60px 0 90px;
  background-color: var(--rs-grey-light-50, #F9F9F9);
  /* Bootstrap's contrast test on the brand teal resolves to black ink; the
     design is white on teal. Same three custom properties Home sets, and the
     second copy in the theme — a third should extract to main.scss rather
     than repeat this (see the CSS-consistency audit subtask). */
}
@media (max-width: 767.98px) {
  .quiz-thank-you__cta {
    padding: 40px 0;
  }
}
.quiz-thank-you__cta .btn-primary {
  --bs-btn-color: #FFF;
  --bs-btn-hover-color: #FFF;
  --bs-btn-active-color: #FFF;
}
.quiz-thank-you__cta h2 {
  /* .display-6 already supplies 40px at desktop and the fluid mobile ramp;
     only the leading differs from Bootstrap's 1.2 (Figma: 40px/1.3). */
  line-height: 1.3;
  color: var(--rs-text-primary);
  /* Figma 34905:29139 splits this heading into a 700 run and a 400 run on
     one ink — the emphasis is weight, not colour. */
}
.quiz-thank-you__cta h2 span {
  font-weight: var(--rs-weight-regular, 400);
}
.quiz-thank-you__cta-head {
  max-width: 754px;
}
.quiz-thank-you__cta-head p {
  max-width: 558px;
  margin-top: var(--rs-space-lg); /* 20px */
  font-family: var(--rs-font-body);
  font-size: 20px;
  line-height: 1.6;
  color: var(--rs-text-secondary);
}
@media (max-width: 767.98px) {
  .quiz-thank-you__cta-head p {
    font-size: 16px;
  }
}

/* The case-study carousel's chrome (pages/case-study-carousel.scss) is white by
   default — the partial was written for About's dark/yellow band, and vanishes
   on this page's #F9F9F9 one. Repainted here rather than in the partial because
   About still needs white.

   Teal, not the charcoal this file used to paint: Figma 34905:29135 draws the
   arrows and the dots in #408897 with the active dot at full opacity and the
   rest at 30% — the same ruling Home already carries (home.scss, Raman review
   item 8, "wrong color for the pagination part"). Charcoal was inferred from
   the heading ink before this section had a band at all. */
.quiz-thank-you .caseStudySwiper .swiper-button-next path,
.quiz-thank-you .caseStudySwiper .swiper-button-prev path {
  fill: var(--rs-teal-00, #408897);
}

.quiz-thank-you .caseStudySwiper .swiper-pagination-bullet {
  background: var(--rs-teal-00, #408897);
  opacity: 0.3;
}

.quiz-thank-you .caseStudySwiper .swiper-pagination-bullet-active {
  opacity: 1;
}