.urble-live-chf-balance {
  display: block;

  > img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.urble-live-chf-balance-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  .urble-live-chf-balance-cover {
    fill: var(--_Prim-Color-light-000-White);
  }

  .urble-live-chf-balance-value {
    fill: var(--urble-color-text-live-balance);
    font-family: Roboto;
    /* Native phone-art coordinates: 60px scales to the baked balance's size at every rendered phone width. */
    font-size: 60px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
}

.urble-section-blog-1,
.urble-section-blog-2 {
  display: flex;

  .urble-section-blocks {
    width: 1080px;
    max-width: 100%;
    position: relative;
    margin: auto;
    display: flex;
  }
}

.urble-section-blog-1 {
  position: relative;
  padding-bottom: 96px;
  background: var(--urble-color-surface-brand-low-emphasis);
  margin-top: -148px;
  padding-top: 204px;

  .urble-section-blocks {
    display: flex;
    flex-direction: column;

    gap: 64px;

    .urble-section-content {
      display: flex;
      flex-direction: column;
      width: 524px;
      border-radius: 16px;
      padding: 16px;
      z-index: 2;
      max-width: 100%;
      box-sizing: border-box;

      h1 {
        width: 192px;
        z-index: 1;
      }

      .urble-section-content-text {
        width: 528px;
        border-radius: 16px;
      }
    }

    h2 {
      margin: auto;
      text-align: center;
      width: 860px;
      max-width: 100%;
      font-size: 48px;
      line-height: 48px;
      font-weight: 700;
    }
  }

  img {
    position: absolute;
    top: -148px;
    right: 0;
    z-index: 0;
    width: 948px;
    border-bottom-left-radius: 256px;
    object-fit: cover;
    height: 810px;
    max-width: calc(50% - 32px);
  }
}

.urble-section-blog-2 {
  padding: 64px 0;
  margin-top: -224px;

  .urble-section-blocks {
    display: flex;
    flex-direction: column;
    gap: 64px;
    position: relative;

    .urble-cards {
      margin-top: 95px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 32px;

      .urble-card {
        height: auto;
        min-height: auto;
        flex: 1 1 calc((100% - 64px) / 3);
        max-width: calc((100% - 64px) / 3);
        min-width: 280px;
        justify-content: space-between;
        gap: 0;
        outline: 2px solid var(--_Prim-Color-light-200);
        box-shadow: var(--urble-box-shadow-light);

        .urble-card-avatar {
          width: fit-content;
          margin-bottom: 8px;

          img {
            max-width: 100%;
          }
        }

        .urble-card-avatar--rounded {
          img {
            border-radius: 24px;
            height: 196px;
            width: 290px;
          }
        }

        h2 {
          font-size: 20px;
          line-height: 28px;
          font-weight: 700;
          margin-bottom: 8px;
        }

        .urble-card-link {
          display: flex;
          flex-direction: column;
          height: 100%;
          color: inherit;
          text-decoration: none;

          &:hover,
          &:focus-visible {
            text-decoration: none;

            h2 {
              text-decoration: underline;
            }
          }

          &:visited {
            color: inherit;
          }
        }

        .urble-card-text {
          line-height: 22px;
          margin-bottom: 24px;
        }

        .urble-card-topic {
          display: inline-flex;
          align-items: center;
          padding: 4px 12px;
          border-radius: 16px;
          background: var(--_Prim-Color-light-200);
          color: var(--urble-color-text-primary);
          font-size: 14px;
          font-weight: 600;
          width: fit-content;
          margin: 8px 0 16px;
        }

        .urble-card-person {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 12px;
          margin-bottom: 24px;

          .urble-card-person-face {
            width: 40px;
            height: 40px;
            border-radius: 99999px;
            position: relative;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .urble-card-person-name {
            color: var(--urble-color-text-primary-disabled);
          }
        }

        .urble-card-controls {
          flex-grow: 1;
          display: flex;

          .urble-link_button {
            background: transparent;
            color: var(--_Prim-Color-dark-100-Brand);
            align-self: end;
            text-decoration: none;
          }
        }
      }
    }
  }
}

.urble-section-blog-post-1,
.urble-section-blog-post-2 {
  display: flex;
  flex-direction: column;
  padding-bottom: 64px;

  ul {
    list-style: outside;

    li {
      margin: 8px 8px 8px 32px;
    }
  }

  ol {
    list-style: decimal outside;

    li {
      margin: 8px 8px 8px 32px;
    }
  }

  .urble-section-blocks {
    position: relative;
    margin: auto;
    display: flex;
    width: 1080px;
    max-width: 100%;

    .urble-blog-post {
      a {
        text-decoration: underline;
      }
    }
  }
}

.urble-section-blog-post-1 {
  margin-top: -148px;
  padding: 148px 0 32px;

  .urble-section-blocks {
    display: grid;
    grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 0;
    box-sizing: border-box;
    min-height: 480px;
    padding: 0;
    border-radius: 32px;
    background: var(--_Prim-Color-light-000-White);
    overflow: hidden;
  }

  .urble-link_button {
    grid-column: 1;
    width: fit-content;
    min-height: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--_Prim-Color-dark-300);
    background: transparent;
    font-weight: 700;

    &:visited,
    &:hover,
    &:active {
      color: var(--_Prim-Color-dark-300);
    }
  }

  .urble-post-header-navigation {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    align-self: start;
    padding: 32px 48px 0;
  }

  .urble-post-header-topic {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
  }

  .urble-post-header-topic::before {
    content: 'chevron_right';
    font-family: 'Material Symbols Outlined';
    font-size: 24px;
    font-weight: 400;
  }

  .urble-post-header {
    grid-column: 1;
    align-self: center;
    padding: 48px;
  }

  .urble-post-header h1 {
    font-size: 48px;
    line-height: 48px;
    margin: 0;
  }

  .urble-post-header-description {
    margin: 24px 0 0;
    color: var(--_Prim-Color-dark-300);
    font-size: 18px;
    line-height: 27px;
  }

  .urble-post-header-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    margin-top: 32px;
    color: var(--urble-color-text-primary-disabled);
    font-size: 14px;
    line-height: 20px;
  }

  .urble-post-header-author,
  .urble-post-header-date {
    display: flex;
    align-items: center;
    min-height: 40px;
  }

  .urble-post-header-author {
    gap: 12px;
    margin: 0;
    color: var(--_Prim-Color-dark-100-Brand);
    font-weight: 700;

    .urble-card-person-name {
      color: var(--_Prim-Color-dark-100-Brand);
      font-weight: 700;
    }
  }

  .urble-post-header-share {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--_Prim-Color-dark-100-Brand);
    font-weight: 700;

    .urble-social {
      margin: 0;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
    }

    a,
    button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 999px;
      background: var(--_Prim-Color-light-000-White);
      color: var(--_Prim-Color-dark-100-Brand);
      cursor: pointer;
      padding: 0;
      text-decoration: none;
    }

    a:visited,
    a:hover,
    a:active {
      color: var(--_Prim-Color-dark-100-Brand);
    }

    img {
      display: block;
      width: 16px;
      height: 16px;
    }

    .urble-social-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      padding: 0;
      border-radius: 999px;
      background: var(--_Prim-Color-light-000-White);
      color: var(--_Prim-Color-dark-100-Brand);
      line-height: 1;
    }
  }

  > .urble-section-blocks > img {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    align-self: center;
    aspect-ratio: 3 / 2;
    border-radius: 0 32px 32px 128px;
    object-fit: contain;
    background: var(--urble-color-surface-primary-low-emphasis);
  }
}

