@charset "UTF-8";
/*!
 * Confirmation pages (template-confirmation.php / confirmation-shell.php) —
 * the 11-row shared "thank you" archetype. Source for css/confirmation.min.css,
 * which template-confirmation.php self-enqueues. Was hand-written plain CSS
 * until it moved here so the modal skin could come from config/_rs-modal.scss
 * — a page sheet can import a partial, a hand-authored .css cannot.
 *
 * Written against css/rs-design-tokens.css (var(--rs-*)), which functions.php
 * already enqueues site-wide, not repeated here. Visual rhythm (spacing,
 * type scale, panel treatment) is deliberately matched to the one shipped
 * reference implementation of this archetype, css/quiz-thank-you.min.css /
 * template-quiz-thank-you.php, per the task brief ("where Figma has no frame,
 * match the already-shipped quiz-thank-you page"). No Figma frame was
 * consulted for this file.
 *
 * Scoped entirely under .rs-confirmation (this template's own <main> class)
 * so nothing here leaks onto any other page, and confirmation-shell.php's
 * bare BEM hooks (.confirmation-shell__*) only get rules through this
 * selector — the shell itself still ships zero CSS, per its own docblock.
 */
/*!
 * 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. */
.rs-confirmation {
  /* Polish runs ~10-15% longer than English on this kind of display copy —
     let the two headline levels break cleanly instead of overflowing at
     375px. */
  overflow-wrap: break-word;
}

.rs-confirmation__intro {
  padding: 60px 0;
}

@media (max-width: 767px) {
  .rs-confirmation__intro {
    padding: 40px 8px 0;
  }
}
.rs-confirmation__col {
  max-width: 558px; /* same narrowed content column as quiz-thank-you__col */
}

/* ---- confirmation-shell.php's bare hooks, styled from here ---- */
.rs-confirmation .confirmation-shell__icon {
  margin-bottom: var(--rs-space-lg); /* 20px */
}

.rs-confirmation .confirmation-shell__icon svg,
.rs-confirmation .confirmation-shell__icon i {
  font-size: 32px;
  color: var(--rs-teal-light-10);
}

.rs-confirmation .confirmation-shell__kicker {
  margin-bottom: var(--rs-space-md); /* 15px */
  font-family: var(--rs-font-display);
  font-size: 14px;
  font-weight: var(--rs-weight-bold);
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--rs-teal-00);
}

.rs-confirmation .confirmation-shell__title {
  margin-bottom: var(--rs-space-sm); /* 10px */
  font-size: 32px;
  line-height: 1.3;
  color: var(--rs-text-primary);
  hyphens: auto;
  overflow-wrap: break-word;
}

@media (max-width: 767px) {
  .rs-confirmation .confirmation-shell__title {
    margin-bottom: 15px;
    font-size: 24px;
    line-height: 32px;
  }
}
.rs-confirmation .confirmation-shell__subhead {
  margin-bottom: var(--rs-space-2xl); /* 30px */
  font-family: var(--rs-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--rs-black-second);
}

/* ---- Section headings (always <h2> — see template docblock) ---- */
.rs-confirmation__section-heading,
.rs-confirmation h2 {
  margin-bottom: var(--rs-space-sm);
  font-family: var(--rs-font-display);
  font-weight: var(--rs-weight-bold);
  font-size: 24px;
  line-height: 1.3;
  color: var(--rs-text-primary);
  hyphens: auto;
  overflow-wrap: break-word;
}

@media (max-width: 767px) {
  .rs-confirmation__section-heading,
  .rs-confirmation h2 {
    font-size: 20px;
  }
}
.rs-confirmation__intro p {
  margin-bottom: var(--rs-space-2xl); /* 30px */
  font-family: var(--rs-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--rs-black-second);
}

.rs-confirmation__eyebrow {
  margin-bottom: var(--rs-space-2xs);
  font-family: var(--rs-font-display);
  font-size: 14px;
  font-weight: var(--rs-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--rs-teal-00);
}

/* ---- Video ---- */
.rs-confirmation__video {
  margin-top: var(--rs-space-md);
  margin-bottom: var(--rs-space-4xl); /* 40px */
  border-radius: 16px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .rs-confirmation__video {
    margin-bottom: 20px;
  }
}
/* ---- LinkedIn / "join the community" panel ---- */
.rs-confirmation__linkedin-panel {
  padding: var(--rs-space-4xl);
  margin-bottom: var(--rs-space-2xl);
  border-radius: 16px;
  background-color: var(--rs-teal-light-50);
  text-align: center;
}

