.urble-section-ct-1,
.urble-section-ct-2,
.urble-section-ct-3,
.urble-section-ct-4 {
  .urble-section-blocks {
    width: 1080px;
    max-width: 100%;
    margin: auto;
    position: relative;
  }
}

.urble-section-ct-1 {
  /* Contained band, same box as the green section 2 below and as CHF savings' hero. No top
     padding, and the gradient opens at #fafafa, so the strip above the section blends into it
     instead of reading as an empty white band. */
  width: 1144px;
  max-width: 100%;
  margin: auto;
  box-sizing: border-box;
  padding: 0 32px;
  background: var(--urble-linear-gradient-greenish);

  .urble-section-blocks {
    /* The hero image defines the section height: 588px tall, 148px of it above this block. */
    min-height: 440px;
    display: flex;
    justify-content: space-between;
  }

  .urble-section-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 464px;
    padding-top: 64px;

    .urble-section-content-text {
      line-height: 22px;
    }
  }

  .urble-support-response {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    line-height: 22px;

    .material-symbols-outlined {
      font-size: 24px;
    }
  }

  .urble-support-hero-image {
    position: absolute;
    /* body's 48px sticky-banner strip + the 100px header, so the image starts at the very top
       of the page instead of leaving that strip empty above it. */
    top: -148px;
    right: 0;
    width: 540px;
    height: 588px;
    object-fit: cover;
    border-bottom-left-radius: 256px;
    border-bottom-right-radius: 256px;
  }

  .urble-circle-1,
  .urble-circle-2,
  .urble-circle-3 {
    position: absolute;
    border-radius: 600px;
    background: var(--urble-linear-gradient);
  }

  .urble-circle-1 {
    right: -88px;
    bottom: -48px;
    width: 114px;
    height: 114px;
  }

  .urble-circle-2 {
    right: -170px;
    bottom: -16px;
    width: 66px;
    height: 66px;
  }

  .urble-circle-3 {
    right: -235px;
    bottom: 24px;
    width: 49px;
    height: 49px;
  }
}

.urble-section-ct-2 {
  position: relative;
  /* Clears the hero band's bottom edge, which the image now runs all the way down to. */
  padding: 64px 0;

  .urble-section-blocks {
    display: grid;
    grid-template-columns: 464px 1fr;
    gap: 64px;
    /* Same as the app overview below: the heading stays at the top of the row now that the
       column is short, instead of being centred against the taller illustration. */
    align-items: start;
    isolation: isolate;
  }

  .urble-section-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .urble-section-content-text {
    line-height: 22px;
  }

  .urble-support-online-image {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 392px;

    .urble-support-online-figure {
      position: relative;
      z-index: 1;
      width: 528px;
      max-width: 100%;
    }

    .urble-support-online-accent-figure {
      position: absolute;
      z-index: 0;
      top: -32px;
      right: -16px;
      width: 168px;
    }
  }

  .urble-figure {
    z-index: 0;
    top: 160px;
    bottom: auto;
    left: -352px;
  }
}

.urble-support-section-heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.urble-support-security {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--_Prim-Color-green-50);

  .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 24px;
  }

  .urble-support-security-text {
    line-height: 22px;
  }
}

.urble-section-ct-3 {
  width: 1144px;
  max-width: 100%;
  margin: auto;
  box-sizing: border-box;
  position: relative;
  padding: 64px 32px;
  background: var(--_Prim-Color-green-50);

  .urble-section-blocks {
    display: flex;
    flex-direction: column;
    gap: 64px;
    isolation: isolate;
  }

  .urble-support-app-overview,
  .urble-support-options {
    position: relative;
    z-index: 1;
  }

  .urble-circle-1,
  .urble-circle-2,
  .urble-circle-3 {
    position: absolute;
    border-radius: 600px;
    background: var(--urble-linear-gradient);
    z-index: 0;
  }

  .urble-circle-1 {
    top: 376px;
    right: -72px;
    width: 114px;
    height: 114px;
  }

  .urble-circle-2 {
    top: 432px;
    right: -154px;
    width: 66px;
    height: 66px;
  }

  .urble-circle-3 {
    top: 352px;
    right: -219px;
    width: 49px;
    height: 49px;
  }
}

.urble-support-app-overview {
  display: grid;
  grid-template-columns: 464px 1fr;
  gap: 64px;
  min-height: 504px;
  align-items: start;

  .urble-section-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .urble-section-content-text {
    line-height: 22px;

    strong {
      color: var(--urble-color-surface-affirmative-default);
    }
  }

  .urble-download {
    align-items: flex-start;
  }

  .urble-support-download-title {
    margin-bottom: -8px;
    font-weight: 700;
    line-height: 22px;
  }
}

.urble-support-app-phones {
  position: relative;
  height: 504px;

  img {
    position: absolute;
    bottom: 0;
    filter: drop-shadow(var(--urble-drop-shadow-device));
  }

  .urble-support-app-phone-primary {
    z-index: 1;
    left: 0;
    width: 208px;
  }

  .urble-support-app-phone-secondary {
    z-index: 1;
    right: 0;
    width: 252px;
  }

  .urble-support-agent-figure {
    z-index: 0;
    top: -16px;
    right: -32px;
    bottom: auto;
    width: 208px;
    filter: none;
  }
}

.urble-support-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  overflow-x: clip;

  .urble-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 248px;
    padding: 24px;
    border: 1px solid var(--_Prim-Color-light-200);
    background: var(--_Prim-Color-light-000-White);
  }

  .urble-card-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
  }

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