.urble-blog-back-link {
  color: var(--_Prim-Color-dark-100-Brand);
  text-decoration: none;

  &:visited,
  &:hover,
  &:active {
    color: var(--_Prim-Color-dark-100-Brand);
  }
}

@media (max-width: 1120px) {
  .urble-section-blog-post-1 {
    margin-top: 0;
    padding: 32px 16px 64px;

    .urble-section-blocks {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      min-height: 0;
      border-radius: 24px;
    }

    .urble-post-header-navigation,
    .urble-post-header,
    > .urble-section-blocks > img {
      grid-column: 1;
      grid-row: auto;
    }

    .urble-post-header-navigation {
      padding: 24px 24px 0;
    }

    .urble-post-header {
      padding: 32px 24px;
    }

    > .urble-section-blocks > img {
      height: 360px;
      border-radius: 0 0 24px 24px;
    }
  }
}

.urble-section-blog-post-2 {
  padding-top: 64px;

  .urble-section-blocks {
    gap: 32px;
    justify-content: center;

    .urble-blog-post {
      width: 747px;
      max-width: 100%;

      .post-image {
        width: 700px;
        margin: 16px auto 0;
      }

      h1 {
        font-weight: 700;
        font-size: 48px;
        line-height: 48px;
        margin-bottom: 16px;
        margin-top: 32px;
      }

      h2 {
        font-weight: 700;
        font-size: 20px;
        line-height: 28px;
        margin-top: 32px;
      }

      h3 {
        font-weight: 700;
        font-size: 18px;
        line-height: 20px;
        margin-top: 32px;
      }

      sup {
        font-size: 0.7em;
        vertical-align: super;
        line-height: 0;
      }

      .urble-blog-post-intro {
        margin: 16px 0;
      }

      p {
        margin: 16px 0;
        line-height: 22.4px;
      }

      .urble-table-wrapper {
        margin: 24px 0;
        border: 1px solid var(--_Prim-Color-dark-100-Brand);
        border-radius: 16px;
        background: var(--_Prim-Color-light-000-White);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
      }

      .urble-table-wrapper table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        min-width: 600px;
      }

      .urble-table-wrapper thead th {
        background: var(--_Prim-Color-light-200);
        font-weight: 700;
      }

      .urble-table-wrapper th,
      .urble-table-wrapper td {
        padding: 16px;
        border-bottom: 1px solid var(--_Prim-Color-dark-100-Brand);
        border-right: 1px solid var(--_Prim-Color-dark-100-Brand);
        text-align: left;
        vertical-align: top;
      }

      .urble-table-wrapper th:last-child,
      .urble-table-wrapper td:last-child {
        border-right: none;
      }

      .urble-table-wrapper tbody tr:last-child td {
        border-bottom: none;
      }

      .urble-blog-post-info {
        .urble-icon {
          font-variation-settings: 'FILL' 1;
          font-weight: 700;
        }

        margin: 16px 0;
        background: var(--_Prim-Color-light-200);
        border-radius: 24px;
        padding: 16px;
        gap: 16px;
        display: flex;
        flex-direction: row;
        line-height: 22.4px;
      }
    }

    .urble-card {
      background: var(--_Prim-Color-green-50);

      .urble-card-icon {
        font-weight: 700;
        font-size: 36px;
        line-height: 50.4px;
        width: fit-content;
      }

      h2 {
        font-size: 30px;
        line-height: 30px;
        font-weight: 700;
        margin-bottom: 16px;
      }

      .urble-social {
        .urble-social-icon {
          background: var(--_Prim-Color-dark-100-Brand);
          width: 40px;
          height: 40px;
          color: var(--_Prim-Color-light-000-White);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 9999px;
          cursor: pointer;

          span {
            font-variation-settings: 'FILL' 1;
            font-weight: 700;
          }
        }
      }
    }
  }
}
.urble-card-blogpost-date {
  color: var(--urble-color-text-primary-disabled);
  margin-bottom: 16px;
}

