body.widget-snippet { padding: 0; margin: 0; }
.widget-snippet * { box-sizing: border-box; }
div[section="body"], div[section="body"] > .widget-container, div[section="body"] > .widget-container > .page-content { overflow: visible !important; padding: 0 !important; }
.widget-snippet .wcs_section_eacdf3ae a { background: initial; background-color: initial; border: initial; border-bottom: initial; border-color: initial; border-radius: initial; border-top: initial; box-shadow: initial; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; margin: initial; margin-bottom: initial; margin-left: initial; margin-right: initial; margin-top: initial; padding: initial; padding-left: initial; padding-right: initial; text-align: inherit; text-decoration: inherit; text-transform: inherit; vertical-align: initial; }
.widget-snippet .wcs_section_eacdf3ae blockquote { border-left: none; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; margin: 0; padding-left: 0; text-transform: inherit; }
.widget-snippet .wcs_section_eacdf3ae button { background: initial; background-color: revert; border: revert; border-color: initial; border-radius: initial; border-style: initial; border-width: initial; box-shadow: initial; color: revert; font-family: revert; font-size: revert; font-style: inherit; font-weight: revert; line-height: normal; margin: 0; margin-left: initial; margin-right: initial; margin-top: initial; padding: var(--bk-btn-secondary-pad, 0); text-align: revert; text-decoration: inherit; text-transform: revert; }
.widget-snippet .wcs_section_eacdf3ae code { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.widget-snippet .wcs_section_eacdf3ae fieldset { border: none; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; padding: 0; }
.widget-snippet .wcs_section_eacdf3ae figure { margin: 0; margin-left: initial; margin-right: initial; padding: initial; }
.widget-snippet .wcs_section_eacdf3ae h1 { background-color: initial; color: inherit; font-family: inherit; font-size: revert; font-style: inherit; font-weight: revert; line-height: inherit; margin: 0; margin-bottom: initial; margin-top: initial; padding: initial; padding-bottom: initial; text-align: inherit; text-transform: inherit; }
.widget-snippet .wcs_section_eacdf3ae h2 { color: inherit; font-family: inherit; font-size: revert; font-style: inherit; font-weight: revert; line-height: inherit; margin: 0; margin-bottom: initial; margin-top: initial; padding: initial; padding-bottom: initial; padding-left: initial; text-align: inherit; text-transform: inherit; }
.widget-snippet .wcs_section_eacdf3ae h3 { color: inherit; font-family: inherit; font-size: revert; font-style: inherit; font-weight: revert; line-height: inherit; margin: 0; margin-bottom: initial; margin-top: initial; padding: initial; padding-bottom: initial; text-align: inherit; text-transform: inherit; }
.widget-snippet .wcs_section_eacdf3ae h4 { border-bottom: initial; color: inherit; font-family: inherit; font-size: revert; font-style: inherit; font-weight: revert; line-height: inherit; margin: 0; margin-bottom: initial; margin-top: initial; padding-bottom: initial; text-align: inherit; text-transform: inherit; }
.widget-snippet .wcs_section_eacdf3ae h5 { border-bottom: initial; color: inherit; font-family: inherit; font-size: revert; font-style: inherit; font-weight: revert; line-height: inherit; margin: 0; margin-bottom: initial; margin-top: initial; padding: initial; text-transform: inherit; }
.widget-snippet .wcs_section_eacdf3ae h6 { color: inherit; font-family: inherit; font-size: revert; font-style: inherit; font-weight: revert; line-height: inherit; margin: 0; margin-bottom: initial; margin-top: initial; padding: initial; text-transform: inherit; }
.widget-snippet .wcs_section_eacdf3ae hr { border: none; border-top: 1px solid currentColor; margin-bottom: initial; margin-top: initial; }
.widget-snippet .wcs_section_eacdf3ae img { background: initial; border: none; border-radius: initial; margin: initial; margin-bottom: initial; padding: initial; vertical-align: middle; }
.widget-snippet .wcs_section_eacdf3ae input { background: initial; background-color: initial; border: initial; border-radius: initial; border-right: initial; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; line-height: var(--bk-p-line-height, normal); margin: 0; margin-right: initial; margin-top: initial; outline: initial; padding: initial; padding-left: initial; text-align: start; vertical-align: initial; }
.widget-snippet .wcs_section_eacdf3ae li { border: initial; border-radius: initial; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; list-style: inherit; margin: 0; margin-bottom: initial; margin-right: initial; padding: 0; padding-bottom: initial; text-align: inherit; }
.widget-snippet .wcs_section_eacdf3ae ol { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; padding-left: initial; }
.widget-snippet .wcs_section_eacdf3ae p { background: initial; border-bottom: initial; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; margin: 0; margin-bottom: initial; margin-top: initial; padding: initial; padding-bottom: initial; padding-top: initial; text-align: inherit; text-transform: inherit; }
.widget-snippet .wcs_section_eacdf3ae pre { background: transparent; border-radius: 0; border-width: initial; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0; padding: 0; }
.widget-snippet .wcs_section_eacdf3ae select { background: initial; background-color: initial; border: initial; border-color: initial; border-radius: initial; border-width: initial; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; margin-right: initial; padding: initial; text-transform: none; }
.widget-snippet .wcs_section_eacdf3ae table { background: initial; border: initial; border-bottom: initial; border-radius: initial; box-shadow: initial; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin: initial; margin-bottom: initial; padding: initial; }
.widget-snippet .wcs_section_eacdf3ae textarea { background: initial; background-color: initial; border: initial; border-bottom: initial; border-color: initial; border-radius: initial; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; padding: initial; text-align: start; }
.widget-snippet .wcs_section_eacdf3ae ul { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; list-style: none; margin: 0; margin-top: initial; padding: 0; padding-left: initial; }
/* wcs:scoped-begin */
.widget-snippet .wcs_section_eacdf3ae :where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, figcaption, dd, dl) { margin: 0; padding: 0; }
  .widget-snippet .wcs_section_eacdf3ae, .widget-snippet .wcs_section_eacdf3ae *, .widget-snippet .wcs_section_eacdf3ae *::before, .widget-snippet .wcs_section_eacdf3ae *::after { box-sizing: border-box; }
  .widget-snippet .wcs_section_eacdf3ae .gh-how {
    position: relative;
    background: var(--bk-color-surface, #f3f2f1);
    font-family: var(--bk-p-family, var(--bk-font-base, "Montserrat", sans-serif));
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-track { position: relative; height: 100vh; }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-frame {
    position: sticky;
    top: 0;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    background: var(--bk-color-surface, #f3f2f1);
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--bk-color-primary, #29234a) 6%, transparent) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(60vw 50vh at 85% 82%, color-mix(in srgb, var(--bk-color-accent, #16898f) 10%, transparent), transparent 65%),
      radial-gradient(55vw 45vh at 15% 18%, color-mix(in srgb, var(--bk-color-secondary, #b3bbe9) 14%, transparent), transparent 65%);
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-head {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 32px;
    pointer-events: none;
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-title {
    font-family: var(--bk-h2-family, "Montserrat", sans-serif);
    font-weight: var(--bk-h2-weight, 300);
    font-size: var(--bk-h2-size, clamp(56px, 8vw, 112px));
    line-height: var(--bk-h2-line-height, 0.96);
    letter-spacing: var(--bk-h2-letter-spacing, -0.025em);
    color: var(--bk-h2-color, #29234a);
    margin: 0;
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-title .gh-how-accent { color: var(--bk-color-secondary, #b3bbe9); font-weight: var(--bk-h2-weight, 500); }
@media (min-width: 992px) {
  .widget-snippet .wcs_section_eacdf3ae .gh-how-title { margin-bottom: 22px; }
}
  .widget-snippet .wcs_section_eacdf3ae .gh-how-progress {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, 80vw);
    z-index: 3;
    pointer-events: none;
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-progress-track {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--bk-color-secondary, #b3bbe9);
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: 2px;
    background: var(--bk-color-primary, #29234a);
    transition: width 0.12s linear;
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-progress-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-family: var(--bk-p-family, var(--bk-font-base, "Montserrat", sans-serif));
    font-size: var(--bk-p-size, 9px);
    line-height: var(--bk-p-line-height, 1.6);
    letter-spacing: var(--bk-p-letter-spacing, 0.24em);
    color: var(--bk-p-color, var(--bk-color-ink, #29234a));
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-progress-current { font-weight: var(--bk-p-weight, 500); }
  .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-frame .gh-how-skip {
    position: absolute;
    width: auto;
    height: auto;
    margin: 0;
    right: clamp(20px, 3vw, 40px);
    bottom: 24px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: var(--bk-btn-secondary-pad, 8px 8px 8px 20px);
    border: var(--bk-btn-secondary-border-width, 1px) solid var(--bk-btn-secondary-border-color, color-mix(in srgb, var(--bk-color-primary, #29234a) 14%, transparent));
    border-radius: var(--bk-btn-secondary-radius, 999px);
    background: var(--bk-btn-secondary-fill, color-mix(in srgb, var(--bk-color-background, #ffffff) 72%, transparent));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--bk-btn-secondary-shadow, 0 10px 30px -12px rgba(41, 35, 74, 0.25));
    color: var(--bk-btn-secondary-text, var(--bk-color-ink, #29234a));
    font-family: var(--bk-btn-secondary-font-family, var(--bk-font-base, "Montserrat", sans-serif));
    font-size: var(--bk-btn-secondary-font-size, 11px);
    font-weight: var(--bk-btn-secondary-font-weight, 500);
    line-height: 1;
    letter-spacing: var(--bk-btn-secondary-font-letter-spacing, 0.18em);
    text-transform: var(--bk-btn-secondary-font-transform, uppercase);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s, background-color 0.2s, color 0.2s;
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-frame .gh-how-skip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s, background-color 0.2s, color 0.2s;
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-skip-icon {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bk-color-primary, #29234a);
    transition: background-color 0.2s, transform 0.2s;
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-skip-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    transition: transform 0.3s ease;
    background-color: var(--bk-color-background, #ffffff);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 2v9m0 0L3.5 7.5M7 11l3.5-3.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 2v9m0 0L3.5 7.5M7 11l3.5-3.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-frame .gh-how-skip:hover, .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-frame .gh-how-skip:focus-visible { background: var(--bk-btn-secondary-hover-bg, var(--bk-color-primary, #29234a)); color: var(--bk-btn-secondary-hover-color, #ffffff); }
  .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-skip:hover .gh-how-skip-icon, .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-skip:focus-visible .gh-how-skip-icon { background: var(--bk-color-secondary, #b3bbe9); transform: translateY(2px); }
  .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-skip:hover .gh-how-skip-icon::after, .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-skip:focus-visible .gh-how-skip-icon::after { background-color: var(--bk-color-primary, #29234a); }
  .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-frame .gh-how-skip:focus-visible { outline: 2px solid var(--bk-color-secondary, #b3bbe9); outline-offset: 3px; }
  .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-frame .gh-how-skip.is-up .gh-how-skip-icon::after { transform: rotate(180deg); }
  .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-frame .gh-how-skip.is-up:hover .gh-how-skip-icon, .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-frame .gh-how-skip.is-up:focus-visible .gh-how-skip-icon { transform: translateY(-2px); }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-cards {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }
  :root { --tx: -520px; --ty: 0px; --r: 0deg; --op: 0; --sc: 0.86; }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-card { pointer-events: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(380px, 86vw);
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--r)) scale(var(--sc));
    opacity: var(--op);
    will-change: transform, opacity;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s ease;
    background: linear-gradient(160deg, color-mix(in srgb, var(--bk-color-background, #ffffff) 78%, transparent) 0%, color-mix(in srgb, var(--bk-color-background, #ffffff) 55%, transparent) 55%, color-mix(in srgb, var(--bk-color-surface, #f3f2f1) 62%, transparent) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    backdrop-filter: blur(22px) saturate(1.25);
    border: 1px solid color-mix(in srgb, var(--bk-color-background, #ffffff) 55%, transparent);
    border-radius: 16px;
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--bk-color-background, #ffffff) 90%, transparent) inset,
      0 2px 4px color-mix(in srgb, var(--bk-color-primary, #29234a) 5%, transparent),
      0 20px 50px -15px color-mix(in srgb, var(--bk-color-primary, #29234a) 22%, transparent),
      0 60px 100px -40px color-mix(in srgb, var(--bk-color-primary, #29234a) 18%, transparent);
    overflow: hidden; }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bk-color-background, #ffffff) 35%, transparent) 0%, transparent 30%);
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-card-media {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bk-color-surface, #ece9e3) 60%, transparent);
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--bk-color-accent, #16898f) 10%, transparent) 0%, transparent 50%, color-mix(in srgb, var(--bk-color-primary, #29234a) 6%, transparent) 100%);
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-card .gh-how-card-image {
    display: block;
    width: 100%;
    height: 282px;
    object-fit: cover;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-card-body {
    position: relative;
    z-index: 1;
    padding: 24px 26px 28px;
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-card-title {
    font-family: var(--bk-h3-family, "Montserrat", sans-serif);
    font-size: var(--bk-h3-size, 22px);
    font-weight: var(--bk-h3-weight, 400);
    line-height: var(--bk-h3-line-height, 1.2);
    letter-spacing: var(--bk-h3-letter-spacing, -0.012em);
    color: var(--bk-h3-color, #1e193a);
    margin: 0 0 10px;
  }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-card-text {
    font-family: var(--bk-p-family, "Montserrat", sans-serif);
    font-size: var(--bk-p-size, 13.5px);
    line-height: var(--bk-p-line-height, 1.6);
    color: var(--bk-p-color, #534b7e);
    margin: 13.5px 0;
  }
@media (max-width: 1500px) {
  .widget-snippet .wcs_section_eacdf3ae .gh-how-head { padding: 100px 32px 25px; }
}
@media (max-width: 991px) {
  .widget-snippet .wcs_section_eacdf3ae .gh-how-track { height: auto; }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-frame {
      position: relative;
      height: auto;
      overflow: visible;
      display: flex;
      flex-direction: column;
      padding: 80px 0 95px;
    }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-frame::before { display: none; }
  .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-frame .gh-how-skip { display: none; }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-head {
      position: relative;
      inset: auto;
      align-items: flex-start;
      text-align: left;
      padding: 0 20px 30px;
    }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-title { font-size: var(--bk-h2-size, 48px); line-height: var(--bk-h2-line-height, 52px); }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-progress {
      position: relative;
      bottom: 30px;                 
      left: auto;
      transform: none;
      width: calc(100% - 48px);
      margin: 32px 24px 0;
    }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-cards {
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      padding: 40px 20px 0;
      pointer-events: auto;
    }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-card {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      transform: none !important;
      opacity: 1 !important;
    }
}
@media (prefers-reduced-motion: reduce) {
  .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-frame .gh-how-skip, .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-frame .gh-how-skip.is-visible, .widget-snippet .wcs_section_eacdf3ae .gh-how-skip-icon { transition: none; }
}
@media (max-width: 767px) {
  .widget-snippet .wcs_section_eacdf3ae .gh-how-frame { padding: 60px 0; }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-head { padding: 0 15px 25px; }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-title { font-size: var(--bk-h2-size, 32px); line-height: var(--bk-h2-line-height, 40px); }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-cards { grid-template-columns: minmax(0, 1fr); padding: 30px 15px 0; }
}

/* editor only (body.fee): lift the heading layer above the card list's click overlay so a click on
   the title opens the normal text toolbar (bold / italic / colour). Front end unaffected. */
body.fee .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-head { z-index: 3; }
body.fee .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-title { pointer-events: auto; }

/* editor only (body.fee): the heading leaves with the cards - slides right and fades as card 1 comes in,
   and slides from the right back to the centre when stepping back before card 1. Front end unaffected. */
@media (min-width: 992px) {
  body.fee .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-head { transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s ease, visibility 0s linear 0s; }
  /* hidden once faded, so the invisible heading cannot be hovered / outlined by the editor */
  body.fee .widget-snippet .wcs_section_eacdf3ae .gh-how.gh-how-head-out .gh-how-head { transform: translateX(480px) scale(0.92); opacity: 0; visibility: hidden; transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s ease, visibility 0s linear 0.55s; }
  body.fee .widget-snippet .wcs_section_eacdf3ae .gh-how.gh-how-head-out .gh-how-head .gh-how-title { pointer-events: none; }
}

/* multi-paragraph field: one <div> per paragraph (see snippet.js) */
.widget-snippet .wcs_section_eacdf3ae .gh-how-card-text > div + div{margin-top:.6em}

/* Skip steps: editor only - hidden on the live site (body.fee = editor canvas) */
body:not(.fee) .widget-snippet .wcs_section_eacdf3ae .gh-how .gh-how-frame .gh-how-skip { display: none !important; }

/* Desktop hold: the sticky frame fills the whole track (was 80vh in a 100vh track). The 20vh of bare
   track under the frame showed as an empty band while the section was held, then the frame stood still
   for that 20vh after release before the next section came up. Progress bar sits a little higher. */
@media (min-width: 992px) {
  .widget-snippet .wcs_section_eacdf3ae .gh-how-frame { height: 100vh; }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-progress { bottom: 70px; }
}

/* Page scroll lock while "How it works" holds the page (set by snippet.js on <html>). The gutter stays
   reserved so the layout does not shift when the scrollbar is taken away. */
html.gh-how-scroll-lock { overflow: hidden !important; scrollbar-gutter: stable; }

/* Laptop-height windows: the card (photo 282px + text up to 217px) ran into the progress bar below 730px
   of window height (17px at 1366x657, 46px at 1280x600). Shrink the photo band with the window so the
   tallest card keeps >=18px above the bar and >=40px below the fixed menu. Taller windows are unchanged. */
@media (min-width: 992px) and (max-height: 730px) {
  .widget-snippet .wcs_section_eacdf3ae .gh-how-card-media { aspect-ratio: auto; height: clamp(140px, calc(100vh - 445px), 282px); }
  .widget-snippet .wcs_section_eacdf3ae .gh-how-card .gh-how-card-image { height: 100%; }
}