.urble-support-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 600px;
  background: var(--urble-linear-gradient);
  color: var(--_Prim-Color-dark-100-Brand);
  font-size: 24px;
}

.urble-section-ct-4 {
  position: relative;
  padding: 64px 0;

  .urble-section-blocks {
    display: grid;
    grid-template-columns: 224px 352px 1fr;
    gap: 32px;
    align-items: center;
    isolation: isolate;
  }

  .urble-support-faq-image {
    position: relative;
    z-index: 1;
    width: 224px;
  }

  .urble-section-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .urble-section-content-text {
    line-height: 22px;
  }

  .urble-support-quick-links {
    position: relative;
    z-index: 1;
  }

  .urble-circle-1,
  .urble-circle-2,
  .urble-circle-3 {
    position: absolute;
    border-radius: 600px;
    background: var(--urble-linear-gradient);
    z-index: 0;
  }

  .urble-circle-1 {
    top: -56px;
    right: -72px;
    width: 114px;
    height: 114px;
  }

  .urble-circle-2 {
    top: 48px;
    right: -154px;
    width: 66px;
    height: 66px;
  }

  .urble-circle-3 {
    top: -16px;
    right: -219px;
    width: 49px;
    height: 49px;
  }
}

.urble-support-quick-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;

  a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--_Prim-Color-light-200);
    border-radius: 16px;
    color: var(--_Prim-Color-dark-100-Brand);
    line-height: 20px;

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

    &:hover {
      border-color: var(--urble-color-surface-affirmative-default);
    }

    span {
      color: var(--urble-color-surface-affirmative-default);
      font-size: 20px;
    }
  }
}

@media (max-width: 1120px) {
  .urble-section-ct-1 {
    /* The blocks carry the inset once stacked, so the band runs to the screen edges. */
    padding: 0;

    .urble-section-blocks {
      min-height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      padding: 32px 16px 0;
      box-sizing: border-box;
    }

    .urble-section-content {
      width: 528px;
      max-width: 100%;
      padding-top: 0;
      text-align: center;
      align-items: center;
    }

    .urble-support-hero-image {
      position: relative;
      /* Drop the desktop offset: on a relative box it doesn't pull the image out of the page top,
         it just slides it up over the copy above while leaving its space empty below. */
      top: auto;
      width: 528px;
      max-width: 100%;
      height: 400px;
      object-fit: cover;
    }

    .urble-circle-1,
    .urble-circle-2,
    .urble-circle-3 {
      display: none;
    }
  }

  .urble-section-ct-2,
  .urble-section-ct-3,
  .urble-section-ct-4 {
    padding: 64px 16px;

    .urble-section-blocks {
      width: 720px;
    }
  }

  .urble-section-ct-2 {
    padding-top: 0;
  }

  /* minmax(0, 1fr), not 1fr: a 1fr track can't shrink below its widest item's min-content, so the
     fixed-width phone/illustration blocks below would hold the column open past the screen width
     and drag the copy — which sizes itself off the track — off the right edge with them. */
  .urble-section-ct-2 .urble-section-blocks,
  .urble-support-app-overview,
  .urble-section-ct-4 .urble-section-blocks {
    grid-template-columns: minmax(0, 1fr);
  }

  .urble-section-ct-2 .urble-section-content,
  .urble-support-app-overview .urble-section-content,
  .urble-section-ct-4 .urble-section-content {
    width: 528px;
    max-width: 100%;
    margin: auto;
  }

  .urble-section-ct-2 .urble-support-online-image {
    min-height: auto;

    .urble-support-online-accent-figure {
      display: none;
    }
  }

  .urble-section-ct-2 .urble-figure,
  .urble-section-ct-3 .urble-circle-1,
  .urble-section-ct-3 .urble-circle-2,
  .urble-section-ct-3 .urble-circle-3,
  .urble-section-ct-4 .urble-circle-1,
  .urble-section-ct-4 .urble-circle-2,
  .urble-section-ct-4 .urble-circle-3 {
    display: none;
  }

  .urble-support-app-overview {
    min-height: auto;
    gap: 32px;
  }

  /* Keep the section titles aligned with the left-aligned copy below them. */
  .urble-support-section-heading h2 {
    text-align: start;
  }

  .urble-support-app-phones {
    /* Percentage width, so the block can shrink with the column instead of setting its floor. */
    width: 100%;
    max-width: 528px;
    min-width: 0;
    margin: auto;

    .urble-support-agent-figure {
      display: none;
    }
  }

  .urble-support-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .urble-section-ct-4 .urble-section-blocks {
    justify-items: center;
  }

  .urble-section-ct-4 .urble-support-faq-image {
    width: 192px;
  }

  .urble-support-quick-links {
    width: 528px;
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .urble-section-ct-1 .urble-section-blocks,
  .urble-section-ct-2,
  .urble-section-ct-3,
  .urble-section-ct-4 {
    padding-inline: 16px;
  }

  .urble-section-ct-1 .urble-support-hero-image {
    height: 304px;
  }

  .urble-support-section-heading {
    align-items: flex-start;
    gap: 8px;
  }

  .urble-support-options,
  .urble-support-quick-links {
    grid-template-columns: 1fr;
  }

  .urble-support-options .urble-card {
    min-height: auto;
  }

  .urble-support-app-phones {
    height: 304px;

    .urble-support-app-phone-primary {
      left: 0;
      width: 120px;
    }

    .urble-support-app-phone-secondary {
      right: 0;
      width: 144px;
    }
  }
}