@charset "UTF-8";
/*!
 * Two-path CTA + self-audit modal.
 *
 * Pairs with template-parts/cta-two-path.php and template-parts/modal-self-audit.php.
 * Built from the Figma frames (CTA 40941:34775 desktop / 40941:34822 mobile,
 * popup group 32903:31770) with copy taken from staging.
 *
 * Values come from the design-system tokens where one exists, per migration plan
 * §7b ("new work uses var(--rs-*)"), with the Figma hex as the fallback so this
 * file still renders correctly if loaded before the token sheet.
 *
 * Field styling comes from components/_rs-form.scss — a neutral scope, so this
 * modal does not have to wear another form's class name to inherit its skin.
 */
/* The soft-lift shadow and the white panel that rides on it. Shared with
   main.scss, which this file cannot import — see config/_elevation.scss for why
   the same value also exists as --rs-shadow-big and why that is not a conflict. */
/*
 * rs-form — the shared Contact Form 7 field skin.
 *
 * Neutral scope for RS form fields, so a form does not have to wear another
 * form's name to inherit its styling. Values are the ones book-call-survey
 * established and the Figma popup spec independently matches: 1px #B2C9CB,
 * radius 4, #FFFFFE, 48px tall, Hind Madurai 14px.
 *
 * Imported by the page stylesheets that need it (only one loads per page, so the
 * duplication across compiled files costs nothing over the wire). Layout —
 * rows, columns, submit placement — stays with the page; this is only the skin.
 *
 * pages/book-call-survey.scss imports this too. Its CF7 bodies (post 84320 EN /
 * 84330 PL) wrap their fields in <div class="rs-form">, added alongside the
 * existing .book-call-survey scope rather than replacing it — panels, radios
 * and buttons there are still scoped to .book-call-survey and stay page-local.
 */
/* ---- Text inputs ------------------------------------------------------------ */
.rs-form input[type=text],
.rs-form input[type=email],
.rs-form input[type=tel],
.rs-form textarea {
  width: 100%;
  padding: 15px 20px;
  border: 1px solid #B2C9CB;
  border-radius: 4px;
  background-color: #fffffe;
  color: #5d636a;
  /* No space: config/fonts.scss now declares the face under both spellings,
     but the unspaced one is the canonical self-hosted name. */
  font-family: HindMadurai, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
}

.rs-form input[type=text],
.rs-form input[type=email],
.rs-form input[type=tel] {
  height: 48px;
}

.rs-form textarea {
  height: 111px;
  min-height: 111px;
  resize: vertical;
}

/* Grow downward with the content instead of scrolling inside the fixed box.
   111px is ~3.5 lines at this line-height, while the Diagnostic form's blocker
   field asks for "2-3 things that can't wait" — overflow was near-guaranteed.
   The @supports wrapper is load-bearing, not politeness: an explicit `height`
   beats field-sizing where it works, and dropping `height` unconditionally
   would let a non-supporting browser fall back to CF7's rows="10" (~10 lines).
   So unsupported engines keep exactly the old box. max-height keeps a long
   answer from pushing the submit button off screen; the controls' own
   maxlength (2000 on that field) already caps the realistic worst case.
   Baseline newly available 2026-06-16, Firefox 152 last in. */
@supports (field-sizing: content) {
  .rs-form textarea {
    field-sizing: content;
    height: auto;
    max-height: 50vh;
  }
}
.rs-form input::placeholder,
.rs-form textarea::placeholder {
  color: #5d636a;
  opacity: 1;
}

/* Active state = the amber border, per Figma `molecula/form` (component set
 * 30589:1977, variant state=active). This was #69B9C9 plus a translucent teal
 * ring — a two-part focus treatment the design system does not have; the ladder
 * is border-colour only, and its six values now live in config/_survey-atoms.scss
 * rather than being spelled out here as well.
 *
 * Only active is corrected here. The other states are NOT added at component
 * level on purpose: pages/book-call-survey.scss already implements the full
 * ladder scoped to .book-call-survey, and a second copy here would be two
 * places to keep in step. See the note in that file. */
.rs-form input:focus,
.rs-form textarea:focus {
  border-color: #FFC94B;
  outline: none;
}

/* CF7 wraps every control in an inline <span>. */
.rs-form .wpcf7-form-control-wrap {
  display: block;
}

