@charset "UTF-8";
/*
Bootstrap 5 defaults:
xs: 0px (default, no media query needed)
sm: 576px
md: 768px
lg: 992px
xl: 1200px
xxl: 1400px
*/
/* ==========================================================================
   Benchmark Survey 2026 — survey screen (.bs-survey)
   ========================================================================== */
.bs-survey {
  background-color: #FAFAFA;
  padding: 56px 0 80px;
}
.bs-survey[hidden] {
  display: none;
}
@media (max-width: 991.98px) {
  .bs-survey {
    padding: 40px 0 64px;
  }
}
@media (max-width: 767.98px) {
  .bs-survey {
    padding: 24px 0 48px;
  }
}

.bs-survey__inner {
  max-width: 820px;
  margin: 0 auto;
}

.bs-survey__head {
  margin-bottom: 28px;
  text-align: center;
}
@media (max-width: 767.98px) {
  .bs-survey__head {
    margin-bottom: 28px;
  }
}

/* Same pill as the intro screen (.bs-start__badge); only the spacing differs. */
.bs-survey__badge {
  display: inline-block;
  margin: 0 0 22px;
}
@media (max-width: 767.98px) {
  .bs-survey__badge {
    margin-bottom: 16px;
  }
}

.bs-survey__title {
  margin: 0 0 14px;
  color: #000000;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  outline: none;
  text-wrap: balance;
}
@media (max-width: 991.98px) {
  .bs-survey__title {
    font-size: 32px;
  }
}
@media (max-width: 767.98px) {
  .bs-survey__title {
    font-size: 26px;
  }
}

.bs-survey__note {
  margin: 0;
  color: #535862;
  font-size: 17px;
  font-weight: 350;
  line-height: 1.6;
}

/* ==========================================================================
   HubSpot form (developer embed — renders inline, so it is ours to style)
   ==========================================================================

   Markup shape, from forms.hsforms.com/embed/v4/render-definition/ssr:

     div[data-hsfc-id="Renderer"]
       .hsfc-Form
         .hsfc-Step > .hsfc-Step__Content
           .hsfc-Row
             .hsfc-RadioFieldGroup            ← one question
               label.hsfc-FieldLabel          ← question text
               .hsfc-FieldDescription         ← "Please select up to 3 options"
               .hsfc-RadioFieldGroup__Options
                 div > label.hsfc-FieldLabel  ← one option
                   input.hsfc-RadioInput + span

   HubSpot injects its own \3c style> into <head> at runtime, i.e. AFTER this
   stylesheet, and scopes rules as `[data-hsfc-id=Renderer] .hsfc-*`. Ties go
   to HubSpot, so every override below deliberately carries one extra class
   worth of specificity via the `.bs-survey__form` prefix.
   ========================================================================== */