@media (max-width: 767px) {
  .rs-confirmation__linkedin-panel {
    padding: var(--rs-space-lg);
  }
}
.rs-confirmation__linkedin-panel h2 {
  margin-bottom: var(--rs-space-lg);
}

.rs-confirmation__linkedin-panel p {
  margin: 0;
  color: var(--rs-black-second);
}

/* ---- Follow-us social row (sensei-thanks only) ---- */
.rs-confirmation__social {
  margin-bottom: var(--rs-space-2xl);
  text-align: center;
}

.rs-confirmation__social h2 {
  margin-bottom: var(--rs-space-md);
}

.rs-confirmation__social p {
  margin: 0;
  display: flex;
  justify-content: center;
  gap: var(--rs-space-lg);
}

.rs-confirmation__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rs-radius-pill);
  background-color: var(--rs-surface-dark);
  color: var(--rs-white-pure);
  font-size: var(--rs-icon-2m);
  transition: var(--rs-transition);
}

.rs-confirmation__social a:hover,
.rs-confirmation__social a:focus-visible {
  background-color: var(--rs-teal-00);
}

/* ---- AddEvent "add to calendar" row (webinar-registration only) ---- */
.rs-confirmation__addevent-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--rs-space-lg);
  margin-bottom: var(--rs-space-2xl);
}

.rs-confirmation__addevent-link img {
  display: block;
  width: 45px;
  height: 45px;
  border-radius: var(--rs-radius-m);
  transition: var(--rs-transition);
}

.rs-confirmation__addevent-link:hover img,
.rs-confirmation__addevent-link:focus-visible img {
  box-shadow: var(--rs-shadow-btn);
}

/* ---- check-your-mail's manual "try again" paragraph ---- */
.rs-confirmation__try-again {
  font-family: var(--rs-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--rs-black-second);
}

.rs-confirmation__try-again a {
  color: var(--rs-text-link);
  font-weight: var(--rs-weight-semibold);
  text-decoration: underline;
  transition: var(--rs-transition-link);
}

.rs-confirmation__try-again a:hover,
.rs-confirmation__try-again a:focus-visible {
  color: var(--rs-text-link-hover);
}

/* ---- Calendly wrapper (choose-date only — rs-calendly-wrap itself is styled
   site-wide; this is spacing around it only) ---- */
.rs-confirmation__calendly {
  margin-top: var(--rs-space-lg);
}

/* ---- Case-study CTA section ---- */
.rs-confirmation__cta {
  padding: var(--rs-space-4xl) 0;
}

.rs-confirmation__cta h2 {
  margin-bottom: var(--rs-space-lg);
}

.rs-confirmation__cta .btn {
  margin-bottom: var(--rs-space-2xl);
}

/* Case-study-carousel.scss ships white arrows/bullets by default (About's
   dark/yellow band); this section is plain white, same repaint
   quiz-thank-you.min.css already applies for the same reason. */
.rs-confirmation .caseStudySwiper .swiper-button-next path,
.rs-confirmation .caseStudySwiper .swiper-button-prev path {
  fill: var(--rs-black-prime, #34383C);
}

.rs-confirmation .caseStudySwiper .swiper-pagination-bullet,
.rs-confirmation .caseStudySwiper .swiper-pagination-bullet-active {
  background: var(--rs-black-prime, #34383C);
}

/* ---- Logo marquee caption ---- */
/* No padding and no caption margin here: all three call sites carry Raman's
   shared running-line frame (`.rs-trusted-strip`, css/logo-marquee.min.css),
   which owns 40 above the caption, 40 caption-to-logos and 60 below site-wide
   (2026-08-19). This section used to set --rs-space-2xl (30px) top and bottom and
   the caption a 15px margin, which is where this template's 30/45 came from. */
.rs-confirmation__marquee-caption {
  margin: 0;
  text-align: center;
  font-family: var(--rs-font-display);
  font-size: 14px;
  font-weight: var(--rs-weight-semibold);
  color: var(--rs-black-second);
}

/* ---- Decorative section divider (webinar-registration only — replaces a
   dead self-referencing "#even-more" anchor on the live Elementor page with
   a plain ornament, see template docblock) ---- */
.rs-confirmation__divider {
  margin: 0;
  text-align: center;
}

.rs-confirmation__divider-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--rs-radius-circle);
  background-color: var(--rs-teal-light-10);
  color: var(--rs-white-pure);
  font-size: var(--rs-icon-s);
}