.urble-blog-post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;

  .urble-card-person {
    margin-bottom: 0;
  }

  .urble-card-topic {
    margin: 0 0 0 auto;
    align-items: center;
    padding: 4px 12px;
    border-radius: 16px;
    background: var(--_Prim-Color-light-200);
    color: var(--urble-color-text-primary);
    font-size: 14px;
    font-weight: 600;
    width: fit-content;
  }
}

@media (max-width: 768px) {
  .urble-section-blog-post-1 {
    height: auto;
    margin-top: 0;
    padding: 32px 16px 64px;

    .urble-section-blocks {
      flex-direction: column;
      align-items: stretch;
      min-height: 0;
      padding: 24px;
    }

    .urble-link_button {
      margin-top: 0;
      align-self: flex-start;
    }

    > .urble-section-blocks > img {
      height: auto;
      width: 100%;
      max-width: 100%;
      margin: 0;
      border-radius: 24px;
    }
  }

  .urble-section-blog-post-2 {
    padding-top: 32px;

    h1 {
      font-size: 36px !important;
      line-height: 36px !important;
    }

    .urble-section-blocks {
      flex-direction: column;
    }
  }

  .urble-section-blog-2 .urble-card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  .urble-section-blog-2 .urble-card img {
    width: 100% !important;
    height: auto !important;
  }

  .urble-blog-embed {
    margin-bottom: 16px;
  }
}

.urble-section-how-to-1 {
  .urble-section-content h1 {
    width: 330px;
  }

  .urble-how-to-title-prefix {
    white-space: nowrap;
  }
}

.urble-section-how-to-2 {
  .urble-cards .urble-card.urble-how-to-card {
    .urble-card-avatar {
      width: 100%;
      aspect-ratio: 16 / 9;
      flex-shrink: 0;
      overflow: hidden;
      border-radius: 24px;
      margin-bottom: 20px;

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 0;
      }
    }
  }
}

.urble-how-to-figure {
  margin: 28px 0;

  img {
    display: block;
    width: auto;
    max-width: min(100%, 700px);
    max-height: 720px;
    margin: 0 auto;
    border-radius: 24px;
    box-shadow: var(--urble-box-shadow-light);
  }

  figcaption {
    margin: 12px auto 0;
    max-width: 620px;
    color: var(--urble-color-text-primary-disabled);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }
}

.urble-how-to-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  margin: 28px 0;

  .urble-how-to-figure {
    margin: 0;

    img {
      width: 100%;
      max-height: 620px;
      object-fit: contain;
    }
  }
}

.urble-how-to-placeholder {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  padding: 16px 20px;
  border: 1px solid var(--_Prim-Color-light-200);
  border-radius: 16px;
  color: var(--urble-color-text-primary-disabled);
  background: var(--urble-color-surface-primary-low-emphasis);
  text-decoration: none;

  &:visited {
    color: var(--urble-color-text-primary-disabled);
  }

  .material-symbols-outlined {
    color: var(--urble-color-surface-affirmative-default);
  }
}

button.urble-social-icon {
  padding: 0;
  border: 0;
}

.urble-section-how-to-post-1 {
  img {
    width: min(616px, calc(100% - 32px));
    height: auto;
  }
}

/* CHF Savings guide hero */
.urble-section-chf-how-hero {
  position: relative;
  margin-top: -148px;
  padding: 148px 0 64px;

  .urble-section-blocks {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* The card is the 1144px outer frame; its 32px inset aligns its usable area
       with the 1080px section containers below. */
    width: 1144px;
    max-width: 100%;
    min-height: 632px;
    margin: auto;
    overflow: hidden;
    border-radius: 32px;
    background: var(--_Prim-Color-light-000-White);
  }

  .urble-chf-how-hero-copy {
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 32px 0 128px 32px;
  }

  .urble-chf-how-hero-navigation,
  .urble-chf-how-hero-brand,
  .urble-chf-how-hero-benefits,
  .urble-chf-how-hero-benefits > div,
  .urble-chf-how-risk-note {
    display: flex;
    align-items: center;
  }

  .urble-chf-how-hero-navigation {
    flex-wrap: wrap;
    gap: 8px;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
  }

  .urble-chf-how-back-link,
  .urble-chf-how-back-link:visited,
  .urble-chf-how-back-link:hover,
  .urble-chf-how-back-link:active {
    display: flex;
    align-items: center;
    color: var(--_Prim-Color-dark-300);
  }

  .urble-chf-how-hero-brand {
    gap: 12px;
    margin-top: 40px;
  }

  .urble-chf-how-swiss-flag {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    overflow: hidden;
    border-radius: 999px;
    background: var(--urble-color-swiss-flag);

    svg {
      width: 28px;
      height: 28px;
    }

    path:first-child {
      fill: var(--urble-color-swiss-flag);
    }

    path:last-child {
      fill: var(--_Prim-Color-light-000-White);
    }
  }

  .urble-chf-how-hero-brand img {
    width: 154px;
    height: auto;
  }

  .urble-eyebrow {
    margin-top: 40px;
  }

  h1 {
    margin-top: 16px;
    font-size: 48px;
    line-height: 48px;
    color: var(--_Prim-Color-dark-000-Black);
  }

  h1 .urble-title-underline {
    color: inherit;
  }

  .urble-chf-how-hero-lead {
    max-width: 432px;
    margin: 24px 0 0;
    color: var(--_Prim-Color-dark-300);
    font-size: 18px;
    line-height: 27px;
  }

  .urble-chf-how-hero-benefits {
    gap: 24px;
    margin-top: 32px;
  }

  .urble-chf-how-hero-benefits > div {
    gap: 8px;
  }

  .urble-chf-how-hero-benefits .material-symbols-outlined {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 999px;
    background: var(--urble-color-surface-affirmative-low-emphasis);
    color: var(--urble-color-surface-affirmative-default);
    -webkit-text-fill-color: var(--urble-color-surface-affirmative-default);
  }

  .urble-chf-how-hero-benefits p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
  }

  .urble-chf-how-hero-benefits strong,
  .urble-chf-how-hero-benefits small {
    display: block;
  }

  .urble-chf-how-hero-benefits small {
    color: var(--_Prim-Color-dark-300);
    font-size: 12px;
  }

  .urble-chf-how-hero-visual {
    position: relative;
    align-self: center;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 0 32px 32px 128px;
  }

  .urble-chf-how-hero-background {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .urble-chf-how-hero-phone {
    position: absolute;
    z-index: 1;
    bottom: -94px;
    left: 46%;
    width: 272px;
    height: auto;
    transform: translateX(-50%) rotate(-6deg);
    filter: drop-shadow(var(--urble-drop-shadow-device));
  }

  .urble-chf-how-risk-note {
    position: absolute;
    z-index: 2;
    right: 32px;
    bottom: 16px;
    left: 32px;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 24px;
    background: var(--urble-color-surface-affirmative-low-emphasis);
  }

  .urble-chf-how-risk-note > .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 32px;
    color: var(--urble-color-surface-affirmative-default);
    -webkit-text-fill-color: var(--urble-color-surface-affirmative-default);
  }

  .urble-chf-how-risk-note p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
  }

  .urble-chf-how-risk-note a,
  .urble-chf-how-risk-note a:visited,
  .urble-chf-how-risk-note a:hover,
  .urble-chf-how-risk-note a:active {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--urble-color-surface-affirmative-default);
    font-size: 14px;
    font-weight: 700;
  }
}

