.dropdown__theme.dropdown__theme--bold .select2-container .select2-selection--single {
        font-weight: normal !important;
    }

    /* Mobile number: default 60 (editable) + grey suffix hint when value is exactly "60" */
    #S2 .cc-mobile-inline {
      position: relative;
      width: 100%;
      border-bottom: 1px solid #c9d1d6;
      /* Hint aligns to same vertical band as input text (not geometric box center). */
      font-size: 18px;
      line-height: 1.5;
    }

    #S2 .cc-mobile-inline__input.form-control {
      border-bottom: none !important;
      margin-bottom: 0;
      background: transparent !important;
      position: relative;
      z-index: 2;
      font-size: inherit;
      line-height: inherit;
      padding-top: 8px;
      padding-bottom: 8px;
      min-height: calc(1.5em + 16px);
      box-sizing: border-box;
    }

    #S2 .cc-mobile-inline__hint {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      transform: none;
      display: none;
      align-items: center;
      font-size: inherit;
      line-height: inherit;
      pointer-events: none;
      z-index: 3;
      font-family: inherit;
      white-space: nowrap;
      margin: 0;
      padding: 0;
    }

    #S2 .cc-mobile-inline__hint.is-visible {
      display: flex;
    }

    #S2 .cc-home-office-reminder {
      color: #6b7780;
      font-size: 14px;
      line-height: 1.4;
      margin: 8px 0 0;
    }

    @media (max-width: 767px) {
      #S2 .cc-mobile-inline {
        font-size: 16px;
      }
    }

    /* E-mail: underline row + teal domain shortcut pills */
    #S2 .cc-email-inline {
      width: 100%;
      border-bottom: 1px solid #c9d1d6;
      padding-bottom: 1px;
    }

    #S2 .cc-email-inline__row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 10px;
      justify-content: space-between;
    }

    #S2 .cc-email-inline__input.form-control {
      border-bottom: none !important;
      margin-bottom: 0 !important;
      flex: 1 1 180px;
      min-width: 0;
      background: transparent !important;
      padding-right: 4px;
    }

    #S2 .cc-email-domains {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      justify-content: flex-end;
      flex: 0 1 auto;
    }

    #S2 .cc-email-domain-btn {
      margin: 0;
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.35;
      font-family: inherit;
      color: #00C8C3;
      background: #fff;
      border: 1px solid #00C8C3;
      border-radius: 999px;
      cursor: pointer;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }

    #S2 .cc-email-domain-btn:hover,
    #S2 .cc-email-domain-btn:focus {
      background: #f0f7fc;
      outline: none;
    }

    #S2 .cc-email-domain-btn:focus-visible {
      box-shadow: 0 0 0 2px rgba(0, 94, 253, 0.35);
    }

    /* S2: Titanium Blue / Pink choice beside selected card (desktop) */
    #S2 .s2-titanium-interested-label {
      display: block;
      font-size: 17px;
      color: #484848;
      margin-bottom: 12px;

      font-family: "OpenSans", Helvetica, Arial, sans-serif;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.35;
    }
    #S2 .s2-titanium-variant-block .s2-titanium-radios {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    #S2 .s2-card-hero.s2-titanium-active {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 20px 28px;
    }
    #S2 .s2-card-hero.s2-titanium-active .selected-card-header {
      flex: 0 1 auto;
    }
    #S2 .s2-card-hero.s2-titanium-active .s2-titanium-variant-block {
      flex: 1 1 150px;
      max-width: 100%;
      padding-top: 40px;
      padding-left: 50px;
    }
    #S2 .s2-card-hero.s2-titanium-active .s2-apply-intro {
      flex: 1 0 100%;
    }
    #S2 .s2-card-hero.s2-titanium-active .selected-card-title-display {
      display: none !important;
    }

    /* S2 Titanium: two single-card assets stacked (pink rear / blue front by default) */
    #S2 .selected-card-image-wrap {
      position: relative;
    }
    #S2 .selected-card-titanium-stack {
      display: none;
      position: relative;
      width: min(220px, 82vw);
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      min-height: clamp(132px, 42vw, 172px);
    }
    #S2 .s2-card-hero.s2-titanium-active .selected-card-titanium-stack {
      display: block;
    }
    #S2 .s2-card-hero.s2-titanium-active #selected-card-image {
      display: none !important;
    }
    #S2 .selected-card-titanium-stack__img {
      position: absolute;
      width: 86%;
      max-width: 200px;
      height: auto;
      filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.12));
      box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.20);
    }
    #S2 .selected-card-titanium-stack__img--pink {
      top: 0;
      right: 0;
      left: auto;
      z-index: 1;
      transform: translate(5px, 15px)
    }
    #S2 .selected-card-titanium-stack__img--blue {
      bottom: 0;
      left: 0;
      z-index: 2;
      transform: translate(-1px, 0px)
    }
    #S2 .selected-card-titanium-stack--pink-front .selected-card-titanium-stack__img--pink {
      z-index: 2;
      top: auto;
      right: auto;
      bottom: 0;
      left: 0;
      transform: translate(-1px, 0px);
    }
    #S2 .selected-card-titanium-stack--pink-front .selected-card-titanium-stack__img--blue {
      z-index: 1;
      bottom: auto;
      left: auto;
      top: 0;
      right: 0;
      transform: translate(5px, 15px);
    }

    /* E-mail on viewports ≤767px: label, single underline row, then 2×2 teal-outline chips (design reference) */
    @media (max-width: 767px) {
      /* Mobile dropdown placeholder text should stay regular weight (not bold). */
      #generated_form_display
        .select2-container--default
        .select2-selection--single
        .select2-selection__rendered.select2-selection__placeholder {
        font-weight: 400 !important;
      }
      #generated_form_display
        .dropdown__theme.dropdown__theme--bold
        .select2-container
        .select2-selection--single
        .select2-selection__rendered.select2-selection__placeholder {
        font-weight: 400 !important;
      }
      #S2 label#email-label {
        color: #484848;
        font-weight: 400;
        margin-bottom: 10px;
        display: block;
      }

      #S2 .cc-email-inline {
        border-bottom: none;
        padding-bottom: 0;
      }

      #S2 .cc-email-inline__row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
      }

      #S2 .cc-email-inline__input.form-control {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-bottom: 1px solid #c9d1d6 !important;
        padding: 4px 0 10px 0 !important;
        margin-bottom: 0 !important;
        background: transparent !important;
        font-size: 16px;
        -webkit-appearance: none;
        appearance: none;
      }

      #S2 .cc-email-inline__input.form-control::placeholder {
        color: #484848;
        opacity: 0.55;
      }

      #S2 .cc-email-inline__input.form-control:focus {
        border-bottom-color: #00C8C3 !important;
        outline: none;
        box-shadow: none !important;
      }

      #S2 .cc-email-domains {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        justify-content: stretch;
        flex-wrap: unset !important;
        align-items: stretch;
        overflow: visible;
      }

      #S2 .cc-email-domain-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 11px 10px;
        font-size: 13px;
        line-height: 1.3;
        color: #484848;
        background: #fff;
        border: 1px solid #00C8C3;
        border-radius: 999px;
        white-space: nowrap;
        text-align: center;
      }

      /* S2 selected card: white tile, image centered, title centered below (~20–24px gap), then Apply Now (mobile mock) */
      #S2 .selected-card-header.selected-card-product-row {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 12px;
        padding: 24px 18px 22px !important;
        margin-bottom: 24px !important;
      }

      #S2 .selected-card-image-wrap {
        flex: 0 0 auto !important;
        width: 100%;
        text-align: center;
      }

      #S2 #selected-card-image {
        margin-left: auto;
        margin-right: auto;
        width: auto;
        height: auto;
        max-width: min(200px, 78vw) !important;
        max-height: 130px !important;
        filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.12));
      }

      #S2 .selected-card-title-display {
        flex: none !important;
        width: 100%;
        max-width: 100%;
        text-align: center !important;
        color: #484848 !important;
        font-weight: 500 !important;
        font-size: 17px !important;
        line-height: 1.35;
        margin-top: 22px !important;
        margin-bottom: 0 !important;
        padding: 0 4px;
      }

      #S2 .s2-apply-intro {
        width: 100%;
        text-align: left;
      }

      #S2 .s2-apply-intro h4.bold {
        font-size: 20px !important;
        line-height: 1.3;
        font-weight: 700 !important;
        color: #484848 !important;
        margin: 0 0 8px 0 !important;
        text-align: left;
      }

      #S2 .s2-apply-intro label.pt-4.pb-4 {
        display: block;
        font-size: 16px !important;
        line-height: 34px !important;
        font-weight: 400 !important;
        color: #484848 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        text-align: left;
      }

      #S2 .s2-card-hero.s2-titanium-active {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
      }
      #S2 .s2-card-hero.s2-titanium-active .s2-titanium-variant-block {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 0px 0px;
        margin-top: -8px;
      }
      #S2 .s2-card-hero.s2-titanium-active .selected-card-header {
        margin-bottom: 12px !important;
      }
    }

    /* —— Narrow mobile (≤425px): card listing + shell to match OCBC mobile reference —— */
    @media (max-width: 767.98px) {
      html {
        -webkit-text-size-adjust: 100%;
        overflow-x: hidden;
      }

      body {
        background: #f0f2f5 !important;
        overflow-x: hidden;
      }

      #generated_form_display,
      #generated_form_display.container,
      #generated_form_display .subcategory,
      #generated_form_display .subcategory.subcategory--black {
        max-width: 100vw;
        overflow-x: hidden;
      }

      #generated_form_display .form-group .dropdown__theme {
        font-weight: normal !important;
      }

      #S2 .cc-s5-info-tooltip {
      min-width: 200px !important;
      }

      .iw_component.com__silveryear__form-background,
      .com__silveryear__form-background .com__general__form-content-first {
        background: #f0f2f5 !important;
      }

      .com__silveryear__form-background .com__general__form-content-first.s2-active {
        background: #ffffff !important;
      }

      .header__row {
        background: #ffffff;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 16px 20px 14px;
      }

      .header__row .header__logo {
        padding-left: 0;
        padding-right: 0;
      }

      .header__logo .logo img {
        width: 120px;
        height: auto;
        max-width: 100%;
      }

      /* .header__logo::after {
        content: "";
        display: block;
        width: 40px;
        height: 3px;
        background: #d71920;
        margin-top: 12px;
        border-radius: 1px;
      } */

      #generated_form_display.container {
        width: 100% !important;
        max-width: 100%;
        padding-left: 20px !important;
        padding-right: 20px !important;
      }

      /* #generated_form_display .subcategory.subcategory--black {
        padding-top: 4px;
        padding-bottom: 0 !important;
        margin-bottom: 0;
      } */

      #generated_form_display .subcategory.subcategory--black::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        background: #d71920;
        margin-bottom: 14px;
        border-radius: 1px;
      }

      #generated_form_display #form-title {
        font-size: 12px !important;
        color: #484848;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 18px; /* 150% */
        letter-spacing: 5px;
        text-transform: uppercase;
      }

      #generated_form_display #form-subtitle-s1 {
        font-size: 15px !important;
        line-height: 1.5;
        font-weight: 400;
        color: #484848;
        margin-top: 12px !important;
        margin-bottom: 0px !important;
      }

      #S1 .com_cards-campaign {
        padding-top: 0;
      }

      #S1 .ac-li-row,
      #S1 .al-ro-col,
      #S1 .cards-listing {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important;
      }

      #S1 .group-height.row {
        overflow: visible !important;
      }

      .com_cards-listing .cards-listing .single-card__details
      {
        padding-top:0px !important;
      }

      #generated_form_display #S1.card-listing-v2,
      #generated_form_display #S1 .com_cards-campaign {
        overflow: visible !important;
      }

      #S1 .single-card {
        width: 100% !important;
        max-width: 100%;
        float: none !important;
        margin: 0 0 48px 0 !important;
        /* Must be ≥ |negative margin-top on thumbnail| or the image clips above this box */
        padding-top: 76px;
        overflow: visible !important;
      }

      #S1 .single-card:last-child {
        margin-bottom: 28px !important;
      }

      #S1 .single-card__wrapper {
        background: #ffffff !important;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
        padding: 20px 18px 22px !important;
        position: relative;
        overflow: visible;
      }

      #S1 .single-card__thumbnail {
        margin: -76px auto 22px !important;
        text-align: center;
        position: relative;
        z-index: 2;
        min-height: 0 !important;
      }

      #S1 .single-card__thumbnail .d-inline-block {
        display: inline-block !important;
      }

      #S1 .single-card__thumbnail img.card-shadow + img {
        width: 100% !important;
        max-width: 78vw !important;
        height: auto !important;
      }

      #S1 .single-card__details {
        text-align: center;
      }

      #S1 .single-card .card-title {
        text-align: center;
        margin-bottom: 4px;
      }

      #S1 .single-card .card-title p,
      #S1 .single-card .card-title p b {
        font-size: 17px !important;
        font-weight: 500 !important;
        line-height: 1.35;
        color: #484848 !important;
      }

      #S1 .single-card .same-height {
        min-height: 0 !important;
      }

      #S1 .single-card .card-features {
        margin: 0 auto;
        text-align: left;
        max-width: 100%;
        padding: 0 2px;
        font-size: 16px;
      }

      #S1 .single-card .card-features ul {
        margin-top: 10px !important;
      }

      #S1 .single-card .card-features li span {
        font-size: 16px !important;
        line-height: 1.45;
        color: #484848;
      }

      #S1 .single-card .card-buttons {
        margin-top: 18px !important;
        justify-content: center !important;
        min-height: 0 !important;
      }

      #S1 .single-card .card-buttons > a.button {
        display: inline-block;
        background: #ffffff !important;
        color: #005efd !important;
        border: 1px solid #005efd !important;
        border-radius: 4px !important;
        padding: 10px 36px !important;
        min-width: 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }

      #S1 .single-card .card-buttons > a.button:hover,
      #S1 .single-card .card-buttons > a.button:focus {
        background: #f0f7fc !important;
        color: #005efd !important;
        border-color: #005efd !important;
      }
    }

    /* Wizard: segmented progress + sliding 3-label row */
    .cc-wizard-progress-track {
      height: auto;
      min-height: 4px;
      background: transparent;
      border-radius: 0;
      overflow: visible;
    }
    /* Desktop progress: image-based (provided in /img) */
    #generated_form_display .cc-wizard-progress--default.cc-wizard-progress--desktop-image {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    #generated_form_display .cc-wizard-progress--default.cc-wizard-progress--desktop-image img {
      display: block;
      width: 50%;
      height: auto;
      max-width: 100%;
    }
    /* Default wizard (~desktop): use ~half of form width; current segment ≈ one label column (⅓ of bar) */
    #generated_form_display .cc-wizard-progress--default {
      width: 50%;
      max-width: 100%;
      box-sizing: border-box;
    }
    .cc-wizard-progress-segments {
      display: flex;
      align-items: stretch;
      gap: 5px;
      width: 100%;
    }
    .cc-wizard-seg {
      display: block;
      height: 4px;
      border-radius: 2px;
      background: #d5dde3;
    }
    .cc-wizard-seg--done {
      flex: 0 0 28px;
      max-width: 36px;
      background: #3D525D;
    }
    .cc-wizard-seg--current {
      flex: 4 1 0;
      min-width: 56px;
      background: #00C8C3;
    }
    #generated_form_display .cc-wizard-progress--default .cc-wizard-seg--current {
      flex: 0 0 33.333%;
      max-width: 33.333%;
      min-width: 0;
    }
    .cc-wizard-seg--todo {
      flex: 1 1 0;
      min-width: 0;
      background: #d5dde3;
    }
    .cc-wizard-seg--todo-compact {
      flex: 0 0 28px;
      max-width: 36px;
      min-width: 0;
    }
    .cc-wizard-steps--wide {
      gap: 8px 12px !important;
      justify-content: space-between;
      flex-wrap: nowrap !important;
    }
    .cc-wizard-steps--wide .cc-wizard-step-label {
      flex: 1 1 0;
      min-width: 0;
      font-size: 13px;
      line-height: 1.35;
    }
    #generated_form_display .cc-wizard-steps .cc-wizard-step-label.text-muted {
      color: #D0D0D0 !important;
      font-weight: 400;
    }
    #generated_form_display .cc-wizard-steps .cc-wizard-step-label strong {
      color: #484848 !important;
      font-weight: 700;
    }

    @media (min-width: 992px) {
      .cc-wizard-steps--wide {
        gap: 8px 20px !important;
      }
    }

    /* Mobile-only circular wizard (see mock); default wizard unchanged above */
    .cc-wizard-progress--mobile-circular {
      display: none;
      box-sizing: border-box;
      background: #eef1f4;
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 8px;
    }
    .cc-wizard-mobile-circular-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 14px;
    }
    .cc-wizard-ring-wrap {
      position: relative;
      width: 72px;
      height: 72px;
      flex-shrink: 0;
    }
    .cc-wizard-ring-conic {
      position: absolute;
      left: 0;
      top: 0;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      box-sizing: border-box;
      /* conic-gradient: 0deg = 12 o'clock, angles increase clockwise (no rotate) */
    }
    .cc-wizard-ring-hole {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 52px;
      height: 52px;
      margin-left: -26px;
      margin-top: -26px;
      border-radius: 50%;
      background: #eef1f4;
      z-index: 1;
    }
    .cc-wizard-ring-center {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      z-index: 2;
      pointer-events: none;
    }
    .cc-wizard-ring-num {
      color: #3D525D;
    }
    .cc-wizard-ring-sep,
    .cc-wizard-ring-den {
      color: #D0D0D0;
    }
    .cc-wizard-mobile-circular-text {
      min-width: 0;
      flex: 1 1 auto;
    }
    .cc-wizard-mobile-title {
      font-size: 15px;
      font-weight: 700;
      color: #484848;
      line-height: 1.3;
      margin: 0 0 4px 0;
    }
    .cc-wizard-mobile-next {
      font-size: 13px;
      font-weight: 400;
      color: #D0D0D0;
      line-height: 1.35;
      margin: 0;
    }
    @media (max-width: 479px) {
      .cc-wizard-progress--default {
        display: none !important;
      }
      .cc-wizard-progress--mobile-circular {
        display: block !important;
      }
    }

    #S2 #wizard-step-s4 .custom_form_element.text-element input.form-control {
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 1px solid #c9d1d6;
      border-radius: 0;
      box-shadow: none;
      padding-left: 0;
      padding-right: 0;
    }

    #S2 #wizard-step-s4 .custom_form_element.dropdown-element select.form-control {
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 1px solid #c9d1d6;
      border-radius: 0;
      box-shadow: none;
      padding-left: 0;
      padding-right: 24px;
      height: auto;
      background-color: transparent;
      color: #005efd;
      -webkit-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231e6bb8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 2px center;
    }

    /* Declare & Confirm (S5) */
    #S2 .cc-s5-declare .cc-s5-section-title {
      font-size: 16px;
      font-weight: 700;
      color: #484848;
      margin: 24px 0 12px;
    }
    #S2 .cc-s5-declare .cc-s5-section-title:first-of-type {
      margin-top: 8px;
    }
    #S2 .cc-s5-label-with-info {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 8px;
    }
    #S2 .cc-s5-info-icon {
      color: #1e6bb8;
      font-size: 16px;
      line-height: 1;
      cursor: help;
      pointer-events: none;
    }
    #S2 .cc-s5-info-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      vertical-align: middle;
    }
    /* Invisible hover bridge so the cursor can reach the tooltip without closing it */
    #S2 .cc-s5-info-wrap::after {
      content: "";
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 48px;
      z-index: 79;
    }
    #S2 .cc-s5-info-btn {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
      padding: 2px;
      border: 0;
      background: transparent;
      line-height: 0;
      cursor: help;
      border-radius: 50%;
      color: inherit;
    }
    #S2 .cc-s5-info-btn:focus {
      outline: 2px solid rgba(30, 107, 184, 0.45);
      outline-offset: 2px;
    }
    #S2 .cc-s5-info-btn:focus:not(:focus-visible) {
      outline: none;
    }
    #S2 .cc-s5-info-btn:hover {
      background: #f0f7fc;
    }
    #S2 .cc-s5-info-tooltip {
      position: absolute;
      left: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%);
      z-index: 80;
      box-sizing: border-box;
      width: auto;
      min-width: max-content;
      max-width: min(320px, calc(100vw - 24px));
      padding: 12px 14px;
      margin: 0;
      background: #f4f6f8;
      color: #484848;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.45;
      text-align: left;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
      border-radius: 10px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.18s ease, visibility 0.18s ease;
    }
    @media (max-width: 767px) {
      #S2 .cc-s5-info-tooltip {
        left: auto;
        right: 0;
        transform: translateY(-50%);
        max-width: calc(100vw - 20px);
      }
    }

    /* Narrow mobile: keep label + info icon on one line and keep tooltip in viewport */
    @media (max-width: 479px) {
      #S2 .cc-s5-declare-question.cc-s5-label-with-info {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 6px;
      }
      #S2 .cc-s5-declare-question.cc-s5-label-with-info > span:first-child {
        flex: 1 1 auto;
        min-width: 0;
      }
      #S2 .cc-s5-info-wrap {
        flex: 0 0 auto;
        margin-top: 1px;
      }
      #S2 .cc-s5-info-tooltip {
        left: auto !important;
        right: 0 !important;
        top: calc(100% + 8px) !important;
        transform: none !important;
        width: min(320px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 0 !important;
      }
      #S2 .cc-s5-info-wrap::after {
        left: 0;
        right: auto;
        top: 100%;
        transform: none;
        width: 100%;
        height: 10px;
      }
    }
    @media (max-width: 425px) {
      /* On very small screens, show tooltip to the right of info icon */
      #S2 .cc-s5-info-tooltip {
        left: calc(100% + 8px) !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: min(260px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
      }
      #S2 .cc-s5-info-wrap::after {
        left: 100% !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 12px !important;
        height: 48px !important;
      }
    }
    @media (min-width: 388px) and (max-width: 424px) {
      /* Targeted mobile fix: keep tooltip on the left side of info button */
      #S2 .cc-s5-info-tooltip {
        left: auto !important;
        right: calc(100% + 8px) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: min(260px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
      }
      #S2 .cc-s5-info-wrap::after {
        left: auto !important;
        right: 100% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 12px !important;
        height: 48px !important;
      }
    }
    #S2 .cc-s5-info-wrap:hover .cc-s5-info-tooltip,
    #S2 .cc-s5-info-wrap:focus-within .cc-s5-info-tooltip {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    #S2 .cc-s5-instruction {
      font-size: 18px;
      color: #484848;
    }
    #S2 .cc-s5-marketing-text {
      font-size: 18px;
      line-height: 1.55;
      color: #484848;
      margin-bottom: 16px;
    }
    @media (max-width: 767px) {
      #S2 .cc-s5-instruction,
      #S2 .cc-s5-marketing-text {
        font-size: 16px;
      }
    }

    /* Marketing consent: square checkbox (mock); only one active via JS. Unchecked = light border; checked = slate tile + white tick */
    #generated_form_display
      .cc-s5-marketing-consent-checkboxes.radio-inline.salutation-radio
      .radio-custom
      input[type="checkbox"] {
      position: absolute;
      left: 0;
      top: 0;
      margin: 0;
      width: 20px;
      height: 20px;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
      -webkit-appearance: none;
      appearance: none;
    }

    #generated_form_display
      .cc-s5-marketing-consent-checkboxes.radio-inline.salutation-radio
      .radio-custom
      > span {
      border-radius: 4px !important;
      width: 20px !important;
      height: 20px !important;
      border: 1px solid #b3bcc4 !important;
      background: #fff !important;
      box-shadow: 0 1px 3px rgba(54, 59, 64, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
      box-sizing: border-box !important;
    }

    #generated_form_display
      .cc-s5-marketing-consent-checkboxes.radio-inline.salutation-radio
      .radio-custom
      > span:before {
      content: none !important;
      display: none !important;
    }

    #generated_form_display
      .cc-s5-marketing-consent-checkboxes.radio-inline.salutation-radio
      .radio-custom
      input:checked
      ~ span {
      border: 1px solid #4a5c68 !important;
      background: #5a6e7b !important;
      box-shadow: 0 1px 5px rgba(54, 59, 64, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
    }

    #generated_form_display
      .cc-s5-marketing-consent-checkboxes.radio-inline.salutation-radio
      .radio-custom
      input:checked
      ~ span::after {
      content: "" !important;
      display: block !important;
      position: absolute;
      left: 7px;
      top: 2px;
      width: 5px;
      height: 11px;
      border: solid #fff;
      border-width: 0 3px 3px 0;
      transform: rotate(45deg);
      box-sizing: border-box;
    }

    @media (max-width: 767px) {
      #generated_form_display
        .cc-s5-marketing-consent-checkboxes.radio-inline.salutation-radio
        .radio-custom
        p.credit-card-statement-no-text {
        line-height: 1.55 !important;
      }
    }

    
    #S2 .cc-s5-collection-residential-footnote {
      font-size: 18px;
      line-height: 1.5;
      color: #484848;
      margin-top: 4px;
      margin-bottom: 8px;
      max-width: 100%;
    }
    #S2 .cc-s5-collection-residential-footnote__p {
      font-size: inherit;
      line-height: inherit;
      color: inherit;
      margin: 0;
    }

    /* Card mailing address — State / Preferred Branch (main form only) */
    #S2 #collection-branch-state-container,
    #S2 #collection-preferred-branch-container {
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      column-gap: 15px;
      row-gap: 6px;
      align-items: start;
      margin-bottom: 20px !important;
    }

    #S2 #collection-branch-state-container > label,
    #S2 #collection-preferred-branch-container > label {
      grid-column: 1;
      grid-row: 1;
      margin-right: 0 !important;
      padding-right: 0 !important;
      white-space: nowrap;
    }

    #S2 #collection-preferred-branch-container > label {
      white-space: normal;
      max-width: min(280px, 42vw);
      line-height: 1.35;
    }

    #S2 #collection-branch-state-container > .dropdown__theme,
    #S2 #collection-preferred-branch-container > .dropdown__theme {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      width: 100%;
    }

    #S2 #collection-branch-state-container > .help-block,
    #S2 #collection-preferred-branch-container > .help-block,
    #S2 #collection-branch-state-container > small.help-block,
    #S2 #collection-preferred-branch-container > small.help-block {
      grid-column: 1 / -1;
      grid-row: 2;
      width: 100% !important;
      max-width: 100%;
      margin-top: 0 !important;
      padding-top: 2px;
      position: static !important;
      color: #EF473A !important;
      font-size: 14px !important;
      line-height: 1.35;
    }

    #S2 #collection-branch-state-container .select2-container,
    #S2 #collection-preferred-branch-container .select2-container {
      width: 100% !important;
      max-width: 100%;
    }

    @media (max-width: 767px) {
      #S2 #collection-branch-state-container,
      #S2 #collection-preferred-branch-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        row-gap: 8px;
      }

      #S2 #collection-branch-state-container > label,
      #S2 #collection-preferred-branch-container > label {
        grid-column: 1;
        grid-row: 1;
      }

      #S2 #collection-branch-state-container > .dropdown__theme,
      #S2 #collection-preferred-branch-container > .dropdown__theme {
        grid-column: 1;
        grid-row: 2;
      }

      #S2 #collection-branch-state-container > .help-block,
      #S2 #collection-preferred-branch-container > .help-block,
      #S2 #collection-branch-state-container > small.help-block,
      #S2 #collection-preferred-branch-container > small.help-block {
        grid-column: 1;
        grid-row: 3 !important;
      }

      #S2 #collection-preferred-branch-container > label {
        max-width: none;
      }
    }

    .cc-ekyc-modal {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.8);
      padding: 24px;
    }
    .cc-ekyc-modal.cc-ekyc-modal--visible {
      display: flex;
    }
    .cc-ekyc-modal__content {
      position: relative;
      width: min(960px, 100%);
      max-height: 90vh;
    }
    .cc-ekyc-modal__img {
      width: 100%;
      max-height: 90vh;
      object-fit: contain;
      display: block;
      border-radius: 8px;
      background: #fff;
    }
    .cc-ekyc-modal__close {
      position: absolute;
      top: -14px;
      right: -14px;
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 999px;
      background: #fff;
      color: #484848;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }
    @media (max-width: 767px) {
      #S2 .cc-s5-collection-residential-footnote {
        font-size: 16px;
      }
      .cc-ekyc-modal {
        padding: 16px;
      }
      .cc-ekyc-modal__close {
        top: -10px;
        right: -10px;
      }
    }

    /* S5 Declarations: question + Yes/No one row; follow-up underline inputs; dividers */
    #S2 .cc-s5-declare-blocks-group {
      margin-bottom: 8px;
    }
    #S2 .cc-s5-declare-block {
      padding-bottom: 0px;
      margin-bottom: 0px;
      overflow: visible;
    }
    #S2 .cc-s5-declare-blocks-group .cc-s5-declare-block:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    #S2 .cc-s5-declare-question-row {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px 20px;
      width: 100%;
    }
    #S2 .cc-s5-declare-question {
      margin: 0;
      flex: 1 1 auto;
      min-width: min(100%, 220px);
      font-size: 18px;
      font-weight: 400;
      color: #484848;
      line-height: 1.45;
    }
    @media (max-width: 767px) {
      #S2 .cc-s5-declare-question {
        font-size: 16px;
      }
      #S2 .cc-s5-declare-radios {
        flex: 0 0 100%;
        width: 100%;
        margin-top: 4px;
      }
      #S2 .cc-s5-declare-radios.radio-inline.salutation-radio {
        justify-content: flex-start;
      }
    }
    #S2 .cc-s5-declare-question.cc-s5-label-with-info {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 8px;
    }
    #S2 .cc-s5-declare-radios {
      flex: 0 0 auto;
      margin: 0;
    }
    #S2 .cc-s5-declare-radios.radio-inline.salutation-radio {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 14px 18px;
    }
    #S2 .cc-s5-declare-followup {
      width: 100%;
      margin-top: 16px;
    }
    #S2 .cc-s5-declare-underline-input .form-control {
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 1px solid #c9d1d6;
      border-radius: 0;
      box-shadow: none;
      padding-left: 0;
      background: transparent;
    }
    #S2 .cc-s5-declare-underline-input label {
      font-size: 18px;
      font-weight: 400;
      color: #484848;
      margin-bottom: 6px;
    }
    #S2 .cc-s5-declare-underline-input .form-control::placeholder {
      color: #484848;
      opacity: 0.55;
    }

    /* Referral + Agent: shared label column so Yes / No align vertically across both rows */
    #S2 .s2-yes-no-inline-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      column-gap: 20px;
      row-gap: 10px;
      width: 100%;
    }
    #S2 .s2-yes-no-inline-row > label {
      flex: 0 0 340px;
      max-width: 100%;
      margin: 0;
      padding-right: 8px;
      box-sizing: border-box;
      font-size: 18px;
      font-weight: 400;
      line-height: 1.45;
      color: #484848;
    }
    #S2 .s2-yes-no-inline-row .s2-yes-no-radios.radio-inline.salutation-radio {
      display: flex !important;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 14px 28px;
      flex: 0 0 auto;
      margin: 0 !important;
    }
    @media (min-width: 768px) and (max-width: 991px) {
      #S2 .s2-yes-no-inline-row > label {
        flex: 0 0 min(340px, 52%);
      }
    }

    /* Salutation: 2-column grid on mobile only (desktop unchanged) */
    @media screen and (max-width: 767px) {
      #S2 .s2-yes-no-inline-row > label {
        font-size: 16px !important;
      }
      #S2 .s2-salutation-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
      }
      #S2 .s2-salutation-row > #salutation {
        margin: 0;
        font-size: 16px;
        line-height: 34px;
        font-weight: 400;
        color: #484848;
      }
      #S2 .cc-salutation-mobile-2col.salutation-radio,
      #S2 .cc-s6-edit-grid .cc-salutation-mobile-2col.salutation-radio {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(16px, 5vw, 36px);
        row-gap: 12px;
        width: 100%;
        max-width: 100%;
        flex-wrap: unset !important;
        align-items: center;
        margin: 0;
      }
      #S2 .cc-salutation-mobile-2col .radio-inline.radio-custom {
        margin: 0 !important;
      }

      /* Referral Code + Agent: question on first line, Yes/No radios on next line (mobile only) */
      #S2 .s2-yes-no-inline-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-content: flex-start;
        gap: 10px 0;
        width: 100%;
      }
      #S2 .s2-yes-no-inline-row > label {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        flex: none;
      }
      #S2 .s2-yes-no-inline-row .s2-yes-no-radios {
        align-self: flex-start;
        width: auto;
        max-width: 100%;
      }
    }

    /* Review & Sign (S6) */
    #S2 #wizard-step-s6 .cc-s6-review {
      max-width: 100%;
    }
    #S2 #wizard-step-s6 .cc-s6-title {
      font-size: 24px;
      font-weight: 400;
      color: #484848;
      margin: 8px 0 8px;
    }
    @media (max-width: 767px) {
      #S2 .cc-s6-title {
        color: #484848;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 34px;
      }
    }
    #S2 #wizard-step-s6 .cc-s6-subtitle {
      font-size: 18px;
      color: #484848;
      margin-bottom: 24px;
      line-height: 1.5;
    }
    #S2 .cc-s6-accordion {
      border-radius: 4px;
      margin-bottom: 12px;
      overflow: hidden;
      background: #fff;
    }
    #S2 .cc-s6-accordion__bar {
      display: flex;
      align-items: center;
      gap: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 4px 8px 4px 16px;
      background: #3D525D;
      color: #fff;
    }
    #S2 .cc-s6-accordion__left {
      display: flex;
      align-items: center;
      flex: 1 1 auto;
      min-width: 0;
      gap: 8px;
    }
    #S2 .cc-s6-accordion__head-part {
      display: flex;
      align-items: center;
      min-width: 0;
      padding: 10px 0;
      margin: 0;
      background: transparent;
      border: 0;
      color: inherit;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      outline: none;
      box-shadow: none;
      -webkit-tap-highlight-color: transparent;
    }
    #S2 .cc-s6-accordion__head-part:focus,
    #S2 .cc-s6-accordion__head-part:focus-visible,
    #S2 .cc-s6-accordion__head-part:active {
      outline: none !important;
      box-shadow: none !important;
    }
    #S2 .cc-s6-accordion__head-part:hover,
    #S2 .cc-s6-accordion__caret:hover {
      filter: brightness(1.06);
    }
    #S2 .cc-s6-accordion__caret {
      flex: 0 0 auto;
      padding: 10px 12px;
      margin-left: auto;
      background: transparent;
      border: 0;
      color: inherit;
      cursor: pointer;
      line-height: 1;
      outline: none;
      box-shadow: none;
      -webkit-tap-highlight-color: transparent;
    }
    #S2 .cc-s6-accordion__caret:focus,
    #S2 .cc-s6-accordion__caret:focus-visible,
    #S2 .cc-s6-accordion__caret:active {
      outline: none !important;
      box-shadow: none !important;
    }
    #S2 .cc-s6-accordion__title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    @media (max-width: 767px) {
      #S2 .cc-s6-accordion__head-part {
        flex: 1 1 auto;
        width: 100%;
        align-items: flex-start;
      }
      #S2 .cc-s6-accordion__title {
        display: block;
        width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.35;
      }
    }
    #S2 .cc-s6-accordion__edit {
      flex: 0 0 auto;
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
      padding: 10px 6px;
      border: 0;
      background: transparent;
      color: #fff;
      cursor: pointer;
      border-radius: 4px;
      line-height: 1;
      outline: none;
      box-shadow: none;
      -webkit-tap-highlight-color: transparent;
    }
    #S2 .cc-s6-accordion__edit:hover,
    #S2 .cc-s6-accordion__edit:focus-visible {
      outline: 2px solid rgba(255, 255, 255, 0.85);
      outline-offset: 2px;
    }
    #S2 .cc-s6-accordion__edit:active {
      outline: none !important;
      box-shadow: none !important;
    }
    #S2 .cc-s6-accordion__chevron-icon {
      font-size: 16px;
      color: #fff;
      line-height: 1;
      pointer-events: none;
    }
    #S2 .cc-s6-accordion__panel {
      display: none;
      background: #F9F9FB;
      padding: 16px 18px 20px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    #S2 .cc-s6-accordion--open .cc-s6-accordion__panel {
      display: block;
    }
    #S2 .cc-s6-review-label {
      font-size: 18px;
      color: #484848;
      margin-bottom: 4px;
    }
    #S2 .cc-s6-review-value {
      font-size: 18px;
      color: #484848;
      padding-bottom: 6px;
      /* border-bottom: 1px solid #c9d1d6; */
      word-break: break-word;
    }
    @media (max-width: 767px) {
      #S2 .cc-s6-review-label,
      #S2 .cc-s6-review-value {
        font-size: 16px;
      }
    }
    #S2 .cc-s6-review-answer {
      font-weight: 600;
    }
    #S2 .cc-s6-marketing-review {
      display: flex !important;
      align-items: center;
      flex-wrap: nowrap !important;
      gap: 16px;
    }
    #S2 .cc-s6-marketing-review .radio-custom {
      display: inline-flex !important;
      align-items: center;
      width: auto !important;
      margin: 0 !important;
    }
    #S2 .cc-s6-credit-card-statement-review {
      display: flex !important;
      align-items: flex-start;
      flex-wrap: wrap !important;
      gap: 16px;
    }
    #S2 .cc-s6-credit-card-statement-review .radio-custom {
      display: inline-flex !important;
      align-items: flex-start;
      width: auto !important;
      margin: 0 !important;
    }
    #S2 .cc-s6-edit-grid .form-group {
      margin-bottom: 14px;
    }
    #S2 .cc-s6-edit-grid .form-control {
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 1px solid #c9d1d6;
      border-radius: 0;
      box-shadow: none;
      padding-left: 0;
      background: transparent;
    }
    #S2 .cc-s6-edit-grid .radio-inline.salutation-radio {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 18px;
    }
    #S2 .cc-s6-edit-grid .radio-inline.salutation-radio .radio-custom {
      display: inline-flex;
      align-items: center;
      width: auto;
      margin: 0;
    }
    #S2 .cc-s6-edit-actions {
      margin-top: 6px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    /* Review inline edit: Cancel / Update (teal per mock) */
    #S2 .cc-s6-edit-actions .cc-s6-btn-cancel {
      -webkit-appearance: none;
      appearance: none;
      padding: 10px 22px;
      border-radius: 4px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      background: #fff;
      color: #005efd;
      border: 1px solid #005efd;
      box-shadow: none;
      text-decoration: none;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    #S2 .cc-s6-edit-actions .cc-s6-btn-cancel:hover,
    #S2 .cc-s6-edit-actions .cc-s6-btn-cancel:focus-visible {
      background: #f0f7fc;
      color: #005efd;
      border-color: #005efd;
      outline: none;
    }
    #S2 .cc-s6-edit-actions .cc-s6-btn-update {
      -webkit-appearance: none;
      appearance: none;
      padding: 10px 22px;
      border-radius: 4px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      background: #00c8c1;
      color: #fff;
      border: 1px solid #00c8c1;
      box-shadow: none;
      text-decoration: none;
    }
    #S2 .cc-s6-edit-actions .cc-s6-btn-update:hover,
    #S2 .cc-s6-edit-actions .cc-s6-btn-update:focus-visible {
      background: #00b5af;
      border-color: #00b5af;
      color: #fff;
      outline: none;
    }
    #S2 .cc-s6-edit-error {
      color: #c62828;
      font-size: 13px;
      margin: 6px 0 10px;
    }
    #S2 .cc-s6-sign {
      margin-top: 28px;
      padding-top: 8px;
    }
    #S2 .cc-s6-sign__title {
      font-size: 24px;
      font-weight: 700;
      color: #484848;
      margin-bottom: 8px;
    }
    #S2 .cc-s6-sign__hint {
      font-size: 18px;
      color: #484848;
      margin-bottom: 16px;
      line-height: 1.45;
    }
    @media (max-width: 767px) {
      #S2 .cc-s6-sign__hint {
        font-size: 16px;
      }
    }
    #S2 .cc-s6-sign__q {
      font-size: 18px;
      font-weight: 600;
      color: #484848;
      margin-bottom: 10px;
    }
    #S2 .cc-s6-sign .s2-yes-no-radios {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px 10px;
      width: auto;
      max-width: 100%;
    }
    #S2 .cc-s6-sign .cc-s6-sign-method-radios {
      display: inline-flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: center;
      gap: 12px;
      width: auto;
      max-width: 100%;
    }
    #S2 .cc-s6-sign .cc-s6-sign-method-radios .radio-custom {
      display: inline-flex;
      align-items: center;
      margin: 0 !important;
    }
    #S2 .cc-s6-sign .cc-s6-sign-method-radios .radio-custom p {
      margin: 0;
    }
    @media (max-width: 767px) {
      #S2 .cc-s6-sign .cc-s6-sign-method-radios {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start;
        gap: 8px;
      }
    }
    #S2 .cc-s6-sign .s2-yes-no-radios .radio-custom {
      margin-bottom: 0;
      flex: 0 0 auto;
    }
    #S2 .cc-s6-sign__pad-instruction {
      color: #484848;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      margin: 12px 0 10px;
    }
    @media (max-width: 767px) {
      #S2 .cc-s6-sign__pad-instruction {
        color: #484848;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }
    #S2 .cc-s6-sig-option {
      margin-right: 20px;
      margin-bottom: 8px;
    }
    #S2 .cc-s6-sig-option__label {
      font-size: 18px;
      font-weight: 400;
      color: #484848;
      margin-bottom: 0;
    }    
    #S2 .cc-s6-upload-zone {
      margin-top: 12px;
      max-width: 100%;
      padding: 36px 20px;
      border: 2px dashed #b3bcc4;
      border-radius: 6px;
      text-align: center;
      background: #fafbfc;
      cursor: pointer;
    }
    @media (max-width: 767px) {
      #S2 .cc-s6-upload-zone {
        width: 100%;
      }
    }
    #S2 .cc-s6-upload-zone:hover {
      border-color: #005efd;
      background: #f0f7fc;
    }
    #S2 .cc-s6-upload-zone__icon {
      color: #00C8C3;
      font-size: 28px;
      margin-bottom: 10px;
    }
    #S2 .cc-s6-upload-zone__text {
      font-size: 15px;
      color: #484848;
    }
    #S2 .cc-s6-upload-note {
      font-size: 14px;
      color: #ADADAD !important;
      margin-top: 10px;
    }
    @media (max-width: 767px) {
      #S2 .cc-s6-upload-note {
        font-size: 12px;
      }
    }
    #S2 #wizard-step-s7 .cc-s7-file-input,
    #S2 #wizard-step-s6 .cc-s7-file-input {
      position: absolute;
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      z-index: -1;
    }
    #S2 #wizard-step-s7 .cc-s7-file-list {
      margin-top: 8px;
      min-height: 48px;
    }
    #S2 #wizard-step-s7 .cc-s7-file-list--cols {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 24px;
    }
    #S2 #wizard-step-s7 .cc-s7-file-item,
    #S2 #wizard-step-s6 .cc-s7-file-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      font-size: 15px;
      color: #484848;
      flex: 1 1 calc(50% - 12px);
      min-width: 140px;
      box-sizing: border-box;
    }
    #S2 #wizard-step-s6 .cc-s7-file-item {
      flex: 1 1 100%;
      max-width: 100%;
    }
    #S2 #wizard-step-s7 .cc-s7-file-item__icon,
    #S2 #wizard-step-s6 .cc-s7-file-item__icon {
      color: #00c8c3;
      flex: 0 0 auto;
    }
    #S2 #wizard-step-s7 .cc-s7-file-item__name,
    #S2 #wizard-step-s6 .cc-s7-file-item__name {
      flex: 1 1 auto;
      min-width: 0;
      word-break: break-word;
    }
    #S2 #wizard-step-s7 .cc-s7-file-item__rm,
    #S2 #wizard-step-s6 .cc-s7-file-item__rm {
      flex: 0 0 auto;
      -webkit-appearance: none;
      appearance: none;
      border: 0;
      background: transparent;
      color: #6b7780;
      cursor: pointer;
      padding: 6px;
      line-height: 1;
      font-size: 18px;
    }
    #S2 #wizard-step-s7 .cc-s7-file-item__rm:hover,
    #S2 #wizard-step-s7 .cc-s7-file-item__rm:focus-visible,
    #S2 #wizard-step-s6 .cc-s7-file-item__rm:hover,
    #S2 #wizard-step-s6 .cc-s7-file-item__rm:focus-visible {
      color: #005efd;
      background: #f0f7fc;
      border-radius: 4px;
      outline: none;
    }
    /* Match Bootstrap Validator field errors (help-block): same type scale and red as #generated_form_display */
    #S2 #wizard-step-s7 .cc-s7-section-error,
    #S2 #wizard-step-s7 .cc-s7-global-error {
      margin: 8px 0 0 0;
      padding: 0;
      display: none;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      color:#EF473A !important;
    }
    #S2 #wizard-step-s7 .cc-s7-docs-required {
      margin: 0 0 4px 0;
      padding: 0;
      color: #484848;
      font-size: 14px;
      line-height: 1.5;
    }
    #S2 #wizard-step-s7 .cc-s7-bullets {
      margin: 0 0 12px 1.1em;
      padding: 0;
      color: #484848;
      font-size: 14px;
      line-height: 1.5;
    }
    #S2 #wizard-step-s7 .cc-s7-browse {
      color: #005efd;
      text-decoration: underline;
      cursor: pointer;
      border-radius: 2px;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    #S2 #wizard-step-s7 .cc-s7-browse:hover,
    #S2 #wizard-step-s7 .cc-s7-browse:focus-visible {
      background: #f0f7fc;
      color: #005efd;
      outline: none;
    }
    #S2 #wizard-step-s7 .cc-s7-mobile-mykad-actions {
      display: none;
    }
    @media (max-width: 767px) {
      #S2 #wizard-step-s7 .cc-s7-mobile-mykad-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 8px 0 10px;
      }
      #S2 #wizard-step-s7 .cc-s7-mobile-mykad-action {
        width: 128px;
        max-width: 42vw;
        min-height: 118px;
        border: 2px dashed #d8dde3;
        border-radius: 2px;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
        color: #484848;
        font-size: 12px;
        line-height: 1.35;
        padding: 10px 8px;
        cursor: pointer;
      }
      #S2 #wizard-step-s7 .cc-s7-mobile-mykad-action i,
      #S2 #wizard-step-s7 .cc-s7-mobile-mykad-action img {
        width: 42px;
        height: 42px;
        color: #00c8c3;
      }
      #S2 #wizard-step-s7 .cc-s7-mobile-mykad-action[data-cc-s7-action="mykad-upload"] i {
        font-size: 34px;
        line-height: 1;
      }
      #S2 #wizard-step-s7 .cc-s7-mobile-mykad-action:hover,
      #S2 #wizard-step-s7 .cc-s7-mobile-mykad-action:focus-visible {
        background: #f0f7fc;
        border-color: #005efd;
        outline: none;
      }
      #S2 #wizard-step-s7 .cc-s7-mobile-mykad-or {
        color: #484848;
        font-size: 12px;
        font-weight: 400;
        flex: 0 0 auto;
      }
      #S2 #wizard-step-s7 [data-cc-s7-zone="mykad"] {
        display: none;
      }
    }
    #S2 #wizard-step-s7 .cc-s7-upload-zone.cc-s7-upload-zone--drag {
      border-color: #00c8c3;
      background: #f0fafb;
    }
    #S2 .cc-s6-sig-draw-panel {
      margin-top: 12px;
      min-height: 160px;
      border: 1px solid #c9d1d6;
      border-radius: 6px;
      background: #fff;
      display: inline-block;
      color: #6b7780;
      font-size: 14px;
      padding: 12px;
      width: max-content;
      max-width: 100%;
      margin-bottom: 28px;
    }
    @media (max-width: 767px) {
      #S2 .cc-s6-sig-draw-panel {
        display: block;
        width: 100%;
      }
    }
    #S2 #signature-pad {
      border: 1px solid #ccc;
      width: 600px;
      height: 200px;
      display: block;
      touch-action: none;
    }
    @media (max-width: 1024px) {
      #S2 #signature-pad {
        width: 100%;
      }
    }
    #S2 .cc-s6-sig-clear {
      margin-top: 8px;
    }
    #S2 .cc-s6-sig-method-error {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      color: #EF473A !important;
      margin: 0;
      display: none;
      min-height: 0;
    }
    #S2 .cc-s6-sig-method-error-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 16px;
      align-items: start;
      margin-top: 8px;
      max-width: 100%;
    }
    @media (max-width: 767px) {
      #S2 .cc-s6-sig-method-error-row {
        grid-template-columns: 1fr;
      }
    }
    #S2 .cc-s6-sign-method-radios .radio-inline.radio-custom.cc-s6-sig-method-label--error {
      border-radius: 4px;
      outline: 2px solid #EF473A !important;
      outline-offset: 2px;
    }
    #S2 .cc-s6-sign-method-radios .radio-inline.radio-custom.cc-s6-sig-method-label--error p {
      color: #EF473A;
    }
    #S2 .cc-s6-upload-zone.cc-s6-upload-zone--drag {
      border-color: #00c8c3;
      background: #f0fafb;
    }

    #S2 .cc-income-ringgit,
    #S2 .cc-office-number {
      border-bottom: 1px solid #c9d1d6;
      padding-bottom: 2px;
    }

    #S2 .cc-income-ringgit .form-control,
    #S2 .cc-office-number .form-control {
      border: none !important;
      box-shadow: none !important;
      padding-left: 8px;
    }

    #S2 .cc-income-prefix,
    #S2 .cc-office-prefix {
      font-size: 18px;
      color: #484848;
      flex-shrink: 0;
    }
    #S2 #race-container .cc-race-inline {
      display: flex;
      gap: 24px;
      align-items: flex-end;
    }
    #S2 #race-container .cc-race-inline__race,
    #S2 #race-container .cc-race-inline__other {
      flex: 1 1 0;
      min-width: 0;
    }
    #S2 #race-container .cc-race-inline__other {
      display: none;
    }
    /* Keep "Other race" input underline neutral (no red line) */
    #S2 #race-container.has-error #race_other.form-control,
    #S2 #race_other.form-control {
      border-color: #c9d1d6 !important;
      box-shadow: none !important;
    }
    @media (max-width: 767px) {
      #S2 #race-container .cc-race-inline {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }
      #S2 #race-container .cc-race-inline__race,
      #S2 #race-container .cc-race-inline__other {
        flex: none;
        width: 100%;
      }
    }

    /* === Unified form text: #484848 (overrides earlier grays in this file). Blue only where noted below. === */
    #generated_form_display,
    #generated_form_display #form-title,
    #generated_form_display #form-subtitle-s1,
    #generated_form_display .custom__heading-title,
    #generated_form_display label,
    #generated_form_display .form-group,
    #generated_form_display p,
    #generated_form_display li,
    #generated_form_display .alert,
    #generated_form_display .static_data_field,
    #generated_form_display .declaration-title,
    #generated_form_display .agreement-2-label,
    #generated_form_display .agreement-2-label li,
    #generated_form_display h3,
    #generated_form_display h4,
    #generated_form_display h5,
    #generated_form_display h6,
    #generated_form_display .cc-wizard-steps,
    #generated_form_display .cc-wizard-steps li,
    #generated_form_display .text-muted,
    #S1 .card-title,
    #S1 .card-title p,
    #S1 .card-title p b,
    #S1 .card-features,
    #S1 .card-features li span,
    #S2 .cc-s5-declare .cc-s5-section-title,
    #S2 .cc-s5-instruction,
    #S2 .cc-s5-marketing-text,
    #S2 .cc-s5-collection-residential-footnote,
    #S2 .cc-s5-declare-question,
    #S2 .cc-s5-info-tooltip,
    #S2 .cc-s5-declare-underline-input label,
    #S2 #salutation.s2-salutation-main-label,
    #S2 .cc-email-domain-btn,
    #S2 .cc-income-prefix,
    #S2 .cc-office-prefix,
    #S2 .salutation-radio p,
    #S2 .radio-custom p,
    #S2 input.form-control,
    #S2 textarea.form-control,
    #S2 .selected-card-title-display,
    #S2 .s2-apply-intro h4.bold,
    #generated_form_display .custom-label,
    #generated_form_display .custom_form_element label {
      color: #484848 !important;
    }

    #generated_form_display input.form-control::placeholder,
    #generated_form_display textarea.form-control::placeholder,
    #S2 .form-control::placeholder,
    #S2 .cc-s5-declare-underline-input .form-control::placeholder {
      color: #484848 !important;
      opacity: 0.55;
    }

    /* Home / Office / Mobile number: overlay hint must match ::placeholder (not solid #484848 from global rules) */
    #generated_form_display #S2 .cc-mobile-inline .cc-mobile-inline__hint,
    #S2 .cc-mobile-inline .cc-mobile-inline__hint {
      color: rgba(72, 72, 72, 0.55) !important;
      -webkit-text-fill-color: rgba(72, 72, 72, 0.55);
      opacity: 1 !important;
      font-weight: 400 !important;
    }

    /* Form header: title + session countdown (mock: teal time, grey label, right-aligned) */
    #generated_form_display .cc-form-header-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px 20px;
    }
    #generated_form_display .cc-form-header-row__titles {
      flex: 1 1 200px;
      min-width: 0;
    }
    #generated_form_display .cc-session-timer {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text-align: right;
      margin-left: auto;
    }
    #generated_form_display .cc-session-timer__label {
      display: block;
      font-size: 13px;
      line-height: 1.3;
      font-weight: 400;
      color: #8a9399 !important;
      margin-bottom: 4px;
    }
    #generated_form_display .cc-session-timer__value {
      display: block;
      font-size: 32px;
      line-height: 1.1;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #00b2a9 !important;
      font-variant-numeric: tabular-nums;
    }
    @media (max-width: 767.98px) {
      #generated_form_display .cc-session-timer__value {
        font-size: 24px;
      }
      #generated_form_display .cc-session-timer__label {
        font-size: 12px;
      }
      #S2 .custom_form_element.dropdown-element select.form-control {
        font-weight: 400 !important;
      }
    }

    /* Keep agreement links dark across all states/screen sizes */
    #generated_form_display a.cc-agreement-doc-link,
    #generated_form_display a.cc-agreement-doc-link:link,
    #generated_form_display a.cc-agreement-doc-link:visited,
    #generated_form_display a.cc-agreement-doc-link:hover,
    #generated_form_display a.cc-agreement-doc-link:focus,
    #generated_form_display a.cc-agreement-doc-link:active,
    #generated_form_display .cc-agreement-doc-link {
      color: #484848 !important;
    }
    /* #generated_form_display a[href].button.button--secondary.button--link,
    #S1 .single-card .card-buttons > a.button,
    #S2 a.button.button--secondary.button--link {
      color: #005efd !important;
    } */
    #S2 a.wizard-btn.button--link,
    #S2 button.wizard-btn.button--link {
      color: #005efd !important;
    }
    /* Back: royal blue outline; hover/active/focus filled */
    #generated_form_display #S2 button.wizard-btn.button.button--secondary.button--link[id^="back-to-"]:not(:disabled) {
      display: inline-block;
      background: var(--white) !important;
      color: var(--royal-blue-100) !important;
      border: solid 2px var(--royal-blue-100) !important;
      border-radius: 4px !important;
      padding: 10px 36px !important;
      min-width: 0 !important;
      font-size: 15px !important;
      font-weight: 600 !important;
      text-decoration: none !important;
      box-shadow: none !important;
      box-sizing: border-box;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    #generated_form_display #S2 button.wizard-btn.button.button--secondary.button--link[id^="back-to-"]:not(:disabled):hover,
    #generated_form_display #S2 button.wizard-btn.button.button--secondary.button--link[id^="back-to-"]:not(:disabled):active,
    #generated_form_display #S2 button.wizard-btn.button.button--secondary.button--link[id^="back-to-"]:not(:disabled):focus,
    #generated_form_display #S2 button.wizard-btn.button.button--secondary.button--link[id^="back-to-"]:not(:disabled):focus-visible {
      background-color: var(--royal-blue-100) !important;
      color: var(--white) !important;
      border-color: var(--royal-blue-100) !important;
      outline: none;
    }
    /* S2 outline CTAs: same base + hover as S1 card listing "Apply now" (not Back) */
    #generated_form_display #S2 button.wizard-btn.button.button--secondary.button--link:not(:disabled):not([id^="back-to-"]),
    #generated_form_display #S2 .button.button--secondary.button--link.cc-s6-sig-clear {
      display: inline-block;
      background: #ffffff !important;
      color: #005efd !important;
      border: 1px solid #005efd !important;
      border-radius: 4px !important;
      padding: 10px 36px !important;
      min-width: 0 !important;
      font-size: 15px !important;
      font-weight: 600 !important;
      text-decoration: none !important;
      box-shadow: none !important;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    #generated_form_display #S2 button.wizard-btn.button.button--secondary.button--link:not(:disabled):not([id^="back-to-"]):hover,
    #generated_form_display #S2 button.wizard-btn.button.button--secondary.button--link:not(:disabled):not([id^="back-to-"]):focus,
    #generated_form_display #S2 button.wizard-btn.button.button--secondary.button--link:not(:disabled):not([id^="back-to-"]):focus-visible,
    #generated_form_display #S2 .button.button--secondary.button--link.cc-s6-sig-clear:hover,
    #generated_form_display #S2 .button.button--secondary.button--link.cc-s6-sig-clear:focus,
    #generated_form_display #S2 .button.button--secondary.button--link.cc-s6-sig-clear:focus-visible {
      background: #f0f7fc !important;
      color: #005efd !important;
      border-color: #005efd !important;
      outline: none;
    }
    #generated_form_display #S2 .finish-button.button--primary.button--red2:hover:not(:disabled),
    #generated_form_display #S2 .finish-button.button--primary.button--red2:focus-visible:not(:disabled) {
      filter: brightness(0.96);
    }
    #S2 select.form-control,
    #S2 #wizard-step-s4 .custom_form_element.dropdown-element select.form-control {
      color: #005efd !important;
    }
    #generated_form_display .select2-container--default .select2-selection--single .select2-selection__rendered {
      color: #005efd !important;
    }
    #S2 .cc-s5-info-icon {
      color: #005efd !important;
    }

    /* ----- CC form motion: light transitions & entry effects (respects reduced motion) ----- */
    :root {
      --cc-motion-fast: 0.18s;
      --cc-motion-med: 0.32s;
      --cc-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
      --royal-blue-100: #005efd;
      --white: #ffffff;
    }

    @media (prefers-reduced-motion: reduce) {
      #S2 *,
      #generated_form_display * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }

    @keyframes ccFadeInUp {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes ccPulseOnce {
      0% {
        transform: scale(1);
      }
      55% {
        transform: scale(0.96);
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes ccBvShake {
      0%,
      100% {
        transform: translateX(0);
      }
      20% {
        transform: translateX(-5px);
      }
      40% {
        transform: translateX(5px);
      }
      60% {
        transform: translateX(-3px);
      }
      80% {
        transform: translateX(3px);
      }
    }

    #S2 .wizard-step.cc-wizard-step--enter {
      animation: ccFadeInUp var(--cc-motion-med) var(--cc-motion-ease) both;
    }

    /* Mobile: skip wizard step fade-in (opacity/transform triggers blank-screen repaint bugs) */
    @media (max-width: 767px) {
      #S2 .wizard-step.cc-wizard-step--enter {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }

    #S2 .wizard-btn,
    #S2 a.wizard-btn,
    #S2 .button.button--primary,
    #S2 .button.button--secondary,
    #S2 .button.button--link,
    #S2 .finish-button,
    #S2 .cc-s6-btn-cancel,
    #S2 .cc-s6-btn-update {
      transition: transform var(--cc-motion-fast) var(--cc-motion-ease), box-shadow var(--cc-motion-fast) ease,
        opacity var(--cc-motion-fast) ease, filter var(--cc-motion-fast) ease;
    }

    #S2 .wizard-btn:active:not(:disabled),
    #S2 a.wizard-btn:active:not(.disabled),
    #S2 .button:active:not(:disabled),
    #S2 .finish-button:active:not(:disabled),
    #S2 .cc-s6-btn-cancel:active,
    #S2 .cc-s6-btn-update:active {
      transform: scale(0.98);
    }

    #S2 .cc-s6-accordion__head-part,
    #S2 .cc-s6-accordion__caret,
    #S2 .cc-s6-accordion__edit {
      transition: transform var(--cc-motion-fast) var(--cc-motion-ease), filter var(--cc-motion-fast) ease,
        opacity var(--cc-motion-fast) ease;
    }

    #S2 .cc-s6-accordion__edit:active,
    #S2 .cc-s6-accordion__caret:active {
      transform: scale(0.94);
    }

    #S2 .cc-s6-accordion--open .cc-s6-accordion__panel {
      animation: ccFadeInUp var(--cc-motion-med) var(--cc-motion-ease) both;
    }

    #S2 .cc-email-domain-btn {
      transition: transform var(--cc-motion-fast) var(--cc-motion-ease), background-color var(--cc-motion-fast) ease,
        border-color var(--cc-motion-fast) ease, color var(--cc-motion-fast) ease;
    }

    #S2 .cc-email-domain-btn.cc-email-domain-tap {
      animation: ccPulseOnce 0.32s var(--cc-motion-ease);
    }

    #S2 .cc-email-domain-btn:active {
      transform: scale(0.93);
    }

    #S2 .radio-custom span {
      transition: transform var(--cc-motion-fast) ease, box-shadow var(--cc-motion-fast) ease;
    }

    #S2 .radio-custom:active span {
      transform: scale(0.92);
    }

    #S2 .form-group.cc-bv-error-flash {
      animation: ccBvShake 0.42s ease;
    }

    #S2 .cc-permanent-resident-error.cc-bv-error-flash {
      animation: ccBvShake 0.42s ease;
    }

    #S2 .form-group.has-error .help-block {
      animation: ccFadeInUp 0.28s var(--cc-motion-ease) both;
    }

    #generated_form_display .select2-container--default .select2-selection--single,
    #generated_form_display .select2-container--default .select2-selection--multiple {
      transition: border-color var(--cc-motion-fast) ease, box-shadow var(--cc-motion-fast) ease;
    }

    #generated_form_display .select2-dropdown {
      animation: ccFadeInUp 0.22s var(--cc-motion-ease) both;
    }

    #S2 .cc-searchable-select__panel.is-open {
      animation: ccFadeInUp 0.2s var(--cc-motion-ease) both;
    }

    #S2 .cc-searchable-select__trigger {
      transition: color var(--cc-motion-fast) ease, border-color var(--cc-motion-fast) ease, opacity var(--cc-motion-fast) ease,
        background-color var(--cc-motion-fast) ease;
    }

    #S2 .cc-searchable-select__trigger:active {
      transform: scale(0.99);
    }

    #S2 .cc-s7-upload-zone,
    #S2 .cc-s6-upload-zone {
      transition: border-color var(--cc-motion-med) ease, background-color var(--cc-motion-med) ease,
        transform var(--cc-motion-fast) ease, box-shadow var(--cc-motion-fast) ease;
    }

    #S2 .cc-s7-upload-zone:active,
    #S2 .cc-s6-upload-zone:active {
      transform: scale(0.995);
    }

    #S2 .cc-s7-global-error:not(:empty) {
      animation: ccFadeInUp 0.35s var(--cc-motion-ease) both;
    }

    #S2 .cc-s7-section-error:not(:empty) {
      animation: ccFadeInUp 0.35s var(--cc-motion-ease) both;
    }

    #S2 .cc-s7-file-item__rm {
      transition: transform var(--cc-motion-fast) ease, color var(--cc-motion-fast) ease;
    }

    #S2 .cc-s7-file-item__rm:active {
      transform: scale(0.9);
    }

    #S2 .cc-mobile-inline__hint.is-visible {
      animation: ccFadeInUp 0.28s ease both;
    }

    #S2 .cc-s6-edit-error[style*="block"] {
      animation: ccFadeInUp 0.35s ease both;
    }

    #S2 .cc-s6-sig-method-error {
      animation: ccFadeInUp 0.3s var(--cc-motion-ease) both;
    }

    #S2 .form-control,
    #S2 textarea.form-control {
      transition: border-color var(--cc-motion-fast) ease, box-shadow var(--cc-motion-fast) ease;
    }

      .has-error .help-block {
        color: #c62828;
        width: 100%;
      }
      /* Custom searchable dropdown (S4 only: employment type, nature, occupation) */
      #S2 .cc-searchable-select-native {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }
      #S2 .cc-searchable-select {
        position: relative;
      }
      #S2 .cc-searchable-select__trigger {
        width: 100%;
        background: transparent;
        border: 0;
        border-bottom: 1px solid #2f6fff;
        color: #2f6fff;
        text-align: left;
        font-size: 18px;
        line-height: 1.25;
        padding: 2px 30px 8px 0;
        cursor: pointer;
        outline: none;
        transition: background-color 0.2s ease;
      }
      #S2 .cc-searchable-select__trigger:hover:not([aria-disabled="true"]),
      #S2 .cc-searchable-select__trigger:focus-visible:not([aria-disabled="true"]) {
        background: #f0f7fc;
        border-radius: 2px;
      }
      #S2 .cc-searchable-select__trigger[aria-disabled="true"] {
        color: #b8bfc8;
        border-bottom-color: #c9d1d6;
        cursor: not-allowed;
      }
      #S2 .cc-searchable-select__caret {
        position: absolute;
        right: 2px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid #2f6fff;
        border-bottom: 2px solid #2f6fff;
        transform: translateY(-70%) rotate(45deg);
      }
      #S2 .cc-searchable-select__trigger[aria-disabled="true"] .cc-searchable-select__caret {
        border-right-color: #b8bfc8;
        border-bottom-color: #b8bfc8;
      }
      #S2 .cc-searchable-select__panel {
        position: absolute;
        z-index: 1200;
        top: calc(100% + 8px);
        left: 0;
        width: min(560px, 100%);
        background: #FFFFFF;
        border-radius: 14px;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(0, 0, 0, 0.08);
        display: none;
      }
      #S2 .cc-searchable-select__panel.is-open {
        display: block;
      }
      #S2 .cc-searchable-select__search-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px 8px 14px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.14);
      }
      #S2 .cc-searchable-select__search-icon {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        border: 3px solid #00c8c3;
        border-radius: 50%;
        position: relative;
      }
      #S2 .cc-searchable-select__search-icon::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 3px;
        background: #00c8c3;
        right: -6px;
        bottom: -3px;
        transform: rotate(45deg);
        border-radius: 2px;
      }
      #S2 .cc-searchable-select__search {
        border: 0;
        background: transparent;
        width: 100%;
        font-size: 18px;
        line-height: 1.2;
        color: #222;
        outline: none;
      }
      #S2 .cc-searchable-select__search::placeholder {
        color: #a6abb2;
      }
      #S2 .cc-searchable-select__list {
        max-height: 265px;
        overflow-y: auto;
        padding: 8px 0 12px;
      }
      #S2 .cc-searchable-select__item {
        border: 0;
        background: transparent;
        width: 100%;
        text-align: left;
        padding: 8px 16px;
        color: #222;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.25;
        cursor: pointer;
      }
      #S2 .cc-searchable-select__item:hover,
      #S2 .cc-searchable-select__item:focus-visible {
        background: rgba(0, 0, 0, 0.06);
        outline: none;
      }
      #S2 .cc-searchable-select__empty {
        padding: 10px 16px;
        color: #7d838a;
        font-size: 16px;
      }

      /* Desktop/laptop only: keep all 3 S4 searchable dropdowns same size */
      @media (min-width: 992px) {
        #S2 #wizard-step-s4 #employment-type-container,
        #S2 #wizard-step-s4 #office-nature-business-container,
        #S2 #wizard-step-s4 #occupation-container {
          max-width: 560px;
        }

        #S2 #wizard-step-s4 #employment-type-container .cc-searchable-select,
        #S2 #wizard-step-s4 #office-nature-business-container .cc-searchable-select,
        #S2 #wizard-step-s4 #occupation-container .cc-searchable-select {
          width: 100%;
        }

        #S2 #wizard-step-s4 #employment-type-container .cc-searchable-select__trigger,
        #S2 #wizard-step-s4 #office-nature-business-container .cc-searchable-select__trigger,
        #S2 #wizard-step-s4 #occupation-container .cc-searchable-select__trigger {
          min-height: 42px;
          display: flex;
          align-items: center;
          padding: 6px 30px 6px 0;
        }

        #S2 #wizard-step-s4 #employment-type-container .cc-searchable-select__panel,
        #S2 #wizard-step-s4 #office-nature-business-container .cc-searchable-select__panel,
        #S2 #wizard-step-s4 #occupation-container .cc-searchable-select__panel,
        #S2 #wizard-step-s6 .cc-s6-edit-grid .cc-s6-edit-col--searchable-select .cc-searchable-select__panel {
          width: 350px;
          max-width: 560px;
        }

        /* Review & edit (S6): same searchable control width / trigger as S4 (desktop+) */
        #S2 #wizard-step-s6 .cc-s6-edit-grid .cc-s6-edit-col--searchable-select {
          max-width: 560px;
        }

        #S2 #wizard-step-s6 .cc-s6-edit-grid .cc-s6-edit-col--searchable-select .cc-searchable-select {
          width: 100%;
        }

        #S2 #wizard-step-s6 .cc-s6-edit-grid .cc-s6-edit-col--searchable-select .cc-searchable-select__trigger {
          min-height: 42px;
          display: flex;
          align-items: center;
          padding: 6px 30px 6px 0;
        }
      }

      /* S4 + S6: searchable control and panel span full column width on smaller screens (match main form) */
      @media (max-width: 991px) {
        #S2 #wizard-step-s4 #employment-type-container .cc-searchable-select,
        #S2 #wizard-step-s4 #office-nature-business-container .cc-searchable-select,
        #S2 #wizard-step-s4 #occupation-container .cc-searchable-select,
        #S2 #wizard-step-s6 .cc-s6-edit-grid .cc-s6-edit-col--searchable-select .cc-searchable-select {
          width: 100%;
          max-width: 100%;
          box-sizing: border-box;
        }

        #S2 #wizard-step-s4 #employment-type-container .cc-searchable-select__panel,
        #S2 #wizard-step-s4 #office-nature-business-container .cc-searchable-select__panel,
        #S2 #wizard-step-s4 #occupation-container .cc-searchable-select__panel,
        #S2 #wizard-step-s6 .cc-s6-edit-grid .cc-s6-edit-col--searchable-select .cc-searchable-select__panel {
          width: 100%;
          max-width: none;
          box-sizing: border-box;
          left: 0;
        }
      }

      /* Mobile: employment searchable fields use full row width like other S6 / S4 inputs */
      @media (max-width: 767px) {
        #S2 #wizard-step-s6 .cc-s6-edit-grid .cc-s6-edit-col--searchable-select {
          flex: 0 0 100%;
          max-width: 100%;
          width: 100%;
          min-width: 0;
        }

        #S2 #wizard-step-s6 .cc-s6-edit-grid .cc-s6-edit-col--searchable-select .form-group {
          width: 100%;
          max-width: 100%;
          min-width: 0;
        }
      }