/* ---- Related-reading cards (webinar-registration only) ---- */
.rs-confirmation__related {
  margin-top: var(--rs-space-lg);
  row-gap: var(--rs-space-2xl);
}

.rs-confirmation__related-card {
  display: flex;
  flex-direction: column;
}

.rs-confirmation__related-thumb {
  display: block;
  margin-bottom: var(--rs-space-md);
  border-radius: var(--rs-radius-m);
  overflow: hidden;
}

.rs-confirmation__related-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.rs-confirmation__related-title {
  margin-bottom: var(--rs-space-sm);
  font-family: var(--rs-font-display);
  font-weight: var(--rs-weight-semibold);
  font-size: 18px;
  line-height: 1.4;
  color: var(--rs-text-primary);
}

.rs-confirmation__related-cta {
  font-family: var(--rs-font-display);
  font-weight: var(--rs-weight-semibold);
  font-size: 14px;
  color: var(--rs-text-link);
  text-decoration: none;
}

.rs-confirmation__related-cta:hover,
.rs-confirmation__related-cta:focus-visible {
  color: var(--rs-text-link-hover);
}

/* --- LinkedIn / community panel CTA -----------------------------------------
 * This is the page's own primary action (join the community), and live paints it
 * brand yellow on every one of these rows. It had shipped as Bootstrap's
 * `btn btn-dark` with no rationale, so there was nothing deliberate to preserve.
 *
 * NOT the same control as the case-study carousel's "Read the Case Study", which
 * stays dark: that one comes from the shared template-parts/case-study-carousel.php,
 * and live's own /about/ renders it dark too — only live's confirmation rows paint it
 * yellow, so converging that would propagate live's per-page inconsistency into a
 * shared component (settled in tick 3). Yellow primary + dark carousel secondary is
 * also the clearer hierarchy.
 *
 * Overridden through Bootstrap 5.3's own --bs-btn-* custom properties rather than by
 * out-specifying .btn-dark — .btn reads those variables, so this needs no specificity
 * contest and no !important. Literal fallbacks in case a token is renamed.
 * -------------------------------------------------------------------------- */