/* CHF Savings guide: bank-to-yield process */
.urble-section-chf-how-process {
  padding: 64px 0;

  .urble-section-blocks {
    position: relative;
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }

  .urble-chf-how-process-heading {
    position: relative;
    z-index: 1;
  }

  .urble-chf-how-process-heading h2 {
    margin: 0;
    font-size: 30px;
    line-height: 30px;
    text-align: left;
  }

  .urble-chf-how-process-heading p {
    margin: 8px 0 0;
    color: var(--_Prim-Color-dark-300);
    font-size: 16px;
    line-height: 22.4px;
  }

  .urble-chf-how-process-steps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin: 32px 0 0;
  }

  .urble-chf-how-process-steps li {
    position: relative;
    padding: 56px 16px 24px;
    border: 1px solid var(--_Prim-Color-light-200);
    border-radius: 24px;
    background: var(--_Prim-Color-light-000-White);
  }

  .urble-chf-how-process-number {
    position: absolute;
    top: 20px;
    left: 50%;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 999px;
    color: var(--_Prim-Color-light-000-White);
    background: var(--urble-color-surface-affirmative-default);
    font-size: 14px;
    font-weight: 700;
    transform: translateX(-50%);
  }

  .urble-chf-how-process-illustration {
    display: grid;
    width: 80px;
    height: 80px;
    place-items: center;
    margin: 8px auto 24px;
    border-radius: 999px;
    background: var(--urble-color-surface-affirmative-low-emphasis);
    color: var(--urble-color-surface-affirmative-default);
    font-size: 40px;
  }

  .urble-chf-how-process-turn {
    display: none;
  }

  .urble-chf-how-process-steps h3 {
    margin: 0;
    color: var(--_Prim-Color-dark-100-Brand);
    font-size: 16px;
    line-height: 22.4px;
  }

  .urble-chf-how-process-steps p {
    margin: 12px 0 0;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    line-height: 20px;
  }

  .urble-chf-how-process-steps li:not(:last-child)::before {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: -10px;
    width: 10px;
    border-top: 2px dashed var(--urble-color-surface-affirmative-default);
    content: '';
  }

  .urble-chf-how-process-steps li:not(:last-child)::after {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: -18px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--urble-color-surface-affirmative-default);
    border-bottom: 2px solid var(--urble-color-surface-affirmative-default);
    content: '';
    transform: translateY(-50%) rotate(-45deg);
  }
}

.urble-section-chf-how-process,
.urble-section-chf-how-losses {
  .urble-circle-1,
  .urble-circle-2,
  .urble-circle-3 {
    position: absolute;
    z-index: 0;
    border-radius: 600px;
    background: var(--urble-linear-gradient);
    pointer-events: none;
  }

  .urble-circle-1 {
    width: 114px;
    height: 114px;
  }

  .urble-circle-2 {
    width: 66px;
    height: 66px;
  }

  .urble-circle-3 {
    width: 49px;
    height: 49px;
  }
}

.urble-section-chf-how-process {
  .urble-circle-1 {
    top: -24px;
    right: 32px;
  }

  .urble-circle-2 {
    top: 80px;
    right: 160px;
  }

  .urble-circle-3 {
    top: 16px;
    right: 240px;
  }
}