/* ---- Consent checkbox (CF7 [acceptance]) ------------------------------------ */
.rs-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.rs-form .wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5d636a;
  cursor: pointer;
  font-family: HindMadurai, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
}

.rs-form .wpcf7-acceptance input[type=checkbox] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: #408897;
  cursor: pointer;
}

.rs-form .wpcf7-acceptance a {
  color: #408897;
  text-decoration: none;
}

.rs-form .wpcf7-acceptance a:hover,
.rs-form .wpcf7-acceptance a:focus-visible {
  text-decoration: underline;
}

/* ---- Validation ------------------------------------------------------------- */
.rs-form .wpcf7-not-valid-tip {
  margin-top: 4px;
  color: #f35b54;
  /* DS Text XS (was an off-ladder 13/1.4); phones step down below. */
  font-size: var(--rs-text-xs-size, 14px);
  line-height: var(--rs-text-xs-lh, 1.5);
}

/* ---- reCAPTCHA: hidden badge + required attribution note -------------------- */
/* Google permits hiding the v3 badge only when the attribution text is shown. */
.grecaptcha-badge {
  visibility: hidden !important;
}

.rs-form__recaptcha-note {
  margin: 0;
  color: #84a1a4;
  /* DS Text XS (was an off-ladder 12/1.5); phones step down below. */
  font-size: var(--rs-text-xs-size, 14px);
  line-height: var(--rs-text-xs-lh, 1.5);
}

/* Colour highlighting, not an underline — the house rule (Raman, 2026-08-13).
   css/rs-cf7-base.css says the same thing for every link inside a CF7 form; this
   rule has to say it too, because its own two classes outrank that sheet's
   `.wpcf7-form a`. */
.rs-form__recaptcha-note a {
  color: #84a1a4;
  text-decoration: none;
}

.rs-form__recaptcha-note a:hover,
.rs-form__recaptcha-note a:focus-visible {
  text-decoration: underline;
}

/* ---- Submit: the sending state ----------------------------------------------
 *
 * Replaces Contact Form 7's stock spinner — a grey dot orbiting a dark circle,
 * shipped in the plugin's includes/css/styles.css and never designed for us —
 * with the design system's own disabled button face plus an hourglass and a
 * "Sending…" label. Ruling: Raman, 2026-09-01 on Asana 1217585069349335.
 *
 * WHY THE DISABLED FACE AND NOT A NEW ONE
 * atom/btns (30592:2267) has 118 variants and its `state` axis is
 * default / hover / click / tap / disabled / focus — there is no `sending`.
 * Nor is there one anywhere else in the file: `btn - lazy loading`
 * (20294:13762) sounds like a candidate and is not, it is a "Show more"
 * paginator. So the disabled face is the only design-system-grounded surface
 * for an inert button, and the values below are read from
 * 30592:2280 (desktop) and 30650:1646 (mobile):
 *
 *     fill    #D8E2E3      ink (label AND icon)  #B2C9CB
 *     radius  4            shadow                none — disabled leaves the ladder
 *     icon    18px desktop / 14px mobile
 *
 * ⚠️ That same node is ALSO the design for the consent-gated state — CF7
 * disables the submit until [acceptance] is ticked. Two different meanings, one
 * surface, deliberately: the icon and the label are what tell them apart, so a
 * gated button must keep its own glyph and its own words. Do not "unify" them
 * by dropping the label swap.
 *
 * NO ANIMATION, BY DESIGN
 * The specified treatment is static — the moving part is the label, not a
 * spinner. That makes the prefers-reduced-motion equivalent CF7 ships (spin ->
 * blink) unnecessary rather than omitted: there is nothing here to reduce.
 *
 * SCOPE
 * `form.submitting` is CF7's own hook (it also sets data-status="submitting" on
 * the same element) and .rs-form sits inside that form, so these selectors run
 * (0,3,1) and clear the (0,1,1) `button.<page>__submit` faces the page sheets
 * declare. Any RS form that adopts the two label spans gets this for free; a
 * form without them is untouched except that CF7's own spinner stops rendering.
 */
/* CF7 injects <span class="wpcf7-spinner"> after any control carrying
   .has-spinner. Keep the class — it is what inserts the element, and its
   companion .wpcf7-submit is what gates the button on [acceptance] — and hide
   the element instead, because the button now carries the state itself. */
.rs-form .wpcf7-spinner {
  display: none;
}