.bs-survey__form [data-hsfc-id=Renderer] {
  /* HubSpot paints the radio dot and checkbox tick itself, as a mask-image
     ::after coloured by these variables — so setting background-color on the
     input alone just leaves its dark default mark sitting on top. Drive the
     variables instead of fighting the pseudo-element. */
  --hsf-field-radio__color: #BFA238;
  --hsf-field-checkbox__color: #FFFFFF;
  --hsf-field-radio__border-color: #D4D4D8;
  --hsf-field-checkbox__border-color: #D4D4D8;
  /* Progress bar colours — see the .hsfc-ProgressBar block below. */
  --hsf-progressbar-trackLine__background-color: #E4E4E7;
  --hsf-progressbar-progressLine__background-color: #BFA238;
  /* --- Step shell ------------------------------------------------------
     HubSpot pads the form shell (.hsfc-Form / .hsfc-Step /
     .hsfc-Step__Content, and gutters .hsfc-Row) itself. On a phone that
     padding stacks with the .container gutter AND the question card's own
     padding, so option text ends up in a narrow column and long answers
     wrap three deep. Every bit of breathing room this design needs is
     already supplied by the cards, so the shell's horizontal padding is
     pure loss below md — drop it and give the width back to the content.
     Vertical padding is left to HubSpot; only the sides are reclaimed.

     !important, deliberately, and the only use of it in this file. The
     selector already outweighs anything HubSpot scopes as
     `[data-hsfc-id=Renderer] .hsfc-*` (two classes plus an attribute), and
     the padding still won — so HubSpot is setting it either !important or
     as an inline style on the element, neither of which specificity can
     reach. This is a third-party stylesheet injected at runtime, after
     ours, with no build step of ours in between; there is no more surgical
     lever available. */
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] {
    /* The renderer root can carry the padding too, depending on the form
       version — it is our own selector target, so zero it here. */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Form,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Step,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Step__Content,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* A max-width on the shell would squeeze the column just as
       effectively as padding; these are layout wrappers with no
       design intent of ours, so neither is wanted below md. */
    max-width: none !important;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* Step heading, e.g. "Section 1 – Firm Profile". Sits outside the cards,
     so it gets a gold rule to separate it from the question stack. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Heading {
  margin: 0 0 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid #BFA238;
  color: #000000;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Heading {
    margin-bottom: 20px;
    padding-bottom: 12px;
    font-size: 21px;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* --- One card per question ------------------------------------------
     Single-line fields (name/email/phone/company) are deliberately NOT
     carded — they're contact details, not survey questions, and a card
     each makes the last step look heavier than it is. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-DropdownFieldGroup,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextareaField {
  margin-bottom: 32px;
  padding: 36px 40px;
  border: 1px solid #E4E4E7;
  border-radius: 16px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-DropdownFieldGroup,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextareaField {
    margin-bottom: 20px;
    padding: 22px 18px;
    border-radius: 12px;
  }
}
@media (max-width: 575.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-DropdownFieldGroup,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextareaField {
    padding: 20px 14px;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* Question text — the group's own label, not the per-option ones. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup > .hsfc-FieldLabel,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup > .hsfc-FieldLabel,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-DropdownFieldGroup > .hsfc-FieldLabel,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextareaField > .hsfc-FieldLabel {
  margin-bottom: 22px;
  color: #000000;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  /* A description sits between label and options and carries its own
     bottom margin, so the label only needs to clear itself. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup > .hsfc-FieldLabel:has(+ .hsfc-FieldDescription),
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup > .hsfc-FieldLabel:has(+ .hsfc-FieldDescription),
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-DropdownFieldGroup > .hsfc-FieldLabel:has(+ .hsfc-FieldDescription),
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextareaField > .hsfc-FieldLabel:has(+ .hsfc-FieldDescription) {
  margin-bottom: 10px;
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup > .hsfc-FieldLabel,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup > .hsfc-FieldLabel,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-DropdownFieldGroup > .hsfc-FieldLabel,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextareaField > .hsfc-FieldLabel {
    margin-bottom: 18px;
    font-size: 16px;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* "Q1." prefix, applied by benchmark-survey.js (CSS counters can't span
     the form's hidden steps). */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-FieldLabel[data-bs-question]::before {
  content: attr(data-bs-question) " ";
  color: #9E7B19;
  font-weight: 700;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-FieldLabel__RequiredIndicator {
  margin-left: 4px;
  color: #9E7B19;
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* --- Single-line fields — plain, no card ----------------------------- */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextField,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-EmailField,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-NumberField,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-PhoneField {
  margin-bottom: 20px;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextField > .hsfc-FieldLabel,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-EmailField > .hsfc-FieldLabel,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-NumberField > .hsfc-FieldLabel,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-PhoneField > .hsfc-FieldLabel {
  margin-bottom: 8px;
  color: #3F434A;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* --- Rich text block (privacy note on the details step) ---------------
     A rich text field is just copy between fields, so it is styled as a
     quiet callout: cream panel, gold rule on the left, small muted text. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RichText {
  margin-bottom: 24px;
  padding: 14px 18px;
  border-left: 3px solid #BFA238;
  border-radius: 0 8px 8px 0;
  background-color: rgba(191, 162, 56, 0.08);
  color: #3F434A;
  font-size: 14px;
  line-height: 1.6;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RichText p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RichText p + p {
  margin-top: 8px;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RichText strong {
  color: #000000;
  font-weight: 600;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RichText a {
  color: #9E7B19;
  text-decoration: underline;
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-RichText {
    padding: 12px 14px;
    font-size: 13px;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* --- Conditional follow-up ("Please specify") -------------------------
     HubSpot renders a dependent field as its OWN row after the question's
     row, not nested inside the question. It isn't in the DOM at all until
     its trigger option is checked, so `:has(+ .hsfc-Row > .hsfc-TextField)`
     only matches once it appears — the question card keeps its normal
     rounded bottom the rest of the time.

     The two rows are fused into one card: the question loses its bottom
     border and radius, the follow-up loses its top border and picks up the
     matching bottom corners. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(> .hsfc-CheckboxFieldGroup):has(+ .hsfc-Row > .hsfc-TextField),
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(> .hsfc-RadioFieldGroup):has(+ .hsfc-Row > .hsfc-TextField) {
  margin-bottom: 0;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(+ .hsfc-Row > .hsfc-TextField) > .hsfc-CheckboxFieldGroup,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(+ .hsfc-Row > .hsfc-TextField) > .hsfc-RadioFieldGroup {
  margin-bottom: 0;
  padding-bottom: 28px;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(+ .hsfc-Row > .hsfc-TextField) > .hsfc-CheckboxFieldGroup,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(+ .hsfc-Row > .hsfc-TextField) > .hsfc-RadioFieldGroup {
    padding-bottom: 20px;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(> .hsfc-CheckboxFieldGroup) + .hsfc-Row:has(> .hsfc-TextField),
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(> .hsfc-RadioFieldGroup) + .hsfc-Row:has(> .hsfc-TextField) {
  margin-bottom: 32px;
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(> .hsfc-CheckboxFieldGroup) + .hsfc-Row:has(> .hsfc-TextField),
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(> .hsfc-RadioFieldGroup) + .hsfc-Row:has(> .hsfc-TextField) {
    margin-bottom: 20px;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(> .hsfc-CheckboxFieldGroup) + .hsfc-Row > .hsfc-TextField,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(> .hsfc-RadioFieldGroup) + .hsfc-Row > .hsfc-TextField {
  margin-bottom: 0;
  padding: 0 40px 36px;
  border: 1px solid #E4E4E7;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(> .hsfc-CheckboxFieldGroup) + .hsfc-Row > .hsfc-TextField,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(> .hsfc-RadioFieldGroup) + .hsfc-Row > .hsfc-TextField {
    padding: 0 18px 22px;
    border-radius: 0 0 12px 12px;
  }
}
@media (max-width: 575.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(> .hsfc-CheckboxFieldGroup) + .hsfc-Row > .hsfc-TextField,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Row:has(> .hsfc-RadioFieldGroup) + .hsfc-Row > .hsfc-TextField {
    padding: 0 14px 20px;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* Help text, e.g. "Rank top 3" / "Please select up to 3 options" */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-FieldDescription {
  color: #73767C;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* Spacing needs the group prefix: HubSpot's
     `.hsfc-RadioFieldGroup > *:not(:last-child) { margin-bottom }` matches at
     the same specificity as a bare `.hsfc-FieldDescription` rule and is
     injected later, so it wins a tie. The extra class breaks it. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup > .hsfc-FieldDescription,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup > .hsfc-FieldDescription,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-DropdownFieldGroup > .hsfc-FieldDescription,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextareaField > .hsfc-FieldDescription {
  margin: 0 0 30px;
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup > .hsfc-FieldDescription,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup > .hsfc-FieldDescription,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-DropdownFieldGroup > .hsfc-FieldDescription,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextareaField > .hsfc-FieldDescription {
    margin-bottom: 22px;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* --- Two-column option grid ---------------------------------------- */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options {
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* HubSpot spaces options with margin-bottom; the grid gap replaces it. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options > *:not(:last-child),
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options > *:not(:last-child) {
  margin-bottom: 0;
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* --- Boxed option --------------------------------------------------- */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options > div > .hsfc-FieldLabel,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options > div > .hsfc-FieldLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 14px;
  height: 100%;
  margin: 0;
  padding: 18px 22px;
  border: 1px solid #E4E4E7;
  border-radius: 10px;
  background-color: #FFFFFF;
  color: #3F434A;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  -webkit-transition: border-color 0.2s ease, background-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, background-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options > div > .hsfc-FieldLabel:hover,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options > div > .hsfc-FieldLabel:hover {
  border-color: #D6C16A;
  background-color: rgba(249, 244, 225, 0.5);
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options > div > .hsfc-FieldLabel,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options > div > .hsfc-FieldLabel {
  /* Selected — :has() lets the box react to its own input. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options > div > .hsfc-FieldLabel:has(input:checked),
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options > div > .hsfc-FieldLabel:has(input:checked) {
  border-color: #D6C16A;
  background-color: #F9F4E1;
  -webkit-box-shadow: 0 0 0 1px #D6C16A;
          box-shadow: 0 0 0 1px #D6C16A;
  color: #000000;
  font-weight: 600;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options > div > .hsfc-FieldLabel,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options > div > .hsfc-FieldLabel {
  /* The 20px control is a small focus target, so surface keyboard focus
     on the whole box. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options > div > .hsfc-FieldLabel:has(input:focus-visible),
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options > div > .hsfc-FieldLabel:has(input:focus-visible) {
  border-color: #BFA238;
  -webkit-box-shadow: 0 0 0 3px rgba(214, 193, 106, 0.45);
          box-shadow: 0 0 0 3px rgba(214, 193, 106, 0.45);
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options > div > .hsfc-FieldLabel:has(input:disabled),
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options > div > .hsfc-FieldLabel:has(input:disabled) {
  background-color: #FAFAFA;
  color: #AEB0B6;
  cursor: not-allowed;
  opacity: 0.7;
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options > div > .hsfc-FieldLabel,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options > div > .hsfc-FieldLabel {
    gap: 12px;
    padding: 14px 16px;
    font-size: 14px;
  }
}
@media (max-width: 575.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioFieldGroup__Options > div > .hsfc-FieldLabel,
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options > div > .hsfc-FieldLabel {
    gap: 10px;
    padding: 13px 13px;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* --- The controls --------------------------------------------------- */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioInput,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxInput {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 2px solid #D4D4D8;
  background-color: #FFFFFF;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  -webkit-transition: border-color 0.2s ease, background-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, background-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioInput:focus-visible,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxInput:focus-visible {
  outline: 2px solid #BFA238;
  outline-offset: 2px;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioInput:disabled,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxInput:disabled {
  cursor: not-allowed;
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* Gold ring, cream interior, gold dot. The dot comes from HubSpot's
     ::after via --hsf-field-radio__color above, so the input itself only
     supplies the ring and the fill behind it. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioInput {
  border-radius: 50%;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-RadioInput:checked {
  border-color: #BFA238;
  background-color: #F9F4E1;
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* Gold fill; the white tick comes from --hsf-field-checkbox__color. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxInput {
  border-radius: 6px;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-CheckboxInput:checked {
  border-color: #BFA238;
  background-color: #BFA238;
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* --- Text inputs ----------------------------------------------------- */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextInput,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextareaInput,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-NumberInput,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-EmailInput,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-PhoneInput,
.bs-survey__form [data-hsfc-id=Renderer] select {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #E4E4E7;
  border-radius: 10px;
  background-color: #FFFFFF;
  color: #1C1C1C;
  font-size: 16px;
  -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextInput:focus,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextareaInput:focus,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-NumberInput:focus,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-EmailInput:focus,
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-PhoneInput:focus,
.bs-survey__form [data-hsfc-id=Renderer] select:focus {
  border-color: #BFA238;
  -webkit-box-shadow: 0 0 0 3px rgba(214, 193, 106, 0.35);
          box-shadow: 0 0 0 3px rgba(214, 193, 106, 0.35);
  outline: none;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextareaInput {
  min-height: 120px;
  resize: vertical;
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-TextareaInput {
    min-height: 104px;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] {
  /* --- Progress + navigation --------------------------------------------
     HubSpot's markup is:

       .hsfc-ProgressBar             ← wrapper: percentage text + track
         .hsfc-ProgressBar__Text     ← "12%"
         .hsfc-ProgressBar__Progress ← the TRACK (not the fill)
           div[style="width:12%"]    ← the fill, width set inline

     So the wrapper must not be given a bar height or overflow, and the
     track must not be painted gold. Colours come from the variables above;
     only the sizing is set here. HubSpot already transitions the width. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-ProgressBar {
  margin-bottom: 24px;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-ProgressBar__Text {
  margin: 0 0 6px;
  color: #73767C;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-ProgressBar__Progress {
  height: 8px;
  border-radius: 100px;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-ProgressBar__Progress > div {
  height: 8px;
  border-radius: 100px;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-NavigationRow {
  margin-top: 32px;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-NavigationRow__Buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-NavigationRow__Buttons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Button {
  border: 2px solid #9E7B19;
  border-radius: 8px;
  padding: 12px 34px;
  background: #9E7B19;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: 0.35s ease;
  transition: 0.35s ease;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Button:hover, .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Button:focus {
  border-color: #BFA238;
  background: #BFA238;
  color: #FFFFFF;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Button:focus-visible {
  outline: 2px solid #BFA238;
  outline-offset: 3px;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Button:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Button {
  /* "Back" is the secondary action — outline it so "Next" leads. */
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Button[data-hsfc-id=BackButton], .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Button.hsfc-Button--back {
  background: transparent;
  color: #8A6A15;
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-Button[data-hsfc-id=BackButton]:hover, .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Button[data-hsfc-id=BackButton]:focus, .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Button.hsfc-Button--back:hover, .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Button.hsfc-Button--back:focus {
  background: rgba(249, 244, 225, 0.7);
  color: #745711;
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .hsfc-Button {
    width: 100%;
    padding: 14px 24px;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] .hsfc-ErrorAlert {
  margin-top: 12px;
  color: #B42318;
  font-size: 14px;
  font-weight: 500;
}

/* ==========================================================================
   Thank-you screen (.bs-survey--done)
   ==========================================================================

   HubSpot swaps the whole step out for its own thank-you rich text once the
   form is submitted. Its class name isn't stable across form versions, so
   benchmark-survey.js finds that block (explicit class first, structural
   fallback second) and stamps `.bs-survey__done` on it, then puts
   `.bs-survey--done` on the section. Everything below hangs off those two
   classes, not off HubSpot's markup.

   The composed panel is: badge → HubSpot's copy → next steps → actions,
   all inside one centred card.
   ========================================================================== */
/* Bracketing blocks in section-survey.php. Hidden for the whole survey and
   revealed only on the done screen — no `hidden` attribute, so nothing here
   depends on JS having run to stay out of the way. */
.bs-survey__done-only {
  display: none;
}

.bs-survey--done {
  /* No long form to sit under a heading any more — the section becomes one
     centred panel, and the repeated survey title is dead weight. */
  padding: 120px 0;
}
@media (max-width: 991.98px) {
  .bs-survey--done {
    padding: 90px 0;
  }
}
@media (max-width: 767.98px) {
  .bs-survey--done {
    padding: 56px 0 72px;
  }
}
.bs-survey--done .bs-survey__head {
  display: none;
}
.bs-survey--done .bs-survey__inner {
  max-width: 680px;
  padding: 64px 64px 56px;
  border: 1px solid #E4E4E7;
  border-radius: 24px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.04);
          box-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.04);
  text-align: center;
}
@media (max-width: 767.98px) {
  .bs-survey--done .bs-survey__inner {
    padding: 40px 24px 36px;
    border-radius: 18px;
  }
}
@media (max-width: 575.98px) {
  .bs-survey--done .bs-survey__inner {
    padding: 34px 18px 30px;
  }
}
.bs-survey--done .bs-survey__done-only {
  display: block;
}
.bs-survey--done {
  /* The form wrapper now holds only the thank-you copy. */
}
.bs-survey--done .bs-survey__form {
  text-align: center;
}

/* --- Success badge ----------------------------------------------------- */
.bs-survey__done-badge {
  margin-bottom: 26px;
}
@media (max-width: 767.98px) {
  .bs-survey__done-badge {
    margin-bottom: 20px;
  }
}

.bs-survey__done-badge-ring {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-color: #F9F4E1;
  color: #9E7B19;
  /* Two flat rings instead of a blur — keeps the edge crisp on retina and
     costs nothing to paint. */
  -webkit-box-shadow: 0 0 0 1px #F1E2A9, 0 0 0 10px rgba(246, 237, 201, 0.45);
          box-shadow: 0 0 0 1px #F1E2A9, 0 0 0 10px rgba(246, 237, 201, 0.45);
}
.bs-survey__done-badge-ring svg {
  width: 34px;
  height: 34px;
}
@media (max-width: 767.98px) {
  .bs-survey__done-badge-ring {
    width: 64px;
    height: 64px;
    -webkit-box-shadow: 0 0 0 1px #F1E2A9, 0 0 0 8px rgba(246, 237, 201, 0.45);
            box-shadow: 0 0 0 1px #F1E2A9, 0 0 0 8px rgba(246, 237, 201, 0.45);
  }
  .bs-survey__done-badge-ring svg {
    width: 28px;
    height: 28px;
  }
}

/* --- HubSpot's own thank-you copy --------------------------------------- */
.bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done {
  padding: 0;
  border: 0;
  background: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #535862;
  font-size: 18px;
  font-weight: 350;
  line-height: 1.65;
  text-align: center;
  /* Whatever heading level the form is configured with, it reads as the
     page's answer to "did it go through?" — so size it like one. */
}
.bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done h1, .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done h2, .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done h3, .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done h4 {
  margin: 0 0 14px;
  color: #000000;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
@media (max-width: 991.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done h1, .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done h2, .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done h3, .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done h4 {
    font-size: 30px;
  }
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done h1, .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done h2, .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done h3, .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done h4 {
    font-size: 25px;
  }
}
.bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done p {
  margin: 0 auto 14px;
  max-width: 46ch;
}
.bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done p:last-child {
  margin-bottom: 0;
}
.bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done a {
  color: #8A6A15;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done a:hover, .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done a:focus {
  color: #745711;
}
.bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done ul, .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done ol {
  display: inline-block;
  margin: 0 0 14px;
  text-align: left;
}
@media (max-width: 767.98px) {
  .bs-survey__form [data-hsfc-id=Renderer] .bs-survey__done {
    font-size: 16px;
  }
}

/* The thank-you copy can itself be a rich text block, which would pick up the
   privacy-note callout above. On the done screen it is plain centred copy. */
.bs-survey--done .bs-survey__form [data-hsfc-id=Renderer] .hsfc-RichText {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* --- What happens next -------------------------------------------------- */
.bs-survey__done-next {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid #E4E4E7;
}
@media (max-width: 767.98px) {
  .bs-survey__done-next {
    margin-top: 28px;
    padding-top: 24px;
  }
}

.bs-survey__done-steps {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  text-align: left;
}
@media (max-width: 767.98px) {
  .bs-survey__done-steps {
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 26px;
  }
}

.bs-survey__done-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid #F6EDC9;
  border-radius: 12px;
  background-color: rgba(255, 253, 247, 0.9);
}
@media (max-width: 767.98px) {
  .bs-survey__done-step {
    padding: 16px 16px;
  }
}

.bs-survey__done-step-label {
  color: #8A6A15;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bs-survey__done-step-text {
  color: #535862;
  font-size: 15px;
  font-weight: 350;
  line-height: 1.55;
}

/* --- Actions ------------------------------------------------------------ */
.bs-survey__done-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 14px 24px;
}
@media (max-width: 767.98px) {
  .bs-survey__done-actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
}

/* Appearance comes from the theme's .btn-gold; only layout is set here. */
.bs-survey__done-cta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
}
@media (max-width: 767.98px) {
  .bs-survey__done-cta {
    width: 100%;
  }
}

/* ==========================================================================
   Benchmark Survey 2026 — opening screen (.bs-start)
   ========================================================================== */
/* Shared type for the prose under every section title, so hero lead, section
   subtitles and callouts all read at one size. Change it here only. */
.bs-start {
  background-color: #FAFAFA;
  padding: 64px 0 90px;
}
@media (max-width: 991.98px) {
  .bs-start {
    padding: 48px 0 70px;
  }
}
@media (max-width: 767.98px) {
  .bs-start {
    padding: 32px 0 48px;
  }
}

.bs-start__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

/* --- Co-brand lockup --------------------------------------------------
   JIFFYAI + Ascentix Partners + Fintech Intel. Sits above the eyebrow as the
   first thing on the page, since the site header can't carry the partner
   marks.

   Desktop reads as one line: [JIFFYAI] in partnership with [Ascentix] [Fintech Intel].
   Below md the connector is pushed onto its own row underneath (order 3 +
   full basis), and the partner group wraps as a unit, so marks stay grouped
   side by side instead of stacking into a tall column that pushes the
   headline off the first screen.

   The heights are deliberately unequal — see the note in section-start.php. */
.bs-start__cobrand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 28px;
  margin: 0 0 46px;
}
@media (max-width: 767.98px) {
  .bs-start__cobrand {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 12px 22px;
    margin-bottom: 30px;
  }
}

.bs-start__cobrand-partners {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 24px;
}
@media (max-width: 767.98px) {
  .bs-start__cobrand-partners {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 12px 20px;
  }
}

.bs-start__cobrand-logo {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.bs-start__cobrand-logo--jiffy {
  height: 38px;
}
@media (max-width: 767.98px) {
  .bs-start__cobrand-logo--jiffy {
    height: 30px;
  }
}
@media (max-width: 575.98px) {
  .bs-start__cobrand-logo--jiffy {
    height: 26px;
  }
}

.bs-start__cobrand-logo--partner {
  height: 84px;
}
@media (max-width: 767.98px) {
  .bs-start__cobrand-logo--partner {
    height: 64px;
  }
}
@media (max-width: 575.98px) {
  .bs-start__cobrand-logo--partner {
    height: 56px;
  }
}

.bs-start__cobrand-logo--fintech-intel {
  height: 42px;
}
@media (max-width: 767.98px) {
  .bs-start__cobrand-logo--fintech-intel {
    height: 34px;
  }
}
@media (max-width: 575.98px) {
  .bs-start__cobrand-logo--fintech-intel {
    height: 30px;
  }
}

.bs-start__cobrand-sep {
  color: #73767C;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 767.98px) {
  .bs-start__cobrand-sep {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-align: center;
  }
}

/* --- Eyebrow pill ---------------------------------------------------- */
.bs-start__badge {
  margin: 0 0 40px;
  padding: 10px 26px;
  border: 1px solid rgba(214, 193, 106, 0.7);
  border-radius: 100px;
  background-color: rgba(255, 253, 247, 0.8);
  color: #8A6A15;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 767.98px) {
  .bs-start__badge {
    margin-bottom: 28px;
    padding: 9px 20px;
    font-size: 12px;
  }
}

/* --- Headline -------------------------------------------------------- */
.bs-start__title {
  max-width: 900px;
  text-wrap: balance;
  margin: 0 0 28px;
  color: #000000;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (max-width: 991.98px) {
  .bs-start__title {
    font-size: 44px;
  }
}
@media (max-width: 767.98px) {
  .bs-start__title {
    margin-bottom: 20px;
    font-size: 30px;
  }
}

.bs-start__title-accent {
  color: #9E7B19;
}

/* --- Supporting copy -------------------------------------------------- */
.bs-start__lead {
  max-width: 620px;
  margin: 0 0 32px;
  color: #535862;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
}
@media (max-width: 767.98px) {
  .bs-start__lead {
    font-size: 17px;
  }
}
@media (max-width: 767.98px) {
  .bs-start__lead {
    margin-bottom: 36px;
  }
}

/* --- Meta strip --------------------------------------------------------
   One joined bar, two equal cells (icon + label + value) split by a divider,
   so unequal copy lengths read as a deliberate pair, not two mismatched cards. */
.bs-start__meta {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 760px;
  margin: 0 0 28px;
  padding: 0;
  border: 1px solid #E4E4E7;
  border-radius: 16px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
  list-style: none;
}
@media (max-width: 767.98px) {
  .bs-start__meta {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    margin-bottom: 32px;
  }
}

.bs-start__meta-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 18px;
  padding: 24px 30px;
  text-align: left;
}
.bs-start__meta-item + .bs-start__meta-item {
  border-left: 1px solid #E4E4E7;
}
@media (max-width: 767.98px) {
  .bs-start__meta-item {
    padding: 18px 22px;
  }
  .bs-start__meta-item + .bs-start__meta-item {
    border-top: 1px solid #E4E4E7;
    border-left: 0;
  }
}

.bs-start__meta-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: #F9F4E1;
  color: #9E7B19;
  font-size: 19px;
}

.bs-start__meta-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}

.bs-start__meta-label {
  color: #8A6A15;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bs-start__meta-note {
  margin-top: -2px;
  color: #73767C;
  font-size: 14px;
  line-height: 1.4;
}

.bs-start__meta-value {
  color: #000000;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
}

/* --- CTA -------------------------------------------------------------- */
/* Appearance comes from the theme's .btn-gold; only layout is set here. */
.bs-start__cta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}
@media (max-width: 767.98px) {
  .bs-start__cta {
    width: 100%;
    margin-bottom: 32px;
  }
}

/* ==========================================================================
   Intro page — content sections below the hero
   Alternating white / dark-50 bands; shared type via .bs-eyebrow / .bs-h2.
   ========================================================================== */
.bs-start__promise {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px 22px;
  margin: 0;
  color: #8A6A15;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bs-start__promise span + span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 22px;
  border-radius: 50%;
  background-color: #D6C16A;
  vertical-align: middle;
}
@media (max-width: 767.98px) {
  .bs-start__promise {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
    margin: 0;
  }
  .bs-start__promise span + span::before {
    display: none;
  }
}

.bs-eyebrow {
  margin: 0 0 16px;
  color: #8A6A15;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bs-h2 {
  margin: 0 0 20px;
  color: #000000;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
@media (max-width: 767.98px) {
  .bs-h2 {
    font-size: 28px;
  }
}

/* --- Why this benchmark ---------------------------------------------- */
.bs-why,
.bs-return,
.bs-voices,
.bs-final,
.bs-about {
  padding: 100px 0;
}
@media (max-width: 767.98px) {
  .bs-why,
  .bs-return,
  .bs-voices,
  .bs-final,
  .bs-about {
    padding: 56px 0;
  }
}

.bs-why {
  background-color: #FFFFFF;
}

/* Two columns: story on the left, the five questions on the right. */
.bs-why__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 80px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 991.98px) {
  .bs-why__grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.bs-why__intro {
  margin: 0 0 28px;
  color: #535862;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
}
@media (max-width: 767.98px) {
  .bs-why__intro {
    font-size: 17px;
  }
}

.bs-why__closing {
  margin: 0;
  padding-left: 24px;
  border-left: 3px solid #BFA238;
  color: #535862;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
}
@media (max-width: 767.98px) {
  .bs-why__closing {
    font-size: 17px;
  }
}
.bs-why__closing {
  color: #3F434A;
}

/* Five questions as a quiet list: gold bullet, hairline dividers. */
.bs-why__questions {
  margin: 0;
  padding: 0;
  border-top: 1px solid #E4E4E7;
  list-style: none;
}
.bs-why__questions li {
  position: relative;
  padding: 22px 8px 22px 36px;
  border-bottom: 1px solid #E4E4E7;
  color: #000000;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
.bs-why__questions li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #BFA238;
  -webkit-box-shadow: 0 0 0 5px rgba(214, 193, 106, 0.25);
          box-shadow: 0 0 0 5px rgba(214, 193, 106, 0.25);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (max-width: 767.98px) {
  .bs-why__questions li {
    padding: 16px 0 16px 28px;
    font-size: 17px;
  }
  .bs-why__questions li::before {
    left: 2px;
  }
}

/* --- What comes back -------------------------------------------------- */
.bs-return {
  background-color: #FAFAFA;
  text-align: center;
}

.bs-return__head {
  max-width: 820px;
  margin: 0 auto 48px;
}

.bs-return__lead {
  margin: 0;
  color: #535862;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
}
@media (max-width: 767.98px) {
  .bs-return__lead {
    font-size: 17px;
  }
}

.bs-return__kicker {
  margin: 0 0 24px;
  color: #8A6A15;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bs-return__topics {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 991.98px) {
  .bs-return__topics {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .bs-return__topics {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.bs-return__topic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid #E4E4E7;
  border-radius: 12px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #000000;
  font-size: 19px;
  font-weight: 600;
  text-align: left;
  -webkit-transition: border-color 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.bs-return__topic:hover {
  border-color: #D6C16A;
  -webkit-box-shadow: 0 8px 24px rgba(68, 51, 8, 0.08);
          box-shadow: 0 8px 24px rgba(68, 51, 8, 0.08);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

.bs-return__icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F9F4E1;
  color: #9E7B19;
  font-size: 12px;
}

/* --- Perspectives + thank-you ---------------------------------------- */
.bs-voices {
  background-color: #FFFFFF;
}

.bs-voices__inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  /* The theme gives bare paragraphs their own font-size, so this has to
     target the <p>, not the wrapper. */
}
.bs-voices__inner p {
  margin: 0 0 24px;
}
.bs-voices__inner {
  /* Only the plain intro paragraph; the quote and thank-you box have their own sizes. */
}
.bs-voices__inner > p:not([class]) {
  color: #535862;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
}
@media (max-width: 767.98px) {
  .bs-voices__inner > p:not([class]) {
    font-size: 17px;
  }
}

.bs-voices__quote {
  max-width: 640px;
  margin: 36px auto 56px !important;
  padding-left: 24px;
  border-left: 3px solid #BFA238;
  color: #000000;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}
@media (max-width: 767.98px) {
  .bs-voices__quote {
    font-size: 19px;
  }
}

.bs-thanks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
  padding: 32px 36px;
  border: 1px solid rgba(214, 193, 106, 0.7);
  border-radius: 16px;
  background: linear-gradient(135deg, #FFFDF7 0%, #F9F4E1 100%);
  text-align: left;
}
@media (max-width: 767.98px) {
  .bs-thanks {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 16px;
    padding: 26px 24px;
  }
}

.bs-thanks__icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #9E7B19;
  color: #FFFFFF;
  font-size: 24px;
}

.bs-thanks__title {
  margin: 0 0 6px;
  color: #5E460E;
  font-size: 22px;
  font-weight: 700;
}

.bs-thanks__text {
  margin: 0 !important;
  color: #3F434A;
  font-size: 17px;
  line-height: 1.6;
}

/* --- Closing CTA ------------------------------------------------------ */
.bs-final {
  background-color: #FAFAFA;
  text-align: center;
}

.bs-final__text {
  max-width: 620px;
  margin: 0 auto 36px;
  color: #535862;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
}
@media (max-width: 767.98px) {
  .bs-final__text {
    font-size: 17px;
  }
}

/* --- About the organisations ----------------------------------------- */
.bs-about {
  padding-top: 80px;
  border-top: 1px solid #E4E4E7;
  background-color: #FFFFFF;
}

/* All three cards stretch to the tallest one. Inside each, the text (and the
   JIFFYAI tagline) sits at the top and the "Learn more" link is pinned to the
   bottom, so the links line up across the cards. */
.bs-about__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 28px 1fr 28px 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 991.98px) {
  .bs-about__grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.bs-about__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 28px 28px 26px;
  border: 1px solid #E4E4E7;
  border-top: 3px solid #BFA238;
  border-radius: 12px;
  background-color: #FFFFFF;
}

.bs-about__name {
  margin: 0 0 12px;
  color: #000000;
  font-size: 22px;
  font-weight: 700;
}

.bs-about__body {
  margin: 0 0 14px;
  color: #535862;
  font-size: 15px;
  line-height: 1.7;
}

.bs-about__foot {
  margin-top: auto;
  padding-top: 16px;
}

.bs-about__tagline {
  margin: 0;
  color: #8A6A15;
  font-size: 15px;
  font-weight: 700;
}

.bs-about__link {
  display: inline-block;
  color: #8A6A15;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.bs-about__link i {
  margin-left: 6px;
  font-size: 12px;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.bs-about__link:hover {
  color: #5E460E;
}
.bs-about__link:hover i {
  -webkit-transform: translateX(4px);
          transform: translateX(4px);
}