/* CHF Savings guide: yield origin */
.urble-section-chf-how-yield {
  padding: 64px 0;
  background: var(--urble-linear-gradient-light-greenish-wide);

  .urble-section-blocks {
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }

  .urble-chf-how-yield-heading h2 {
    margin: 0;
    font-size: 30px;
    line-height: 30px;
    text-align: left;
  }

  .urble-chf-how-yield-heading p {
    margin: 8px 0 0;
    color: var(--_Prim-Color-dark-300);
    font-size: 16px;
    line-height: 22.4px;
  }

  .urble-chf-how-yield-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: center;
    gap: 48px;
    margin-top: 32px;
  }

  .urble-chf-how-yield-card {
    padding: 24px;
    border: 1px solid var(--_Prim-Color-light-200);
    border-radius: 24px;
    background: var(--urble-color-surface-primary-low-emphasis);
  }

  .urble-chf-how-yield-card > h3 {
    margin: 0;
    color: var(--_Prim-Color-dark-100-Brand);
    font-size: 16px;
    line-height: 22.4px;
    text-align: center;
  }

  .urble-chf-how-yield-card > p {
    margin: 24px 0 0;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  .urble-chf-how-yield-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin: 24px 0 0;
  }

  .urble-chf-how-yield-flow li {
    position: relative;
    text-align: center;
  }

  .urble-chf-how-yield-icon {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: var(--urble-color-surface-affirmative-low-emphasis);
    color: var(--urble-color-surface-affirmative-default);
    font-size: 32px;
  }

  .urble-chf-how-yield-flow strong {
    display: block;
    font-size: 12px;
    line-height: 16px;
  }

  .urble-chf-how-yield-flow li:not(:last-child)::before {
    position: absolute;
    top: 36px;
    right: -14px;
    width: 16px;
    border-top: 2px dashed var(--urble-color-surface-affirmative-default);
    content: '';
  }

  .urble-chf-how-yield-flow li:not(:last-child)::after {
    position: absolute;
    top: 32px;
    right: -22px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--urble-color-surface-affirmative-default);
    border-bottom: 2px solid var(--urble-color-surface-affirmative-default);
    content: '';
    transform: rotate(-45deg);
  }

  .urble-chf-how-yield-properties {
    display: grid;
    gap: 24px;
  }

  .urble-chf-how-yield-properties li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
  }

  .urble-chf-how-yield-properties > li > .material-symbols-rounded {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 999px;
    color: var(--urble-color-surface-affirmative-default);
    background: var(--urble-color-surface-affirmative-low-emphasis);
    font-size: 24px;
    -webkit-text-fill-color: var(--urble-color-surface-affirmative-default);
  }

  .urble-chf-how-yield-properties p {
    margin: 0;
  }

  .urble-chf-how-yield-properties strong,
  .urble-chf-how-yield-properties small {
    display: block;
  }

  .urble-chf-how-yield-properties strong {
    font-size: 16px;
    line-height: 22.4px;
  }

  .urble-chf-how-yield-properties small {
    margin-top: 4px;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    line-height: 20px;
  }
}

/* The first process steps are represented above as cards, keeping the article focused on the explanation that follows. */
.urble-section-blog-post-2 .urble-blog-post-body > h2:first-child,
.urble-section-blog-post-2 .urble-blog-post-body > h2:first-child + p,
.urble-section-blog-post-2 .urble-blog-post-body > h2:first-child + p + ol {
  display: none;
}

.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(2),
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(2) + p,
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(2) + p + ul {
  display: none;
}

/* CHF Savings guide: protocol support */
.urble-section-chf-how-support {
  padding: 64px 0;

  .urble-section-blocks {
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }

  .urble-chf-how-support-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(248px, 1fr);
    gap: 16px;
    margin-top: 32px;
  }

  .urble-chf-how-support-layers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--_Prim-Color-light-200);
    border-radius: 24px;
    background: var(--urble-color-surface-primary-low-emphasis);
  }

  .urble-chf-how-support-layers li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-content: start;
    gap: 16px;
    min-height: 176px;
    padding: 24px;
  }

  .urble-chf-how-support-layers li + li {
    border-left: 1px solid var(--_Prim-Color-light-200);
  }

  .urble-chf-how-support-layers .material-symbols-rounded {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 999px;
    color: var(--urble-color-surface-affirmative-default);
    background: var(--urble-color-surface-affirmative-low-emphasis);
    font-size: 36px;
    font-variation-settings: 'FILL' 0, 'wght' 400;
    -webkit-text-fill-color: var(--urble-color-surface-affirmative-default);
  }

  .urble-chf-how-support-layers strong {
    display: block;
    font-size: 16px;
    line-height: 22.4px;
  }

  .urble-chf-how-support-layers p {
    margin: 8px 0 0;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    line-height: 20px;
  }

  .urble-chf-how-transparency-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    border-radius: 24px;
    background: var(--urble-color-surface-affirmative-low-emphasis);
  }

  .urble-chf-how-transparency-card h3 {
    margin: 0;
    color: var(--urble-color-surface-affirmative-default);
    font-size: 16px;
    line-height: 22.4px;
  }

  .urble-chf-how-transparency-card p {
    margin: 8px 0 16px;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    line-height: 20px;
  }

  .urble-chf-how-transparency-card .urble-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--urble-color-surface-affirmative-default);
    font-size: 14px;
    font-weight: 700;
  }

  .urble-chf-how-transparency-card .material-symbols-outlined {
    font-size: 20px;
  }
}

.urble-chf-how-section-heading h2 {
  margin: 0;
  font-size: 30px;
  line-height: 30px;
  text-align: left;
}

.urble-chf-how-section-heading p {
  margin: 8px 0 0;
  color: var(--_Prim-Color-dark-300);
  font-size: 16px;
  line-height: 22.4px;
}

/* CHF Savings guide: loss absorption */
.urble-section-chf-how-losses {
  padding: 64px 0;
  background: var(--urble-color-surface-brand-low-emphasis);

  .urble-section-blocks {
    position: relative;
    width: 760px;
    max-width: 100%;
    margin: auto;
  }

  .urble-chf-how-loss-timeline {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 32px;
    margin: 32px 0;
  }

  .urble-chf-how-loss-timeline::before {
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 23px;
    border-left: 2px solid var(--urble-color-surface-affirmative-low-emphasis);
    content: '';
  }

  .urble-chf-how-loss-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 48px 64px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  .urble-chf-how-loss-number {
    z-index: 1;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 999px;
    color: var(--urble-color-surface-affirmative-default);
    background: var(--urble-color-surface-affirmative-low-emphasis);
    font-size: 20px;
    font-weight: 700;
  }

  .urble-chf-how-loss-icon {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 1px solid var(--_Prim-Color-light-200);
    border-radius: 999px;
    color: var(--urble-color-surface-affirmative-default);
    background: var(--_Prim-Color-light-000-White);
    font-size: 36px;
    font-variation-settings: 'FILL' 0, 'wght' 400;
    -webkit-text-fill-color: var(--urble-color-surface-affirmative-default);
  }

  .urble-chf-how-loss-timeline h3 {
    margin: 0;
    font-family: Quicksand;
    font-size: 20px;
    line-height: 28px;
  }

  .urble-chf-how-loss-timeline p {
    margin: 4px 0 0;
    color: var(--_Prim-Color-dark-300);
    font-size: 16px;
    line-height: 24px;
  }

  .urble-chf-how-loss-note {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 24px;
    border-radius: 24px;
    background: var(--urble-color-surface-affirmative-low-emphasis);
  }

  .urble-chf-how-loss-note > .material-symbols-outlined {
    color: var(--urble-color-surface-affirmative-default);
    font-size: 32px;
    -webkit-text-fill-color: var(--urble-color-surface-affirmative-default);
  }

  .urble-chf-how-loss-note p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
  }

  .urble-chf-how-section-heading {
    position: relative;
    z-index: 1;
  }

  .urble-circle-1 {
    top: 144px;
    right: -144px;
  }

  .urble-circle-2 {
    top: 32px;
    right: -80px;
  }

  .urble-circle-3 {
    right: -176px;
    bottom: 112px;
  }
}