/* Both labels ship in the markup and CSS chooses between them. They are NOT
   gettext strings: a CF7 body is post content, so the EN and PL copies of a form
   are two separate posts and each carries its own words — the PL "Sending…"
   lives in inc/cf7/free-audit-toolkit-pl.html, not in pl_PL.po. Each label is
   its own flex row so the atom's 12px label-to-icon gap survives the wrapping. */
.rs-form__submit-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.rs-form__submit-label--sending {
  display: none;
}

form.submitting .rs-form .rs-form__submit-label--idle {
  display: none;
}

form.submitting .rs-form .rs-form__submit-label--sending {
  display: inline-flex;
}

/* Own keyframes rather than Font Awesome's `fa-spin`, which would put the
   animation in the markup and make it depend on FA's utility CSS being present.
   The theme self-hosts the icon faces; betting a state on a utility class it may
   or may not ship is a bet with no upside. */
@keyframes rs-form-hourglass {
  to {
    transform: rotate(360deg);
  }
}
/* The disabled face, held for as long as the request is in flight. */
form.submitting .rs-form .wpcf7-submit {
  box-shadow: none;
  background-color: #d8e2e3;
  color: #b2c9cb;
  opacity: 1;
  /* Not a decoration: CF7 does not disable the control while submitting, and a
     second click on a live submit is the whole reason the user sees a spinner
     at all. `disabled` would need JS; this does not, and reads the same. */
  cursor: default;
  pointer-events: none;
}

form.submitting .rs-form .wpcf7-submit i {
  color: #b2c9cb;
  animation: rs-form-hourglass 2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  form.submitting .rs-form .wpcf7-submit i {
    animation: none;
  }
}

/* ---- Phones (DS mobile, <=767): every Text XS role takes XS-mobile ---------- */
/* Desktop is Text XS 14/1.5 for fields, consent, error and reCAPTCHA note, so
   the phone variant is XS-mobile 12/1.4 (Raman, 2026-11-05: desktop and mobile
   follow the same DS style). Field HEIGHT stays 48px; only the type steps down. */
@media (max-width: 767px) {
  .rs-form input[type=text],
  .rs-form input[type=email],
  .rs-form input[type=tel],
  .rs-form textarea,
  .rs-form .wpcf7-acceptance .wpcf7-list-item label,
  .rs-form .wpcf7-not-valid-tip,
  .rs-form__recaptcha-note {
    font-size: var(--rs-text-xs-size-mobile, 12px);
    line-height: var(--rs-text-xs-lh-mobile, 1.4);
  }
}
/* The submit is a raw CF7 <input type="submit"> and so never carries `.btn`;
   the global button block cannot reach it. The atom mixin is how it gets the
   design system's box instead of an approximation of it. */
/*!
 * 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. */