.rs-confirmation__linkedin-panel .btn {
  --bs-btn-bg: var(--rs-accent-yellow, #FFC94B);
  --bs-btn-color: var(--rs-text-primary, #34383C);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--rs-yellow-btn-hover, #FFB710);
  --bs-btn-hover-color: var(--rs-text-primary, #34383C);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--rs-yellow-btn-hover, #FFB710);
  --bs-btn-active-color: var(--rs-text-primary, #34383C);
  --bs-btn-active-border-color: transparent;
  /*
   * The theme also sets `.btn-dark { background-color: #34383C }` DIRECTLY (repainting
   * Bootstrap's #212529 to brand black), and a direct declaration beats .btn's
   * `background-color: var(--bs-btn-bg)` no matter what the variable says. Setting the
   * variables alone changed the text to dark while the background stayed dark —
   * dark-on-dark, an illegible button. So the paint has to be stated directly here too,
   * at (0,2,0) against .btn-dark's (0,1,0).
   */
  background-color: var(--rs-accent-yellow, #FFC94B);
  border-color: transparent;
  color: var(--rs-text-primary, #34383C);
}

.rs-confirmation__linkedin-panel .btn:hover,
.rs-confirmation__linkedin-panel .btn:focus-visible {
  background-color: var(--rs-yellow-btn-hover, #FFB710);
  border-color: transparent;
  color: var(--rs-text-primary, #34383C);
}

/* ------------------------------------------------------------------------- *
 * select-date — the booking-STEP rows (33532/26186, 75451/75286, 71114).
 *
 * Every value below was measured off staging with monitor/measure.mjs at 1440
 * and 375 before it was written, not eyeballed, because these five pages are
 * the last step before a booking and a visual regression here costs meetings.
 * The three rules that MUST be overridden rather than inherited:
 *
 * 1. __col caps content at 558px (a reading measure, right for the thank-you
 *    rows). A Calendly month grid inside 558px loses the time column, so this
 *    row gets live's own 1140px instead. Stated as an explicit max-width
 *    rather than left to Bootstrap's .container, which is 1320px at 1440
 *    viewport (xxl) and would run 180px wider than live.
 * 2. confirmation-shell__icon paints its svg at font-size:32px in
 *    --rs-teal-light-10. That is correct for a 32px status glyph and wrong for
 *    a 360x34 progress bar: it would shrink the bar to 32px wide and repaint
 *    its coral markers teal. Reset to natural size and let the SVG's own
 *    fills stand.
 * 3. confirmation-shell__title is 32px/1.3. Live renders these five headlines
 *    at 24px/34px desktop and 20px/28px mobile (Montserrat 700 #34383C in both
 *    cases) — a step label, not a page hero.
 * ------------------------------------------------------------------------- */
/* Content width is per-funnel, measured off staging at 1440 — not one shared
   value. rd/oskar sit in a 1140px column; ga is full-bleed (its Elementor
   container is `e-con-full` with 20px side padding, so 1400px at a 1440
   viewport). Getting this wrong is not cosmetic: a Calendly month grid that is
   ~280px narrower than live drops the time-slot column below the calendar. */
.rs-confirmation__sd-inner {
  margin-left: auto;
  margin-right: auto;
}

.rs-confirmation__sd--rd .rs-confirmation__sd-inner,
.rs-confirmation__sd--oskar .rs-confirmation__sd-inner {
  max-width: 1140px;
}

.rs-confirmation__sd--ga .rs-confirmation__sd-inner {
  max-width: none;
  padding-left: 20px;
  padding-right: 20px;
}

.rs-confirmation--select-date .confirmation-shell__icon {
  margin-bottom: var(--rs-space-2xl, 30px);
}

/* Undo the 32px teal status-glyph treatment: this slot holds a progress-bar
   image on the ga/oskar rows. The `svg` half of this selector went with the
   flat stepper SVG — the rd rows now render an <i> check-circle, and no
   select-date row renders an inline <svg> at all (measured, all five pages).
   `height: auto` on an inline <svg> is what collapsed the stepper to 0px. */
.rs-confirmation--select-date .confirmation-shell__icon img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  font-size: inherit;
  color: inherit;
}

/* Figma 42198:37816 draws step 4.A's check-circle 24px in --rs-teal-00 with a
   32px gap under it — identical to step 4.B's. Without these two rules the
   glyph inherits the generic status treatment at the top of this file (32px,
   --rs-teal-light-10 = #4B9EB0) and the two steps of one flow ship the same
   glyph at two sizes in two colours.

   Scoped to the rd variant, not to --select-date: ga and oskar render <img>
   progress bars in this slot and keep their own measured margins (30px / 20px).
   Both rules tie the base .rs-confirmation--select-date selector on specificity
   and win on source order, so they must stay below it. */
.rs-confirmation__sd--rd .confirmation-shell__icon {
  margin-bottom: 32px;
}

.rs-confirmation__sd--rd .confirmation-shell__icon i {
  font-size: 24px;
  color: var(--rs-teal-00, #408897);
}

/* AFTER the width:auto reset above, not before it: both selectors carry two
   classes plus an element, so they tie on specificity and source order decides.
   Written above the reset, this silently lost and the graphic rendered at its
   natural 444px instead of live's 45%. */
.rs-confirmation__sd--oskar .confirmation-shell__icon img {
  width: 45%;
}

.rs-confirmation--select-date .confirmation-shell__title {
  margin-bottom: var(--rs-space-2xl, 30px);
  font-size: 24px;
  line-height: 34px;
}

/* ga's headline is 20px/28px on live (Elementor global typography token
   1e7d753) where rd's and oskar's are 24px/34px (token 54c60f0) — same page
   shape, two different type sizes. Reproduced as-is rather than unified:
   unifying them is a design decision, not a migration one. Flagged for review.
   Must stay AFTER the 24px rule above — equal specificity, source order wins. */
.rs-confirmation__sd--ga .confirmation-shell__title {
  font-size: 20px;
  line-height: 28px;
}

/* The Calendly wrapper already carries its own 660px min-height and CLS guard
   from rs_calendly_embed(); all that is needed here is the gap above it, and
   the title's own margin-bottom already supplies that. */
.rs-confirmation--select-date .rs-confirmation__calendly {
  margin-top: 0;
}

/* oskar spaces at 20px, not 30px, on desktop — both above and below the
   headline. Measured, not assumed. */
.rs-confirmation__sd--oskar .confirmation-shell__icon,
.rs-confirmation__sd--oskar .confirmation-shell__title {
  margin-bottom: var(--rs-space-lg, 20px);
}

/* ga OVERLAPS its embed 36px over the headline, at every width.
 *
 * This reproduces live rather than correcting it. On staging the Elementor
 * shortcode wrapper carries margin-top:-86px, which nets to a -36px gap once
 * the heading's own 30px padding-bottom and the container's 20px flex gap are
 * counted — measured at both 1440 and 375. It is invisible in use because the
 * top ~90px inside the Calendly iframe is empty, so nothing actually covers the
 * headline; not reproducing it pushed the calendar 66px down the page, which
 * IS visible when comparing against live.
 *
 * Flagged as a design-system inconsistency rather than fixed here: an embed
 * overlapping a heading is a latent bug (it depends entirely on Calendly's
 * internal top padding, which is theirs to change), but removing it is a
 * deliberate visual change to a live booking page and belongs in review, not in
 * a migration whose whole contract is "looks the same as live".
 */
.rs-confirmation__sd--ga .confirmation-shell__title {
  margin-bottom: 0;
}

.rs-confirmation__sd--ga .rs-confirmation__calendly {
  margin-top: -36px;
}

@media (max-width: 767px) {
  /* Live pads 40px top AND bottom here; __intro's shared mobile rule ends in
     `0` because the thank-you rows continue into another section below, and
     these five do not — the Calendly embed is the last thing on the page. */
  .rs-confirmation--select-date .rs-confirmation__intro {
    padding: 40px 20px;
  }
  /* At 375 the three funnels do not share one rhythm: ga keeps 30px, oskar
     20px, and the headline-to-embed gap is 50px and 20px respectively. So
     each variant states its own.

     rd used to zero its graphic margin here, reproducing Elementor, which
     dropped the heading container's margin at this breakpoint. That rule
     described the 360x34 progress-bar SVG and died with it: the rd rows now
     render a 32px check-circle, and zeroing the margin under it put the glyph
     flush against the headline — which is the collapse Roman screenshotted
     (FIX task 1217384051427282, asset 1217493109044347, PL at a narrow
     viewport). rd now keeps its desktop 30px at 375, the same value ga
     already ships and Roman did not flag. */
  .rs-confirmation__sd--ga .confirmation-shell__icon {
    margin-bottom: var(--rs-space-2xl, 30px);
  }
  .rs-confirmation__sd--oskar .confirmation-shell__icon {
    margin-bottom: var(--rs-space-lg, 20px);
  }
  .rs-confirmation--select-date .confirmation-shell__title {
    margin-bottom: var(--rs-space-lg, 20px);
    font-size: 20px;
    line-height: 28px;
  }
  /* ga's -36px overlap holds at 375 too, so its headline keeps margin-bottom:0
     here — the shared 20px rule above would otherwise shrink the overlap to
     -16px and drop the calendar 20px below where live puts it. */
  .rs-confirmation__sd--ga .confirmation-shell__title {
    margin-bottom: 0;
  }
  /* Live drops the 45% constraint at 767 and lets it fill the column. */
  .rs-confirmation__sd--oskar .confirmation-shell__icon img {
    width: 100%;
    max-width: 100%;
  }
  /* ga already pads 20px on the inner wrapper at every width; adding __intro's
     mobile 20px on top doubles it to 40px a side and narrows the embed to
     295px. Needs the two-class selector to outweigh
     `.rs-confirmation--select-date .rs-confirmation__intro` — a bare
     `.rs-confirmation__sd--ga` is one class and silently loses. */
  .rs-confirmation--select-date .rs-confirmation__sd--ga {
    padding-left: 0;
    padding-right: 0;
  }
}
/* ==========================================================================
   toolkit-exit — step 4.B of the Diagnostic form (pages 84647 EN / 84648 PL)
   Figma 42366-34927 "Book-Call - survey - 4B - ENG".

   The one page on the site that tells someone "not yet", so it is deliberately
   quiet: a pale teal card, no marquee, no related-content rail, nothing that
   reads as a consolation prize. Two actions only — the toolkit button and a
   text link to the methodology.
   ========================================================================== */
/* Same problem the Calendly pages already solved (rs-bcs-cal, functions.php):
   this page is one small card, so on any tall screen it is SHORTER than the
   viewport and the footer floats a few hundred px above the bottom edge. Same
   fix, reached without the Calendly-named body class and without a PHP change
   — body becomes a flex column and main takes the slack, so the footer pins to
   the bottom edge. No magic header/footer height.

   The slack goes BELOW the content, not around it. Main used to also centre its
   child, which made the gap under the header a function of how long the copy
   was — measured 130.9px in English against 118.9px in Polish, and 76.3/53.8 at
   375. Roman flagged exactly that (FIX - vertical alignment verification,
   1217545415123586): it should repeat the alignment of the previous steps.
   Removing the centring is the whole fix — this section already carries the
   same `padding: 60px 0` / `40px 8px 0` as the select-date step above, so the
   check-icon lands 60px under the header at 1440 and 40px at 375, which is
   where step 4.A puts its own, and where Figma 42366-34927 puts it (the frame's
   content region is pad [60,0,60,0] with no justify, i.e. top). Main is a plain
   block again now that nothing needs it to be a flex container. */
body:has(> main.rs-confirmation--toolkit-exit) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

body:has(> main.rs-confirmation--toolkit-exit) > main {
  flex: 1 0 auto;
}

/* Figma 42366-34927 spacing, expressed as flex gaps rather than margins.
   Margins would lose: `.rs-confirmation__intro p` (0,1,1) outranks a single
   utility class and was silently re-adding 30px under both actions, which is
   where the dead space under the card came from. Gaps are not overridable by
   an inherited paragraph rule, so the layout stops depending on specificity. */
.rs-confirmation__toolkit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.rs-confirmation__toolkit-icon {
  line-height: 1;
}

.rs-confirmation__toolkit-icon i {
  font-size: 24px;
  line-height: 1;
  color: #408897;
}

.rs-confirmation__toolkit-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 558px;
  padding: 40px;
  border-radius: 16px;
  background-color: #F0F8F9;
  text-align: center;
}

.rs-confirmation__toolkit-actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Copy is page content, so these have to survive whatever the editor emits.
   Scoped under __intro--toolkit to outrank `.rs-confirmation__intro p`. */
.rs-confirmation__intro--toolkit .rs-confirmation__toolkit-copy h1 {
  margin: 0 0 20px;
  color: #408897;
  font-family: Montserrat, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.rs-confirmation__intro--toolkit .rs-confirmation__toolkit-copy p {
  margin: 0 0 12px;
  color: #5D636A;
  font-size: 1rem;
  line-height: 1.5;
}

.rs-confirmation__intro--toolkit .rs-confirmation__toolkit-copy p:last-child,
.rs-confirmation__intro--toolkit .rs-confirmation__toolkit-cta,
.rs-confirmation__intro--toolkit .rs-confirmation__toolkit-secondary {
  margin: 0;
}

.rs-confirmation__toolkit-copy strong {
  font-weight: 600;
}

.rs-confirmation__toolkit-cta .btn {
  display: block;
  width: 100%;
  padding: 15px 30px;
  border: 0;
  border-radius: 4px;
  background-color: #408897;
  box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.2);
  color: #FFFFFF;
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.rs-confirmation__toolkit-cta .btn:hover,
.rs-confirmation__toolkit-cta .btn:focus-visible {
  background-color: #35707C;
  color: #FFFFFF;
}

.rs-confirmation__toolkit-secondary a {
  color: #5D636A;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

/* Colour highlighting, not an underline — the house rule (Raman, 2026-08-13). */
.rs-confirmation__toolkit-secondary a:hover,
.rs-confirmation__toolkit-secondary a:focus-visible {
  color: #408897;
  text-decoration: none;
}

@media (max-width: 767px) {
  .rs-confirmation__toolkit-card {
    padding: 24px;
    border-radius: 12px;
  }
}
/* ---- "I'd rather do this by email" ------------------------------------------
   Sits under the Calendly embed on the two Diagnostic date pages, diagnostic
   flow only. A button rather than an anchor because it opens a dialog and goes
   nowhere. The `button.` qualifier is not decoration: the parent theme's
   reset.css paints every unqualified button pink. */
.rs-confirmation__sd-skip {
  margin: 24px 0 0;
  text-align: center;
}

button.rs-confirmation__sd-skip-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: #5D636A;
  cursor: pointer;
  font-family: "HindMadurai", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

/* Colour highlighting, not an underline — the house rule (Raman, 2026-08-13). */
button.rs-confirmation__sd-skip-link:hover,
button.rs-confirmation__sd-skip-link:focus-visible {
  color: #408897;
}

/* ---- The dialog it opens ----------------------------------------------------
   Same geometry and type as the self-audit modal on the home/case-study pages
   (src/scss/pages/cta-two-path.scss), reproduced here because that sheet is not
   enqueued on this template and pulling 900 lines in for one dialog is a worse
   trade than 60 lines of values. */
/*
 * The "thanks" modal — Figma 32903:31748 desktop / 32903:31749 mobile
 * (atom/modal, Instance=modal, type=thanks). One centred column of three gaps:
 *
 *     box   pad 30, gap 40   ->   main   gap 20   ->   text   gap 10
 *
 * with the button as the box's second child, full width. The two inner wrappers
 * are real elements rather than a pile of margins so that each gap is declared
 * once, in the place the design draws it — and so the tree matches the frame,
 * which is what makes it checkable against Figma at all. The three copy strings
 * stay three separate translatable nodes; wrapping them splits no msgid.
 * Mobile keeps the inner 20/10 and changes only the outer two: pad 20, gap 32.
 *
 * ⚠️ EVERY rule below is prefixed with `.rs-conf-modal`, and that prefix is
 * load-bearing. This sheet's own generic descendant selectors reach inside the
 * dialog and outrank a lone BEM class:
 *
 *   `.rs-confirmation h2`        (0,1,1) beat `.rs-conf-modal__title` (0,1,0)
 *   `.rs-confirmation__intro p`  (0,1,1) beat `.rs-conf-modal__text`  (0,1,0)
 *
 * So the title was taking its font-size, colour, family, a line-height of 1.3
 * (the design's is 1.4) and a 10px bottom margin from the section-heading rule,
 * and the body copy was taking a 30px bottom margin from the intro-paragraph
 * rule. Every wrong distance in this modal was that leak, not the mixins — the
 * mixins were being overridden wholesale and had never rendered. The prefix
 * takes each rule to (0,2,0) and puts the modal back in charge of its own type.
 * Measured before/after 2026-08-21; see the git message for the numbers.
 */
.rs-conf-modal {
  max-width: 558px;
  width: calc(100% - 40px);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
}

.rs-conf-modal::backdrop {
  background: rgba(52, 56, 60, 0.5);
}

.rs-conf-modal .rs-conf-modal__box {
  position: relative;
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  background-color: var(--rs-white-pure, #fffffe);
  text-align: center;
}
.rs-conf-modal .rs-conf-modal__box:focus, .rs-conf-modal .rs-conf-modal__box:focus-visible {
  outline: none;
}

.rs-conf-modal button.rs-conf-modal__close {
  position: absolute;
  top: 1px;
  right: 1px;
  display: flex;
  /* `column` to match the atom's own frame, which is a single-child column.
     With one centred child it renders identically to `row`; it is here so a
     Figma diff of this node comes back clean instead of reporting a layout
     mismatch that has no visual consequence. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--rs-black-prime, #34383c);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  /* The glyph's own box is 24x24 in the atom (an 18px mark in a 24px frame) —
     the 24px WCAG 2.5.8 target the 32px button is generously clearing.
     Centred by flex rather than by line-height: pinning the box with
     `line-height: 24px` also works, but then the 18->20px hover step is a
     line-box change and the mark drifts vertically mid-transition. A fixed box
     with the glyph centred inside it grows the mark in place, which is what the
     prototype's SMART_ANIMATE does. */
  transition: var(--rs-transition-icon, color 200ms ease-out, font-size 200ms ease-out);
}
.rs-conf-modal button.rs-conf-modal__close > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  line-height: 1;
}
.rs-conf-modal button.rs-conf-modal__close:focus {
  background-color: transparent;
  color: var(--rs-black-prime, #34383c);
}
.rs-conf-modal button.rs-conf-modal__close:focus-visible {
  background-color: transparent;
  color: var(--rs-black-prime, #34383c);
  outline: 2px solid var(--rs-teal-00, #408897) !important;
  outline-offset: 2px !important;
}
.rs-conf-modal button.rs-conf-modal__close:hover {
  background-color: transparent;
  color: var(--rs-coral-00, #f35b54);
  font-size: 20px;
}
.rs-conf-modal button.rs-conf-modal__close:active {
  background-color: transparent;
  color: var(--rs-coral-dark-10, #d9514b);
  font-size: 18px;
}
.rs-conf-modal button.rs-conf-modal__close:disabled {
  background-color: transparent;
  color: var(--rs-grey-light-30, #d8e2e3);
  cursor: default;
  font-size: 18px;
}

/*
 * `align-items: center` + `align-self: stretch` on the wide children is not
 * belt-and-braces — it is exactly how the frame is built (every one of these
 * three frames is align=center, and every text node inside them is
 * selfAlign=stretch / w=fill). It matters for the icon: `text-align: center`
 * cannot centre it, because a flex item is blockified and Font Awesome gives the
 * <i> its own inline-block width, so the glyph sat hard against the left edge of
 * the 498px column. Centring the item is what puts it in the middle; stretching
 * the text nodes is what keeps their wrapping full-width.
 */
.rs-conf-modal .rs-conf-modal__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 20px;
}

.rs-conf-modal .rs-conf-modal__text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 10px;
}

.rs-conf-modal .rs-conf-modal__title,
.rs-conf-modal .rs-conf-modal__text {
  align-self: stretch;
}

.rs-conf-modal .rs-conf-modal__icon {
  font-size: 20px;
  color: var(--rs-teal-00, #408897);
  /* The frame is an 18x18 box holding a 20px glyph (32903:31748 draws exactly
     that), and the box is what the column measures. Left to inherit, the 1.5
     line-height gave the glyph a 30px box and pushed the whole stack 10px down,
     so the gap above the title rendered as 30 against the design's 20. The glyph
     overflows its box symmetrically and stays centred, which is why pinning the
     box costs nothing visually. Not in `rs-modal-check-icon`: the other consumer
     renders the same icon in a differently-spaced panel, and changing its height
     there would move that modal's copy. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 1;
}

.rs-conf-modal .rs-conf-modal__title {
  margin: 0 0 20px;
  color: var(--rs-black-prime, #34383c);
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  padding-right: 32px;
  /* Gaps come from the flex wrappers now, not from type margins. */
  margin: 0;
  /* `rs-modal-title` reserves 32px on the right so a LEFT-aligned title cannot
     run under the close X. This stack is centred and starts below the X's 32px
     box, so the reserve would do nothing but shove the centred text 16px left. */
  padding-right: 0;
}

.rs-conf-modal .rs-conf-modal__text {
  margin: 0;
  color: var(--rs-text-secondary, #5d636a);
  font-family: HindMadurai, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.rs-conf-modal button.rs-conf-modal__got-it {
  /* Size-L teal, type=default — atom 32901:31327, same call as the self-audit
     modal's own got-it. Box from the atom, resting fill and label colour here
     per that mixin's split, state ladder shared. */
  min-height: 52px;
  padding: 15px 30px;
  border-radius: 4px;
  box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.2);
  font-size: 1rem;
  line-height: 1;
  transition: var(--rs-transition, background-color 300ms ease-in, box-shadow 300ms ease-in);
  width: 100%;
  border: 0;
  background-color: var(--rs-teal-00, #408897);
  color: var(--rs-white-pure, #fffffe);
  cursor: pointer;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}
.rs-conf-modal button.rs-conf-modal__got-it:hover, .rs-conf-modal button.rs-conf-modal__got-it:focus-visible {
  background-color: var(--rs-teal-dark-10, #35717d);
  box-shadow: var(--rs-shadow-btn-hover, 0 10px 20px -5px rgba(38, 50, 56, 0.3));
}
.rs-conf-modal button.rs-conf-modal__got-it:active {
  background-color: var(--rs-teal-dark-20, #316874);
  box-shadow: var(--rs-shadow-btn-active, 0 5px 10px -5px rgba(38, 50, 56, 0.4));
}
.rs-conf-modal button.rs-conf-modal__got-it:disabled {
  background-color: var(--rs-grey-light-30, #d8e2e3);
  box-shadow: none;
  color: var(--rs-disabled-ink, #a0babd);
  cursor: default;
}

/* 767, not the 767.98 pages/cta-two-path.scss uses for the same modal. The
   mismatch predates this change and reconciling it would move the other modal's
   breakpoint, so it stays flagged rather than fixed — same call the
   `rs-modal-title-mobile` docblock makes. */
@media (max-width: 767px) {
  .rs-conf-modal .rs-conf-modal__box {
    padding: 20px;
    gap: 32px;
  }
  .rs-conf-modal .rs-conf-modal__title {
    font-size: 18px;
  }
  /* The mobile frame draws its 24px close instance at 4,4 in a 335 box, so the
     glyph centre is 16,16 — a 32px button flush in the corner lands there. */
  .rs-conf-modal button.rs-conf-modal__close {
    top: 0;
    right: 0;
  }
  .rs-conf-modal button.rs-conf-modal__got-it {
    /* 44px at 14px/1 — the mobile cut of the same atom. */
    min-height: 44px;
    padding: 15px 20px;
    font-size: 0.875rem;
  }
  /* NOT taken from the frame: 32903:31749 sets the body copy to 12px/1.4. That
     is below anything else this site sets for body text, the shipped sibling
     modal renders 16px, and the house rule is that staging wins over Figma on a
     pixel conflict. Left at 16px deliberately — raise it with Raman, not here. */
}