/* CHF Savings guide: risks */
.urble-section-chf-how-risks {
  padding: 64px 0;

  .urble-section-blocks {
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }

  .urble-chf-how-risks-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 416px);
    align-items: center;
    gap: 32px;
  }

  .urble-chf-how-risks-warning {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-radius: 16px;
    background: var(--urble-color-surface-brand-low-emphasis);
  }

  .urble-chf-how-risks-warning .material-symbols-outlined {
    color: var(--urble-color-ab);
    font-size: 24px;
    -webkit-text-fill-color: var(--urble-color-ab);
  }

  .urble-chf-how-risks-warning p {
    margin: 0;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    line-height: 20px;
  }

  .urble-chf-how-risk-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, minmax(0, auto));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
    margin-top: 32px;
  }

  .urble-chf-how-risk-list li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--_Prim-Color-light-200);
    border-radius: 16px;
    background: var(--_Prim-Color-light-000-White);
  }

  .urble-chf-how-risk-list .material-symbols-rounded {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 999px;
    color: var(--_Prim-Color-dark-300);
    background: var(--urble-color-surface-primary-low-emphasis);
    font-size: 24px;
    -webkit-text-fill-color: var(--_Prim-Color-dark-300);
  }

  .urble-chf-how-risk-list h3 {
    margin: 0;
    font-size: 16px;
    line-height: 22.4px;
  }

  .urble-chf-how-risk-list p {
    margin: 4px 0 0;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    line-height: 20px;
  }
}

/* CHF Savings guide: responsibilities and questions */
.urble-section-chf-how-responsibilities {
  padding: 64px 0;

  > .urble-section-blocks {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 24px;
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }

  .urble-chf-how-roles-panel,
  .urble-chf-how-questions-panel {
    padding: 24px;
    border-radius: 24px;
  }

  .urble-chf-how-roles-panel {
    background: var(--urble-color-surface-primary-low-emphasis);
  }

  h2 {
    margin: 0;
    font-size: 30px;
    line-height: 30px;
    text-align: left;
  }

  .urble-chf-how-role-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 24px;
  }

  .urble-chf-how-role-list article {
    display: flex;
    flex-direction: column;
    min-height: 248px;
    padding: 24px;
    border: 1px solid var(--_Prim-Color-light-200);
    border-radius: 16px;
    background: var(--_Prim-Color-light-000-White);
  }

  .urble-chf-how-role-logo,
  .urble-chf-how-partner-logos {
    width: 100%;
    height: 48px;
    margin-bottom: 16px;
  }

  .urble-chf-how-role-logo {
    object-fit: contain;
    object-position: left center;
  }

  .urble-chf-how-role-logo-icon {
    width: 48px;
  }

  .urble-chf-how-partner-logos {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .urble-chf-how-partner-logos > span {
    display: grid;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--_Prim-Color-dark-100-Brand);
  }

  .urble-chf-how-partner-logos img {
    width: auto;
    max-width: 88px;
    height: 28px;
    object-fit: contain;
  }

  .urble-chf-how-partner-logos > span img {
    width: 64px;
    height: auto;
  }

  .urble-chf-how-role-list h3 {
    margin: 0;
    font-size: 16px;
    line-height: 22.4px;
  }

  .urble-chf-how-role-list p {
    margin: 8px 0 0;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    line-height: 20px;
  }

  .urble-chf-how-questions-panel {
    background: var(--urble-color-surface-brand-low-emphasis);
  }

  .urble-chf-how-questions-panel ul {
    margin: 24px 0;
    border-top: 1px solid var(--_Prim-Color-light-200);
  }

  .urble-chf-how-questions-panel li {
    border-bottom: 1px solid var(--_Prim-Color-light-200);
  }

  .urble-chf-how-questions-panel li a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    color: var(--_Prim-Color-dark-100-Brand);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
  }

  .urble-chf-how-questions-panel li a:visited,
  .urble-chf-how-questions-panel li a:hover,
  .urble-chf-how-questions-panel li a:active {
    color: var(--_Prim-Color-dark-100-Brand);
    text-decoration: none;
  }

  .urble-chf-how-questions-panel .material-symbols-outlined {
    font-size: 20px;
  }

  .urble-chf-how-questions-panel > .urble-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--urble-color-surface-affirmative-default);
    font-size: 14px;
    font-weight: 700;
  }
}