/* ---- Section ---------------------------------------------------------------- */
.rs-cta {
  background-color: var(--rs-white-pure, #fffffe);
  padding: 60px 20px;
}

.rs-cta__inner {
  margin: 0 auto;
  max-width: 1146px; /* Figma content width; 1440 - 2x147 section padding */
}

.rs-cta__intro {
  margin-bottom: 40px;
  text-align: center;
}

.rs-cta__title {
  margin: 0 0 20px;
  color: var(--rs-black-prime, #34383c);
  font-family: Montserrat, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
}

/* The middle run of the heading is regular weight inside an otherwise bold line. */
.rs-cta__title span {
  font-weight: 400;
}

.rs-cta__lead {
  margin: 0;
  color: var(--rs-text-secondary, #5d636a);
  font-family: HindMadurai, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
}

/* ---- Photo collage + the two paths ------------------------------------------ */
/*
 * The collage is one pre-composed image per breakpoint (the diagonal seam is
 * baked in), not two clipped panels — bg_dfdf-1.webp is 2292x760, exactly the
 * Figma panel at 2x. So no clip-path is needed and the seam cannot drift out of
 * alignment with the photography.
 *
 * The URLs arrive as custom properties set inline by the PHP, because the path
 * depends on language (WPML duplicated the media) and on the uploads directory.
 */
/*
 * The 58px card overhang below is a transform, so it takes no layout space and
 * the section's padding-bottom was measured from the photo's bottom edge, not
 * the cards' — 60px of padding rendered as 2px of real gap to the footer, and
 * Home's 120px rendered as 62px. Raman, 2026-08-19: "the bottom part of the
 * double-CTA is not counted correctly … by default it should be 60px bottom
 * padding." The margin gives the overhang real height so every consumer's
 * padding-bottom means what it says. Margin, not padding: .rs-cta__paths and
 * .rs-cta__collage::after are absolute against this box, and padding would move
 * both.
 */
.rs-cta__main {
  position: relative;
  margin-bottom: 58px; /* = .rs-cta__path's translateY */
}

.rs-cta__collage {
  border-radius: 24px;
  background-image: var(--rs-cta-collage-lg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 1146/380;
}

/*
 * Scrim. The path headings are white and sit directly on photography, so they
 * need guaranteed contrast rather than luck with whatever is behind them.
 * Matches the Figma overlay (#34383c at 35% plus a downward fade).
 */
.rs-cta__collage::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 100%;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(52, 56, 60, 0.15) 0%, rgba(52, 56, 60, 0.55) 100%), rgba(52, 56, 60, 0.2);
  pointer-events: none;
}

.rs-cta__paths {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 90px;
  padding: 0 40px;
}

/*
 * Each path is a column pinned to the bottom, so the card lands at the foot of
 * the photo and the heading floats just above it. The cards deliberately
 * overhang the image (Figma: photo 380 tall, cards ending at 438).
 */
.rs-cta__path {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  transform: translateY(58px);
}

.rs-cta__path-title {
  margin: 0 0 20px;
  color: var(--rs-white-pure, #fffffe);
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

/* ---- Cards ------------------------------------------------------------------ */
.rs-cta__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  padding: 30px;
  border-radius: 24px;
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
}

/*
 * Decorative wave texture, bottom-anchored. Sits behind the content via a
 * pseudo-element so it can never intercept a click on the card's link.
 */
.rs-cta__card::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  /* Resolves from wp-content/themes/rs/css/ up to wp-content/uploads/. */
  background-image: url("../../../uploads/2024/11/waves-1-1-1-1.svg");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

.rs-cta__card > * {
  position: relative; /* lift content above the wave texture */
}

.rs-cta__card--guided {
  background-color: var(--rs-yellow-00, #ffc94b);
}

/* The waves art is drawn in teal; on the yellow card the design shows it white. */
.rs-cta__card--guided::before {
  filter: brightness(0) invert(1);
  opacity: 0.6;
}

.rs-cta__card--solo {
  background-color: var(--rs-white-pure, #fffffe);
}

.rs-cta__badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.rs-cta__badge-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
  color: var(--rs-black-prime, #34383c);
}

.rs-cta__badge {
  padding: 4px 12px;
  border-radius: 8px;
  color: var(--rs-black-prime, #34383c);
  font-family: HindMadurai, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.rs-cta__card--guided .rs-cta__badge {
  background-color: rgba(255, 255, 254, 0.3);
}

.rs-cta__card--solo .rs-cta__badge {
  background-color: rgba(64, 136, 151, 0.1);
}

/*
 * The action has no button chrome in the design — it reads as a row on the
 * card's own colour. It is still a link, so it keeps a real focus ring.
 */
/*
 * Selector carries `a` deliberately. base.css ships
 * `.comments-area a, .page-content a { text-decoration: underline }` (0,2,0),
 * which outranks a lone class and underlines both actions. This block is a
 * shared component that can be dropped into any template, so it needs to win
 * wherever it lands rather than assume the host markup avoids .page-content.
 */
.rs-cta a.rs-cta__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 4px;
  color: var(--rs-black-prime, #34383c);
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.rs-cta a.rs-cta__action:hover,
.rs-cta a.rs-cta__action:focus-visible {
  color: var(--rs-black-prime, #34383c);
  text-decoration: none;
}

.rs-cta__action:hover i {
  transform: translateX(4px);
}

/* 20px regular, not 24px solid: the arrow is a shared atom (Figma 40941:34797,
   reused verbatim in both panels — 40941:34790 and :34805) and both panels draw
   it at 20px/400 in #34383C. Flagged by Raman on the homepage, 2026-08-11;
   fixed in the partial because every consumer of it draws the same atom. */
.rs-cta__action i {
  flex: 0 0 auto;
  font-size: 20px;
  transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .rs-cta__action i {
    transition: none;
  }
}
/* ---- Tablet ----------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .rs-cta__collage {
    background-image: var(--rs-cta-collage-md);
  }
  .rs-cta__paths {
    gap: 40px;
    padding: 0 24px;
  }
  .rs-cta__card {
    padding: 24px;
  }
  .rs-cta__action {
    font-size: 18px;
  }
}
/* ---- Mobile ----------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .rs-cta {
    padding: 40px 20px;
  }
  .rs-cta__title {
    font-size: 24px;
  }
  .rs-cta__lead {
    font-size: 16px;
  }
  /*
   * The mobile artwork stacks the two photos with a horizontal diagonal notch,
   * so the paths stack with it and each card sits at the foot of its own photo.
   */
  .rs-cta__collage {
    background-image: var(--rs-cta-collage-sm);
    aspect-ratio: 670/1248;
  }
  .rs-cta__paths {
    flex-direction: column;
    gap: 0;
    padding: 0 15px;
  }
  .rs-cta__main {
    margin-bottom: 28px; /* = the mobile translateY below */
  }
  .rs-cta__path {
    transform: translateY(28px);
  }
  .rs-cta__path-title {
    font-size: 20px;
    margin-bottom: 12px;
  }
  /* Figma 30580:32679 — card is 305 wide inside the 335 box, so 15px each side,
     and pads itself 15, not 20. */
  .rs-cta__card {
    gap: 10px;
    padding: 15px;
    border-radius: 20px;
  }
  /* Figma pairs the chip with an 8px gap, and on the guided card the glyph is a
     14px calendar — not the 24px the solo card's Miro SVG needs. Those 14px are
     exactly what lets the chip's label hold one line: 275 content - 14 - 8 leaves
     253 for a pill whose text needs ~229. At 24/12 it only got 239 and wrapped. */
  .rs-cta__badge-row {
    gap: 8px;
  }
  i.rs-cta__badge-icon {
    flex: 0 0 14px;
    width: 14px;
    font-size: 16px;
  }
  /* The chip: 600 12px/1.6 Hind Madurai on a full-radius pill, 4/12 padding, and
     it sits on ONE line in the frame. */
  .rs-cta__badge {
    border-radius: 999px;
    /* 11px, not the frame's 12. The EN label needs 255px on one line and the
       card's content box is 253 — Figma's own row is 277 inside a 275 card, so
       the frame overflows by the same 2px rather than fitting. Taking 1px a side
       buys the line honestly. The PL string needs 292px and still wraps; it is
       longer than the frame was drawn for, and squeezing it further would only
       shrink the pill, not the words. */
    padding: 4px 11px;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.6;
  }
  /* The label is 700 16px/1.4 and one line. It has to be written at the base
     rule's specificity — `.rs-cta a.rs-cta__action` (0,2,1) outranks a lone
     `.rs-cta__action` (0,1,0) no matter which media query it sits in, which is
     why the 15px that used to live here never applied and the label rendered at
     20px and wrapped. */
  .rs-cta a.rs-cta__action {
    font-size: 16px;
    line-height: 1.4;
  }
  .rs-cta a.rs-cta__action i {
    font-size: 16px;
  }
}
/* ============================================================================
   Self-audit modal
   ==========================================================================*/
/*
 * Native <dialog>: the browser supplies focus trapping, Esc-to-close, inert
 * background and the backdrop. Only appearance is styled here.
 *
 * ⚠️ Every control below carries an ELEMENT qualifier — `button.rs-modal__close`,
 * `button.rs-selfaudit-form__submit` — and that is load-bearing, not decoration.
 * base.css's button reset ships:
 *
 *     [type=button],[type=submit],button{display:inline-block;font-size:1rem;…}
 *
 * The REASON for the element qualifier is specificity, not source order.
 * `[type=button]`/`[type=submit]` are attribute selectors at (0,1,0), so a lone
 * class only ties them. The element qualifier takes the resting rule to (0,1,1),
 * which wins on weight whatever the load order becomes later. Same fix, same reason, as
 * `.rs-cta a.rs-cta__action` above.
 */
.rs-modal {
  max-width: 558px;
  width: calc(100% - 40px);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
}

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

.rs-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);
  /* The box takes initial focus on open (tabindex="-1" + autofocus in
     modal-self-audit.php) so that no control is focused when the modal appears.
     It must never draw a ring of its own — it is a container, not a target.
     Shared, because the other modal has the same box and was missing this: see
     rs-modal-box-focus-reset. */
  /* --rs-white is not a token and never was; the fallback was doing all the
     work. The real one is --rs-white-pure (#FFFFFE); --rs-white-ivory is
     #F9FAF4, a different colour. */
  background-color: var(--rs-white-pure, #fffffe);
}
.rs-modal__box:focus, .rs-modal__box:focus-visible {
  outline: none;
}

/*
 * The resting box AND all five state faces now come from config/_rs-modal.scss.
 * They were authored here first — this file is where the pink-X bug (base.css's
 * #c36 button reset, removed 2026-11-06) was originally diagnosed — and moved out
 * when the Diagnostic modal turned out to need every one of them. The values,
 * their Figma provenance (atom/icon-close 30671:24423), the base.css specificity
 * argument and the style.css !important
 * exception all travelled with them; read them there, not here.
 *
 * Two things changed in the move, both deliberate:
 *  - The focus faces are now declared BEFORE :hover/:active, so a
 *    keyboard-focused X that is then hovered reads as hovered. The old order in
 *    this file said it did that and did the opposite.
 *  - The reason given for the element qualifier was wrong: base.css loads
 *    BEFORE this sheet (link #6 of 14, measured), so it never won on source
 *    order. The qualifier is about weight, against its [type=button]/[type=submit]
 *    selectors.
 */
button.rs-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);
}
button.rs-modal__close > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  line-height: 1;
}
button.rs-modal__close:focus-visible {
  outline: 2px solid var(--rs-teal-00, #408897) !important;
  outline-offset: 2px !important;
}
button.rs-modal__close:hover {
  color: var(--rs-coral-00, #f35b54);
  font-size: 20px;
}
button.rs-modal__close:active {
  color: var(--rs-coral-dark-10, #d9514b);
  font-size: 18px;
}
button.rs-modal__close:disabled {
  color: var(--rs-grey-light-30, #d8e2e3);
  cursor: default;
  font-size: 18px;
}

.rs-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;
}

/* ---- Form layout ------------------------------------------------------------
   The field skin comes from components/_rs-form.scss; only layout lives here.
   The four gaps below are the design's stack, read off Figma 32896:24111:
   title -> fields 20, field -> field 15, fields -> consent 30, consent -> submit 15. */
.rs-selfaudit-form__row + .rs-selfaudit-form__row {
  margin-top: 15px;
}

.rs-selfaudit-form__row--split {
  display: flex;
  gap: 10px;
}

.rs-selfaudit-form__row--split .wpcf7-form-control-wrap {
  flex: 1 1 0;
  min-width: 0;
}

.rs-selfaudit-form__consent {
  margin-top: 30px;
}

/*
 * Hidden on Oskar's instruction, 2026-08-18.
 *
 * ⚠️ COMPLIANCE: this note is the reCAPTCHA v3 attribution, and
 * components/_rs-form.scss hides the badge itself with
 * `.grecaptcha-badge { visibility: hidden !important }`. Google permits hiding the
 * badge ONLY while this text is shown, so with both hidden this modal no longer
 * meets the reCAPTCHA branding requirement. Undo by deleting the display rule
 * here, or unhide the badge for this form instead.
 *
 * Scoped to the modal deliberately — the same note renders under the book-call
 * survey, the RP survey and the quiz through the shared
 * `.rs-form__recaptcha-note` class, and those are untouched.
 */
.rs-selfaudit-form__recaptcha {
  display: none;
}

/*
 * Size-L, type=with icon — atom 30592:2286, the cut the popup frame actually
 * instantiates. Asymmetric 15/20/15/30 from the mixin: the atom runs 10px
 * tighter on the icon side than on the label side.
 *
 * A <button>, not CF7's [submit]. An <input> is a void element, so it cannot
 * hold the design's trailing check glyph, and being replaced it has no
 * ::before/::after to fake one with either. The form body writes the button
 * directly — see the note in inc/cf7/free-audit-toolkit-{en,pl}.html for what
 * was verified on CF7 6.1.6 before switching.
 *
 * `button.` is load-bearing for the same reason `input.` was: it beats
 * base.css's [type="submit"] on specificity rather than order.
 */
button.rs-selfaudit-form__submit {
  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;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 15px;
  border: 0;
  background-color: var(--rs-yellow-00, #ffc94b);
  color: var(--rs-black-prime, #34383c);
  cursor: pointer;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}

button.rs-selfaudit-form__submit i {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}

button.rs-selfaudit-form__submit:hover,
button.rs-selfaudit-form__submit:focus-visible {
  background-color: #f7bd33;
}

/*
 * CF7's spinner used to be parked on the button from here — absolute, right 16 /
 * bottom 14, with `position: relative` on the form to anchor it — because the
 * only alternative on offer was hiding it and losing the sending state.
 *
 * That is no longer the trade. components/_rs-form.scss now hides CF7's span and
 * gives the button its own sending face (the design system's disabled surface +
 * hourglass + "Sending…"), so both rules are gone rather than moved: this sheet
 * has nothing left to say about the spinner, and the anchor existed only for it.
 * The form body keeps `has-spinner` — see the note in _rs-form.scss for why.
 */
/* CF7 ships 40px of top margin on this; too loose inside a compact modal. */
#rs-selfaudit .wpcf7-response-output {
  margin: 16px 0 0;
}

/* ---- Success panel ----------------------------------------------------------
 * Figma 32903:31748 stacks this icon -> [title + subtitle] -> button on gaps of
 * 20 / 10 / 40. The panel runs on the inner 10px gap and the two outer gaps are
 * made up with margins, rather than wrapping the two text nodes in a div: the
 * copy stays three flat strings, which is what keeps it translatable through the
 * same .mo as everything else.
 */
.rs-modal__panel--success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.rs-modal__panel--success .rs-modal__title {
  margin: 10px 0 0; /* 10 panel gap + 10 = the design's 20 under the icon */
  padding-right: 0;
}

.rs-modal__success-icon {
  font-size: 20px;
  color: var(--rs-teal-00, #408897);
}

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

button.rs-modal__got-it {
  /* Size-L teal, type=default — atom 32901:31327. Was the box and the label size
     longhand, which left it without the atom's shadow ladder. */
  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;
  /* Hover / press / disabled from config/_rs-modal.scss. The hover fill used to
     be a raw #367582 here — a hand-mixed near-miss of the token the design
     system actually specifies (teal-dark-10 #35717D, dE76 1.72, imperceptible
     but off-system), with no press face and no shadow rung at all. The shared
     mixin supplies all three from tokens. */
  transition: var(--rs-transition, background-color 300ms ease-in, box-shadow 300ms ease-in);
  width: 100%;
  margin-top: 30px; /* 10 panel gap + 30 = the design's 40 above the button */
  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;
}
button.rs-modal__got-it:hover, button.rs-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));
}
button.rs-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));
}
button.rs-modal__got-it:disabled {
  background-color: var(--rs-grey-light-30, #d8e2e3);
  box-shadow: none;
  color: var(--rs-disabled-ink, #a0babd);
  cursor: default;
}

.rs-modal__setup-warning {
  margin: 0;
  color: #b3261e;
  font-family: HindMadurai, sans-serif;
  font-size: 14px;
}

/* ---- Mobile -----------------------------------------------------------------
   The 335 cut of the same stack (Figma 32896:24154 / 32903:31749): box padding
   20, title -> fields 16, field -> field 8, fields -> consent 16,
   consent -> submit 12, and 32 above the success button. */
@media (max-width: 767.98px) {
  .rs-modal__box {
    padding: 20px;
  }
  .rs-modal__title {
    margin-bottom: 16px;
    font-size: 18px;
  }
  /* The mobile atom sits 4px in from a 335 box — centre at 16, so a 32px button
     lands flush in the corner. */
  button.rs-modal__close {
    top: 0;
    right: 0;
  }
  .rs-selfaudit-form__consent {
    margin-top: 16px;
  }
  .rs-selfaudit-form__row + .rs-selfaudit-form__row {
    margin-top: 8px;
  }
  button.rs-selfaudit-form__submit {
    /* 44px at 14px/1 with 15/20 padding — atom 30650:1662. */
    min-height: 44px;
    padding: 15px 20px;
    font-size: 0.875rem;
    margin-top: 12px;
  }
  /* The glyph drops with the label, same step the arrow atoms take. */
  button.rs-selfaudit-form__submit i {
    font-size: 14px;
  }
  button.rs-modal__got-it {
    min-height: 44px;
    padding: 15px 20px;
    font-size: 0.875rem;
    margin-top: 22px; /* 10 panel gap + 22 = the design's 32 */
  }
}