/* CHF Savings guide: source verification */
.urble-section-chf-how-verify {
  padding: 64px 0;
  background: var(--urble-linear-gradient-light-greenish-wide);

  > .urble-section-blocks {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 24px;
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }

  .urble-chf-how-verify-main {
    display: contents;
  }

  .urble-chf-how-verify-main > .urble-chf-how-section-heading {
    grid-column: 1;
    grid-row: 1;
  }

  .urble-chf-how-verify-sources {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    grid-column: 1;
    grid-row: 2;
    margin-top: 24px;
    border: 1px solid var(--_Prim-Color-light-200);
    border-radius: 24px;
    background: var(--urble-color-surface-primary-low-emphasis);
  }

  .urble-chf-how-verify-sources article {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-content: start;
    gap: 16px;
    padding: 24px;
  }

  .urble-chf-how-verify-sources article + article {
    border-left: 1px solid var(--_Prim-Color-light-200);
  }

  .urble-chf-how-verify-sources > article > .material-symbols-rounded {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 16px;
    color: var(--urble-color-surface-affirmative-default);
    background: var(--urble-color-surface-affirmative-low-emphasis);
    font-size: 28px;
    -webkit-text-fill-color: var(--urble-color-surface-affirmative-default);
  }

  .urble-chf-how-verify-sources h3 {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
  }

  .urble-chf-how-verify-sources p {
    margin: 4px 0 12px;
    color: var(--_Prim-Color-dark-300);
    font-size: 12px;
    line-height: 16px;
  }

  .urble-chf-how-verify-sources a,
  .urble-chf-how-verify-sources a:visited,
  .urble-chf-how-verify-sources a:hover,
  .urble-chf-how-verify-sources a:active {
    color: var(--urble-color-surface-affirmative-default);
    text-decoration: none;
  }

  .urble-chf-how-verify-sources a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
  }

  .urble-chf-how-verify-sources a .material-symbols-outlined {
    font-size: 16px;
  }

}

/* The translated article remains in the DOM as the page's metadata source; its content is represented by the sections above. */
.urble-section-chf-how-article-source {
  display: none;
}

/* CHF Savings guide: shared final download component */
.urble-section-chf-how-download {
  padding: 64px 0 128px;

  .urble-section-blocks {
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }
}

/* These topics are represented visually above, keeping the article focused on the explanation that follows. */
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(3),
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(3) + p,
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(3) + p + ul,
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(3) + p + ul + p,
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(4),
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(4) + p,
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(4) + p + ol,
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(4) + p + ol + p {
  display: none;
}

.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(5),
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(5) + p,
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(5) + p + ul,
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(6),
.urble-section-blog-post-2 .urble-blog-post-body > h2:nth-of-type(6) + ul {
  display: none;
}

.urble-section-blog-post-2 .urble-blog-post > h1,
.urble-section-blog-post-2 .urble-blog-post > .urble-blog-post-intro {
  display: none;
}

@media (max-width: 1120px) {
  .urble-section-chf-how-hero {
    margin-top: 0;
    padding: 32px 16px 64px;

    .urble-section-blocks {
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
      overflow: visible;
      border-radius: 24px;
    }

    .urble-chf-how-hero-copy {
      padding: 24px;
    }

    .urble-chf-how-hero-brand {
      margin-top: 32px;
    }

    h1 {
      font-size: 32px;
      line-height: 32px;
      text-align: left;
    }

    .urble-chf-how-hero-lead {
      font-size: 16px;
      line-height: 24px;
    }

    .urble-chf-how-hero-benefits {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .urble-chf-how-hero-visual {
      height: 360px;
      border-radius: 0 0 24px 24px;
    }

    .urble-chf-how-hero-phone {
      bottom: -40px;
      width: 206px;
      transform: translateX(-50%) rotate(-4deg);
    }

    .urble-chf-how-risk-note {
      position: relative;
      right: auto;
      bottom: auto;
      left: auto;
      align-items: flex-start;
      margin: 16px;
    }

    .urble-chf-how-risk-note a {
      display: none;
    }
  }

  .urble-section-chf-how-process {
    padding: 64px 16px;

    .urble-chf-how-process-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 80px;
      row-gap: 64px;
    }

    .urble-chf-how-process-steps li:not(:last-child)::after {
      right: -50px;
    }

    .urble-chf-how-process-steps li:not(:last-child)::before {
      right: -42px;
      width: 40px;
    }

    .urble-chf-how-process-steps li:nth-child(2)::before,
    .urble-chf-how-process-steps li:nth-child(4)::before {
      display: none;
    }

    .urble-chf-how-process-steps li:nth-child(2)::after,
    .urble-chf-how-process-steps li:nth-child(4)::after {
      top: calc(100% + 40px);
      right: auto;
      bottom: auto;
      left: calc(-50% - 84px);
      display: block;
      transform: rotate(45deg);
    }

    .urble-chf-how-process-turn {
      position: absolute;
      z-index: 1;
      top: 100%;
      right: 50%;
      display: block;
      width: calc(100% + 80px);
      max-width: none;
      height: 64px;
      overflow: visible;
      color: var(--urble-color-surface-affirmative-default);
      pointer-events: none;
    }

    .urble-chf-how-process-turn path {
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .urble-chf-how-process-turn-line {
      stroke-dasharray: 4 4;
    }

    .urble-chf-how-process-steps li:nth-child(3)::after {
      right: -50px;
      left: auto;
    }
  }

  .urble-section-chf-how-process,
  .urble-section-chf-how-losses {
    .urble-circle-1,
    .urble-circle-2,
    .urble-circle-3 {
      display: none;
    }
  }

  .urble-section-chf-how-yield {
    padding: 64px 16px;

    .urble-chf-how-yield-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 32px;
    }
  }

  .urble-section-chf-how-support,
  .urble-section-chf-how-losses,
  .urble-section-chf-how-risks,
  .urble-section-chf-how-responsibilities,
  .urble-section-chf-how-verify {
    padding: 64px 16px;
  }

  .urble-section-chf-how-download {
    padding: 64px 16px 128px;
  }

  .urble-section-chf-how-support {
    .urble-chf-how-support-layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .urble-section-chf-how-risks {
    .urble-chf-how-risks-header {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .urble-section-chf-how-responsibilities {
    > .urble-section-blocks {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .urble-section-chf-how-verify {
    > .urble-section-blocks {
      grid-template-columns: minmax(0, 1fr);
    }

    .urble-chf-how-verify-main > .urble-chf-how-section-heading {
      grid-column: 1;
      grid-row: 1;
    }

    .urble-chf-how-verify-sources {
      grid-column: 1;
      grid-row: 2;
    }

  }
}

@media (max-width: 768px) {
  .urble-section-how-to-1 {
    .urble-section-content h1 {
      width: auto;
    }
  }

  .urble-how-to-gallery {
    grid-template-columns: 1fr;
  }

  .urble-section-how-to-post-1 > .urble-section-blocks > img {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .urble-section-chf-how-hero {
    .urble-chf-how-hero-benefits {
      grid-template-columns: minmax(0, 1fr);
    }

    .urble-chf-how-risk-note {
      padding: 16px;
    }
  }

  .urble-section-chf-how-process {
    .urble-chf-how-process-turn {
      display: none;
    }

    .urble-chf-how-process-steps {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 48px;
    }

    .urble-chf-how-process-steps li,
    .urble-chf-how-process-steps li:nth-child(3),
    .urble-chf-how-process-steps li:nth-child(4) {
      grid-column: 1;
      grid-row: auto;
      min-height: 0;
    }

    .urble-chf-how-process-steps li:not(:last-child)::after,
    .urble-chf-how-process-steps li:nth-child(2)::after,
    .urble-chf-how-process-steps li:nth-child(3)::after,
    .urble-chf-how-process-steps li:nth-child(4)::after {
      top: auto;
      right: auto;
      bottom: -37px;
      left: calc(50% - 4px);
      transform: rotate(45deg);
      display: block;
    }

    .urble-chf-how-process-steps li:not(:last-child)::before,
    .urble-chf-how-process-steps li:nth-child(2)::before,
    .urble-chf-how-process-steps li:nth-child(4)::before {
      top: auto;
      right: auto;
      bottom: -28px;
      left: 50%;
      width: 0;
      height: 28px;
      border: 0;
      border-left: 2px dashed var(--urble-color-surface-affirmative-default);
      border-radius: 0;
      transform: translateX(-50%);
      display: block;
    }
  }

  .urble-section-chf-how-yield {
    .urble-chf-how-yield-card {
      padding: 24px 16px;
    }

    .urble-chf-how-yield-flow {
      grid-template-columns: minmax(0, 1fr);
      gap: 40px;
    }

    .urble-chf-how-yield-flow li:not(:last-child)::before {
      top: auto;
      right: auto;
      bottom: -30px;
      left: 50%;
      width: 0;
      height: 24px;
      border: 0;
      border-left: 2px dashed var(--urble-color-surface-affirmative-default);
    }

    .urble-chf-how-yield-flow li:not(:last-child)::after {
      top: auto;
      right: auto;
      bottom: -37px;
      left: calc(50% - 4px);
      transform: rotate(45deg);
    }

    .urble-chf-how-yield-properties li {
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 12px;
    }

    .urble-chf-how-yield-properties > li > .material-symbols-rounded {
      width: 40px;
      height: 40px;
      font-size: 20px;
    }
  }

  .urble-chf-how-section-heading h2 {
    font-size: 26px;
    line-height: 26px;
  }

  .urble-section-chf-how-support {
    .urble-chf-how-support-layers {
      grid-template-columns: minmax(0, 1fr);
    }

    .urble-chf-how-support-layers li {
      min-height: 0;
    }

    .urble-chf-how-support-layers li + li {
      border-top: 1px solid var(--_Prim-Color-light-200);
      border-left: 0;
    }

  }

  .urble-section-chf-how-losses {
    .urble-chf-how-loss-timeline::before {
      left: 19px;
    }

    .urble-chf-how-loss-timeline li {
      grid-template-columns: 40px 48px minmax(0, 1fr);
      gap: 16px;
    }

    .urble-chf-how-loss-number {
      width: 40px;
      height: 40px;
      font-size: 16px;
    }

    .urble-chf-how-loss-icon {
      width: 48px;
      height: 48px;
      font-size: 28px;
    }

    .urble-chf-how-loss-timeline h3 {
      font-size: 16px;
      line-height: 22.4px;
    }

    .urble-chf-how-loss-timeline p {
      font-size: 14px;
      line-height: 20px;
    }

    .urble-chf-how-loss-note {
      grid-template-columns: 24px minmax(0, 1fr);
      padding: 16px;
    }

    .urble-chf-how-loss-note > .material-symbols-outlined {
      font-size: 24px;
    }
  }

  .urble-section-chf-how-risks {
    .urble-chf-how-risk-list {
      grid-auto-flow: row;
      grid-template-rows: none;
      grid-template-columns: minmax(0, 1fr);
    }

    .urble-chf-how-risk-list li {
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 12px;
      padding: 16px;
    }

    .urble-chf-how-risk-list .material-symbols-rounded {
      width: 32px;
      height: 32px;
      font-size: 20px;
    }

    .urble-chf-how-risks-warning {
      padding: 16px;
    }
  }

  .urble-section-chf-how-responsibilities {
    .urble-chf-how-role-list {
      grid-template-columns: minmax(0, 1fr);
    }

    .urble-chf-how-role-list article {
      min-height: 0;
    }

    h2 {
      font-size: 26px;
      line-height: 26px;
    }
  }

  .urble-section-chf-how-verify {
    .urble-chf-how-verify-sources {
      grid-template-columns: minmax(0, 1fr);
    }

    .urble-chf-how-verify-sources article {
      min-height: 0;
    }

    .urble-chf-how-verify-sources article + article {
      border-top: 1px solid var(--_Prim-Color-light-200);
      border-left: 0;
    }

  }
}